Effet Alternatif
This commit is contained in:
Anthony Mahé
BIN
assets/Logo.webp
Normal file
BIN
assets/Logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
assets/bg.jpg
Normal file
BIN
assets/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
assets/dust.webp
Normal file
BIN
assets/dust.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 892 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
BIN
assets/foreground-back.webp
Normal file
BIN
assets/foreground-back.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
assets/foreground-front.webp
Normal file
BIN
assets/foreground-front.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
assets/jax.webp
Normal file
BIN
assets/jax.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
BIN
assets/luna.webp
Normal file
BIN
assets/luna.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
assets/manny.webp
Normal file
BIN
assets/manny.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 560 KiB After Width: | Height: | Size: 560 KiB |
|
Before Width: | Height: | Size: 481 KiB After Width: | Height: | Size: 481 KiB |
|
Before Width: | Height: | Size: 442 KiB After Width: | Height: | Size: 442 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 4.6 MiB After Width: | Height: | Size: 4.6 MiB |
BIN
assets/rays.webp
Normal file
BIN
assets/rays.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 504 KiB |
|
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 201 KiB |
29
favicon.svg
Normal file
29
favicon.svg
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: url(#linear-gradient);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cls-2 {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<linearGradient id="linear-gradient" x1="9.44" y1="9.43" x2="90.57" y2="90.57" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0" stop-color="#ff001e"/>
|
||||||
|
<stop offset="0.49" stop-color="#d400cf"/>
|
||||||
|
<stop offset="1" stop-color="#004bff"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="Layer_2" data-name="Layer 2">
|
||||||
|
<g id="Layer_1-2" data-name="Layer 1">
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M90.41,33.37V18.88C90.41,5.1,84.9,0,65.92,0H33.56c-18.55.1-24,5.13-24,19V33.37c0,7.75-3.16,10-9.59,10V56.63c6.53,0,9.59,2.25,9.59,10V81.12c0,13.65,5.42,18.78,24,18.88H65.92c19,0,24.49-5,24.49-19V66.63c0-7.75,3.16-10,9.59-10V43.37C93.47,43.37,90.41,41.12,90.41,33.37Z"/>
|
||||||
|
<g>
|
||||||
|
<path class="cls-2" d="M24.79,72.51h-11V26.67h11ZM25.12,48,37.49,26.67H49L36.17,47.24,50.26,72.51H37.56Z"/>
|
||||||
|
<path class="cls-2" d="M69.64,57.3h-5V72.51h-11V26.67H68.19c12.5,0,19.64,4.89,19.64,14.95C87.83,52.4,80.49,57.3,69.64,57.3ZM68.32,34.47H64.68V49.36h4c5,0,7.8-2.38,7.8-7.74C76.52,36.79,73.81,34.47,68.32,34.47Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
703
index.html
703
index.html
@@ -1,44 +1,659 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="no-js">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta charset="UTF-8" />
|
||||||
<meta charset="utf-8" />
|
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Charline Pasteur Avocate</title>
|
<title>Demo title here</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<link href="./style.css" rel="stylesheet" />
|
||||||
<link rel="stylesheet" href="./styles.css" />
|
</head>
|
||||||
</head>
|
|
||||||
|
<body>
|
||||||
<body>
|
<div class="parallax">
|
||||||
<div class="navbar">
|
<header class="primary-header">
|
||||||
<input type="checkbox" id="menu-toggle">
|
<div class="wrapper">
|
||||||
<label for="menu-toggle" class="menu-icon">
|
<div class="primary-header__inner">
|
||||||
<span></span>
|
<div class="logo">
|
||||||
<span></span>
|
<img src="./assets/Logo.webp" alt="" />
|
||||||
<span></span>
|
</div>
|
||||||
</label>
|
<nav class="primary-nav">
|
||||||
<nav>
|
<ul role="list">
|
||||||
<a href="#about">Qui je suis</a>
|
<li><a href="#">Why join us</a></li>
|
||||||
<a href="#how">Ce que je fais</a>
|
<li><a href="#">The founders</a></li>
|
||||||
<a href="#contact">Contact</a>
|
<li><a href="#">Beta info</a></li>
|
||||||
</nav>
|
</ul>
|
||||||
</div>
|
</nav>
|
||||||
<div class="wrapper">
|
<div class="flex-group" aria-label="social links">
|
||||||
<div class="parallax__group hero-container">
|
<a href="#">X</a>
|
||||||
<div class="parallax__layer sky"></div>
|
<a href="#">IG</a>
|
||||||
<div class="parallax__layer bushes"></div>
|
<a href="#">YT</a>
|
||||||
<div class="parallax__layer water"></div>
|
</div>
|
||||||
<div class="parallax__layer people1"></div>
|
</div>
|
||||||
<!--<div class="parallax__layer people2"></div>
|
</div>
|
||||||
<div class="parallax__layer people3"></div>
|
</header>
|
||||||
<div></div>-->
|
<div class="hero">
|
||||||
</div>
|
<div class="wrapper">
|
||||||
<section id="about" class="parallax__group info-container">
|
<h1 class="hero__title">
|
||||||
</section>
|
<span>Charline Pasteur</span> Avocate spécialisé mineur
|
||||||
<section id="about"></section>
|
</h1>
|
||||||
<section id="how"></section>
|
<button class="button">contacter</button>
|
||||||
<section id="contact"></section>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
|
||||||
|
<img class="parallax__bg" src="./assets/bg.jpg" alt="" />
|
||||||
</html>
|
<img class="parallax__dust" src="./assets/dust.webp" alt="" />
|
||||||
|
<img
|
||||||
|
class="parallax__foreground-back"
|
||||||
|
src="./assets/foreground-back.webp"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="parallax__foreground-front"
|
||||||
|
src="./assets/foreground-front.webp"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<img class="parallax__jax" src="./assets/jax.webp" alt="" />
|
||||||
|
<img class="parallax__luna" src="./assets/luna.webp" alt="" />
|
||||||
|
<img class="parallax__manny" src="./assets/manny.webp" alt="" />
|
||||||
|
<img class="parallax__rays" src="./assets/rays.webp" alt="" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="main-content">
|
||||||
|
<div class="wrapper">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum nostrum
|
||||||
|
aspernatur nesciunt rem, officiis atque deserunt architecto excepturi
|
||||||
|
ducimus consectetur suscipit dolore sed tempora, assumenda corporis
|
||||||
|
eius quasi quas pariatur.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Sed minus alias quidem error fuga sint temporibus, accusamus totam!
|
||||||
|
Voluptates, deserunt? Dolore nulla iure asperiores quibusdam officia
|
||||||
|
pariatur deleniti aspernatur, assumenda numquam blanditiis cumque
|
||||||
|
voluptatem deserunt nesciunt, ea atque!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Dolor tenetur error similique, voluptatibus blanditiis deleniti
|
||||||
|
distinctio! Officia a, porro nobis provident illum deleniti nulla
|
||||||
|
consequuntur voluptatum enim repellat, architecto quas mollitia
|
||||||
|
consectetur assumenda rem magnam maiores ad nostrum.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Sequi laudantium quaerat necessitatibus voluptates voluptatem maiores
|
||||||
|
animi asperiores tempore error dolore minima autem modi esse sed et
|
||||||
|
pariatur quas, beatae fugit, earum eligendi tenetur! Doloremque
|
||||||
|
consequuntur voluptatem ratione fugiat.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Facilis voluptates necessitatibus, aspernatur deleniti nostrum porro
|
||||||
|
consequatur veniam eius aut nihil ut error quam, expedita ipsam dolore
|
||||||
|
ratione. Consequuntur culpa quasi quisquam quos magnam quibusdam vitae
|
||||||
|
asperiores eveniet quam.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Illo fuga, facilis cupiditate omnis, consequuntur quae maiores iure ab
|
||||||
|
perferendis obcaecati adipisci voluptatem hic nobis officiis fugit ut
|
||||||
|
voluptas enim? Distinctio, iusto aperiam. Aliquam vitae nobis eos ad
|
||||||
|
perspiciatis?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Recusandae quis vitae modi architecto magni error distinctio officiis
|
||||||
|
molestiae mollitia veniam! Cum qui provident sint laudantium
|
||||||
|
voluptatum accusantium debitis repudiandae? Sint laboriosam quis
|
||||||
|
veniam eum amet nesciunt earum perspiciatis?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Alias voluptate ad quasi ipsum mollitia optio dolore? Modi et
|
||||||
|
doloremque in harum ab hic, voluptatum odio molestias fuga quas
|
||||||
|
similique natus possimus libero voluptas distinctio beatae dignissimos
|
||||||
|
sunt deleniti.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Mollitia et atque impedit non sed, recusandae repudiandae, temporibus
|
||||||
|
ratione ipsam rem, aut consectetur maiores iusto praesentium fuga
|
||||||
|
cupiditate. Officiis assumenda atque saepe optio. Quod saepe et
|
||||||
|
temporibus officia iure?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Expedita quia doloremque pariatur natus optio vitae numquam
|
||||||
|
voluptatibus rem minima. In iusto cupiditate aspernatur, laboriosam
|
||||||
|
temporibus mollitia consequuntur veniam voluptatem earum saepe
|
||||||
|
delectus iure, quae maxime. Assumenda, facilis dolore?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Incidunt veritatis tempore, expedita, iure temporibus obcaecati
|
||||||
|
suscipit dolores quam nulla reiciendis esse architecto debitis quod
|
||||||
|
dolor maxime neque quas explicabo sed. Quo, corporis? Inventore,
|
||||||
|
ipsam. Quaerat temporibus consequatur beatae.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Dolores impedit ipsum facere rerum odio temporibus animi? Rerum eius
|
||||||
|
culpa dolores earum, officia consequatur quaerat pariatur cumque
|
||||||
|
natus, quia voluptatem eveniet doloremque deleniti quibusdam quam
|
||||||
|
impedit? Quam, nihil consequatur?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Vel assumenda sapiente numquam. Maxime, ducimus. Recusandae
|
||||||
|
reprehenderit nostrum molestias quia nam, natus aliquid ipsam magni
|
||||||
|
soluta beatae delectus expedita perspiciatis cupiditate iusto minima
|
||||||
|
maxime vitae, quo quos impedit culpa?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quasi nostrum sit sed ducimus autem ab eos odit sunt, nemo libero,
|
||||||
|
quam doloribus laudantium maiores dignissimos veniam animi error.
|
||||||
|
Repellat doloremque nisi maiores voluptatibus animi blanditiis
|
||||||
|
similique repellendus eos.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Voluptatibus quo ut incidunt asperiores accusamus, vel deserunt totam
|
||||||
|
qui recusandae. Ipsam maxime omnis saepe dolor soluta tempora vel
|
||||||
|
illo, corporis culpa excepturi consequuntur nobis quaerat, dolorum
|
||||||
|
aliquid provident magni.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quaerat dolores excepturi repudiandae nemo atque sapiente minus
|
||||||
|
nostrum neque cum illum, aspernatur voluptate autem recusandae officia
|
||||||
|
mollitia dolorem doloremque molestias accusantium aperiam at aliquam
|
||||||
|
error facilis alias. Non, dolor!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Officiis fugit neque nihil facilis quae molestiae dolor. Illum magnam
|
||||||
|
odit voluptatem quisquam provident illo architecto tenetur et,
|
||||||
|
praesentium sint omnis quod eum alias dolorum doloribus repellendus,
|
||||||
|
aperiam recusandae. Sunt!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Maiores, libero perferendis explicabo vel quibusdam laudantium a autem
|
||||||
|
velit, enim temporibus, adipisci inventore. Sapiente quibusdam officia
|
||||||
|
error porro animi nostrum, quam cum aliquid vel dolor, molestias quasi
|
||||||
|
temporibus nesciunt!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Dolor optio suscipit illum in, a laudantium consequatur vel incidunt
|
||||||
|
exercitationem, numquam, ratione beatae! Tempora autem porro obcaecati
|
||||||
|
inventore qui modi soluta veritatis nulla? Ut perferendis tempore
|
||||||
|
assumenda consequatur sint!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Dolore totam tempora aliquid praesentium qui soluta enim magnam.
|
||||||
|
Aperiam eum ut expedita distinctio amet veritatis iusto laboriosam
|
||||||
|
sapiente odio nostrum eius dignissimos, aliquid eveniet recusandae
|
||||||
|
corrupti ullam, debitis minus?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Illum, aperiam alias corrupti dicta nobis accusamus debitis enim
|
||||||
|
possimus accusantium quos modi odit eligendi dolores ut praesentium
|
||||||
|
explicabo a, repellat culpa cum ipsam porro earum quae. Hic, iste
|
||||||
|
odio.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Aliquid, vel esse delectus cupiditate obcaecati eum! Fugiat, aut
|
||||||
|
architecto vero, aperiam expedita nisi exercitationem harum reiciendis
|
||||||
|
placeat facilis cum, perspiciatis porro odit! Adipisci est asperiores
|
||||||
|
provident odio perspiciatis quam.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Facilis veritatis, aliquid sit itaque debitis veniam, aspernatur
|
||||||
|
deleniti beatae tempora a ut. Minima, doloremque aperiam? Doloremque
|
||||||
|
aspernatur impedit fuga sed nobis deserunt aliquid, atque amet, error
|
||||||
|
officiis molestias aperiam!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Doloribus suscipit magni voluptates facilis nam id possimus expedita
|
||||||
|
amet totam quis nisi adipisci praesentium sint quaerat, atque sit
|
||||||
|
nostrum eaque. Facere labore vero nulla tempora quod, modi repellat
|
||||||
|
deleniti!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Natus sunt pariatur enim explicabo expedita, magni temporibus vitae
|
||||||
|
distinctio nemo sint fugiat quis repudiandae, deserunt nulla officiis
|
||||||
|
facilis modi quo? Commodi qui veniam est nemo possimus distinctio,
|
||||||
|
libero molestias.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Nulla, velit magni cum expedita atque nisi quidem, accusamus similique
|
||||||
|
molestias repellat provident corporis tenetur optio. Tenetur,
|
||||||
|
repellendus, debitis at odio esse expedita commodi culpa quisquam,
|
||||||
|
libero velit sequi impedit?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quidem quas amet reprehenderit dolore fugit asperiores ratione
|
||||||
|
nesciunt, culpa perferendis incidunt velit earum illo ea odio ad ex
|
||||||
|
quae! Doloremque animi eligendi quos culpa deleniti voluptatibus
|
||||||
|
nulla, odio harum.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Asperiores tempora corrupti omnis maiores eaque! Dolores quo deleniti
|
||||||
|
modi deserunt rerum officia. Fugit velit, deserunt autem maxime veniam
|
||||||
|
modi, quaerat eligendi, unde pariatur illo accusantium adipisci sunt
|
||||||
|
soluta ratione?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Ex obcaecati adipisci, a eos dignissimos quas labore in temporibus
|
||||||
|
quam. Animi assumenda a eaque sapiente esse deleniti sit non
|
||||||
|
accusamus, ab facilis eius magni voluptates natus sunt modi nostrum.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Consequatur rem architecto porro laboriosam, itaque earum ipsam quos,
|
||||||
|
consectetur eaque voluptatem quod ipsa eum accusantium! Voluptate
|
||||||
|
magni quas, temporibus cumque rerum sint necessitatibus atque eligendi
|
||||||
|
ex ut maiores veniam?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Praesentium at ex illum laboriosam, corporis eum nihil pariatur,
|
||||||
|
veniam consequuntur, eos nobis. Neque accusantium ducimus sit
|
||||||
|
molestias labore assumenda quae suscipit, vero, eius at maiores ipsam,
|
||||||
|
ipsa distinctio minus!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Odit itaque ullam iste minus modi quidem voluptas est a, quia nemo.
|
||||||
|
Voluptatibus recusandae quos nostrum sint nihil, consequatur, mollitia
|
||||||
|
laboriosam voluptatem dolores animi impedit! Libero quaerat minima
|
||||||
|
cumque nisi.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Aliquid eos, esse facilis temporibus voluptas facere mollitia hic
|
||||||
|
corrupti recusandae placeat delectus ab sunt sequi ipsam maiores
|
||||||
|
tenetur excepturi unde ut perspiciatis quibusdam laudantium nemo.
|
||||||
|
Libero nobis officia et.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Tempora non, enim cum harum nihil amet asperiores eius ut possimus
|
||||||
|
saepe culpa incidunt! Assumenda facilis blanditiis, eveniet porro
|
||||||
|
quisquam iste voluptas quae, ea, doloremque magni laudantium animi sit
|
||||||
|
nostrum?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Error labore est nemo eveniet placeat doloribus tempora odio eum,
|
||||||
|
voluptatibus assumenda provident amet alias facere ad harum vel, sit
|
||||||
|
perspiciatis, maxime quasi ut! Tempora est facilis tenetur possimus
|
||||||
|
enim!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Corrupti ab consequatur dolorem tempore libero neque placeat nisi enim
|
||||||
|
ipsam iusto eveniet voluptas odit ut, sapiente esse aspernatur, ad
|
||||||
|
cumque quibusdam, eum soluta? Delectus magnam asperiores molestias
|
||||||
|
voluptatem obcaecati.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Unde nulla alias iusto amet, voluptas similique id illum nesciunt
|
||||||
|
molestiae inventore non esse molestias iure quod rem suscipit facilis
|
||||||
|
ducimus exercitationem blanditiis est delectus, quisquam magnam.
|
||||||
|
Placeat, velit ipsam.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Facilis pariatur laudantium dignissimos, officiis sit quidem dolores.
|
||||||
|
Tempora voluptatem deserunt velit excepturi ratione accusamus nulla
|
||||||
|
autem. Blanditiis autem maxime, optio, cupiditate quae quisquam
|
||||||
|
consectetur labore nesciunt debitis ut totam?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Consectetur debitis exercitationem facere reiciendis ea corrupti
|
||||||
|
labore praesentium molestias repellat delectus, minima dolores
|
||||||
|
doloremque repellendus odit quia tempora maiores, temporibus eius
|
||||||
|
perferendis? Possimus ex illo earum cupiditate, ratione excepturi?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Ea id quidem culpa laborum ad molestias iure ipsa fuga, eius
|
||||||
|
laboriosam praesentium, possimus ratione quibusdam repellendus ducimus
|
||||||
|
adipisci error rerum quos veniam? Maiores voluptatem reiciendis, earum
|
||||||
|
vitae nisi illo.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Fugit magnam dolorem nobis quisquam velit, sapiente ut quia molestias,
|
||||||
|
voluptas rem corporis eligendi vero explicabo corrupti voluptatem modi
|
||||||
|
fugiat saepe quaerat! Non sapiente provident inventore corporis
|
||||||
|
nesciunt in tenetur!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Voluptatum, quo dolorem. Similique, hic eligendi cupiditate laudantium
|
||||||
|
minus doloremque deleniti ipsum iusto quia iste? Laborum dolor rerum
|
||||||
|
asperiores quo quas accusamus quibusdam atque cum aut! Perspiciatis
|
||||||
|
laboriosam voluptates et.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Dicta, explicabo. Esse tenetur obcaecati hic iusto quasi aperiam eius
|
||||||
|
quod distinctio nesciunt nulla! Maiores officia numquam debitis
|
||||||
|
quisquam amet, odio hic illum corporis quidem cupiditate iste sit,
|
||||||
|
aspernatur sunt!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Odio veritatis quia sint aut rem quidem veniam quos dolores eos
|
||||||
|
distinctio quas dignissimos voluptatum nam, consequatur, ullam
|
||||||
|
blanditiis assumenda laudantium. Vitae quam exercitationem minus
|
||||||
|
consectetur quasi eaque, doloremque totam.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quidem blanditiis at, suscipit incidunt eligendi aliquam placeat
|
||||||
|
aperiam vitae quam nam quis distinctio iste quod? Voluptatibus, autem
|
||||||
|
atque veritatis, deserunt in error unde porro, est eos sit nihil odit?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Ipsa quidem dolorum iusto porro natus consectetur vitae facere amet
|
||||||
|
corrupti nemo quia adipisci nobis, praesentium delectus voluptatum
|
||||||
|
dolores, minus possimus alias odit! Dolorum laboriosam, voluptatum
|
||||||
|
tempore neque eos reiciendis.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Aut impedit ipsum molestiae ducimus nihil aliquid. Nihil rerum
|
||||||
|
architecto amet quisquam maxime alias, dolore porro officia labore,
|
||||||
|
saepe recusandae delectus dolorum earum maiores error sapiente,
|
||||||
|
eveniet consectetur. Beatae, nisi.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quia reiciendis rem eius eos ratione quis itaque fugiat dolore in
|
||||||
|
magnam? Mollitia excepturi, fuga eum optio, sunt et a soluta ex cum
|
||||||
|
tempore odit, atque minus rem aspernatur beatae?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Ut minima, eius nobis aspernatur iure unde beatae nostrum totam! Nihil
|
||||||
|
in voluptatum voluptas necessitatibus, quaerat amet quibusdam. Quis,
|
||||||
|
numquam! Numquam, sed magni? Aliquam hic in, earum voluptatum officia
|
||||||
|
quis.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Consequatur explicabo dignissimos natus dolor accusamus atque quia cum
|
||||||
|
autem aliquam. Eligendi aliquid mollitia, voluptas possimus sit ipsa
|
||||||
|
fugiat inventore? In quo aliquid officiis et incidunt, harum libero a
|
||||||
|
necessitatibus.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Saepe beatae illo nam hic optio. Et consectetur, modi unde ducimus
|
||||||
|
corporis animi nam repudiandae voluptates aut ratione, odio eveniet
|
||||||
|
quam ea? Sapiente, quos? At illo facere quod maiores provident?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Dolorum incidunt provident cumque veritatis, pariatur dolor dolore
|
||||||
|
deleniti dicta. Maiores laborum iusto ullam dolorem qui ipsum, beatae
|
||||||
|
laboriosam placeat dolores? Expedita, eos ut tempora nam commodi
|
||||||
|
quibusdam earum est!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Veniam quidem mollitia consequatur ullam velit ratione nostrum dolorum
|
||||||
|
dolores quos. Dicta dolorum quae perspiciatis, autem repellat itaque
|
||||||
|
praesentium amet possimus quaerat quis quisquam adipisci cumque
|
||||||
|
officiis voluptatem in exercitationem.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Eligendi beatae cupiditate perspiciatis at inventore blanditiis et
|
||||||
|
itaque facere. Tenetur pariatur blanditiis recusandae, debitis,
|
||||||
|
assumenda consequuntur molestias beatae quae quibusdam ipsum aliquam
|
||||||
|
nam eaque ut id molestiae iusto deserunt.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Dolorum optio itaque officiis at, ex, illum nam earum dolor architecto
|
||||||
|
beatae inventore similique, laborum atque modi! Quae sed debitis
|
||||||
|
repellat possimus odit quis amet. Itaque modi numquam consectetur
|
||||||
|
deserunt!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Sapiente provident aspernatur, assumenda maiores cumque suscipit ipsam
|
||||||
|
sit dolores cum architecto dolore numquam sunt doloribus. Eaque
|
||||||
|
expedita, aliquid quas impedit doloribus harum! Perferendis error
|
||||||
|
labore magnam nihil. Quas, assumenda?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Maiores quia reiciendis aliquid fuga laudantium, nesciunt laboriosam
|
||||||
|
soluta repudiandae ea ratione enim mollitia eaque eum sed autem porro
|
||||||
|
omnis! Veniam voluptatum, delectus ullam quod numquam enim dolor
|
||||||
|
blanditiis ut!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Accusamus inventore rem perferendis eligendi autem laudantium ab
|
||||||
|
veniam facere, accusantium, alias eum eaque commodi sapiente.
|
||||||
|
Blanditiis, voluptatibus natus? Atque sapiente distinctio voluptatum
|
||||||
|
earum! Quidem laboriosam id odio nisi necessitatibus.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Itaque, earum nihil? Repudiandae quod dolorem modi tempora corporis,
|
||||||
|
vel ut, soluta sapiente ipsam optio animi ea harum illum totam
|
||||||
|
molestiae voluptatibus nesciunt ipsum unde sunt autem perspiciatis
|
||||||
|
vero voluptatum!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Sed amet ducimus provident, nemo eos cumque nihil harum commodi quae
|
||||||
|
placeat deleniti ad animi atque reiciendis ex minima temporibus soluta
|
||||||
|
neque rem enim culpa earum? Hic modi eos corrupti!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quam minima error at eos repellat? Quos doloribus tempora animi unde
|
||||||
|
inventore voluptatibus, harum tenetur numquam exercitationem
|
||||||
|
dignissimos praesentium, magnam aut nisi libero molestiae totam
|
||||||
|
perspiciatis iure natus corrupti obcaecati!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Soluta, laboriosam! Quos veniam possimus labore distinctio,
|
||||||
|
voluptatibus corrupti minima quia reiciendis optio! Praesentium velit
|
||||||
|
repudiandae rerum error nemo odit, quis aperiam reprehenderit ab nihil
|
||||||
|
totam accusamus quisquam sunt provident?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Totam ipsum corporis quidem iusto fuga, laborum at reiciendis quos
|
||||||
|
officiis laudantium a et. Ratione, animi ut tempora, aliquam vero
|
||||||
|
reprehenderit officia fuga distinctio sint natus eligendi. Quos,
|
||||||
|
inventore nihil.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Minus, qui molestias eos eaque nemo placeat dolores cumque accusamus
|
||||||
|
accusantium laborum dolor itaque dignissimos quae rem facere nihil
|
||||||
|
provident rerum error ex ut ab asperiores amet. Veniam, sapiente
|
||||||
|
culpa.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Amet ipsa non quibusdam nesciunt possimus accusamus quo veritatis
|
||||||
|
aperiam accusantium distinctio nisi vel, illum unde cum est harum
|
||||||
|
tempora ut quisquam quod ducimus? Ipsam quam exercitationem iure fugit
|
||||||
|
asperiores.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Illum, ducimus cumque consectetur eius distinctio labore assumenda
|
||||||
|
illo similique! Quibusdam architecto non ea dolorem repudiandae.
|
||||||
|
Dolores laudantium eligendi vero laboriosam, corporis quos, nemo fuga
|
||||||
|
repellat nulla sunt nihil minus!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Eius minus fugit, quasi architecto nesciunt reiciendis eum recusandae
|
||||||
|
dignissimos nulla iusto enim quibusdam perferendis? Ullam beatae ab
|
||||||
|
incidunt tenetur numquam voluptates alias velit est eius at? Fugit,
|
||||||
|
repellendus laborum.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Perspiciatis itaque ea odio magni soluta repellat non aut, esse
|
||||||
|
voluptatibus pariatur vero, autem quis ut adipisci maiores? Velit
|
||||||
|
fugiat ea iusto praesentium cupiditate! Assumenda distinctio aliquam
|
||||||
|
error excepturi quos.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Reiciendis ducimus dignissimos delectus assumenda ipsa laudantium,
|
||||||
|
inventore, placeat excepturi laboriosam odio eius officiis neque
|
||||||
|
velit, porro qui omnis soluta blanditiis nihil id officia minima
|
||||||
|
expedita laborum esse? Inventore, voluptate.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quo, voluptate possimus ea ratione quidem ad accusamus. Alias cum
|
||||||
|
itaque perspiciatis et, asperiores debitis ratione delectus earum
|
||||||
|
accusamus distinctio doloribus incidunt corrupti quia voluptatum
|
||||||
|
reprehenderit autem nemo! Asperiores, aspernatur.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Qui unde impedit aliquid voluptas, obcaecati nihil necessitatibus
|
||||||
|
cumque corrupti harum accusantium tenetur ad eveniet repudiandae quam
|
||||||
|
facere eius est laudantium! Ea sit eaque fugit, dolores accusamus vero
|
||||||
|
soluta provident.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Natus, sapiente maxime aliquid modi velit quisquam ullam, vero sunt
|
||||||
|
minus cum sequi distinctio quia dolores possimus. Earum quae quibusdam
|
||||||
|
debitis porro, minima incidunt, eius deleniti, delectus repellat
|
||||||
|
architecto eligendi.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Voluptate eaque tenetur autem perferendis deleniti optio error
|
||||||
|
sapiente perspiciatis minus, quidem minima, recusandae illum unde
|
||||||
|
animi in, corrupti assumenda cum eos numquam sit nemo praesentium.
|
||||||
|
Nostrum modi ipsam vero?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Perferendis, atque sit. Cupiditate perferendis temporibus vel?
|
||||||
|
Excepturi commodi magnam doloribus, repellat numquam, aperiam ad
|
||||||
|
quisquam est dolorem earum veniam labore nesciunt. Dicta dolorum quam
|
||||||
|
quaerat eos nostrum voluptatem quae.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Nisi ab odio quia natus culpa maxime nulla provident illum ipsa iure
|
||||||
|
est, fugiat accusantium ipsum cumque quasi enim molestias deleniti
|
||||||
|
quidem adipisci possimus velit veniam voluptas laboriosam. Incidunt,
|
||||||
|
earum.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Iste rem, ullam labore iusto quo eligendi deserunt assumenda omnis
|
||||||
|
corporis earum. Odio laboriosam at harum eaque dolore velit quis
|
||||||
|
voluptates similique sint perferendis, earum illum corporis voluptas,
|
||||||
|
voluptatibus debitis.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Unde nam quisquam saepe impedit tempore laudantium omnis perferendis
|
||||||
|
placeat ex! Qui quos eos cupiditate placeat eius recusandae veritatis
|
||||||
|
facere ea, quam reiciendis consectetur ut eum enim, voluptate adipisci
|
||||||
|
quae!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Magni, fugit saepe autem dignissimos obcaecati hic dolorum sed.
|
||||||
|
Doloribus eligendi soluta sit dolores quae earum quo velit minima
|
||||||
|
voluptatem. Tempora dicta architecto soluta, corrupti quam culpa
|
||||||
|
praesentium incidunt fugiat?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Ipsam tenetur vitae totam neque quam! Assumenda quaerat laboriosam
|
||||||
|
atque voluptate ipsum labore totam perferendis nam numquam tempora
|
||||||
|
pariatur, amet error quidem quisquam iure ex, vero rem? Quisquam, fuga
|
||||||
|
quidem!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Autem similique porro reiciendis fugiat perspiciatis ducimus ipsum et
|
||||||
|
esse ratione voluptate exercitationem doloremque amet corporis
|
||||||
|
consequuntur tenetur animi veniam perferendis vitae, ea, sunt illo!
|
||||||
|
Facilis qui ut assumenda officia!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Cum, ratione incidunt. Libero repudiandae cum alias minus sit cumque,
|
||||||
|
assumenda beatae, distinctio enim aperiam aut illum voluptas neque
|
||||||
|
veniam aliquid? Ullam perferendis, neque voluptates assumenda tempora
|
||||||
|
repellendus voluptatibus explicabo.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quas quos aut, in a eum beatae impedit, deserunt dolor tempora quae
|
||||||
|
nam iste aspernatur voluptas ut nihil sunt officiis repudiandae
|
||||||
|
recusandae rem saepe, asperiores hic! Cupiditate quidem eos velit.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Animi, quaerat consectetur quo aliquid rerum possimus, fugiat ad
|
||||||
|
maiores fuga explicabo eaque ducimus. Quibusdam quos excepturi
|
||||||
|
doloremque a voluptate, tempora beatae blanditiis, pariatur adipisci
|
||||||
|
harum ipsa expedita, ipsam alias!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quae pariatur quam libero non repellendus animi sed, labore sint nisi
|
||||||
|
vel tempora velit dolorem distinctio veritatis suscipit molestias
|
||||||
|
dolor deserunt cum sequi eum ad? Vel reprehenderit ea deleniti earum.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quae fugit iure totam repellendus, facilis reiciendis laborum quaerat
|
||||||
|
praesentium dolores quasi! Pariatur praesentium, blanditiis in nam
|
||||||
|
placeat corporis culpa provident? Sunt repellendus perspiciatis quia
|
||||||
|
minima nihil sit fuga optio!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Est provident maxime et architecto reprehenderit a fugit placeat
|
||||||
|
veritatis, distinctio quibusdam illo facere, in laudantium minima
|
||||||
|
labore aperiam rem numquam molestiae mollitia expedita doloribus,
|
||||||
|
temporibus excepturi. Est, sed odio!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Ad nihil quas placeat est obcaecati veniam dolore ipsum aliquid
|
||||||
|
corporis reprehenderit soluta voluptatum odit repellat earum
|
||||||
|
voluptatem dicta laudantium autem quis quod, officia impedit nemo
|
||||||
|
cupiditate natus? Sequi, suscipit!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Tempora consequuntur est autem tempore maiores eius? Ratione nihil
|
||||||
|
esse architecto deserunt laudantium odio corrupti provident veritatis,
|
||||||
|
officia similique minima sit facere temporibus porro facilis quis
|
||||||
|
distinctio, tenetur neque maiores?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Praesentium odit facilis optio numquam, libero necessitatibus maiores
|
||||||
|
rem obcaecati ex ea consequatur laborum possimus! Quasi aut libero ad
|
||||||
|
commodi nisi beatae, a illo neque, cumque nam consectetur!
|
||||||
|
Consectetur, ut.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Magnam enim perferendis odit doloremque, provident ipsum laudantium
|
||||||
|
exercitationem minima voluptatibus et natus delectus recusandae quam
|
||||||
|
eligendi assumenda velit nam. Quae harum iusto, excepturi quibusdam
|
||||||
|
provident nulla culpa saepe velit.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Hic molestias quos accusamus ea. Quae ullam repellendus voluptates
|
||||||
|
repellat at quibusdam sed laudantium recusandae? Dolore placeat itaque
|
||||||
|
tempora velit facere similique numquam consequatur esse alias? Eius
|
||||||
|
sit quos facere.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Adipisci numquam corporis doloremque velit similique suscipit delectus
|
||||||
|
eligendi vero optio illo fugit sapiente at vitae ullam nam qui
|
||||||
|
praesentium, architecto autem laudantium quisquam. Laudantium maxime
|
||||||
|
iusto eum sunt iure?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Sint, possimus deleniti ipsum repudiandae praesentium rerum dolorem
|
||||||
|
totam pariatur facilis eos culpa animi cum dolorum excepturi ipsam
|
||||||
|
iusto dolor beatae. Minima, nesciunt repellendus! Velit, illo
|
||||||
|
blanditiis. Recusandae, asperiores explicabo.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Facere aperiam dolore, officiis repudiandae repellendus asperiores
|
||||||
|
nihil eum nam quae. Earum recusandae incidunt dolorem praesentium
|
||||||
|
maiores dignissimos ullam, nobis minima et ex, quaerat cum nulla
|
||||||
|
nesciunt sit temporibus. Fugiat!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Quidem commodi dolorem ipsum architecto modi veritatis rem excepturi
|
||||||
|
tenetur iste? Error exercitationem doloribus nulla obcaecati quam
|
||||||
|
quaerat rem quibusdam magnam sint similique quia reprehenderit iure
|
||||||
|
nisi, accusantium distinctio est.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Sequi animi nemo veniam adipisci laudantium? Aut possimus quis rerum
|
||||||
|
consectetur animi laborum, deleniti a quidem distinctio officia quam.
|
||||||
|
In corporis modi accusantium perferendis eveniet aliquam ducimus ab
|
||||||
|
velit amet.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Culpa molestiae, perferendis numquam beatae explicabo provident
|
||||||
|
corporis fugiat neque, expedita mollitia excepturi, quis aut ipsam?
|
||||||
|
Possimus accusantium ratione blanditiis quidem, explicabo vel et fugit
|
||||||
|
fuga excepturi quo tempora! Nulla.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Ipsa ipsam aliquid doloribus! Sunt natus, quod earum autem dignissimos
|
||||||
|
blanditiis corporis tempore, odio, deleniti provident ea illo commodi
|
||||||
|
consectetur. Dicta quaerat nostrum odio maxime ut ducimus corrupti
|
||||||
|
quos eaque.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Deleniti ipsam, dicta numquam dolore rem magni, porro tempora fuga
|
||||||
|
quibusdam voluptatibus quae labore quaerat nisi necessitatibus optio
|
||||||
|
asperiores alias consequuntur! Laborum possimus quidem vel! Facilis
|
||||||
|
perspiciatis obcaecati nam cumque?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Libero soluta quos illo, quisquam doloribus architecto reiciendis
|
||||||
|
consectetur doloremque similique provident cumque sunt totam nisi
|
||||||
|
quam, ab earum veniam fugiat! Consectetur, doloremque? Corrupti
|
||||||
|
quibusdam explicabo quod. Est, sint voluptatum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
194
style.css
Normal file
194
style.css
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
.parallax {
|
||||||
|
/* overflow: hidden; */
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
min-height: 75vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: "stack";
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax > * {
|
||||||
|
grid-area: stack;
|
||||||
|
animation: parallax linear;
|
||||||
|
animation-timeline: scroll();
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax > img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-header,
|
||||||
|
.hero {
|
||||||
|
--parallax-speed: 10;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__bg {
|
||||||
|
--parallax-speed: -10;
|
||||||
|
|
||||||
|
z-index: 1;
|
||||||
|
min-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__dust {
|
||||||
|
--parallax-speed: -20;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__luna {
|
||||||
|
--parallax-speed: 50;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__manny {
|
||||||
|
--parallax-speed: 30;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__jax {
|
||||||
|
--parallax-speed: 10;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__rays {
|
||||||
|
--parallax-speed: 50;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__foreground-front,
|
||||||
|
.parallax__foreground-back {
|
||||||
|
z-index: 999;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__foreground-back {
|
||||||
|
transform: scaleY(1.2);
|
||||||
|
transform-origin: bottom;
|
||||||
|
mix-blend-mode: hard-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
position: relative;
|
||||||
|
/* z-index: 1; */
|
||||||
|
background: hsl(238, 100%, 6%);
|
||||||
|
padding-block: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes parallax {
|
||||||
|
to {
|
||||||
|
transform:
|
||||||
|
translateY(calc(var(--parallax-speed) * 200px));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* general styling */
|
||||||
|
|
||||||
|
html {
|
||||||
|
color-scheme: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Rubik", sans-serif;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700; /* for demo only */
|
||||||
|
text-transform: uppercase; /* for demo only */
|
||||||
|
min-height: 300vh; /* for demo only */
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
width: min(65rem, 100% - 4rem);
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
font: inherit;
|
||||||
|
font-style: italic;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: rgb(227, 195, 14);
|
||||||
|
padding: 1em 2em;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0.125em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-header {
|
||||||
|
padding-block: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-header__inner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-nav ul {
|
||||||
|
flex: 1;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-nav a {
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
max-width: 100px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -3rem;
|
||||||
|
z-index: -1;
|
||||||
|
background: radial-gradient(hsl(0 0% 100% / 0.5), transparent 70%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
margin-block-start: max(20vh, 8rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__title {
|
||||||
|
font-size: 6rem;
|
||||||
|
max-width: 10ch;
|
||||||
|
line-height: 1;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 900;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 0.5em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: black;
|
||||||
|
z-index: -1;
|
||||||
|
scale: 2;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: blur(5rem);
|
||||||
|
translate: -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
171
styles copy.css
171
styles copy.css
@@ -1,171 +0,0 @@
|
|||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: black;
|
|
||||||
background-color: #FFEDE5;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
overflow-x: hidden;
|
|
||||||
/* Empêche le scroll horizontal */
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: white;
|
|
||||||
height: 4rem;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
float: right;
|
|
||||||
background-color: transparent;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
display: inline-block;
|
|
||||||
color: rgb(227, 195, 14);
|
|
||||||
padding: 18px 12px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: ease-in .3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: white;
|
|
||||||
background: #6aa9e895;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
padding-top: 12rem;
|
|
||||||
height: 100vh;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
perspective: 300px;
|
|
||||||
width: 100vw;
|
|
||||||
/* Force la largeur du viewport */
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax__group {
|
|
||||||
position: relative;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax__layer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sky {
|
|
||||||
background-color: white;
|
|
||||||
background: url('fond.png') no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: translateZ(-600px) scale(3);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bushes {
|
|
||||||
background: url('etoiles.png') no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: translateZ(-525px) scale(2.75);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.water {
|
|
||||||
background: url('texte.png') no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: translateZ(-400px) scale(2.33333333);
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.people1 {
|
|
||||||
background: url("personnages.png") no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: translateZ(-250px) scale(1.833333333);
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-container {
|
|
||||||
background-color: #FFEDE5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style du menu hamburger */
|
|
||||||
.menu-icon {
|
|
||||||
display: none;
|
|
||||||
/* Caché par défaut */
|
|
||||||
flex-direction: column;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
right: 1rem;
|
|
||||||
top: 1rem;
|
|
||||||
z-index: 1001;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-icon span {
|
|
||||||
background: rgb(227, 195, 14);
|
|
||||||
display: block;
|
|
||||||
height: 3px;
|
|
||||||
width: 25px;
|
|
||||||
margin: 5px 0;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Masquer la case à cocher */
|
|
||||||
#menu-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width:760px) {
|
|
||||||
.sky,
|
|
||||||
.bushes,
|
|
||||||
.water,
|
|
||||||
.people1 {
|
|
||||||
background-size: contain;
|
|
||||||
/* Remplit toute la largeur */
|
|
||||||
/*background-position: center; Centre les images */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 760px) {
|
|
||||||
.menu-icon {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
position: absolute;
|
|
||||||
top: 4rem;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Quand la case est cochée, afficher le menu */
|
|
||||||
#menu-toggle:checked+.menu-icon+nav {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
padding: 15px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
239
styles.css
239
styles.css
@@ -1,239 +0,0 @@
|
|||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: black;
|
|
||||||
background-color: #FFEDE5;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
overflow-x: hidden;
|
|
||||||
/* Empêche le scroll horizontal */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*.navbar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #d4af37;
|
|
||||||
height: 4rem;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre portée pour donner de la profondeur
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
display: inline-block;
|
|
||||||
color: white; /* Couleur du texte
|
|
||||||
padding: 18px 12px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: ease-in .3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: #d4af37; /* Couleur dorée au survol
|
|
||||||
background-color: white; /* Fond blanc au survol
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: white;
|
|
||||||
height: 4rem;
|
|
||||||
z-index: 1000;
|
|
||||||
overflow: hidden; /* Pour s'assurer que le pseudo-élément reste à l'intérieur */
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
float: right;
|
|
||||||
background-color: transparent;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
display: inline-block;
|
|
||||||
color: rgb(227, 195, 14);
|
|
||||||
padding: 18px 12px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: ease-in .3s;
|
|
||||||
font-size: 2rem; /* Augmente la taille de la police */
|
|
||||||
/*font-family: Arial, Helvetica, sans-serif; Utilise Arial comme police principale */
|
|
||||||
font-family: 'Times New Roman', Times, serif; /* Utilise Times New Roman comme police principale */
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: black;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
padding-top: 12rem;
|
|
||||||
height: 100vh;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
perspective: 300px;
|
|
||||||
width: 100vw;
|
|
||||||
/* Force la largeur du viewport */
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax__group {
|
|
||||||
position: relative;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax__layer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sky {
|
|
||||||
background-color: white;
|
|
||||||
background: url('fond.png') no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: translateZ(-600px) scale(3);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bushes {
|
|
||||||
background: url('etoiles.png') no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: translateZ(-525px) scale(2.75);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.water {
|
|
||||||
background: url('texte.png') no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: translateZ(-400px) scale(2.33333333);
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.people1 {
|
|
||||||
background: url("personnages.png") no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: translateZ(-250px) scale(1.833333333);
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-container {
|
|
||||||
background-color: #FFEDE5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style du menu hamburger */
|
|
||||||
.menu-icon {
|
|
||||||
display: none;
|
|
||||||
/* Caché par défaut */
|
|
||||||
flex-direction: column;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
right: 1rem;
|
|
||||||
top: 1rem;
|
|
||||||
z-index: 1001;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-icon span {
|
|
||||||
background: rgb(227, 195, 14);
|
|
||||||
display: block;
|
|
||||||
height: 3px;
|
|
||||||
width: 25px;
|
|
||||||
margin: 5px 0;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Masquer la case à cocher */
|
|
||||||
#menu-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-container {
|
|
||||||
display: flex; /* Utilise flexbox pour aligner le contenu */
|
|
||||||
align-items: center; /* Centre verticalement le contenu */
|
|
||||||
padding: 2rem; /* Espace autour du contenu */
|
|
||||||
background-color: rgba(255, 237, 229, 0.8); /* Fond légèrement coloré */
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-content {
|
|
||||||
display: flex; /* Utilise flexbox pour le contenu de l'à propos */
|
|
||||||
width: 100%; /* Prend toute la largeur */
|
|
||||||
max-width: 1200px; /* Limite la largeur maximale */
|
|
||||||
margin: 0 auto; /* Centre le contenu */
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-image {
|
|
||||||
flex: 1; /* Prend un espace flexible */
|
|
||||||
text-align: center; /* Centre l'image horizontalement */
|
|
||||||
padding-right: 1rem; /* Espace entre l'image et le texte */
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-image img {
|
|
||||||
width: 80%; /* Ajuste la taille de l'image */
|
|
||||||
max-width: 300px; /* Largeur maximale pour l'image */
|
|
||||||
border-radius: 15px; /* Bords arrondis */
|
|
||||||
box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* Halo lumineux */
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-text {
|
|
||||||
flex: 2; /* Prend un espace flexible */
|
|
||||||
color: black; /* Couleur du texte */
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-text h2 {
|
|
||||||
font-size: 2rem; /* Taille de la police pour le titre */
|
|
||||||
margin-bottom: 1rem; /* Espace sous le titre */
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-text p {
|
|
||||||
font-size: 1rem; /* Taille de la police pour le texte */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width:761px) {
|
|
||||||
.sky,
|
|
||||||
.bushes,
|
|
||||||
.water,
|
|
||||||
.people1 {
|
|
||||||
background-size: contain;
|
|
||||||
/* Remplit toute la largeur */
|
|
||||||
/*background-position: center; Centre les images */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 760px) {
|
|
||||||
.menu-icon {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
position: absolute;
|
|
||||||
top: 4rem;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Quand la case est cochée, afficher le menu */
|
|
||||||
#menu-toggle:checked+.menu-icon+nav {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
padding: 15px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user