front-end
tajam
Добавлено
06 июн 2017 в 18:44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tajam</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/whhg.css">
</head>
<body>
<header>
<div class="wrap">
<div class="logo_wrap">
<div class="logo"><img src="img/logo.png" alt="tajam"></div>
</div>
<nav>
<a href="" title="">HOME</a>
<a href="" title="">ABOUT</a>
<a href="" title="">EXPERTISE</a>
<a href="" title="">TEAMS</a>
<a href="" title="">WORKS</a>
<a href="" title="">PEOPLE SAY</a>
<a href="" title="">CONTACT</a>
</nav>
</div>
</header>
<div class="promo">
<div class="mask">
<div class="wrap">
<h1>We Are Awesome Creative Agensy</h1>
<hr height="1px" width="50px"> <br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur unde iste numquam magnam eos suscipit modi praesentium cumque enim inventore, error atque eveniet, officia, maiores, aperiam libero eligendi soluta. Sapiente!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur unde iste numquam magnam eos suscipit modi praesentium cumque enim inventore, error atque eveniet, officia, maiores, aperiam libero eligendi soluta. Sapiente!</p>
<a class="btn" href="" title="">LEARN MORE</a>
</div>
<div class="circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<div class="story">
<div class="wrap">
<div class="img"><img src="img/left.png" alt=""></div>
<div class="story_text">
<h2>OUR STORY</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, qui iste. Voluptates beatae minima, amet possimus ipsa consequuntur deleniti dolorem earum ducimus corporis molestiae cumque natus, officia temporibus iste eos!</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, qui iste. Voluptates beatae minima, amet possimus ipsa consequuntur deleniti dolorem earum ducimus corporis molestiae cumque natus, officia temporibus iste eos!</p>
<a class="btn" href="" title="">LEARN MORE</a>
</div>
</div>
</div>
<div class="watch">
<div class="wrap">
<div class="img"><a href="" title=""><img src="img/play.svg" alt=""></a></div>
<h3>WATCH OUR STORY</h3>
</div>
</div>
<div class="expertise">
<div class="wrap">
<div class="expertise_text">
<h2>EXPERTISE</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p><br>
<hr height="1px" width="50px">
</div>
<div class="expes">
<div class="exp">
<img src="img/icon1.png" alt="">
<h4>WEB DESIGN & DEVELOPMENT</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon2.png" alt="">
<h4>BRANDING IDENTITY</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon3.png" alt="">
<h4>MOBILE APP</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon4.png" alt="">
<h4>SEARCH ENGINE OPTIMIZATION</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon5.png" alt="">
<h4>GAME DEVELOPMENT</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon6.png" alt="">
<h4>MADE WITH LOVE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
</div>
</div>
</div>
<div class="meet">
<div class="wrap">
<div class="expertise_text">
<h2>MEET OUR AMAZING TEAM</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p><br>
<hr height="1px" width="50px">
</div>
</div>
<div class="empes wrap">
<div class="emp">
<img src="" alt="">
<h4>SEMF UCUK</h4>
<p>CEO & FOUNDER</p>
</div>
<div class="emp">
<img src="" alt="">
<h4>DIK ADALIN</h4>
<p>ENGINEERING</p>
</div>
<div class="emp">
<img src="" alt="">
<h4>JENG KOL</h4>
<p>DESGIGNER</p>
</div>
<div class="emp">
<img src="" alt="">
<h4>PET ROMAK</h4>
<p>MARKETING</p>
</div>
</div>
<div class="wrap">
<p>Become part of our dream team, let's join us!</p>
<a class="btn" href="" title="">WE ARE HIRING</a>
</div>
</div>
<div class="works">
<div class="our_works"><h2>OUR WORKS</h2></div>
<a href="" title="see_all"><div class="see_all"><p>See All Project in dribbble</p><div class="img"></div></div></a>
<div class="exams">
<img src="" alt=""><img src="" alt=""><img src="" alt="">
<img src="" alt=""><img src="" alt=""><img src="" alt="">
<img src="" alt=""><img src="" alt=""><img src="" alt="">
<img src="" alt=""><img src="" alt=""><img src="" alt="">
</div>
<div class="more"><a class="btn" href="" title="">LOAD MORE</a></div>
</div>
<div class="quotes">
<div class="wrap">
<img src="img/quote.svg" alt="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat.</p>
<h4>JANE GALADRIEL</h4>
<p>CEO TENGKUREP</p>
<div class="perses">
<a href="" title=""><div class="img"></div></a>
<div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div>
<a href="" title=""><div class="img"></div></a>
</div>
</div>
</div>
<div class="good">
<div class="wrap">
<div class="news">
<h2>GIVE US A GOOD NEWS</h2>
<form action="#" method="post">
<input type="text" name="name" id="name" value="" tabindex="1" placeholder="Name" />
<input type="email" name="name" id="name" value="" tabindex="2" placeholder="Email"/>
<input type="text" name="name" id="name" value="" tabindex="3" placeholder="Subject"/>
<textarea cols="40" rows="8" name="textarea" id="textarea" placeholder="Your Message"></textarea>
<input class="btn" type="submit" value="SUBMIT"/>
</form>
</div>
<div class="happy">
<h2>OUR HAPPY CLIENT</h2>
<img src="img/clients.png" alt="медвежата у реки" usemap="#clients">
<map name="clients">
<area shape="rect" coords="0,0,162,22" href="" alt="ZARA" title="ZARA">
<area shape="rect" coords="242,0,380,22" href="" alt="MANGO" title="MANGO">
<area shape="rect" coords="0,69,162,110" href="" alt="" title="BARNEYS NEWYORK">
<area shape="rect" coords="242,82,380,103" href="" alt="" title="GUCCI">
<area shape="rect" coords="0,159,162,183" href="" alt="" title="Calvin Klein">
<area shape="rect" coords="263,156,358,190" href="" alt="" title="NIKE">
<area shape="rect" coords="25,237,137,306" href="" alt="" title="CONVERSE">
<area shape="rect" coords="254,244,368,300" href="" alt="" title="PUMA">
<area shape="rect" coords="22,356,131,409" href="" alt="" title="LEVI'S">
<area shape="rect" coords="246,329,376,399" href="" alt="" title="BILLABONG">
</map>
</div>
</div>
</div>
<footer>
<div class="wrap">
<div class="footer_logo_wrap">
<div class="logo_wrap">
<div class="logo"><img src="img/logo.png" alt="tajam"></div>
</div>
<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
<div class="studio">
<h4>OUR STUDIO</h4>
<ul>
<li>Ruko cucruk, Jl. Radio luar dalem jos No.12 - 13, Kalideres - Jakarta Barat 11480 - Indonesia</li>
<li>(+62) 21-2224 3333</li>
</ul>
</div>
<div class="stay">
<h4>STAY IN TOUCH</h4>
<form action="#" method="post">
<input type="text" name="name" id="name" value="" placeholder="Subscribe our newsletter"/>
<input class="btn" type="submit" value=""/>
</form>
<nav>
<a href="" title="">
<i class="fa fa-lg fa-facebook" aria-hidden="true"></i></a><a href="" title="">
<i class="fa fa-lg fa-twitter" aria-hidden="true"></i></a>
<a href="" title="">
<i class=" icon-instagram"></i></a>
<a href="" title="">
<i class="fa fa-lg fa-dribbble" aria-hidden="true"></i></a>
<a href="" title="">
<i class=" icon-googleplus"></i></a>
<a href="" title="">
<i class="fa-lg icon-youtube"></i></a>
</nav>
</div>
<div class="bottom">
<div class="links">
<a href="" title="">HELP</a>
<a href="" title="">TERMS & CONDITION</a>
<a href="" title="">PRIVACY</a>
</div>
<div class="cprt"><p>Copyright © 2015 - Tajem Creative</p></div>
</div>
</div>
</footer>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tajam</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/whhg.css">
</head>
<body>
<header>
<div class="wrap">
<div class="logo_wrap">
<div class="logo"><img src="img/logo.png" alt="tajam"></div>
</div>
<nav>
<a href="" title="">HOME</a>
<a href="" title="">ABOUT</a>
<a href="" title="">EXPERTISE</a>
<a href="" title="">TEAMS</a>
<a href="" title="">WORKS</a>
<a href="" title="">PEOPLE SAY</a>
<a href="" title="">CONTACT</a>
</nav>
</div>
</header>
<div class="promo">
<div class="mask">
<div class="wrap">
<h1>We Are Awesome Creative Agensy</h1>
<hr height="1px" width="50px"> <br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur unde iste numquam magnam eos suscipit modi praesentium cumque enim inventore, error atque eveniet, officia, maiores, aperiam libero eligendi soluta. Sapiente!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur unde iste numquam magnam eos suscipit modi praesentium cumque enim inventore, error atque eveniet, officia, maiores, aperiam libero eligendi soluta. Sapiente!</p>
<a class="btn" href="" title="">LEARN MORE</a>
</div>
<div class="circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<div class="story">
<div class="wrap">
<div class="img"><img src="img/left.png" alt=""></div>
<div class="story_text">
<h2>OUR STORY</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, qui iste. Voluptates beatae minima, amet possimus ipsa consequuntur deleniti dolorem earum ducimus corporis molestiae cumque natus, officia temporibus iste eos!</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, qui iste. Voluptates beatae minima, amet possimus ipsa consequuntur deleniti dolorem earum ducimus corporis molestiae cumque natus, officia temporibus iste eos!</p>
<a class="btn" href="" title="">LEARN MORE</a>
</div>
</div>
</div>
<div class="watch">
<div class="wrap">
<div class="img"><a href="" title=""><img src="img/play.svg" alt=""></a></div>
<h3>WATCH OUR STORY</h3>
</div>
</div>
<div class="expertise">
<div class="wrap">
<div class="expertise_text">
<h2>EXPERTISE</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p><br>
<hr height="1px" width="50px">
</div>
<div class="expes">
<div class="exp">
<img src="img/icon1.png" alt="">
<h4>WEB DESIGN & DEVELOPMENT</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon2.png" alt="">
<h4>BRANDING IDENTITY</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon3.png" alt="">
<h4>MOBILE APP</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon4.png" alt="">
<h4>SEARCH ENGINE OPTIMIZATION</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon5.png" alt="">
<h4>GAME DEVELOPMENT</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
<div class="exp">
<img src="img/icon6.png" alt="">
<h4>MADE WITH LOVE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet nulla vero veniam unde aut omnis voluptatum.</p>
</div>
</div>
</div>
</div>
<div class="meet">
<div class="wrap">
<div class="expertise_text">
<h2>MEET OUR AMAZING TEAM</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p><br>
<hr height="1px" width="50px">
</div>
</div>
<div class="empes wrap">
<div class="emp">
<img src="" alt="">
<h4>SEMF UCUK</h4>
<p>CEO & FOUNDER</p>
</div>
<div class="emp">
<img src="" alt="">
<h4>DIK ADALIN</h4>
<p>ENGINEERING</p>
</div>
<div class="emp">
<img src="" alt="">
<h4>JENG KOL</h4>
<p>DESGIGNER</p>
</div>
<div class="emp">
<img src="" alt="">
<h4>PET ROMAK</h4>
<p>MARKETING</p>
</div>
</div>
<div class="wrap">
<p>Become part of our dream team, let's join us!</p>
<a class="btn" href="" title="">WE ARE HIRING</a>
</div>
</div>
<div class="works">
<div class="our_works"><h2>OUR WORKS</h2></div>
<a href="" title="see_all"><div class="see_all"><p>See All Project in dribbble</p><div class="img"></div></div></a>
<div class="exams">
<img src="" alt=""><img src="" alt=""><img src="" alt="">
<img src="" alt=""><img src="" alt=""><img src="" alt="">
<img src="" alt=""><img src="" alt=""><img src="" alt="">
<img src="" alt=""><img src="" alt=""><img src="" alt="">
</div>
<div class="more"><a class="btn" href="" title="">LOAD MORE</a></div>
</div>
<div class="quotes">
<div class="wrap">
<img src="img/quote.svg" alt="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat.</p>
<h4>JANE GALADRIEL</h4>
<p>CEO TENGKUREP</p>
<div class="perses">
<a href="" title=""><div class="img"></div></a>
<div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div>
<a href="" title=""><div class="img"></div></a>
</div>
</div>
</div>
<div class="good">
<div class="wrap">
<div class="news">
<h2>GIVE US A GOOD NEWS</h2>
<form action="#" method="post">
<input type="text" name="name" id="name" value="" tabindex="1" placeholder="Name" />
<input type="email" name="name" id="name" value="" tabindex="2" placeholder="Email"/>
<input type="text" name="name" id="name" value="" tabindex="3" placeholder="Subject"/>
<textarea cols="40" rows="8" name="textarea" id="textarea" placeholder="Your Message"></textarea>
<input class="btn" type="submit" value="SUBMIT"/>
</form>
</div>
<div class="happy">
<h2>OUR HAPPY CLIENT</h2>
<img src="img/clients.png" alt="медвежата у реки" usemap="#clients">
<map name="clients">
<area shape="rect" coords="0,0,162,22" href="" alt="ZARA" title="ZARA">
<area shape="rect" coords="242,0,380,22" href="" alt="MANGO" title="MANGO">
<area shape="rect" coords="0,69,162,110" href="" alt="" title="BARNEYS NEWYORK">
<area shape="rect" coords="242,82,380,103" href="" alt="" title="GUCCI">
<area shape="rect" coords="0,159,162,183" href="" alt="" title="Calvin Klein">
<area shape="rect" coords="263,156,358,190" href="" alt="" title="NIKE">
<area shape="rect" coords="25,237,137,306" href="" alt="" title="CONVERSE">
<area shape="rect" coords="254,244,368,300" href="" alt="" title="PUMA">
<area shape="rect" coords="22,356,131,409" href="" alt="" title="LEVI'S">
<area shape="rect" coords="246,329,376,399" href="" alt="" title="BILLABONG">
</map>
</div>
</div>
</div>
<footer>
<div class="wrap">
<div class="footer_logo_wrap">
<div class="logo_wrap">
<div class="logo"><img src="img/logo.png" alt="tajam"></div>
</div>
<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
<div class="studio">
<h4>OUR STUDIO</h4>
<ul>
<li>Ruko cucruk, Jl. Radio luar dalem jos No.12 - 13, Kalideres - Jakarta Barat 11480 - Indonesia</li>
<li>(+62) 21-2224 3333</li>
</ul>
</div>
<div class="stay">
<h4>STAY IN TOUCH</h4>
<form action="#" method="post">
<input type="text" name="name" id="name" value="" placeholder="Subscribe our newsletter"/>
<input class="btn" type="submit" value=""/>
</form>
<nav>
<a href="" title="">
<i class="fa fa-lg fa-facebook" aria-hidden="true"></i></a><a href="" title="">
<i class="fa fa-lg fa-twitter" aria-hidden="true"></i></a>
<a href="" title="">
<i class=" icon-instagram"></i></a>
<a href="" title="">
<i class="fa fa-lg fa-dribbble" aria-hidden="true"></i></a>
<a href="" title="">
<i class=" icon-googleplus"></i></a>
<a href="" title="">
<i class="fa-lg icon-youtube"></i></a>
</nav>
</div>
<div class="bottom">
<div class="links">
<a href="" title="">HELP</a>
<a href="" title="">TERMS & CONDITION</a>
<a href="" title="">PRIVACY</a>
</div>
<div class="cprt"><p>Copyright © 2015 - Tajem Creative</p></div>
</div>
</div>
</footer>
</body>
</html>
