diff --git a/Projects/Pepsi-Landing-Page/img/background.jpg b/Projects/Pepsi-Landing-Page/img/background.jpg new file mode 100644 index 0000000..3da5ef0 Binary files /dev/null and b/Projects/Pepsi-Landing-Page/img/background.jpg differ diff --git a/Projects/Pepsi-Landing-Page/img/close.png b/Projects/Pepsi-Landing-Page/img/close.png new file mode 100644 index 0000000..78c8d8a Binary files /dev/null and b/Projects/Pepsi-Landing-Page/img/close.png differ diff --git a/Projects/Pepsi-Landing-Page/img/img2.png b/Projects/Pepsi-Landing-Page/img/img2.png new file mode 100644 index 0000000..05f9e1c Binary files /dev/null and b/Projects/Pepsi-Landing-Page/img/img2.png differ diff --git a/Projects/Pepsi-Landing-Page/img/logo.png b/Projects/Pepsi-Landing-Page/img/logo.png new file mode 100644 index 0000000..daac5c2 Binary files /dev/null and b/Projects/Pepsi-Landing-Page/img/logo.png differ diff --git a/Projects/Pepsi-Landing-Page/img/menu.png b/Projects/Pepsi-Landing-Page/img/menu.png new file mode 100644 index 0000000..5a20ec1 Binary files /dev/null and b/Projects/Pepsi-Landing-Page/img/menu.png differ diff --git a/Projects/Pepsi-Landing-Page/img/pepsi.png b/Projects/Pepsi-Landing-Page/img/pepsi.png new file mode 100644 index 0000000..9d41270 Binary files /dev/null and b/Projects/Pepsi-Landing-Page/img/pepsi.png differ diff --git a/Projects/Pepsi-Landing-Page/img/pepsi1.png b/Projects/Pepsi-Landing-Page/img/pepsi1.png new file mode 100644 index 0000000..f55465f Binary files /dev/null and b/Projects/Pepsi-Landing-Page/img/pepsi1.png differ diff --git a/Projects/Pepsi-Landing-Page/img/pepsi2.png b/Projects/Pepsi-Landing-Page/img/pepsi2.png new file mode 100644 index 0000000..d5267aa Binary files /dev/null and b/Projects/Pepsi-Landing-Page/img/pepsi2.png differ diff --git a/Projects/Pepsi-Landing-Page/index.html b/Projects/Pepsi-Landing-Page/index.html new file mode 100644 index 0000000..14c995f --- /dev/null +++ b/Projects/Pepsi-Landing-Page/index.html @@ -0,0 +1,96 @@ + + + + + + Pepsi Website Landing Page + + + +
+
+ +
+ +
+
+
+

That's What
I like

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmo, tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis strv ation ullamco laboris nisi u iquicex ea + mmo. +

+ View All Products +
+
+ pepsi +
+
+ + + +
+ +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Projects/Pepsi-Landing-Page/style.css b/Projects/Pepsi-Landing-Page/style.css new file mode 100644 index 0000000..744fa52 --- /dev/null +++ b/Projects/Pepsi-Landing-Page/style.css @@ -0,0 +1,302 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} +body { + background-image: url("img/background.jpg"); + background-attachment: fixed; +} + +section { + position: relative; + width: 100%; + min-height: 100vh; + padding: 100px; + display: flex; + justify-content: space-between; + align-items: center; + transition: 0.5s; +} + +header { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding: 20px 100px; + display: flex; + justify-content: space-between; + align-items: center; +} + +header .logo { + position: relative; + max-width: 80px; + animation: bounceIn 0.6s; + transform: rotate(0deg) scale(1) translateZ(0); + transition: all 0.4s cubic-bezier(0.8, 1.8, 0.75, 0.75); + cursor: pointer; +} + +header .logo:hover { + transform: rotate(10deg) scale(1.1); +} + +header ul { + position: relative; + display: flex; +} + +header ul li { + list-style: none; +} + +header ul li a { + display: inline-block; + color: #fff; + font-weight: 400; + margin-left: 40px; + text-decoration: none; +} + +.content { + position: relative; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.content .textBox { + position: relative; + max-width: 600px; +} + +.content .textBox h2 { + color: #fff; + font-size: 4em; + line-height: 1.5rem; + font-weight: 900; + text-transform: uppercase; + line-height: 1.5em; +} + +.content .textBox h2 span { + font-size: 2em; +} + +.content .textBox p { + color: #fff; +} + +.content .textBox a { + display: inline-block; + margin-top: 20px; + padding: 8px 20px; + background: rgb(7, 21, 221); + color: rgb(255, 255, 255); + border-radius: 40px; + font-weight: 500; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #fff; + box-shadow: 2px 2px 5px rgb(31, 51, 238); +} + +.content .textBox a:hover { + animation: glowing 1300ms infinite; + color: #ff0202; + box-shadow: 0 0 15px #d35400; + text-shadow: 0 0 15px #d35400; +} + +.content .imgBox { + width: 600px; + display: flex; + padding-right: 50px; + margin-top: 50px; + justify-content: flex-end; +} + +.content .imgBox img { + max-width: 500px; +} +.content .imgBox img .pepsi { + width: 110px; + height: 234px; +} + +.thumb { + position: absolute; + left: 50%; + bottom: 20px; + transform: translateX(-50%); + display: flex; +} + +.thumb li { + list-style: none; + display: inline-block; + margin: 0 20px; + cursor: pointer; + transition: 0.5s; +} + +.thumb li:hover { + transform: translateY(-15px); +} + +.thumb li img { + max-width: 80px; +} + +.social { + position: absolute; + top: 50%; + right: 30px; + transform: translateY(-50%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.social li { + list-style: none; +} + +.social li a { + display: inline-block; + margin-left: 15px; + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + transition: 0.2s ease-in-out; +} + +.social li a:hover { + transform: translateX(5px); +} + +.social li a img { + filter: invert(1); + transform: scale(0.5); +} + +/************SCROLLBAR**********? +/* width */ +::-webkit-scrollbar { + width: 12px; + background-color: #000000; +} + +/* Track */ +::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgb(0, 17, 252); + border-radius: 10px; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: rgba(11, 33, 224, 0.842); + border-radius: 10px; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background-image: linear-gradient(45deg, #0011ff, #fff, #ff0000); +} + +@media (max-width: 991px) { + header { + padding: 40px; + } + section { + padding: 150px 40px; + } + + header .navigation { + display: none; + } + header .navigation.active { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #1e32e5; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 10; + } + header .navigation li a { + margin: 10px 0; + font-size: 1.5rem; + font-weight: 300; + } + .toggle { + position: relative; + width: 30px; + height: 30px; + background: url(img/menu.png); + background-size: 30px; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + z-index: 10000; + } + .toggle.active { + position: fixed; + right: 40px; + background: url(img/close.png); + background-size: 25px; + background-repeat: no-repeat; + background-position: center; + } + .content { + flex-direction: column; + margin-top: 80px; + } + .content .textBox { + position: relative; + max-width: 100%; + padding-right: 50px; + } + + .imgBox .pepsi { + height: 400px; + object-fit: contain; + } + + .content .textBox h2 { + font-size: 2.5em; + } + + .content .textBox a { + font-size: 14px; + padding: 8px 15px; + } + .content .imgBox { + width: 100%; + display: flex; + padding-right: 0; + margin-top: 50px; + justify-content: center; + } + .content .imgBox img { + margin-top: 50px; + display: flex; + flex-direction: column; + align-items: center; + width: 22em; + } +}