index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>MoGo</title>
  </head>
  <body>
    <section class="banner">
      <div class="gradient_pink"></div>
      <div class="container">
        <header>
          <div class="row space_between">
            <h1 class="logo">MoGo</h1>
            <nav>
              <ul class="menu row">
                <li class="menu__item"><a href="#about__us">ABOUT</a></li>
                <li class="menu__item"><a href="#service">SERVICE</a></li>
                <li class="menu__item"><a href="#work">WORK</a></li>
                <li class="menu__item"><a href="#blog">BLOG</a></li>
                <li class="menu__item"><a href="#contact">CONTACT</a></li>
                <li class="menu__item">
                  <a href="#"><img src="img/icon/CART.png" /></a>
                  <a href="#"><img src="img/icon/GLASS.png" /></a>
                </li>
              </ul>
            </nav>
          </div>
        </header>
        <div class="about">
          <p>Creative Template</p>
          <p>
            Welcome <br />
            to MoGo
          </p>
          <p class="white__line"></p>
          <a href="#" class="btn">Learn more</a>
        </div>
        <div class="row space_between slider">
          <div class="slider__item">
            <p><span>01</span> Intro</p>
          </div>
          <div class="slider__item">
            <p><span>02</span> Work</p>
          </div>
          <div class="slider__item">
            <p><span>03</span> About</p>
          </div>
          <div class="slider__item">
            <p><span>04</span> Contacts</p>
          </div>
        </div>
      </div>
    </section>
    <section id="about__us" class="about__us">
      <div class="container">
        <div class="container__head">
          <p>What we do</p>
          <p>Story about us</p>
          <p class="red__line"></p>
        </div>
        <p class="text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
        <div class="picture row space_between">
          <div class="picture__item">
            <div class="gradient_pink">
              <img src="img/icon/USERS.png" /><br />SUPER TEAM
            </div>
          </div>
          <div class="picture__item">
            <div class="gradient_pink">
              <img src="img/icon/USERS.png" /><br />SUPER TEAM
            </div>
          </div>
          <div class="picture__item">
            <div class="gradient_pink">
              <img src="img/icon/USERS.png" /><br />SUPER TEAM
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="facts">
      <div class="container row space_between">
        <div class="facts__item">
          <p>42</p>
          <p>Web Design Projects</p>
        </div>
        <div class="facts__item">
          <p>123</p>
          <p>happy client</p>
        </div>
        <div class="facts__item">
          <p>15</p>
          <p>award winner</p>
        </div>
        <div class="facts__item">
          <p>99</p>
          <p>cup of coffee</p>
        </div>
        <div class="facts__item">
          <p>24</p>
          <p>members</p>
        </div>
      </div>
    </section>
    <section id="service" class="service">
      <div class="container">
        <div class="container__head">
          <p>We work with</p>
          <p>Amazing Services</p>
          <p class="red__line"></p>
        </div>
        <div class="service_item">
          <div class="row space_between">
            <div class="service_item_about service_item_photo">
              <h5>Photography</h5>
              <p class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor.
              </p>
            </div>
            <div class="service_item_about service_item_web">
              <h5>Web Design</h5>
              <p class="text">
                Ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor.
              </p>
            </div>
            <div class="service_item_about service_item_creat">
              <h5>Creativity</h5>
              <p class="text">
                Dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor.
              </p>
            </div>
          </div>
        </div>
        <div class="service_item">
          <div class="row space_between">
            <div class="service_item_about service_item_seo">
              <h5>seo</h5>
              <p class="text">
                Ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod.
              </p>
            </div>
            <div class="service_item_about service_item_css">
              <h5>Css/Html</h5>
              <p class="text">
                Lorem dolor sit amet, consectetur adipiscing elit, sed do
                tempor.
              </p>
            </div>
            <div class="service_item_about service_item_digital">
              <h5>digital</h5>
              <p class="text">
                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="feauture">
      <div class="opacity_white"></div>
      <div class="container">
        <div class="container__head">
          <p>For all devices</p>
          <p>Unique design</p>
          <p class="red__line"></p>
        </div>
        <img class="tablet" src="img/display_bg.png" alt="tablet" />
        <img class="smartphone" src="img/White.png" alt="smartphone" />
      </div>
    </section>
    <section id="work" class="we_do">
      <div class="container">
        <div class="container__head">
          <p>Service</p>
          <p>what we do</p>
          <p class="red__line"></p>
        </div>
        <p class="we_do_about text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
        <div class="we_do_content row space_between">
          <div class="we_do_content_img">
            <img src="img/Layer43.jpg" alt="man handing pictures" />
          </div>
          <div class="we_do_content_about">
            <ul>
              <li>
                <div class="row">
                  <img src="img/icon/PICTURE.png" />
                  <span>Photography</span>
                  <button class="btn_up-down"></button>
                </div>
                <p class="text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                  irure dolor in reprehenderit in voluptate velit esse cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt
                  mollit anim id est laborum.
                </p>
              </li>
              <li>
                <div class="row">
                  <img src="img/icon/EQUALIZER.png" />
                  <span>creativity</span>
                  <button class="btn_up-down"></button>
                </div>
                <p class="text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                  irure dolor in reprehenderit in voluptate velit esse cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt
                  mollit anim id est laborum.
                </p>
              </li>
              <li>
                <div class="row">
                  <img src="img/icon/BULLSEYE.png" />
                  <span>web design</span>
                  <button class="btn_up-down"></button>
                </div>
                <p class="text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                  irure dolor in reprehenderit in voluptate velit esse cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt
                  mollit anim id est laborum.
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="quote">
      <div class="container row">
        <button class="btn_left"></button>
        <img src="img/icon/SPEECH.png" alt="" />
        <div class="quote_text">
          <div class="text">
            “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation.”
          </div>
          <div class="row">
            <p class="red__line"></p>
            <p class="quote_text_author">Jon Doe</p>
          </div>
        </div>
        <button class="btn_right"></button>
      </div>
    </section>
    <section class="our_team">
      <div class="container">
        <div class="container__head">
          <p>Who we are</p>
          <p>Meet our team</p>
          <p class="red__line"></p>
        </div>
        <p class="our_team_text text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
        <div class="picture row space_between">
          <div class="picture__item">
            <div class="gradient_pink">
              <img src="img/icon/share.png" /><br />
            </div>
          </div>
          <div class="picture__item">
            <div class="gradient_pink">
              <img src="img/icon/share.png" /><br />
            </div>
          </div>
          <div class="picture__item">
            <div class="gradient_pink">
              <img src="img/icon/share.png" /><br />
            </div>
          </div>
        </div>
        <div class="row space_between">
          <div class="our_team_person">
            <p class="name">Matthew Dix</p>
            <p class="text">Graphic Design</p>
          </div>
          <div class="our_team_person">
            <p class="name">Christopher Campbell</p>
            <p class="text">Branding/UX design</p>
          </div>
          <div class="our_team_person">
            <p class="name">Michael Fertig</p>
            <p class="text">Developer</p>
          </div>
        </div>
      </div>
    </section>
    <section class="logos">
      <div class="container">
        <img src="img/Layer25.jpg" alt="logos" />
      </div>
    </section>
    <section class="work">
      <div class="container">
        <div class="container__head">
          <p>Who we are</p>
          <p>Meet our team</p>
          <p class="red__line"></p>
        </div>
        <p class="work_text text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>
    </section>
    <section class="gallery">
      <div class="row">
        <div class="item">
          <div class="item_small">
            <div class="gradient_pink">
              <img src="img/icon/PICTURE_2.png" alt="" />
              <p class="name">creatively designed</p>
              <p class="text">Lorem ipsum dolor sit</p>
            </div>
            <img class="item_img" src="img/Layer26.jpg" alt="" />
          </div>
          <div class="item_small">
            <div class="gradient_pink">
              <img src="img/icon/PICTURE_2.png" alt="" />
              <p class="name">creatively designed</p>
              <p class="text">Lorem ipsum dolor sit</p>
            </div>
            <img class="item_img" src="img/Layer35.jpg" alt="" />
          </div>
        </div>
        <div class="item">
          <div class="item_small">
            <div class="gradient_pink">
              <img src="img/icon/PICTURE_2.png" alt="" />
              <p class="name">creatively designed</p>
              <p class="text">Lorem ipsum dolor sit</p>
            </div>
            <img class="item_img" src="img/Layer33.jpg" alt="" />
          </div>
          <div class="item_small">
            <div class="gradient_pink">
              <img src="img/icon/PICTURE_2.png" alt="" />
              <p class="name">creatively designed</p>
              <p class="text">Lorem ipsum dolor sit</p>
            </div>
            <img class="item_img" src="img/Layer29.jpg" alt="" />
          </div>
        </div>
        <div class="item">
          <div class="item_big">
            <div class="gradient_pink">
              <img src="img/icon/PICTURE_2.png" alt="" />
              <p class="name">creatively designed</p>
              <p class="text">Lorem ipsum dolor sit</p>
            </div>
            <img class="item_img" src="img/Layer34.jpg" alt="" />
          </div>
        </div>
        <div class="item">
          <div class="item_small">
            <div class="gradient_pink">
              <img src="img/icon/PICTURE_2.png" alt="" />
              <p class="name">creatively designed</p>
              <p class="text">Lorem ipsum dolor sit</p>
            </div>
            <img class="item_img" src="img/Layer31.jpg" alt="" />
          </div>
          <div class="item_small">
            <div class="gradient_pink">
              <img src="img/icon/PICTURE_2.png" alt="" />
              <p class="name">creatively designed</p>
              <p class="text">Lorem ipsum dolor sit</p>
            </div>
            <img class="item_img" src="img/Layer32.jpg" alt="" />
          </div>
        </div>
      </div>
    </section>
    <section class="quote_two quote">
      <div class="container row">
        <button class="btn_left"></button>
        <img class="quote_two_img" src="img/Layer36.png" alt="" />
        <div class="quote_text">
          <div class="text">
            “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation.”
          </div>
          <div class="row">
            <p class="red__line"></p>
            <p class="quote_text_author">Joshua Earle</p>
          </div>
        </div>
        <button class="btn_right"></button>
      </div>
    </section>
    <section class="people_say feauture">
      <div class="opacity_white"></div>
      <div class="container">
        <div class="container__head">
          <p>Happy Clients</p>
          <p>What people say</p>
          <p class="red__line"></p>
        </div>
        <div class="people_say_about row">
          <div>
            <div class="row">
              <img src="img/Layer47.png" alt="" />
              <div class="people_say_person">
                <p class="name">Matthew Dix</p>
                <p class="text">Graphic Design</p>
                <p class="red__line"></p>
                <p class="text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim.
                </p>
              </div>
            </div>
            <div class="row">
              <img src="img/Layer50.png" alt="" />
              <div class="people_say_person">
                <p class="name">Jaelynn Castillo</p>
                <p class="text">Graphic Design</p>
                <p class="red__line"></p>
                <p class="text">
                  Ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                  enim ad minim veniam
                </p>
              </div>
            </div>
          </div>
          <div>
            <div class="row">
              <img src="img/Layer49.png" alt="" />
              <div class="people_say_person">
                <p class="name">Nick Karvounis</p>
                <p class="text">Graphic Design</p>
                <p class="red__line"></p>
                <p class="text">
                  Sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam
                </p>
              </div>
            </div>
            <div class="row">
              <img src="img/Layer51.png" alt="" />
              <div class="people_say_person">
                <p class="name">Mike Petrucci</p>
                <p class="text">Graphic Design</p>
                <p class="red__line"></p>
                <p class="text">
                  Dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                  minim.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="blog" class="blog">
      <div class="container">
        <div class="container__head">
          <p>Our stories</p>
          <p>Latest blog</p>
          <p class="red__line"></p>
        </div>
        <div class="row space_between">
          <div class="blog_about">
            <div class="picture">
              <div class="date">
                <p>15</p>
                <p>Jan</p>
              </div>
            </div>
            <p class="name">Lorem ipsum dolor sit amet</p>
            <p class="text">
              Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
              labore et dolore magna aliqua.
            </p>
            <div class="row">
              <p class="social text">542</p>
              <p class="social text">17</p>
            </div>
          </div>
          <div class="blog_about">
            <div class="picture">
              <div class="date">
                <p>14</p>
                <p>Jan</p>
              </div>
            </div>
            <p class="name">sed do eiusmod tempor</p>
            <p class="text">
              Adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.
            </p>
            <div class="row">
              <p class="social text">992</p>
              <p class="social text">42</p>
            </div>
          </div>
          <div class="blog_about">
            <div class="picture">
              <div class="date">
                <p>12</p>
                <p>Jan</p>
              </div>
            </div>
            <p class="name">incididunt ut labore et dolore</p>
            <p class="text">
              Elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua.
            </p>
            <div class="row">
              <p class="social text">1560</p>
              <p class="social text">98</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="map">
      <div class="opacity_white"></div>
      <div class="open_map">
        <p class="open_map_icon"></p>
        <p class="name">open map</p>
        <p class="red__line"></p>
      </div>
    </section>
    <footer id="contact">
      <div class="container">
        <div class="row space_between footer_info">
          <div class="footer_contact">
            <h2>MoGo</h2>
            <p class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </p>
            <p class="followers"><span>15k</span> followers</p>
            <div class="follow_us">
              Follow Us:
              <a href="#"><img src="img/icon/facebook2.png" alt="" /></a>
              <a href="#"><img src="img/icon/twitter2.png" alt="" /></a>
              <a href="#"><img src="img/icon/instagram2.png" alt="" /></a>
              <a href="#"><img src="img/icon/pinterest2.png" alt="" /></a>
              <a href="#"><img src="img/icon/google2.png" alt="" /></a>
              <a href="#"><img src="img/icon/youtube2.png" alt="" /></a>
              <a href="#"><img src="img/icon/dribbble2.png" alt="" /></a>
              <a href="#"><img src="img/icon/tumblr2.png" alt="" /></a>
            </div>
            <form action="#">
              <input type="email" placeholder="Your Email" /><button
                type="button"
              >
                SUBSCRIBE
              </button>
            </form>
          </div>
          <div class="footer_blogs">
            <div class="name logo">Blogs</div>
            <div class="items">
              <div class="row">
                <img src="img/photos-7884rHDsW8yqbsyN.jpg" alt="" />
                <div>
                  <p class="name">
                    Lorem ipsum dolor sit amet, consectetur adipiscing
                  </p>
                  <p class="text">Jan 9, 2016</p>
                </div>
              </div>
            </div>
            <div class="items">
              <div class="row">
                <img src="img/photos-7884lejLFH9MN8IC.jpg" alt="" />
                <div>
                  <p class="name">
                    Consectetur adipiscing elit, sed do eiusmod tempor
                  </p>
                  <p class="text">Jan 9, 2016</p>
                </div>
              </div>
            </div>
            <div class="items">
              <div class="row">
                <img src="img/photos-7884P2smgicsZFyn.jpg" alt="" />
                <div>
                  <p class="name">sed do eiusmod tempor incididunt ut labore</p>
                  <p class="text">Jan 9, 2016</p>
                </div>
              </div>
            </div>
          </div>
          <div class="footer_insta">
            <div class="logo name">instagram</div>
            <div class="pictures">
              <img src="img/photos-7884MJE3ABUJPTO1.jpg" alt="" />
              <img src="img/photos-7884MBqau4DkSE9K.jpg" alt="" />
              <img src="img/photos-7884M86ovdhbiWKi.jpg" alt="" />
              <img src="img/photos-7884rRdzNWx35XGc.jpg" alt="" />
              <img src="img/photos-7884W4HBOgfC6WDb.jpg" alt="" />
              <img src="img/photos-7884qnJlwaL4TA8x.jpg" alt="" />
              <img src="img/photos-78841zcS1oLCjBr4.jpg" alt="" />
              <img src="img/photos-78842fGoMmtuD5Z9.jpg" alt="" />
              <img src="img/photos-7884nwL7ruku3rhJ.jpg" alt="" />
            </div>
            <p class="text">View more photos</p>
          </div>
        </div>
        <div class="creator">
          © 2016 MoGo free PSD template by <span>Laaqiq</span>
        </div>
      </div>
    </footer>
  </body>
</html>