diff --git a/hero.png b/hero.png new file mode 100644 index 0000000..e7368dc Binary files /dev/null and b/hero.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..43a4dae --- /dev/null +++ b/index.html @@ -0,0 +1,181 @@ + + + + + + + + adidas animated landing page + + + + + + + + + + +
+ +
+
+
+ +
+ +
+
+
+
+ + + +
+

adidas.

+
+ +
+

The pure comfort is here !

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f8de8d2 --- /dev/null +++ b/style.css @@ -0,0 +1,215 @@ +* { + margin: 0; + padding: 0; +} + +html, +body { + width: 100%; + height: 100vh; + font-family: 'poppins'; + font-size: 14px; + background-color: #8c6c79; + color: #fff; + overflow: hidden; +} + +.nav { + position: fixed; + width: 100%; + height: 100px; + top: 10px; +} + +.logo, +.menu, +.search, +.bag { + position: absolute; + padding: 10px; + margin-top: 10px; +} + +.logo { + left: 20px; + font-size: 20px; + font-weight: bolder; +} + +.menu { + left: 150px; + top: 4px; + line-height: 1.2; + font-size: 20px; +} + +.search, +.bag { + background: #fff; + color: black; + border-radius: 50%; + height: 20px; + width: 20px; + text-align: center; + margin-top: 18px; +} + +.search { + right: 140px; +} + +.bag { + right: 40px; +} + +.product-img { + width: 900px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -40%); + z-index: 2; +} + +.product-text { + position: absolute; + top: 43%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.product-title { + color: #f2d16b; + font-weight: 900; + letter-spacing: -10px; + font-size: 280px; +} + +.product-desc { + display: flex; + justify-content: center; + position: relative; + bottom: -585px; + z-index: 2; +} + +.product-desc p { + position: absolute; + font-size: 20px; + top: -500px; + letter-spacing: 20px; + text-transform: uppercase; +} + +.product-desc button { + margin-top: 10px; + background: #f2d16b; + color: black; + font-weight: bold; + padding: 15px 30px; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 10px; + border: none; + border-radius: 30px; +} + +.size { + position: absolute; + left: 50px; + bottom: 40px; +} + +.size ul { + list-style: none; +} + +.size ul li { + display: inline-block; + font-weight: 500; + border: 1px solid #fff; + padding: 5px; + border-radius: 50%; + margin-left: 10px; + height: 20px; + width: 20px; + text-align: center; + line-height: 1.5; + transition: .3s ease-in-out; +} + +.size span { + font-weight: 500; +} + +.size span::after { + display: inline-block; + content: ""; + border: .5px solid #fff; + opacity: .5; + width: 50px; + margin: 0 0 0 10px; + transform: translateY(-4px); +} + +.bottom-img { + position: absolute; + bottom: 80px; + right: 20px; + background: url('white-shoe.png') no-repeat; + background-position: center; + background-size: cover; + width: 220px; + height: 150px; +} + +.bottom-right { + position: absolute; + bottom: 0; + left: 86.5%; +} + +.bottom-right ul { + list-style: none; +} + +.bottom-right ul li { + display: inline-block; + padding: 10px 15px; + margin: 20px 20px 20px 0; + background: #624652; +} + +.media ul { + list-style: none; + position: fixed; + left: 45px; + top: 35%; +} + +.media ul li { + font-size: 18px; + margin: 24px 0; +} + +.overlay { + position: absolute; + width: 100%; + height: 100%; + left: 0%; + z-index: 2; + background: #fff; +} + +.first { + top: 0; +} + +.second { + top: 33.3%; +} + +.third { + top: 66.6%; +} \ No newline at end of file diff --git a/white-shoe.png b/white-shoe.png new file mode 100644 index 0000000..ab64c46 Binary files /dev/null and b/white-shoe.png differ