mirror of
https://github.com/sergeyyarkov/grid-css-landing.git
synced 2026-10-11 02:09:11 +03:00
309 lines
14 KiB
HTML
309 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Landing Page Grid CSS</title>
|
|
<!-- Styles CSS -->
|
|
<link rel="stylesheet" href="styles/style.css">
|
|
<link rel="stylesheet" href="styles/media.css">
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600,700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<section id="first">
|
|
<div class="container">
|
|
<header>
|
|
<div class="header-title">
|
|
<span>MYCOMPANY</span>
|
|
</div>
|
|
<div class="header-content">
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#">HOME</a></li>
|
|
<li><a href="#">ABOUT</a></li>
|
|
<li><a href="#">SERVICES</a></li>
|
|
<li><a href="#">PORTFOLIO</a></li>
|
|
<li><a href="#">TESTIMONIALS</a></li>
|
|
<li><a href="#">CONTACT</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
</header>
|
|
<div class="title-page">
|
|
<h1>WELCOME ON <span>MYCOMPANY</span></h1>
|
|
<p>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about-us">
|
|
<div class="container">
|
|
<div class="about-us_content">
|
|
<div class="computer-image">
|
|
<img src="img/about-us_mac.jpg" alt="#">
|
|
</div>
|
|
<div class="about-us_text">
|
|
<h2>SOME WORDS <b>ABOUT US</b></h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus .</p>
|
|
<div class="about-us_text-features">
|
|
<p><b>Mission</b> - <span>We deliver uniqueness and quality</span></p>
|
|
<p><b>Skills</b> - <span>Delivering fast and excellent results</span></p>
|
|
<p><b>Client</b> - <span>Satisfied clients thanks to our experience</span></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section id="our-team">
|
|
<div class="container">
|
|
<div class="our-team_title">
|
|
<h2 class="title-section">OUR TEAM</h2>
|
|
</div>
|
|
<div class="our-team_content">
|
|
<div class="our-team_person">
|
|
<div class="person-image">
|
|
<img src="img/our-team_person.png" alt="#">
|
|
</div>
|
|
<div class="person-info">
|
|
<b>Vlad Ivanov</b><br>
|
|
<span>Designer</span><br>
|
|
<p>
|
|
Do not seek to change what has come before. Seek to create that which has not.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="our-team_person">
|
|
<div class="person-image">
|
|
<img src="img/our-team_person.png" alt="#">
|
|
</div>
|
|
<div class="person-info">
|
|
<b>Vlad Ivanov</b><br>
|
|
<span>Designer</span><br>
|
|
<p>
|
|
Do not seek to change what has come before. Seek to create that which has not.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="our-team_person">
|
|
<div class="person-image">
|
|
<img src="img/our-team_person.png" alt="#">
|
|
</div>
|
|
<div class="person-info">
|
|
<b>Vlad Ivanov</b><br>
|
|
<span>Designer</span><br>
|
|
<p>
|
|
Do not seek to change what has come before. Seek to create that which has not.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="our-team_person">
|
|
<div class="person-image">
|
|
<img src="img/our-team_person.png" alt="#">
|
|
</div>
|
|
<div class="person-info">
|
|
<b>Vlad Ivanov</b><br>
|
|
<span>Designer</span><br>
|
|
<p>
|
|
Do not seek to change what has come before. Seek to create that which has not.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="our-services">
|
|
<div class="container">
|
|
<div class="our-services_title">
|
|
<h2 class="title-section">OUR SERVICES</h2><br>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.</p>
|
|
</div>
|
|
<div class="our-services_content">
|
|
<div class="our-services_feature">
|
|
<div class="feature-img">
|
|
|
|
</div>
|
|
<div class="feature-info">
|
|
<b>WEB DESIGN</b><br>
|
|
<p>
|
|
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="our-services_feature">
|
|
<div class="feature-img">
|
|
|
|
</div>
|
|
<div class="feature-info">
|
|
<b>MOBILE APPS</b><br>
|
|
<p>
|
|
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="our-services_feature">
|
|
<div class="feature-img">
|
|
|
|
</div>
|
|
<div class="feature-info">
|
|
<b>PHOTOGRAPHY</b><br>
|
|
<p>
|
|
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="our-services_feature">
|
|
<div class="feature-img">
|
|
|
|
</div>
|
|
<div class="feature-info">
|
|
<b>MARKETING</b><br>
|
|
<p>
|
|
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="our-clients">
|
|
<div class="container">
|
|
<div class="our-clients_title">
|
|
<h2 class="title-section">SOME OF <span>OUR CLIENTS</span></h2><br>
|
|
</div>
|
|
|
|
<div class="our-clients_content">
|
|
<div class="our-client_logo">
|
|
<img src="img/clients/chanel-logo.png" alt="#">
|
|
</div>
|
|
<div class="our-client_logo">
|
|
<img src="img/clients/zara-logo.png" alt="#">
|
|
</div>
|
|
<div class="our-client_logo">
|
|
<img src="img/clients/guerlain-logo.png" alt="#">
|
|
</div>
|
|
<div class="our-client_logo">
|
|
<img src="img/clients/lancome-logo.png" alt="#">
|
|
</div>
|
|
<div class="our-client_logo">
|
|
<img src="img/clients/lacoste-logo.png" alt="#">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="our-work">
|
|
<div class="container">
|
|
<div class="our-work_title">
|
|
<h2 class="title-section">TAKE A LOOK AT <span>OUR WORK</span></h2><br>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.</p>
|
|
</div>
|
|
<div class="our-work_content">
|
|
<!-- Work - 1 -->
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-1.png" alt="#">
|
|
</div>
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-1.png" alt="#">
|
|
</div>
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-1.png" alt="#">
|
|
</div>
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-1.png" alt="#">
|
|
</div>
|
|
|
|
<!-- Work - 2 -->
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-2.png" alt="#">
|
|
</div>
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-2.png" alt="#">
|
|
</div>
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-2.png" alt="#">
|
|
</div>
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-2.png" alt="#">
|
|
</div>
|
|
|
|
<!-- Work - 3 -->
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-3.png" alt="#">
|
|
</div>
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-3.png" alt="#">
|
|
</div>
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-3.png" alt="#">
|
|
</div>
|
|
<div class="our-work_item">
|
|
<img src="img/work/work-3.png" alt="#">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="testimonial">
|
|
<div class="container">
|
|
<div class="testimonial_title">
|
|
<h2 class="title-section"><span>OUR CLIENT'S</span> TESTIMONIALS</h2><br>
|
|
</div>
|
|
<div class="testimonial_content">
|
|
<p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p><br>
|
|
<small>Dean Martin, CEO Acme Inc.</small>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact-us">
|
|
<div class="container">
|
|
<div class="contact-us_title">
|
|
<h2 class="title-section">CONTACT US</h2><br>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
|
|
</div>
|
|
<div class="contact-us_content">
|
|
<form action="#">
|
|
<div class="input-name">
|
|
<label>Name <span>*</span></label>
|
|
<input type="text">
|
|
</div>
|
|
|
|
<div class="input-email">
|
|
<label>Email Adress <span>*</span></label>
|
|
<input type="text">
|
|
</div>
|
|
<div class="textarea-message">
|
|
<textarea></textarea>
|
|
</div>
|
|
<div class="button-send">
|
|
<button type="submit">SEND</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<a href="#"><img src="img/footer/facebook.svg" alt="Facebook"></a>
|
|
<a href="#"><img src="img/footer/twitter.svg" alt="Twitter"></a>
|
|
<a href="#"><img src="img/footer/google.svg" alt="Google"></a>
|
|
<a href="#"><img src="img/footer/linkedin.svg" alt="Linkedin"></a>
|
|
<a href="#"><img src="img/footer/dribbble.svg" alt="Dribbble"></a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |