-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 57c9414
Showing
11 changed files
with
606 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,223 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Lobster&family=Moul&family=Poppins:wght@200;300;400;600;900&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Roboto:wght@300;400;500;700;900&display=swap" | ||
rel="stylesheet" | ||
/> | ||
<link rel="stylesheet" href="./styles/style.css" /> | ||
<title>Devoir CSS 02</title> | ||
</head> | ||
<body> | ||
<section id="hero"> | ||
<header> | ||
<nav> | ||
<div class="logo"> | ||
<img src="./img/LOGO.png" alt="logo" class="d-logo" /> | ||
<img src="./img/M-LOGO.png" alt="logo" class="m-logo" /> | ||
<p>YOU LOGO</p> | ||
</div> | ||
<div><img src="./img/i-burger.png" alt="burger" /></div> | ||
</nav> | ||
</header> | ||
<div class="h-container"> | ||
<div class="h-left"> | ||
<h1>LANDING PAGE <br />WEBSITE DESIGN <br />TEMPLATE</h1> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam | ||
nonummy nibh euismod tincidunt ut laoreet dolore magna | ||
</p> | ||
<div class="btn-navy d-btn"><a>Get started</a></div> | ||
</div> | ||
<div class="h-right"> | ||
<img src="/img/IMG.jpg" alt="image01" /> | ||
<div class="btn-navy m-btn"><a>Get started</a></div> | ||
</div> | ||
</div> | ||
<div class="arrow"><lottie-player src=“https://lottie.host/4ab4213b-7a00-4902-a418-bd78ad63e001/OQAjyKgxwS.json” background=“#fff” speed=“1” style=“width: 300px; height: 300px” direction=“1” mode=“normal” loop controls autoplay></lottie-player></div> | ||
</section> | ||
<section id="features"> | ||
<div class="f-description"> | ||
<h2>FEATURES</h2> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetur. Maecenas ipsum pharetra vel | ||
dui et. Augue a vel malesuada aliquam ullamcorper sed. Ligula | ||
pellentesque amet pellentesque ornare dui a. Interdum ultrices | ||
vestibulum at diam urna sagittis. | ||
</p> | ||
</div> | ||
|
||
<div class="f-container"> | ||
<article class="f-article"> | ||
<img src="/img/IMG02.png" alt="" /> | ||
<h3>LOREM IPSUM</h3> | ||
<p>Lorem ipsum dolor sit amet consectetur adipisc-</p> | ||
</article> | ||
<article class="f-article"> | ||
<img src="/img/IMG02.png" alt="" /> | ||
<h3>LOREM IPSUM</h3> | ||
<p>Lorem ipsum dolor sit amet consectetur adipisc-</p> | ||
</article> | ||
<article class="f-article"> | ||
<img src="/img/IMG02.png" alt="" /> | ||
<h3>LOREM IPSUM</h3> | ||
<p>Lorem ipsum dolor sit amet consectetur adipisc-</p> | ||
</article> | ||
</div> | ||
|
||
<div class="get-start"> | ||
<div class="get-start-container"> | ||
<h4>LOREM IPSUM DOLOR SIT AMET</h4> | ||
<div class="get-start-input"> | ||
<input type="email" name="mail" id="mail" /> | ||
<div class="btn-navy"><a>Get started</a></div> | ||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
<section id="video"> | ||
<div class="v-video"> | ||
<video src=""><source /></video> | ||
</div> | ||
<div class="v-description"> | ||
<div class="v-left"> | ||
<h3>LOREM IPSUM</h3> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetur adipiscing elit sed diam | ||
nonummy nibh euismod tincidunt ut lapreet dolore magna aliquam erat | ||
volutpet, Ut wisi enim ad minim veniam, quis noslrud exerci taticn | ||
ullamcorpbr Lorem ipsum dolor sit amet consectetur adipiscing elit | ||
sed diam nonummy nibh euismod tincidunt ut lapreet dolore magna | ||
aliquam erat volutpet, Ut wisi enim ad minim veniam, quis noslrud | ||
exerci taticn ullamcorp <br />Lorem ipsum dolor sit amet consectetur | ||
adipiscing elit sed diam nonummy nibh. | ||
</p> | ||
</div> | ||
<div class="v-right"> | ||
<h3>LOREM IPSUM</h3> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetur adipiscing elit sed diam | ||
nonummy nibh euismod tincidunt ut lapreet dolore magna aliquam erat | ||
volutpet, Ut wisi enim ad minim veniam, quis noslrud exerci taticn | ||
ullamcorpbr Lorem ipsum dolor sit amet consectetur adipiscing elit | ||
sed diam nonummy nibh euismod tincidunt ut lapreet dolore magna | ||
aliquam erat volutpet, Ut wisi enim ad minim veniam, quis noslrud | ||
exerci taticn ullamcorp <br />Lorem ipsum dolor sit amet consectetur | ||
adipiscing elit sed diam nonummy nibh. | ||
</p> | ||
</div> | ||
</div> | ||
</section> | ||
<section id="gallery"> | ||
<div class="g-slider"><!-- caroussel --></div> | ||
<div class="g-grid"> | ||
<div class="grid-item"> | ||
<img src="" alt="" /> | ||
<h3>LOREM IPSUM</h3> | ||
</div> | ||
<div class="grid-item"> | ||
<img src="" alt="" /> | ||
<h3>LOREM IPSUM</h3> | ||
</div> | ||
<div class="grid-item"> | ||
<img src="" alt="" /> | ||
<h3>LOREM IPSUM</h3> | ||
</div> | ||
</div> | ||
</section> | ||
<section id="hero2"> | ||
<h2>LOREM IPSUM DOLOR SIT AMET SED DIAM</h2> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetur. Aliquet nisl tortor pulvinar | ||
donec sagittis. Nunc non fusce est eget ac arcu massa in aliquam. | ||
</p> | ||
</section> | ||
<section id="articles"> | ||
<div class="a-container"> | ||
<h2>ARTICLES</h2> | ||
<div class="a-item"> | ||
<h3>LOREM IPSUM</h3> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetur adipiscing elit sed diam | ||
nonummy nibh euismod | ||
</p> | ||
</div> | ||
<div class="a-item"> | ||
<h3>LOREM IPSUM</h3> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetur adipiscing elit sed diam | ||
nonummy nibh euismod | ||
</p> | ||
</div> | ||
</div> | ||
<div class="get-start"> | ||
<div class="get-start-container"> | ||
<h4>LOREM IPSUM DOLOR SIT AMET</h4> | ||
<div class="get-start-input"> | ||
<input type="email" name="mail" id="mail" /> | ||
<div class="btn-navy"><a>Get started</a></div> | ||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
<section id="map"> | ||
<div class="m-container"> | ||
<img src="" alt="" /> | ||
<span>Lorem ipsum dolor sit</span> | ||
</div> | ||
</section> | ||
<footer> | ||
<div class="f-container"> | ||
<div class="f-left"> | ||
<div class="f-logo"> | ||
<img src="" alt="" /> | ||
<p>YOU LOGO</p> | ||
</div> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetur adipiscing elit sed diam | ||
nonummy nibh euismod tincidunt ut laoreet dolore magna | ||
</p> | ||
</div> | ||
<div class="f-right"> | ||
<div class="f-nav01"> | ||
<h4>LOREM IPSUM</h4> | ||
<ul> | ||
<li>Lorem ipsum</li> | ||
<li>Dolor sit ametC</li> | ||
<li>Consectetur</li> | ||
<li>Adipiscing elit</li> | ||
<li>Sed diam nonummy</li> | ||
<li>Nibh euismod</li> | ||
</ul> | ||
</div> | ||
<div class="f-nav02"> | ||
<h4>LOREM IPSUM</h4> | ||
<ul> | ||
<li>Lorem ipsum</li> | ||
<li>Dolor sit ametC</li> | ||
<li>Consectetur</li> | ||
<li>Adipiscing elit</li> | ||
<li>Sed diam nonummy</li> | ||
<li>Nibh euismod</li> | ||
</ul> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="get-start"> | ||
<div class="get-start-container"> | ||
<h4>LOREM IPSUM DOLOR SIT AMET</h4> | ||
<div class="get-start-input"> | ||
<input type="email" name="mail" id="mail" /> | ||
<div class="btn-navy"><a>Get started</a></div> | ||
</div> | ||
</div> | ||
</div> | ||
</footer> | ||
<script src=“https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js”></script> | ||
</body> | ||
</html> |
Oops, something went wrong.