add coming soon page

solygambas · solygambas · commit ae81462829ea · 2021-03-29T13:28:58.000+02:00
diff --git a/85-sneaker shop/index.html b/85-sneaker shop/index.html
@@ -12,7 +12,7 @@
   <body>
     <header class="hero">
       <div class="container spacing">
-        <h1 class="primary-title">Amazing sneakers at an amazing price</h1>
+        <h1 class="primary-title">It's okay to be a little obsessed with shoes</h1>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
           perspiciatis facilis beatae laudantium quidem enim sit sequi!
diff --git a/86-coming soon page/index.html b/86-coming soon page/index.html
@@ -0,0 +1,18 @@
+<!-- Based on Fun ways to animate CSS gradients by Kevin Powell (2019)
+see: https://www.youtube.com/watch?v=f3mwKLXpOLk -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Coming Soon</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="title">We Are Coming Soon</h1>
+      <button class="btn">Subscribe</button>
+    </div>
+  </body>
+</html>
diff --git a/86-coming soon page/style.css b/86-coming soon page/style.css
@@ -0,0 +1,86 @@
+@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
+
+:root {
+  --gradient: linear-gradient(90deg, #7f7fd5, #86a8e7, #f64f59);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Bungee", cursive;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  font-size: 1.125em;
+  line-height: 1.6;
+  background: #7f7fd5;
+  /* we are playing with background-position since background-image doesn't support transitions */
+  background-size: 300%;
+  background-image: var(--gradient);
+  animation: bg-animation 20s infinite alternate;
+}
+
+@keyframes bg-animation {
+  0% {
+    background-position: left;
+  }
+  100% {
+    background-position: right;
+  }
+}
+
+.container {
+  background: #fff;
+  width: 70vw;
+  padding: 3rem;
+  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  margin: 1rem;
+  padding: 1rem;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: 900;
+  font-style: italic;
+  font-size: 3rem;
+  color: #7f7fd5;
+  line-height: 0.8;
+  background-image: var(--gradient);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  background-size: 300%;
+  transition: background-position 1s;
+}
+
+.title:hover {
+  background-position: right;
+}
+
+.btn {
+  color: #fff;
+  font: inherit;
+  border: 0;
+  cursor: pointer;
+  padding: 0.5rem 1.25rem;
+  background: var(--gradient);
+  background-size: 300%;
+  background-position: left;
+  transition: background-position 350ms;
+}
+
+.btn:hover {
+  background-position: right;
+}
diff --git a/README.md b/README.md
@@ -91,6 +91,7 @@
 | 83  | [Full-Screen Image Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/83-full%20screen%20image%20slider)       | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb)  |
 | 84  | [Fluid Image Lightbox](https://github.com/solygambas/html-css-fifty-projects/tree/master/84-fluid%20image%20lightbox)                 | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg)  |
 | 85  | [Sneaker Shop](https://github.com/solygambas/html-css-fifty-projects/tree/master/85-sneaker%20shop)                                   | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ)  |
+| 86  | [Coming Soon Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/86-coming%20soon%20page)                         | [Live Demo](https://codepen.io/solygambas/pen/bGgwNaM)   |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):
 
@@ -103,3 +104,4 @@ The other projects are adapted from various YouTube channels:
 - Shaun Pelling - [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
 - Simo Edwin - [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q)
 - Gary Simon - [DesignCourse](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow)
+- [Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw)
