Last active
August 29, 2015 14:04
-
-
Save HeshamGhoniem2020/d6a1369a4c37fd11a4b0 to your computer and use it in GitHub Desktop.
Acrostia PSD template to HTML&CSS conversion
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Acrostia</title> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <meta charset="utf-8"> | |
| <!--[if lt IE 9]> | |
| <script src="js/html5shiv/dist/html5shiv.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div class="wraper"> | |
| <!-- *************************************** HOME ZONE START *************************************** --> | |
| <section class="home" id="home" > | |
| <div class="home-container"> | |
| <header class="header"> | |
| <h1 class="logo"><a href="#">acrostia</a></h1> | |
| <nav> | |
| <ul class="site-nav"> | |
| <li><a href="#home" class="home-contact-active nav-active">Home</a></li> | |
| <li><a href="#serviecs">Serviecs</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#work">Work</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <a href="#"><img src="imgs/left-arrow.png" alt="left arrow" class="left-arrow"></a> | |
| <a href="#"><img src="imgs/right-arrow.png" alt="right arrow" class="right-arrow"></a> | |
| <ul class="dot-links "> | |
| <li class="prev"><a href="#" ></a></li> | |
| <li class="active"><a href="#"></a></li> | |
| <li class="next"><a href="#" ></a></li> | |
| </ul> | |
| <img src="imgs/header-intro.png" alt="header intro" class="header-intro"> | |
| </div> | |
| </section> | |
| <!-- *************************************** HOME ZONE END *************************************** --> | |
| <!-- *************************************** SERVICES ZONE START *************************************** --> | |
| <section class="services" id="serviecs"> | |
| <div class="services-container"> | |
| <header class="header services-"> | |
| <h1 class="logo"><a href="#">acrostia</a></h1> | |
| <nav> | |
| <ul class="site-nav"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#serviecs" class="services-active nav-active">Serviecs</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#work">Work</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <div class="services-intro"> | |
| <h2 class="section-heading">our services </h2> | |
| <p class="services-sub-heading"> Cras commodo mattis justo nec lobortis. Nam ut tellus lobortis, ullamcorper massa sit amet</p> | |
| <p class="section-intro-text">Cras suscipit porttitor porttitor. Morbi sit amet tincidunt sapien. Curabitur posuere lectus aliquet erat rutrum sollicitudin. In enim diam, ullamcorper quis libero et, ultricies commodo est. Quisque at ante vitae justo fermentum viverra ac eu justo. Ut luctus imperdiet lacus, eget laoreet erat posuere quis.</p> | |
| </div> <!-- services intro end --> | |
| <div class="our-services"> | |
| <div> | |
| <img src="imgs/services/lightball.png" alt="Researching"> | |
| <h3><a href="">Researching</a></h3> | |
| <p>Praesent interdum blandit quam. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p> | |
| </div> | |
| <div> | |
| <img src="imgs/services/m-wand.png" alt="design"> | |
| <h3><a href="">design</a></h3> | |
| <p>Praesent interdum blandit quam. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p> | |
| </div> | |
| <div> | |
| <img src="imgs/services/giars.png" alt="Development"> | |
| <h3><a href="">Development</a></h3> | |
| <p>Praesent interdum blandit quam. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p> | |
| </div> | |
| <div> | |
| <img src="imgs/services/rocket.png" alt="launch"> | |
| <h3><a href="">launch</a></h3> | |
| <p>Praesent interdum blandit quam. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p> | |
| </div> | |
| </div><!-- our services end --> | |
| </div> | |
| </section> | |
| <!-- *************************************** SERVICES ZONE END *************************************** --> | |
| <!-- *************************************** ABOUT ZONE START *************************************** --> | |
| <section class="about" id="about"> | |
| <div class="about-container"> | |
| <header class="header"> | |
| <h1 class="logo"><a href="#">acrostia</a></h1> | |
| <nav> | |
| <ul class="site-nav"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#serviecs">Serviecs</a></li> | |
| <li><a href="#about" class="about-active nav-active">About</a></li> | |
| <li><a href="#work">Work</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <div class="about-intro"> | |
| <h2 class="section-heading">Who we are & what we do</h2> | |
| <p class="section-intro-text" >Cras suscipit porttitor porttitor. Morbi sit amet tincidunt sapien. Curabitur posuere lectus aliquet erat rutrum sollicitudin. In enim diam, ullamcorper quis libero et, ultricies commodo est. Quisque at ante vitae justo fermentum viverra ac eu justo. Ut luctus imperdiet lacus, eget laoreet erat posuere quis.</p> | |
| </div><!-- about intro end--> | |
| <div class="team"> | |
| <div class="meet-team"> | |
| <p>meet the team</p> | |
| <div class="arrow-down arrow"></div> | |
| </div> <!-- meet the team end--> | |
| <div class="team-members"> | |
| <div class="team-members-section"> | |
| <img src="imgs/about/user.png" alt="Anton Petrov" class="member-img"> | |
| <a href="#"><h3>Anton Petrov</h3></a> | |
| <p>General manager</p> | |
| <div class="member-social"> | |
| <div class="active-memb"> | |
| <a href="#"><img src="imgs/about/facebook-active.png" alt="facebook"></a> | |
| <a href="#"><img src="imgs/about/twitter-active.png" alt="twitter"></a> | |
| <a href="#"><img src="imgs/about/google-plus-active.png" alt="google-plus"></a> | |
| <a href="#"><img src="imgs/about/linkedin-active.png" alt="linkedin"></a> | |
| </div> | |
| <div class="inactive-memb"> | |
| <a href="#"><img src="imgs/about/facebook-inactive.png" alt="facebook"></a> | |
| <a href="#"><img src="imgs/about/twitter-inactive.png" alt="twitter"></a> | |
| <a href="#"><img src="imgs/about/google-plus-inatcive.png" alt="google-plus"></a> | |
| <a href="#"><img src="imgs/about/linkedin-inactive.png" alt="linkedin"></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-members-section"> | |
| <img src="imgs/about/user.png" alt="Anton Petrov" class="member-img"> | |
| <a href="#"><h3>Kirl DONCHEV</h3></a> | |
| <p>Design Master</p> | |
| <div class="member-social"> | |
| <div class="active-memb"> | |
| <a href="#"><img src="imgs/about/facebook-active.png" alt="facebook"></a> | |
| <a href="#"><img src="imgs/about/twitter-active.png" alt="twitter"></a> | |
| <a href="#"><img src="imgs/about/google-plus-active.png" alt="google-plus"></a> | |
| <a href="#"><img src="imgs/about/linkedin-active.png" alt="linkedin"></a> | |
| </div> | |
| <div class="inactive-memb"> | |
| <a href="#"><img src="imgs/about/facebook-inactive.png" alt="facebook"></a> | |
| <a href="#"><img src="imgs/about/twitter-inactive.png" alt="twitter"></a> | |
| <a href="#"><img src="imgs/about/google-plus-inatcive.png" alt="google-plus"></a> | |
| <a href="#"><img src="imgs/about/linkedin-inactive.png" alt="linkedin"></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-members-section"> | |
| <img src="imgs/about/user.png" alt="Anton Petrov" class="member-img"> | |
| <a href="#"><h3>Ilian Bonev</h3></a> | |
| <p>Developer Ninja</p> | |
| <div class="member-social"> | |
| <div class="active-memb"> | |
| <a href="#"><img src="imgs/about/facebook-active.png" alt="facebook"></a> | |
| <a href="#"><img src="imgs/about/twitter-active.png" alt="twitter"></a> | |
| <a href="#"><img src="imgs/about/google-plus-active.png" alt="google-plus"></a> | |
| <a href="#"><img src="imgs/about/linkedin-active.png" alt="linkedin"></a> | |
| </div> | |
| <div class="inactive-memb"> | |
| <a href="#"><img src="imgs/about/facebook-inactive.png" alt="facebook"></a> | |
| <a href="#"><img src="imgs/about/twitter-inactive.png" alt="twitter"></a> | |
| <a href="#"><img src="imgs/about/google-plus-inatcive.png" alt="google-plus"></a> | |
| <a href="#"><img src="imgs/about/linkedin-inactive.png" alt="linkedin"></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-members-section"> | |
| <img src="imgs/about/user.png" alt="Anton Petrov" class="member-img"> | |
| <a href="#"><h3>Doni Stamov</h3></a> | |
| <p>SEO guru</p> | |
| <div class="member-social"> | |
| <div class="active-memb"> | |
| <a href="#"><img src="imgs/about/facebook-active.png" alt="facebook"></a> | |
| <a href="#"><img src="imgs/about/twitter-active.png" alt="twitter"></a> | |
| <a href="#"><img src="imgs/about/google-plus-active.png" alt="google-plus"></a> | |
| <a href="#"><img src="imgs/about/linkedin-active.png" alt="linkedin"></a> | |
| </div> | |
| <div class="inactive-memb"> | |
| <a href="#"><img src="imgs/about/facebook-inactive.png" alt="facebook"></a> | |
| <a href="#"><img src="imgs/about/twitter-inactive.png" alt="twitter"></a> | |
| <a href="#"><img src="imgs/about/google-plus-inatcive.png" alt="google-plus"></a> | |
| <a href="#"><img src="imgs/about/linkedin-inactive.png" alt="linkedin"></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- team members end --> | |
| </div> <!-- team end --> | |
| </div> | |
| </section> | |
| <!-- *************************************** ABOUT ZONE END *************************************** --> | |
| <!-- *************************************** WORK ZONE START *************************************** --> | |
| <section class="work" id="work"> | |
| <div class="work-container"> | |
| <header class="header"> | |
| <h1 class="logo"><a href="#">acrostia</a></h1> | |
| <nav> | |
| <ul class="site-nav"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#serviecs">Serviecs</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#work" class="work-active nav-active" >Work</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <div class="work-intro"> | |
| <h2 class="section-heading">our work</h2> | |
| <p class="section-intro-text">Cras suscipit porttitor porttitor. Morbi sit amet tincidunt sapien. Curabitur posuere lectus aliquet erat rutrum sollicitudin. In enim diam, ullamcorper quis libero et, ultricies commodo est. Quisque at ante vitae justo fermentum viverra ac eu justo. Ut luctus imperdiet lacus, eget laoreet erat posuere quis.</p> | |
| </div><!-- work intro end --> | |
| <div class="portfolio"> | |
| <h2 class="portfolio-title">Portfolio</h2> | |
| <div class="portfolio-tab"> | |
| <input type="radio" id="portfolio-photography" name="portfolio-group" checked> | |
| <label for="portfolio-photography" class="portfolio-photography">Photography</label> | |
| <div class="portfolio-content"> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/photography/item1.jpg" alt="item1"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/photography/item2.jpg" alt="item2"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/photography/item3.jpg" alt="item3"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/photography/item4.jpg" alt="item4"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/photography/item5.jpg" alt="item5"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/photography/item6.jpg" alt="item6"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/photography/item7.jpg" alt="item7"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/photography/item8.jpg" alt="item8"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!-- portfolio photography end--> | |
| <div class="portfolio-tab"> | |
| <input type="radio" id="portfolio-logo-design" name="portfolio-group" checked> | |
| <label for="portfolio-logo-design" class="portfolio-logo-design">Logo design</label> | |
| <div class="portfolio-content"> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/logo/item1.jpg" alt="item1"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/logo/item2.jpg" alt="item2"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/logo/item3.jpg" alt="item3"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/logo/item4.jpg" alt="item4"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/logo/item5.jpg" alt="item5"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/logo/item6.jpg" alt="item6"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/logo/item7.jpg" alt="item7"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/logo/item8.jpg" alt="item8"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!-- portfolio logo design end--> | |
| <div class="portfolio-tab"> | |
| <input type="radio" id="portfolio-web-design" name="portfolio-group" checked> | |
| <label for="portfolio-web-design" class="portfolio-web-design">Web design</label> | |
| <div class="portfolio-content"> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/web/item1.jpg" alt="item1"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/web/item2.jpg" alt="item2"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/web/item3.jpg" alt="item3"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/web/item4.jpg" alt="item4"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/web/item5.jpg" alt="item5"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/web/item6.jpg" alt="item6"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/web/item7.jpg" alt="item7"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-content-section"> | |
| <img src="imgs/work/web/item8.jpg" alt="item8"> | |
| <div class="triangle-up"></div> | |
| <a href="#"><h2 class="portfolio-list-title">Heading goes here </h2></a> | |
| <div class="portfolio-list-info"> | |
| <h2>Heading goes here</h2> | |
| <p>Lorem ipsum dolor sit amet, lorem timeam te per, nec facilis detracto an, ex has purto efficiendi contentiones.</p> | |
| </div> | |
| </div> | |
| </div><!--portfolio web design end--> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- *************************************** WORK ZONE END *************************************** --> | |
| <!-- *************************************** CONTACT ZONE START *************************************** --> | |
| <section class="contact" id="contact"> | |
| <div class="contact-container"> | |
| <header class="header"> | |
| <h1 class="logo"><a href="#">acrostia</a></h1> | |
| <nav> | |
| <ul class="site-nav"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#serviecs">Serviecs</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#work">Work</a></li> | |
| <li><a href="#contact" class="home-contact-active nav-active">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <div class="contact-intro"> | |
| <h2 class="section-heading">contact us</h2> | |
| <p class="section-intro-text">Cras suscipit porttitor porttitor. Morbi sit amet tincidunt sapien. Curabitur posuere lectus aliquet erat rutrum sollicitudin. In enim diam, ullamcorper quis libero et, ultricies commodo est. Quisque at ante vitae justo fermentum viverra ac eu justo. Ut luctus imperdiet lacus, eget laoreet erat posuere quis.</p> | |
| </div><!-- contact intro end --> | |
| <div class="half-section-contact"> | |
| <div class="address"> | |
| <h3 class="address-title">Address</h3> | |
| <div class="address-info"> | |
| <div class="address-details-heading"> | |
| <h4>Acrostia</h4> | |
| <p>Sevenoaks Rd</p> | |
| <p>Sevenoaks TN14 7HR, UK</p> | |
| </div> | |
| <div class="address-details"> | |
| <table> | |
| <tr> | |
| <td>Phone :</td> | |
| <td>+44 555 555 555</td> | |
| </tr> | |
| <tr> | |
| <td>Fax :</td> | |
| <td>+44 556 555 555</td> | |
| </tr> | |
| <tr> | |
| <td>E-mail :</td> | |
| <td><a href="mailto:info@acrostia.com">info@acrostia.com</a></td> | |
| </tr> | |
| <tr> | |
| <td>Skype :</td> | |
| <td>AcOstia</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="map"> | |
| <img src="imgs/contact/map.jpg" alt="map"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="half-section-contact"> | |
| <div class="ask-question"> | |
| <h3 class="ask-title">Ask a question</h3> | |
| <form method="get" action="#"> | |
| <input type="text" placeholder="Name" name="name"> | |
| <input type=email placeholder="E-mail" name="email"> | |
| <textarea name="question" placeholder="Your question"></textarea> | |
| <button>SEND</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="site-social"> | |
| <a href="#"><img src="imgs/contact/facebook.png" alt="facebook"></a> | |
| <a href="#"><img src="imgs/contact/twitter.png" alt="twitter"></a> | |
| <a href="#"><img src="imgs/contact/google-plus.png" alt="google plus"></a> | |
| <a href="#"><img src="imgs/contact/linkedin.png" alt="linkedin" ></a> | |
| </div> | |
| </footer> | |
| <!-- *************************************** CONTACT ZONE END *************************************** --> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ******************************************** =FONT FAMILIES START= ******************************************** */ | |
| /* @font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {font-family:"Damion";src:url("../fonts/Damion-Regular.eot?") format("eot"),url("../fonts/Damion-Regular.woff") format("woff"),url("../fonts/Damion-Regular.ttf") format("truetype"),url("../fonts/Damion-Regular.svg#Damion") format("svg");font-weight:normal;font-style:normal;} | |
| /* @font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {font-family:"Lato Black";src:url("../fonts/Lato-Black.eot?") format("eot"),url("../fonts/Lato-Black.woff") format("woff"),url("../fonts/Lato-Black.ttf") format("truetype"),url("../fonts/Lato-Black.svg#Lato-Black") format("svg");font-weight:normal;font-style:normal;} | |
| /* @font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {font-family:"Lato Bold";src:url("../fonts/Lato-Bold.eot?") format("eot"),url("../fonts/Lato-Bold.woff") format("woff"),url("../fonts/Lato-Bold.ttf") format("truetype"),url("../fonts/Lato-Bold.svg#Lato-Bold") format("svg");font-weight:normal;font-style:normal;} | |
| /* @font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {font-family:"Lato Light";src:url("../fonts/Lato-Light.eot?") format("eot"),url("../fonts/Lato-Light.woff") format("woff"),url("../fonts/Lato-Light.ttf") format("truetype"),url("../fonts/Lato-Light.svg#Lato-Light") format("svg");font-weight:normal;font-style:normal;} | |
| /* @font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {font-family:"Lato Regular";src:url("../fonts/Lato-Regular.eot?") format("eot"),url("../fonts/Lato-Regular.woff") format("woff"),url("../fonts/Lato-Regular.ttf") format("truetype"),url("../fonts/Lato-Regular.svg#Lato-Regular") format("svg");font-weight:normal;font-style:normal;} | |
| /* ******************************************** =FONT FAMILIES END= ******************************************** */ | |
| /* ******************************************** =GENERAL STYLING START= ******************************************** */ | |
| body { | |
| margin: 0; | |
| } | |
| .wraper { | |
| width: 100%; | |
| min-width: 1300px; | |
| max-width: 1600px; | |
| } | |
| .container { | |
| width: 1200px; | |
| margin: auto; | |
| } | |
| .services-container, | |
| .home-container, | |
| .about-container, | |
| .work-container, | |
| .contact-container { | |
| margin: auto; | |
| width: 1200px; | |
| position: relative; | |
| } | |
| .about-container, | |
| .contact-container, | |
| .services-container, | |
| .work-container { | |
| margin-top: -16px; | |
| top: -15px; | |
| } | |
| /* ******************************************** =GENERAL STYLING END= ******************************************** */ | |
| /* ******************************************** =HEADER START= ******************************************** */ | |
| .header { | |
| padding-top: 50px; | |
| width: 1200px; | |
| margin: auto; | |
| margin-bottom: 135px; | |
| } | |
| .logo { | |
| float: left; | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| font-family: "Damion"; | |
| font-size: 50px; | |
| line-height: 60px; | |
| color: #ffffff; | |
| font-weight: 400; | |
| } | |
| .logo a { | |
| color: #ffffff; | |
| -webkit-text-decoration: none; | |
| -moz-text-decoration: none; | |
| -ms-text-decoration: none; | |
| -o-text-decoration: none; | |
| text-decoration: none; | |
| } | |
| .site-nav { | |
| float: right; | |
| list-style: none; | |
| } | |
| .site-nav li { | |
| float: left; | |
| font-size: 18px; | |
| line-height: 60px; | |
| font-family: "Lato Regular"; | |
| margin-left: 35px; | |
| } | |
| .site-nav li:first-child { | |
| margin-left: 0; | |
| } | |
| .site-nav a { | |
| color: #FAFAFA; | |
| -webkit-text-decoration: none; | |
| -moz-text-decoration: none; | |
| -ms-text-decoration: none; | |
| -o-text-decoration: none; | |
| text-decoration: none; | |
| } | |
| .nav-active { | |
| padding: 70px 40px 20px 40px; | |
| -webkit-border-bottom-left-radius: 5px; | |
| -moz-border-bottom-left-radius: 5px; | |
| -ms-border-bottom-left-radius: 5px; | |
| -o-border-bottom-left-radius: 5px; | |
| border-bottom-left-radius: 5px; | |
| -webkit-border-bottom-right-radius: 5px; | |
| -moz-border-bottom-right-radius: 5px; | |
| -ms-border-bottom-right-radius: 5px; | |
| -o-border-bottom-right-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| -webkit-transition: background-color 1s ease-in-out; | |
| -moz-transition: background-color 1s ease-in-out; | |
| -ms-transition: background-color 1s ease-in-out; | |
| -o-transition: background-color 1s ease-in-out; | |
| transition: background-color 1s ease-in-out; | |
| } | |
| .home-contact-active { | |
| background-color: #74c7d5; | |
| } | |
| .home-contact-active:hover { | |
| background-color: #8adcea; | |
| } | |
| .services-active { | |
| background-color: #df5c64; | |
| } | |
| .services-active:hover { | |
| background-color: #f08087; | |
| } | |
| .about-active { | |
| background-color: #91778e; | |
| } | |
| .about-active:hover { | |
| background-color: #a48ba1; | |
| } | |
| .work-active { | |
| background-color: #a1ca6c; | |
| } | |
| .work-active:hover { | |
| background-color: #b3dc7f; | |
| } | |
| /* ******************************************** =HEADER END= ******************************************** */ | |
| /* ******************************************** =HOME START= ******************************************** */ | |
| .home-container { | |
| height: 1000px; | |
| margin-top: -20px; | |
| } | |
| .home { | |
| background-color: #2c3e50; | |
| background: url(../imgs/header-bg.jpg) no-repeat; | |
| } | |
| .left-arrow, | |
| .right-arrow { | |
| position: absolute; | |
| top: 475px; | |
| } | |
| .left-arrow { | |
| left: -60px; | |
| } | |
| .right-arrow { | |
| right: -60px; | |
| } | |
| .dot-links { | |
| position: absolute; | |
| bottom: 90px; | |
| left: 500px; | |
| margin: 0; | |
| } | |
| .dot-links li { | |
| list-style: none; | |
| width: 20px; | |
| height: 20px; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| -ms-border-radius: 10px; | |
| -o-border-radius: 10px; | |
| border-radius: 10px; | |
| float: left; | |
| margin-right: 40px; | |
| } | |
| .dot-links a { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| -ms-border-radius: 10px; | |
| -o-border-radius: 10px; | |
| border-radius: 10px; | |
| } | |
| .dot-links .prev { | |
| background-color: #c7beb2; | |
| } | |
| .dot-links .active { | |
| background-color: #74c7d5; | |
| } | |
| .dot-links .next { | |
| background-color: #d7d1c6; | |
| } | |
| .header-intro { | |
| position: absolute; | |
| top: 420px; | |
| left: 180px; | |
| } | |
| /* ******************************************** =HOME END= ******************************************** */ | |
| /* ******************************************** =SERVICES , ABOUT , WORK & CONTACT GENERAL STYLING START = ******************************************** */ | |
| .about-intro, | |
| .services-intro, | |
| .work-intro, | |
| .contact-intro { | |
| width: 1000px; | |
| margin: auto; | |
| text-align: center; | |
| } | |
| .section-heading { | |
| font-family: "Lato Light"; | |
| font-size: 60px; | |
| font-weight: 400; | |
| margin: 0; | |
| margin-bottom: 40px; | |
| text-transform: uppercase; | |
| } | |
| .section-intro-text { | |
| font-size: 14px; | |
| line-height: 24px; | |
| font-family: "Lato Regular"; | |
| color: #ffcccf; | |
| margin: 0; | |
| padding: 0; | |
| margin-top: 30px; | |
| } | |
| .arrow { | |
| height: 0; | |
| width: 0; | |
| } | |
| /* ******************************************** =SERVICES , ABOUT , WORK & CONTACT GENERAL STYLING END = ******************************************** */ | |
| /* ******************************************** =HOME END= ******************************************** */ | |
| /* ******************************************** =SERVICES START= ******************************************** */ | |
| .services { | |
| background: url(../imgs/services/services-bg.jpg); | |
| background-color: #b24a50; | |
| } | |
| .services-intro { | |
| margin-bottom: 115px; | |
| } | |
| .services-sub-heading { | |
| font-size: 20px; | |
| margin-bottom: 25px; | |
| } | |
| .services-sub-heading, | |
| .section-heading { | |
| line-height: 58px; | |
| color: #ffffff; | |
| } | |
| .services-intro .section-intro-text, | |
| .services-sub-heading { | |
| font-family: "Lato Regular"; | |
| margin: 0; | |
| padding: 0; | |
| color: #ffcccf; | |
| } | |
| .our-services { | |
| width: 1100px; | |
| margin: auto; | |
| overflow: hidden; | |
| } | |
| .our-services div { | |
| width: 260px; | |
| height: 400px; | |
| float: left; | |
| margin-right: 20px; | |
| margin-bottom: 125px; | |
| padding-bottom: 40px; | |
| background-color: #c45258; | |
| -webkit-transition: background-color .5s ease-in-out; | |
| -moz-transition: background-color .5s ease-in-out; | |
| -ms-transition: background-color .5s ease-in-out; | |
| -o-transition: background-color .5s ease-in-out; | |
| transition: background-color .5s ease-in-out; | |
| } | |
| .our-services div:hover { | |
| background-color: #cd6066; | |
| } | |
| .our-services div:last-child { | |
| margin-right: 0; | |
| } | |
| .our-services img { | |
| margin: 40px 0 25px 60px; | |
| } | |
| .our-services h3 { | |
| text-align: center; | |
| text-transform: uppercase; | |
| font-family: "Lato Light"; | |
| font-size: 30px; | |
| line-height: 58px; | |
| color: #ffffff; | |
| -webkit-text-decoration: none; | |
| -moz-text-decoration: none; | |
| -ms-text-decoration: none; | |
| -o-text-decoration: none; | |
| text-decoration: none; | |
| margin: 0; | |
| } | |
| .our-services a { | |
| color: #ffffff; | |
| -webkit-text-decoration: none; | |
| -moz-text-decoration: none; | |
| -ms-text-decoration: none; | |
| -o-text-decoration: none; | |
| text-decoration: none; | |
| -webkit-transition: color 1s ease; | |
| -moz-transition: color 1s ease; | |
| -ms-transition: color 1s ease; | |
| -o-transition: color 1s ease; | |
| transition: color 1s ease; | |
| } | |
| .our-services a:hover { | |
| color: #dbc3c3; | |
| } | |
| .our-services p { | |
| font-family: "Lato Regular"; | |
| font-size: 14px; | |
| line-height: 20px; | |
| color: #fefefe; | |
| text-align: center; | |
| margin: 0; | |
| margin-top: 40px; | |
| padding-left: 25px; | |
| padding-right: 25px; | |
| } | |
| /* ******************************************** SERVICES END ******************************************** */ | |
| /* ******************************************** ABOUT START ******************************************** */ | |
| .about { | |
| background: url(../imgs/about/about-bg.jpg); | |
| background-color: #665464; | |
| } | |
| .team { | |
| width: 1100px; | |
| margin: auto; | |
| } | |
| .meet-team { | |
| display: block; | |
| width: 280px; | |
| height: 50px; | |
| background-color: #a1ca6c; | |
| border: 1px solid #9bc366; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; | |
| margin: 60px auto; | |
| } | |
| .meet-team p { | |
| text-align: center; | |
| font-family: "Lato Black"; | |
| font-size: 25px; | |
| text-transform: uppercase; | |
| color: #ffffff; | |
| margin: 0; | |
| margin-top: 10px; | |
| } | |
| .arrow-down { | |
| border-left: 20px solid transparent; | |
| border-right: 20px solid transparent; | |
| border-top: 35px solid #a1ca6c; | |
| margin: auto; | |
| } | |
| .team-members { | |
| overflow: hidden; | |
| } | |
| .team-members-section { | |
| width: 265px; | |
| height: 420px; | |
| float: left; | |
| margin-right: 10px; | |
| background-color: #5d4c5b; | |
| border: 1px solid #554453; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| -o-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| -ms-border-radius: 3px; | |
| -o-border-radius: 3px; | |
| border-radius: 3px; | |
| margin-bottom: 115px; | |
| -webkit-transition: background-color .5s ease-in-out; | |
| -moz-transition: background-color .5s ease-in-out; | |
| -ms-transition: background-color .5s ease-in-out; | |
| -o-transition: background-color .5s ease-in-out; | |
| transition: background-color .5s ease-in-out; | |
| } | |
| .team-members-section:hover { | |
| background-color: #544552; | |
| } | |
| .team-members-section:last-child { | |
| margin-left: 0; | |
| } | |
| .member-img { | |
| display: block; | |
| margin: auto; | |
| margin-top: 40px; | |
| margin-bottom: 20px; | |
| } | |
| .team-members-section h3 { | |
| font-family: "Lato Black"; | |
| font-size: 25px; | |
| text-align: center; | |
| color: #c7b6c5; | |
| -webkit-transition: color .5s ease; | |
| -moz-transition: color .5s ease; | |
| -ms-transition: color .5s ease; | |
| -o-transition: color .5s ease; | |
| transition: color .5s ease; | |
| } | |
| .team-members-section:hover h3 { | |
| color: white; | |
| } | |
| .team-members-section a { | |
| -webkit-text-decoration: none; | |
| -moz-text-decoration: none; | |
| -ms-text-decoration: none; | |
| -o-text-decoration: none; | |
| text-decoration: none; | |
| } | |
| .team-members-section p { | |
| font-family: "Lato Regular"; | |
| font-size: 14px; | |
| text-align: center; | |
| color: #a1ca6c; | |
| margin: 0; | |
| margin-bottom: 35px; | |
| -webkit-transition: color .5s ease; | |
| -moz-transition: color .5s ease; | |
| -ms-transition: color .5s ease; | |
| -o-transition: color .5s ease; | |
| transition: color .5s ease; | |
| } | |
| .team-members-section:hover p { | |
| color: #ff8973; | |
| } | |
| .member-social{ | |
| width: 190px; | |
| height: 40px; | |
| position: relative; | |
| margin: auto; | |
| } | |
| .active-memb , .inactive-memb{ | |
| position: absolute; | |
| left: 0; | |
| } | |
| .active-memb img , .inactive-memb img {margin-right: 18px;} | |
| .active-memb a:last-child img , .inactive-memb a:last-child img{margin-right: 0;} | |
| .active-memb{visibility: hidden;} | |
| .team-members-section:hover .active-memb {visibility: visible;} | |
| .team-members-section:hover .inactive-memb{visibility: hidden;} | |
| /* ******************************************** ABOUT END ******************************************** */ | |
| /* ******************************************** WORK START ******************************************** */ | |
| .work { | |
| background: url(../imgs/work/work-bg.jpg); | |
| background-color: #81a256; | |
| } | |
| .portfolio { | |
| width: 1100px; | |
| height: 800px; | |
| margin: auto; | |
| margin-top: 60px; | |
| padding-top: 50px; | |
| overflow: hidden; | |
| border-top: 1px solid #94b963; | |
| position: relative; | |
| } | |
| .portfolio-title { | |
| margin: 0; | |
| padding: 0; | |
| position: absolute; | |
| font-family: "Lato Bold"; | |
| font-size: 20px; | |
| color: #ffffff; | |
| text-transform: uppercase; | |
| } | |
| .portfolio-tab { | |
| float: right; | |
| } | |
| .portfolio-tab [type=radio] { | |
| display: none; | |
| } | |
| .portfolio-tab label { | |
| color: #ffffff; | |
| font-size: 16px; | |
| font-family: "Lato Bold"; | |
| position: absolute; | |
| top: 40px; | |
| padding: 10px; | |
| } | |
| .portfolio-photography { | |
| right: 300px; | |
| } | |
| .portfolio-logo-design { | |
| right: 175px; | |
| } | |
| .portfolio-web-design { | |
| right: 30px; | |
| } | |
| .portfolio-content { | |
| position: absolute; | |
| top: 50px; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: 1100px; | |
| border-top: 1px solid #94b963; | |
| padding-top: 50px; | |
| margin-top: 65px; | |
| } | |
| .portfolio-content-section { | |
| width: 265px; | |
| height: 260px; | |
| float: left; | |
| margin-bottom: 25px; | |
| margin-right: 10px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| [type=radio]:checked~label { | |
| background-color: #f5c149; | |
| -webkit-border-radius: 6px; | |
| -moz-border-radius: 6px; | |
| -ms-border-radius: 6px; | |
| -o-border-radius: 6px; | |
| border-radius: 6px; | |
| } | |
| [type=radio]:checked ~ label ~ .portfolio-content { | |
| z-index: 1; | |
| } | |
| .portfolio-list-info { | |
| visibility: hidden; | |
| position: absolute; | |
| top: -200%; | |
| left: 0; | |
| right: 0; | |
| bottom: 60px; | |
| background-color: rgba(0,0,0,.3); | |
| cursor: pointer; | |
| color: #ffffff; | |
| padding: 20px; | |
| -webkit-transition: top 1s ease; | |
| -moz-transition: top 1s ease; | |
| -ms-transition: top 1s ease; | |
| -o-transition: top 1s ease; | |
| transition: top 1s ease; | |
| } | |
| .portfolio-list-info h2 { | |
| margin: 0; | |
| font-family: "Lato Black"; | |
| } | |
| .portfolio-list-info p { | |
| padding-left: 25px; | |
| color: #eeeeee; | |
| } | |
| .portfolio-content-section:hover .portfolio-list-info { | |
| visibility: visible; | |
| top: 0; | |
| } | |
| .portfolio-list-title { | |
| text-align: center; | |
| background-color: #eeeeee; | |
| margin: 0; | |
| margin-top: -5px; | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| font-family: "Lato Regular"; | |
| color: #727272; | |
| font-size: 14px; | |
| font-weight: 400; | |
| text-transform: uppercase; | |
| -webkit-border-bottom-left-radius: 5px; | |
| -moz-border-bottom-left-radius: 5px; | |
| -ms-border-bottom-left-radius: 5px; | |
| -o-border-bottom-left-radius: 5px; | |
| border-bottom-left-radius: 5px; | |
| -webkit-border-bottom-right-radius: 5px; | |
| -moz-border-bottom-right-radius: 5px; | |
| -ms-border-bottom-right-radius: 5px; | |
| -o-border-bottom-right-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| } | |
| .portfolio-content-section a { | |
| -webkit-text-decoration: none; | |
| -moz-text-decoration: none; | |
| -ms-text-decoration: none; | |
| -o-text-decoration: none; | |
| text-decoration: none; | |
| } | |
| .triangle-up { | |
| position: absolute; | |
| bottom: 60px; | |
| left: 120px; | |
| width: 0; | |
| height: 0; | |
| border-left: 20px solid transparent; | |
| border-right: 20px solid transparent; | |
| border-bottom: 35px solid #eeeeee; | |
| } | |
| .portfolio-content-section:hover .triangle-up { | |
| visibility: hidden; | |
| } | |
| /* ******************************************** WORK END ******************************************** */ | |
| /* ******************************************** CONTACT START ******************************************** */ | |
| .contact { | |
| background: url(../imgs/contact/contact-bg.jpg); | |
| background-color: #75b4aa; | |
| } | |
| .contact-container { | |
| overflow: hidden; | |
| } | |
| .half-section-contact { | |
| width: 580px; | |
| height: 490px; | |
| float: left; | |
| } | |
| .address-title, | |
| .ask-title { | |
| font-family: "Lato Light"; | |
| font-size: 30px; | |
| color: #ffffff; | |
| font-weight: 400; | |
| } | |
| .address-details-heading h4 { | |
| font-family: "Lato Bold"; | |
| color: #c0dfda; | |
| font-size: 20px; | |
| margin: 0; | |
| margin-bottom: 20px; | |
| } | |
| .address-details-heading p { | |
| font-family: "Lato Regular"; | |
| font-weight: 400; | |
| font-size: 16px; | |
| color: #ffffff; | |
| margin: 0; | |
| margin-bottom: 10px; | |
| } | |
| .address-details { | |
| margin-top: 70px; | |
| font-size: 16px; | |
| font-weight: 400; | |
| font-family: "Lato Regular"; | |
| color: #ffffff; | |
| } | |
| .address-details tr td:last-child { | |
| padding-left: 25px; | |
| } | |
| .address-details a { | |
| color: #ffffff; | |
| } | |
| .map { | |
| position: relative; | |
| width: 265px; | |
| left: 250px; | |
| bottom: 235px; | |
| } | |
| .ask-question input { | |
| width: 260px; | |
| height: 35px; | |
| } | |
| .ask-question [type=text] { | |
| margin-right: 14px; | |
| } | |
| .ask-question textarea { | |
| width: 540px; | |
| height: 160px; | |
| margin-top: 25px; | |
| margin-bottom: 25px; | |
| } | |
| .ask-question input, | |
| .ask-question textarea { | |
| background-color: #68a097; | |
| border: 1px solid #639990; | |
| outline-color: #639990; | |
| -webkit-transition: background-color .75s ease; | |
| -moz-transition: background-color .75s ease; | |
| -ms-transition: background-color .75s ease; | |
| -o-transition: background-color .75s ease; | |
| transition: background-color .75s ease; | |
| color: #82c8bd; | |
| font-family: "Lato Regular"; | |
| font-size: 16px; | |
| padding-left: 10px; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| -o-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ask-question input:focus, | |
| .ask-question textarea:focus { | |
| background-color: #f6f6f6; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: #82c8bd; | |
| font-family: "Lato Regular"; | |
| font-size: 16px; | |
| text-align: center; | |
| } | |
| :-moz-placeholder { | |
| color: #82c8bd; | |
| font-family: "Lato Regular"; | |
| font-size: 16px; | |
| text-align: center; | |
| } | |
| ::-moz-placeholder { | |
| color: #82c8bd; | |
| font-family: "Lato Regular"; | |
| font-size: 16px; | |
| text-align: center; | |
| } | |
| :-ms-input-placeholder { | |
| color: #82c8bd; | |
| font-family: "Lato Regular"; | |
| font-size: 16px; | |
| text-align: center; | |
| } | |
| .ask-question button { | |
| display: block; | |
| margin: auto; | |
| padding: 10px 100px; | |
| font-family: "Lato Black"; | |
| color: #ffffff; | |
| font-size: 26px; | |
| background-color: #df5c64; | |
| border: 1px solid #db5860; | |
| -webkit-box-shadow: 0 2px 1px #d14c54; | |
| -moz-box-shadow: 0 2px 1px #d14c54; | |
| -ms-box-shadow: 0 2px 1px #d14c54; | |
| -o-box-shadow: 0 2px 1px #d14c54; | |
| box-shadow: 0 2px 1px #d14c54; | |
| -webkit-transition: background-color .75s ease; | |
| -moz-transition: background-color .75s ease; | |
| -ms-transition: background-color .75s ease; | |
| -o-transition: background-color .75s ease; | |
| transition: background-color .75s ease; | |
| } | |
| .ask-question button:hover { | |
| background-color: #e9676f; | |
| } | |
| /* ******************************************** CONTACT END ******************************************** */ | |
| footer { | |
| width: 100%; | |
| min-width: 1300px; | |
| background-color: #68a097; | |
| } | |
| .site-social { | |
| width: 380px; | |
| margin: auto; | |
| padding-top: 40px; | |
| padding-bottom: 40px; | |
| } | |
| .site-social img { | |
| margin-left: 40px; | |
| } | |
| .site-social a:first-child img { | |
| margin-left: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment