-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 31.7 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="This is meta tag for optimize SEO"> <meta name="keyword" content="SEO, meta, landing, tajam"> <title>Tajam</title> <link rel="stylesheet" href="css/main.min.css"></head><body> <div class="wrapper"> <header class="header"> <div class="container"> <div class="header_top"> <div class="header_logo"> <a href="/" class="header_logo_link"> <div class="header_logo_img"> <picture><source srcset="img/header/logo.webp" type="image/webp"><img src="img/header/logo.png" alt="logo"></picture> </div> <div class="header_logo_title"> tajam </div> </a> </div> <nav class="header_menu"> <ul class="header_list"> <li> <a href="/link" class="header_link">Home</a> </li> <li> <a href="/link" class="header_link">About</a> </li> <li> <a href="/link" class="header_link">Expertise</a> </li> <li> <a href="/link" class="header_link">Teams</a> </li> <li> <a href="/link" class="header_link">works</a> </li> <li> <a href="/link" class="header_link">people say</a> </li> <li> <a href="/link" class="header_link">Contact</a> </li> </ul> </nav> <div class="header_burger"> <span></span> </div> </div> <div class="header_bottom"> <div class="header_slider"> <div class="header_cols"> <div class="header_slide slider_slide hide"> <div class="header_titles"> <div class="header_title"> We are awesome creative agency </div> <div class="header_subtitle"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. </div> <div class="header_subtitle_link_btn"> <a href="#" class="link-outline"> <span></span> learn more</a> </div> </div> </div> <div class="header_slide slider_slide hide"> <div class="header_titles"> <div class="header_title"> We are awesome creative agency (2) </div> <div class="header_subtitle"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. </div> <div class="header_subtitle_link_btn"> <a href="#" class="link-outline"> <span></span> learn more</a> </div> </div> </div> <div class="header_slide slider_slide hide"> <div class="header_titles"> <div class="header_title"> We are awesome creative agency (3) </div> <div class="header_subtitle"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. </div> <div class="header_subtitle_link_btn"> <a href="#" class="link-outline"> <span></span> learn more</a> </div> </div> </div> <div class="header_slide slider_slide hide"> <div class="header_titles"> <div class="header_title"> We are awesome creative agency (4) </div> <div class="header_subtitle"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. </div> <div class="header_subtitle_link_btn"> <a href="#" class="link-outline"> <span></span> learn more</a> </div> </div> </div> </div> <div class="header_cols"> <div class="header_slider_dots slider_dots"></div> </div> </div> </div> </div></header> <main class="main"> <section class="about"> <div class="container"> <div class="about_row"> <div class="about_item"> <div class="about_img"> <picture><source srcset="img/about/logo.webp" type="image/webp"><img src="img/about/logo.png" alt="logo" class="ibg"></picture> </div> </div> <div class="about_item"> <div class="about_our_story"> <div class="about_title">our story</div> <div class="about_subtitle"> <p> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus</p> <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> </div> <div class="about_link_btn"> <a href="#" class="link-outline"><span></span> learn more</a> </div> </div> </div> </div> </div> </section> <section class="about_video"> <div class="about_video_v"></div> <div class="about_video_pseudo"> <picture><source srcset="img/about/bg.webp" type="image/webp"><img src="img/about/bg.png" alt="video" class="ibg"></picture> <div class="about_video_pseudo_controls"> <div class="triangle"> <picture><source srcset="img/about/triangle.webp" type="image/webp"><img src="img/about/triangle.png" alt="button play"></picture> </div> <div class="about_video_title">watch our story</div> </div> </div> </section> <section class="expertise"> <div class="container"> <div class="titles"> <div class="title">expertise</div> <div class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, modi.</div> </div> <div class="expertise_cols"> <div class="expertise_row"> <div class="expertise_item"> <div class="expertise_card"> <div class="expertise_img"> <picture><source srcset="img/expertise/monitor.webp" type="image/webp"><img src="img/expertise/monitor.png" alt="monitor"></picture> </div> <div class="expertise_card_title">web design & development</div> <div class="expertise_subtitle">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</div> </div> </div> <div class="expertise_item"> <div class="expertise_card"> <div class="expertise_img"> <picture><source srcset="img/expertise/pencil.webp" type="image/webp"><img src="img/expertise/pencil.png" alt="pencil"></picture> </div> <div class="expertise_card_title">branding identity</div> <div class="expertise_subtitle">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</div> </div> </div> <div class="expertise_item"> <div class="expertise_card"> <div class="expertise_img"> <picture><source srcset="img/expertise/phone.webp" type="image/webp"><img src="img/expertise/phone.png" alt="phone"></picture> </div> <div class="expertise_card_title">mobile app</div> <div class="expertise_subtitle">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</div> </div> </div> </div> <hr> <div class="expertise_row"> <div class="expertise_item"> <div class="expertise_card"> <div class="expertise_img"> <picture><source srcset="img/expertise/diagramma.webp" type="image/webp"><img src="img/expertise/diagramma.png" alt="diagramma"></picture> </div> <div class="expertise_card_title">search engine optimization</div> <div class="expertise_subtitle">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</div> </div> </div> <div class="expertise_item"> <div class="expertise_card"> <div class="expertise_img"> <picture><source srcset="img/expertise/psp.webp" type="image/webp"><img src="img/expertise/psp.png" alt="psp"></picture> </div> <div class="expertise_card_title">game development</div> <div class="expertise_subtitle">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</div> </div> </div> <div class="expertise_item"> <div class="expertise_card"> <div class="expertise_img"> <picture><source srcset="img/expertise/heart.webp" type="image/webp"><img src="img/expertise/heart.png" alt="heart"></picture> </div> <div class="expertise_card_title">made with love</div> <div class="expertise_subtitle">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</div> </div> </div> </div> </div> </div> </section> <section class="team"> <div class="container"> <div class="titles title-light-text"> <div class="title">meet our amazing team</div> <div class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, modi.</div> </div> <div class="team_cols"> <div class="team_col"> <div class="team_row"> <div class="team_item"> <div class="team_card"> <div class="team_card_img"> <div class="img-null"></div> </div> <div class="team_names">Semf Ucuk</div> <div class="team_order">CEO & founder</div> </div> </div> <div class="team_item"> <div class="team_card"> <div class="team_card_img"> <div class="img-null"></div> </div> <div class="team_names">Dik Adalin</div> <div class="team_order">engineering</div> </div> </div> <div class="team_item"> <div class="team_card"> <div class="team_card_img"> <div class="img-null"></div> </div> <div class="team_names">Jeng Kol</div> <div class="team_order">designer</div> </div> </div> <div class="team_item"> <div class="team_card"> <div class="team_card_img"> <div class="img-null"></div> </div> <div class="team_names">Pet Romak</div> <div class="team_order">marketing</div> </div> </div> </div> </div> <div class="team_col"> <div class="team_hiring"> <div class="team_hiring_title">Become part of out team, let's join us</div> <div class="team_hiring_btn"> <a href="#" class="link-outline"> <span></span> we are hiring </a> </div> </div> </div> </div> </div> </section> <section class="works"> <div class="container"> <div class="works_header"> <div class="works_title">our works</div> <div class="works_link"> <a href="#" class="works_link_a">See All Project in dribbble ></a> </div> </div> </div> <div class="works_row"> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> <div class="works_item"> <div class="work_card"> <div class="work_card_img"> <div class="img-null"></div> </div> <div class="work_hover_see"> <a href="#" class="works_hover_see_a">See Detail</a> </div> </div> </div> </div> <div class="works_btn"> <a href="/works" class="link-outline"> <span></span> load more </a> </div> </section> <section class="testimonials"> <div class="container"> <div class="testimonials_cols"> <div class="testimonials_title">“</div> <div class="testimonials_slide"> <div class="testimonials_subtitle"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. </div> <div class="testimonials_author"> <div class="testimonials_author_names">Jane Galadriel</div> <div class="testimonials_author_order">ceo tengkurep</div> </div> </div> <div class="testimonials_slide"> <div class="testimonials_subtitle"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. </div> <div class="testimonials_author"> <div class="testimonials_author_names">Petr Highed</div> <div class="testimonials_author_order">ceo tengkurep</div> </div> </div> <div class="testimonials_slide"> <div class="testimonials_subtitle"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. </div> <div class="testimonials_author"> <div class="testimonials_author_names">Jane Smith</div> <div class="testimonials_author_order">ceo tengkurep</div> </div> </div> <div class="testimonials_slide"> <div class="testimonials_subtitle"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. </div> <div class="testimonials_author"> <div class="testimonials_author_names">Alex Griffin</div> <div class="testimonials_author_order">ceo tengkurep</div> </div> </div> <div class="testimonials_slide"> <div class="testimonials_subtitle"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. </div> <div class="testimonials_author"> <div class="testimonials_author_names">Jane Scarlet</div> <div class="testimonials_author_order">ceo tengkurep</div> </div> </div> <div class="testimonials_slider_controls"> <div class="slider_left_arrow">←</div> <div class="slider_avatars_authors"> <div class="avatars_author"> <div class="avatars_author_img"> <picture><source srcset="img/testimonials/1.webp" type="image/webp"><img src="img/testimonials/1.png" alt="testimonials"></picture> </div> </div> <div class="avatars_author"> <div class="avatars_author_img"> <picture><source srcset="img/testimonials/2.webp" type="image/webp"><img src="img/testimonials/2.png" alt="testimonials"></picture> </div> </div> <div class="avatars_author author-active"> <div class="avatars_author_img"> <picture><source srcset="img/testimonials/3.webp" type="image/webp"><img src="img/testimonials/3.png" alt="testimonials"></picture> </div> </div> <div class="avatars_author"> <div class="avatars_author_img"> <picture><source srcset="img/testimonials/4.webp" type="image/webp"><img src="img/testimonials/4.png" alt="testimonials"></picture> </div> </div> <div class="avatars_author"> <div class="avatars_author_img"> <picture><source srcset="img/testimonials/5.webp" type="image/webp"><img src="img/testimonials/5.png" alt="testimonials"></picture> </div> </div> </div> <div class="slider_right_arrow">→</div> </div> </div> </div> </section> <section class="contact"> <div class="container"> <div class="contact_row"> <div class="contact_item"> <div class="contact_form"> <div class="contact_title">give us a good news</div> <form action="#" class="form_contact"> <div class="form_input"> <input type="text" placeholder="Name"> </div> <div class="form_input"> <input type="text" placeholder="Email"> </div> <div class="form_input"> <input type="text" placeholder="Subject"> </div> <div class="form_input"> <textarea name="textarea" class="textarea" cols="30" rows="10">Message</textarea> </div> <div class="form_btn"> <button class="link-outline" type="submit">submit<span></span></button> </div> </form> </div> </div> <div class="contact_item"> <div class="clients"> <div class="contact_title">give us a good news</div> <div class="clients_row"> <div class="client_col"> <div class="client_img"> <picture><source srcset="img/contact/Zara_Logo.webp" type="image/webp"><img src="img/contact/Zara_Logo.png" alt="client"></picture> </div> <div class="client_img"> <picture><source srcset="img/contact/1280px-Barneys_New_York_Logo.webp" type="image/webp"><img src="img/contact/1280px-Barneys_New_York_Logo.png" alt="client"></picture> </div> <div class="client_img"> <picture><source srcset="img/contact/Calvin_klein_logo.webp" type="image/webp"><img src="img/contact/Calvin_klein_logo.png" alt="client"></picture> </div> <div class="client_img"> <picture><source srcset="img/contact/Converse_logo.webp" type="image/webp"><img src="img/contact/Converse_logo.png" alt="client"></picture> </div> <div class="client_img"> <picture><source srcset="img/contact/1280px-Levi's_logo.webp" type="image/webp"><img src="img/contact/1280px-Levi's_logo.png" alt="client"></picture> </div> </div> <div class="client_col"> <div class="client_img"> <picture><source srcset="img/contact/Logo_of_Mango_.webp" type="image/webp"><img src="img/contact/Logo_of_Mango_.png" alt="client"></picture> </div> <div class="client_img"> <picture><source srcset="img/contact/1280px-Gucci_Logo.webp" type="image/webp"><img src="img/contact/1280px-Gucci_Logo.png" alt="client"></picture> </div> <div class="client_img"> <picture><source srcset="img/contact/1280px-Logo_NIKE.webp" type="image/webp"><img src="img/contact/1280px-Logo_NIKE.png" alt="client"></picture> </div> <div class="client_img"> <picture><source srcset="img/contact/Puma_Logo.webp" type="image/webp"><img src="img/contact/Puma_Logo.png" alt="client"></picture> </div> <div class="client_img"> <picture><source srcset="img/contact/Billabong.webp" type="image/webp"><img src="img/contact/Billabong.png" alt="client"></picture> </div> </div> </div> </div> </div> </div> </div> </section> </main> <footer class="footer"> <div class="container"> <div class="footer_row"> <div class="footer_item"> <div class="footer_logo"> <div class="footer_logos"> <div class="footer_logo_img"> <picture><source srcset="img/footer/logo.webp" type="image/webp"><img src="img/footer/logo.png" alt="logo"></picture> </div> <div class="footer_logo_title">tajam</div> </div> <div class="footer_logo_description"> lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh elit. Duis sed odio sit amet auctror a ornare odio non mauris vitae erat in elit </div> </div> </div> <div class="footer_item"> <div class="our-location"> <div class="footer_title">our studio</div> <div class="footer_location_cols"> <div class="footer_location_col"> <div class="footer_icon"> <picture><source srcset="img/icons/location.webp" type="image/webp"><img src="img/icons/location.png" alt="location"></picture> </div> <div class="footer_adress">Ruko cucruk, Jl. Radio luar dalem jos No.12 - 13, Kalideres - Jakarta Barat 11480 - Indonesia</div> </div> <div class="footer_location_col"> <div class="footer_icon"> <picture><source srcset="img/icons/phone.webp" type="image/webp"><img src="img/icons/phone.png" alt="phone-icon"></picture> </div> <div class="footer_phone">(+62) 21-224 3333</div> </div> </div> </div> </div> <div class="footer_item"> <div class="footer_subscribe"> <div class="footer_title">stay in touch</div> <div class="footer_subscribe_form"> <div class="footer_form"> <input type="text" placeholder="subscribe our newsletter"> <button><picture><source srcset="img/icons/paper.webp" type="image/webp"><img src="img/icons/paper.png" alt="paper"></picture></button> </div> <div class="footer_socials"> <div class="footer_social"> <div class="footer_img"> <picture><source srcset="img/icons/facebook.webp" type="image/webp"><img src="img/icons/facebook.png" alt="facebook"></picture> </div> </div> <div class="footer_social"> <div class="footer_img"> <picture><source srcset="img/icons/twitter.webp" type="image/webp"><img src="img/icons/twitter.png" alt="twitter"></picture> </div> </div> <div class="footer_social"> <div class="footer_img"> <picture><source srcset="img/icons/dribbble.webp" type="image/webp"><img src="img/icons/dribbble.png" alt="twitter"></picture> </div> </div> <div class="footer_social"> <div class="footer_img"> <picture><source srcset="img/icons/instagram.webp" type="image/webp"><img src="img/icons/instagram.png" alt="twitter"></picture> </div> </div> <div class="footer_social"> <div class="footer_img"> <picture><source srcset="img/icons/google.webp" type="image/webp"><img src="img/icons/google.png" alt="twitter"></picture> </div> </div> <div class="footer_social"> <div class="footer_img"> <picture><source srcset="img/icons/youtube.webp" type="image/webp"><img src="img/icons/youtube.png" alt="twitter"></picture> </div> </div> </div> </div> </div> </div> </div> <div class="footer_row"> <div class="footer_item"> <div class="footer_nav"> <ul class="footer_nav_list"> <li><a href="#">help</a></li> <li><a href="#">terms & condition</a></li> <li><a href="#">privacy</a></li> </ul> </div> </div> <div class="footer_item"> <div class="footer_copyright"> Copyright © 2015 - Tajem Creative </div> </div> </div> </div></footer> </div> <script src="js/main.js"></script></body></html>