diff --git a/footer.js b/footer.js new file mode 100644 index 0000000..c293071 --- /dev/null +++ b/footer.js @@ -0,0 +1,47 @@ +let footer=()=>{ + return ` +
+ +
+
+ +
+
+
+

SUBSCRIBE TO OUR NEWSLETTER

+
+

INFORMATION

+
+
+

GET THE SUGAR APP TODAY.

+

Tap into a better shopping experience.

+
+
+
+

Stores

+

Terms & Conditions

+

Returns

+

FAQs

+

About Us

+
+
GET IN TOUCH
+ +
+

Copyright © 2022 SUGAR Cosmetics. All rights reserved.

+`; +} + +export {footer}; \ No newline at end of file diff --git a/header.js b/header.js new file mode 100644 index 0000000..40a7aec --- /dev/null +++ b/header.js @@ -0,0 +1,96 @@ +let header = () => { + return `
+
+ + +
+
+ + + + +
+ + +
+ + + +
+ + + + + + + ` + +} +export { header } \ No newline at end of file diff --git a/home.css b/home.css new file mode 100644 index 0000000..fb176d6 --- /dev/null +++ b/home.css @@ -0,0 +1,905 @@ +@import url("https://use.typekit.net/zna8lui.css"); + +#head1 { + display: flex; + padding: 20px; + width: 100%; + + background-color: whitesmoke; +} +#header{ + width: 100%; + position: fixed; + + top: 0; + z-index: 1; +} + +.navbar{ + width: 100%; +} +#logo { + width: 250px; + + +} + +#search { + width: 52%; + + display: inline-flex; + +} + +#search-bar { + width: 90%; + margin-top: 10px; + margin-left: 30px; + margin-bottom: 10px; + border: none; + border-bottom-left-radius: 30px; + border-top-left-radius: 30px; + font-family: quicksand, sans-serif; + + font-weight: 400; + + font-style: normal; + font-size: 17px; + padding-left: 30px; + outline: none; + +} + +* { + box-sizing: border-box; + margin: revert; + padding: revert; +} + +body { + margin: 0px; + font-family: quicksand, sans-serif; + + font-weight: 400; + + font-style: normal; + +} + +#search-icon { + margin-top: 10px; + margin-bottom: 10px; + width: 18%; + border: none; + border-bottom-right-radius: 30px; + border-top-right-radius: 30px; + color: white; + background-color: black; + font-family: quicksand, sans-serif; +padding: 0; +font-weight: 400; +font-size: 20px; + cursor: pointer; +} + +#login-signup a{ + + + font-size: 20px; + color: black; + font-family: quicksand, sans-serif; + + font-weight: 400; + +} +#login-signup{ + + align-self: center; +} + + +.icon-c { + width: 30px; + height: 30px; + padding: 5px; + margin-top: 20px; + +} + + + +#user { + padding-left: 120px; + + /* Carousel */ + +} +#heart { + + padding-left: 120px; +} + +.carousel { + background: #fff; + width: 100%; +margin-top: 100px; + + +} + +.carousel-cell { + + width: 100%; + margin: 0px; + /* center images in cells with flexbox * + display: flex; + align-items: center; + justify-content: center; */ +} + +.carousel.is-fullscreen .carousel-cell { + width: 100%; +} + +.carousel-cell-image { + display: block; + width: 100%; + +} + +.carousel.is-fullscreen .carousel-cell-image { + width: 100%; + +} + + +.refer-h1 { + + margin-top: 25px; + padding: 15px; + text-align: center; + + font-family: quicksand, sans-serif; + font-size: 40px; +} + +#refimg { + + width: 92%; + margin-top: 10px; + margin-right: 50px; + margin-left: 60px; + margin-bottom: 10px; + +} + +#ref-h2 { + margin-top: 10px; +} + +#video { + + margin-left: 150px; +} + +/* dropdown navbar */ + +.navbar { + overflow: hidden; + height: 60px; + padding-left: 40px; + background-color: rgb(255, 255, 255); +} + +.navbar a { + float: left; + font-size: 17px; + color: #6c757d; + font-weight: 700; + + font-style: normal; + text-align: center; + padding: 20px 25px; + text-decoration: none; +} + +.dropdown { + float: left; + overflow: hidden; +} + +.dropdown .dropbtn { + font-size: 17px; + font-weight: 700; + + font-style: normal; + border: none; + outline: none; + color: #6c757d; + padding: 20px 25px; + background-color: inherit; + font-family: inherit; + margin: 0; +} + +.navbar a:hover, .dropdown:hover .dropbtn { + /*background-color: red;*/ + text-shadow:2px 2px 5px #6c757d; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 200px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +.dropdown-content a { + float: none; + color: black; + padding: 16px 20px; + text-decoration: none; + display: block; + text-align: left; + font-family: quicksand, sans-serif; + font-size:13px; + font-weight:500; + + line-height:1.6; +} + +.dropdown-content a:hover { + + font-weight:600; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +.carousel-1 { + + width:80%; + height:fit-content; + + margin:auto; + +} + +.carousel-cell-1 { + width: 20%; + height: fit-content; + margin-right: 10px; + background: white; + + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + counter-increment: carousel-cell; + margin: 20px;; + padding:0; +} + +.carousel-cell-1.is-selected { + + width:20%; + margin:20px; +} + +/* cell number */ +.carousel-cell-1:before { + display: block; + text-align: center; + + line-height: 200px; + font-size: 80px; + color: white; + width:20%; +} +.carousel-img{ + width:100%; + + padding:10px; + margin:0; +} +h5{ + /*margin-top:10px; + margin-left:25%;*/ + margin: auto; + text-align: center; + font-size: 15px; + height: 50px; +} +.price{ + + margin-left:40%; + margin-top: 25px; + margin-bottom: 25px; + +} +.add-to-cart{ +color:white; +background:black; +height:60px; + text-align:center; + padding:22px; + margin-top: 15px; +} + +#ref-h3 { + margin-top: 10px; +} +#ref-h4 { + margin-top: 15px; + margin-bottom: 25px; + + text-align: center; + + font-family: quicksand, sans-serif; + font-size: 40px; +} + +.carousel-2 { + + width:100%; + + margin:auto; + + } + + .carousel-cell-2 { + width:33%; + background: white; + counter-increment: carousel-cell; + + padding:0; + } + + .carousel-cell-2.is-selected { + + width:33%; + + } + + /* cell number */ + .carousel-cell-2:before { + display: block; + text-align: center; + color: white; + width:33%; + } + .carousel-img-2{ + width:100%; + padding: 20px; + /*height:260px; + padding:10px; + margin-left:30px;*/ + } + #new-launch { + margin-top: 0px; + margin-bottom: 17px; + + text-align: center; + + font-family: quicksand, sans-serif; + font-size: 40px; +} + + + + + + + + +.carousel-3 { + + width:90%; + margin:auto; + height:500px; + + +} +.carousel-cell-3 { + margin: 0px; + + padding: 0px; + height: 100%; + + +} + + +.carousel-cell-3 { + + padding: 10px; + + + display: block; + width: 22%; + border-radius: 20px; + overflow-y: auto; + overflow-x: hidden; + +} + +.carousel-cell-3.is-selected { + width: 22%; + height: 100%; + border-radius: 20px; + +} + +/* cell number */ +.carousel-cell-3:before { + display: block; + width: 22%; + height: 100%; + border-radius: 20px; +} +#rakhi{ + margin-top: 36%; + margin-bottom: 36%; +} +#tot img{ + width: 85%; + +}/* +#tot{ + margin-left: 40px; +}*/ +#tot{ + display: grid; + grid-template-columns: 50% 50%; + justify-items: center; + +} + +#explore-img img{ + width: 85%; +} +#explore-img { + /* margin-left: 20px;*/ + display: grid; + grid-template-columns: 25% 25% 25% 25%; + + justify-items: center; +} + + +#mainfooter{ + + background-color: black; + + text-align: center; + color: gray; + font-family: sans-serif; + + +} +#footersugaricon>img{ + height: 140px; + width: 140px; +} +#footersocialmedia>img{ + height: 25px; + width: 25px; + +} +#footersocialmedia{ + display: flex; + justify-content: center; + gap: 40px; +} +#twofooters{ + display: flex; + + justify-content: space-around; + margin-top: 40px; + +} + +#thright img{ + height: 30px; + width: 100px; +} +#tfleft{ + width: 450px; + text-align: left; + +} +#footsignup>input{ + background-color: black; + color: gray; + height: 30px; + width: 300px; + border: none; + border-bottom: 2px solid white; +} +#footsignup{ + margin-top: 40px; + display: flex; + gap: 20px; + +} +#footsignup>button{ + border-radius: 4px; + background-color: rgb(240, 52, 83); + padding: 10px; + color: aliceblue; +} +#thright{ + + width: 500px; + text-align: left; +} +#thr1{ + display: flex; +} +#thr1>p{ + width: 180px; +} +#playstore{ + display: flex; + align-items: center; +} +#write1{ + display: flex; + gap: 80px; + margin-left: 100px; +} + +#git{ + margin-top: 20px; + margin-left: 7.4%; + display: flex; + justify-content: left; + font-weight: 500; + color: aliceblue; +} +#foot{ + display: flex; + /* gap: 50px; */ + justify-content: space-evenly; +} +#footlast{ + color: white; + font-weight: 500; + padding: 15px; +} +#fut{ + display: flex; + gap: 10px; +} +.footseclast,#footseclast1{ + text-align: left; +} +.footseclast >p:first-child,#fut p{ + color: aliceblue; + font-weight: 400; +} +#footseclast1>p{ + margin-top: 0px; + + + + + /* MEDIA QUERIES */ +} +@media screen and (min-width: 768px ) and (max-width:1100px) { + .carousel{ + width:100%; + + } + + #refimg{ + margin: 0; + width: 100%; + } + + .carousel-1{ + height: fit-content; + } + + + .carousel-cell-1{ + + width: 30%; + } + .carousel-cell-1.is-selected{ + + width: 30%; + } + .carousel-cell-1:before{ + + width: 30%; + } + + + /*#header{ + width: 100%; + + } + #head1{ + width: 100%; + }*/ + + + #video{ + width: 100%; + height: 400px; +margin: 0; + + + border: none; + } + + + +.carousel-cell-2{ + width: 50%; +} +.carousel-cell-2.is-selected{ + + width: 50%; +} +.carousel-cell-2:before{ + + width: 50%; +} +.carousel-cell-3{ + width: 33%; +} +.carousel-cell-3.is-selected{ + + width: 33%; +} +.carousel-cell-3:before{ + + width: 33%; +} + +#explore-img{ + grid-template-columns: 1fr 1fr; + gap: 10px; +} +#bar-icon{ + width: 150px; + margin-top: 25px; + display: none; +} +} + + + +@media screen and (min-width: 868px){ + #bar-icon{ + display: none; + } + +} + + +@media screen and (max-width: 868px) { + .navbar{ + display: none; + + } + #mainfooter{ + display: none; + } + #search{ + display: none; + } + #bar-icon{ + display: block; + font-size: 20px; + padding-left: 70px; + height: 40px; + margin-top: 25px; + + } + } + + @media screen and (max-width: 600px){ + .navbar{ + display: none; + + } + #ref-h4, #ref-h3, #ref-h2, .refer-h1,#new-launch{ + font-size: 30px; + } + + #mainfooter{ + display: none; + } + #search{ + display: none; + } + #bar-icon{ + display: block; + font-size: 20px; + padding-left: 70px; + height: 40px; + margin-top: 25px; + + } + .login-signup { + display: none ; + } + + .icon-c{ + display: none; + } + + #video{ + + height: 150px; + width: 100%; + margin: 0; + border: none; + } + + #refimg{ +margin: 0; +width: 100%; + } + + .carousel{ + width:100%; + + } + + .carousel-1{ + height: fit-content; + + } + + + .carousel-cell-1{ + + width: 70%; + + } + .carousel-cell-1.is-selected{ + + width: 70%; + + } + .carousel-cell-1:before{ + + width: 70%; + + } +.carousel-cell-2{ + width: 100%; +} +.carousel-cell-2.is-selected{ + + width: 100%; +} +.carousel-cell-2:before{ + + width: 100%; +} +.carousel-cell-3{ + width: 100%; +} +.carousel-cell-3.is-selected{ + + width: 100%; +} +.carousel-cell-3:before{ + + width: 100%; +} +#explore-img{ + grid-template-columns: 100%; + gap: 10px; + } + #tot{ + grid-template-columns: 100%; + gap: 10px; + } + + + } + + +@media screen and (min-width:600px) and (max-width: 768px) { + .navbar{ + display: none; + + } + #ref-h4, #ref-h3, #ref-h2, .refer-h1,#new-launch{ + font-size: 35px; + } + #refimg{ + margin: 0; + width: 100%; + } + #search{ + display: none; + } + #bar-icon{ + display: block; + font-size: 20px; + padding-left: 70px; + height: 40px; + + } + #sugar-img{ + margin-left: 0px; + } + .login-signup { + display: none ; + } + #user{ + display: hidden; + } + #heart{ + padding-left: 100px; + } + + #video{ + + height: 200px; + padding-right: 50px; + border: none; + } + .carousel{ + width:100%; + + } + + .carousel-1{ + height: fit-content; + } + .carousel-cell-1{ + + width: 40%; + height: fit-content; +} +.carousel-cell-1.is-selected{ + + width: 40%; + height: fit-content; +} +.carousel-cell-1:before{ + + width: 40%; + height: fit-content; +} + +.carousel-cell-2{ + width: 100%; +} +.carousel-cell-2.is-selected{ + + width: 100%; +} +.carousel-cell-2:before{ + + width: 100%; +} +.carousel-cell-3{ + width: 50%; +} +.carousel-cell-3.is-selected{ + + width: 50%; +} +.carousel-cell-3:before{ + + width: 50%; +} +#explore-img{ + grid-template-columns: 100%; + gap: 10px; + } + #tot{ + grid-template-columns: 100%; + gap: 10px; + } + + } \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..58e3a14 --- /dev/null +++ b/home.html @@ -0,0 +1,899 @@ + + + + + + + + Sugar Cosmetics + + + + + + + + + + + + + + + +
+

REFER YOUR FRIENDS

+
+
+ +
+ +
+

CONTOUR DE FORCE EYES & FACE PALETTE

+
+ +
+ +
+ + + +
+

BEST SELLERS

+
+ + + + + + +
+

QUICK BEAUTY TIPS WITH SUGAR

+
+ + + + + + +
+

HOT DEALS

+
+ + + + + +
+

NEW LAUNCHES

+
+ + + + + + + + + +
+

SUGAR STREAMING

+
+ + +
+ + + + + + + + + + + + +
+ + + + +
+

SUPER SAVERS

+
+ + + + + + + + + +
+

TOP PICKS OF WEEK

+
+ + + + + + +
+

GIFTING

+
+ + + + + + + + + +
+

THIS OR THAT

+
+
+ + +
+ + +
+

JUST IN

+
+ + + + + + + + + +
+

SUGAR BEAUTY BLOG

+
+ + + + + +
+

SKINCARE BASICS

+
+ + + + + +
+

EXPLORE

+
+ +
+ + + + +
+ +
+

READ MORE ABOUT SUGAR COSMETICS

+
+ +
+ +
+ + + + + + + + \ No newline at end of file