Shadow-Dragon-Demo

Athens Photography Media Project!

<title>Athens Photography Media | Professional, Effective, Web Design Focused on Results</title>

Athens Photography Media

• Home
• About
• Gallery
• Blog
• Contact

Athens Photography Media Solutions

We provide World Class Effective Photography Website Design Solutions Focused On Results

Read More

<main>
  <section id="about" class="icons bg-light">
    <div class="flex-items">
      <div>
        <i class="fas fa-desktop fa-2x"></i>
        <div>
          <h3>Website Design</h3>
          <p>
            We don't just create websites (like everyone else does). We create websites that work.
          </p>
        </div>
      </div>
      <div>
        <i class="fas fa-search fa-2x"></i>
        <div>
          <h3>SEO</h3>
          <p>
            Effective on-page and off-page SEO to get you ranking in top positions on Google.
          </p>
        </div>
      </div>
      <div>
        <i class="fas fa-users fa-2x"></i>
        <div>
          <h3>Social Media</h3>
          <p>
           Social media growth to improve credibility and gain new clients.
          </p>
        </div>
      </div>
    </div>
  </section>
  

  <!-- About:Solutions -->
  <section class="solutions flex-columns">
    <div class="row">
      <div class="column">
        <div class="column-1">
          <img src="img/fujifilms.jpg" alt="" />
        </div>
      </div>
      <div class="column">
        <div class="column-2 bg-primary">
          <h4>What you are looking for</h4>
          <h2>We provide photographer's solutions</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam
            quam dicta odit adipisci id consequuntur unde et fugiat
            similique suscipit.
          </p>
          <a href="#" class="btn btn-outline">
            <i class="fas fa-chevron"></i>
            Read More
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Cases -->
  <section id="cases" class="cases flex-grid section-padding">
    <header class="section-header">
      <h4>This is what we do</h4>
      <h2>Photo Gallery</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
        consequatur!
      </p>
    </header>
    <div class="row">
      <div class="column">
        <a href="img/photo-image-1.jpg" data-lightbox="cases" data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
        consequatur!">
        <img src="img/photo-image-1.jpg" alt="" />
        </a>
        <a href="img/photo-image-2.jpg" data-lightbox="cases" data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
        consequatur!">
        <img src="img/photo-image-2.jpg" alt="" />
        </a>
      </div>
      <div class="column">
        <a href="img/photo-image-3.jpg" data-lightbox="cases" data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
        consequatur!">
        <img src="img/photo-image-3.jpg" alt="" />
        </a>
        <a href="img/photo-image-4.jpg" data-lightbox="cases" data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
        consequatur!">
        <img src="img/photo-image-4.jpg" alt="" />
        </a>
      </div>
      <div class="column">
        <a href="img/photo-image-5.jpg" data-lightbox="cases" data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
        consequatur!">
        <img src="img/photo-image-5.jpg" alt="" />
        </a>
        <a href="img/photo-image-6.jpg" data-lightbox="cases" data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
        consequatur!">
        <img src="img/photo-image-6.jpg" alt="" />
        </a>
      </div>
      <div class="column">
        <a href="img/photo-image-7.jpg" data-lightbox="cases" data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
        consequatur!">
        <img src="img/photo-image-7.jpg" alt="" />
        </a>
        <a href="img/pexels-luis-quintero-1787220.jpg" data-lightbox="cases" data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
        consequatur!">
        <img src="img/pexels-luis-quintero-1787220.jpg" alt="" />
        </a>
      </div>
    </div>
  </section>

   <!-- Blog -->
  <section id="blog" class="blog flex-columns flex-reverse">
    
  </div>
    <div class="row">
      <div class="column">
        <div class="column-1">
          <img src="images/home/blog.jpg" alt="" />
        </div>
      </div>
      <div class="column">
        <div class="column-2 bg-secondary">
          <h4>April 16 2021</h4>
          <h2>Blog Post One</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam
            quam dicta odit adipisci id consequuntur unde et fugiat
            similique suscipit.
          </p>
          <a href="blog.html" class="btn btn-outline"> 
            <i class="fas fa-chevron"></i>
            Read Our Blog
          </a>
        </div>
      </div>
    </div>
  </section>
  <div class="flex-items team">
    <div>
      <a href="https://www.killersitesphp.com">
      <img src="img/athens-tribute-page.png" alt="">
      <h4>Project</h4>
      <p>Athens Tribute Page</p>
      </a>
    </div>
      <div>
        <a href="https://www.dehartswebdesign.com">
      <img src="img/landing-page.png" alt="">
      <h4>Project</h4>
      <p>Deharts Web Design</p>
      </a>
    </div>
      <div>
        <a href="https://www.cagedillusions.com">
      <img src="img/store-two-greatfuldead.png" alt="">
      <h4>Project</h4>
      <p>Ecommerce Page</p>
      </a>
    </div>
  </div>

   <!-- Contact -->
  <section id="contact" class="contact flex-columns">
    <div class="row">
      <div class="column">
        <div class="column-1">
          <img src="images/home/contact.jpg" alt="" />
        </div>
      </div>
      <div class="column">
        <div class="column-2 bg-light">
          <h2>Request Callback</h2>
          <form action="process.php" method="POST" class="callback-form">
            <div class="form-control">
              <label for="name"></label>
              <input type="text" name="name" id="name" placeholder="Enter name">
            </div>
             <div class="form-control">
              <label for="email"></label>
              <input type="email" name="email" id="email" placeholder="Enter Email">
            </div>
             <div class="form-control">
              <label for="phone"></label>
              <input type="text" name="phone" id="phone" placeholder="Enter Phone">
            </div>
            <input type="submit" value="Send" id="submit" class="btn">
          </form>
        </div>
      </div>
    </div>
  </section>
</main>
<footer class="footer bg-dark">
  <div class="social">
     <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
     <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
     <a href="#"><i class="fab fa-youtube fa-2x"></i></a>
     <a href="#"><i class="fab fa-linkedin fa-2x"></i></a>  
  </div>
  <p>Copyright &copy; 2021 - Athens Photography Media</p>
</footer>

<script

src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script src="js/lightbox.min.js"></script>

<script>
  const navbar = document.getElementById('navbar');

  window.onscroll = function() {
    if(window.pageYOffset > 100) {
      navbar.classList.remove('top');
      if(!scrolled) {
        navbar.style.transform = 'translateY(-70px)';
      }
      setTimeout(function() {
        navbar.style.transform = 'translateY(0)'; scrolled = true;
      }, 200);
    } else {
      navbar.classList.add('top');
      scrolled = false;
    }
  }; 
  // Smooth Scrolling
  $('#navbar a, .btn').on('click', function (e) {
    if (this.hash !== '') {
      e.preventDefault();
      const hash = this.hash;

      $('html, body').animate(
      {
        scrollTop: $(hash).offset().top - 100,
      },
        800
      );
    }
  });
</script>