Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShiomiHF
ShiomiHF committed Jul 12, 2023
0 parents commit 57c9414
Show file tree
Hide file tree
Showing 11 changed files with 606 additions and 0 deletions.
Binary file added img/IMG.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/IMG02.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/LOGO.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/M-LOGO.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/fond-1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/fond-11.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/i-burger.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
223 changes: 223 additions & 0 deletions index.html
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>
Loading

0 comments on commit 57c9414

Please sign in to comment.