diff options
Diffstat (limited to 'lab/parallax.html')
| -rw-r--r-- | lab/parallax.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/lab/parallax.html b/lab/parallax.html new file mode 100644 index 0000000..f3ab3da --- /dev/null +++ b/lab/parallax.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>CSS Scrolling Parallax</title> + + <link rel="stylesheet" href="assets/css/chota.min.css"> + <style type="text/css"> + header { + background-image: url("assets/images/illustration-ronce_2400x1531px.png"); + position: fixed; + height: 100vh; + width: 100vw; + /* Create the parallax scrolling effect */ + /* background-attachment: fixed; */ + background-position: center; + /* background-repeat: no-repeat; */ + background-repeat: no-repeat; + background-size: cover; + } + + header h1 { + text-align: center; + color: #fafafa; + margin-top: 35vh; + } + + + main { + max-width: 100%; + position: relative; + top: 95vh; + padding: 50px; + font-size: 20px; + } + + section { + padding: 2rem; + margin-bottom: 4rem; + background-color: #fff; + } + </style> +</head> + +<body> + <header> + <h1>Coucou</h1> + </header> + <main> + <section> + <h1>Cute Kitten</h1> + <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p> + + <p>Flank spare ribs capicola, strip steak biltong pancetta bresaola tri-tip cow landjaeger. Short ribs sirloin beef ribs, flank capicola ribeye turducken. Sirloin boudin andouille tail. Ham flank tail sausage t-bone, jerky landjaeger kevin porchetta ground round pork belly.</p> + </section> + <section> + <h1>Boring</h1> + <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p> + </section> + <section> + <h1>Fluffy Kitten</h1> + <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p> + <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p> + </section> + </main> +</body> + +</html>
\ No newline at end of file |