From 821649332177049048ea6aabe9eb1beaf936d011 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 1 Aug 2022 15:43:16 +0530 Subject: [PATCH 1/9] homepage --- home.css | 169 ++++++++++++++++++++++++++++++++++++++++++++++ home.html | 88 ++++++++++++++++++++++++ modules/header.js | 97 ++++++++++++++++++++++++++ 3 files changed, 354 insertions(+) create mode 100644 home.css create mode 100644 home.html create mode 100644 modules/header.js diff --git a/home.css b/home.css new file mode 100644 index 0000000..21db935 --- /dev/null +++ b/home.css @@ -0,0 +1,169 @@ +@import url("https://use.typekit.net/zna8lui.css"); + +#head1 { + display: flex; + padding: 20px; + + background-color: whitesmoke; +} + +#logo { + width: 250px; + +} + +#search { + width: 52%; + + display: flex; + +} + +#search-bar { + width: 90%; + margin-top: 5px; + margin-left: 30px; + margin-bottom: 5px; + 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: 0; + padding: 0; +} + +body { + margin: 0px; + font-family: quicksand, sans-serif; + + font-weight: 400; + + font-style: normal; + +} + +#search-icon { + margin-top: 5px; + margin-bottom: 5px; + width: 18%; + border: none; + border-bottom-right-radius: 30px; + border-top-right-radius: 30px; + color: white; + background-color: black; + font-family: quicksand, sans-serif; + + font-weight: 400; + + font-style: normal; + font-size: 20px; + cursor: pointer; +} + +#login-signup { + + margin-top: 22px; + font-size: 20px; + color: black; + font-family: quicksand, sans-serif; + + font-weight: 400; + + +} + +.icon { + width: 30px; + height: 30px; + padding: 5px; + margin-top: 15px; +} + +#heart { + margin-left: 120px; +} + +#user { + margin-left: 120px; + + /* Carousel */ + +} + +.carousel { + background: #fff; + width: 100%; + + + +} + +.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: 35px; + text-align: center; + padding: 25px; + 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 */ \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..113ffb8 --- /dev/null +++ b/home.html @@ -0,0 +1,88 @@ + + + + + + + + Sugar Cosmetics + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+ +
+

REFER YOUR FRIENDS

+
+
+ +
+ +
+

CONTOUR DE FORCE EYES & FACE PALETTE

+
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/modules/header.js b/modules/header.js new file mode 100644 index 0000000..3a1a962 --- /dev/null +++ b/modules/header.js @@ -0,0 +1,97 @@ +let header = () => { + return `
+ + + + + + + Login/Register + + + + + + +
+ + + + + +` + + +} +export { header } \ No newline at end of file From 0ace65e1a95ea8f12c9a8fccfb8df05232c0048a Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 1 Aug 2022 20:46:28 +0530 Subject: [PATCH 2/9] homepage --- home.css | 79 +++++++++++++++++++++- home.html | 4 +- modules/header.js | 166 ++++++++++++++++++++++------------------------ 3 files changed, 161 insertions(+), 88 deletions(-) diff --git a/home.css b/home.css index 21db935..852cbf9 100644 --- a/home.css +++ b/home.css @@ -4,7 +4,7 @@ display: flex; padding: 20px; - background-color: whitesmoke; + background-color: rgb(252, 250, 250); } #logo { @@ -166,4 +166,79 @@ body { margin-left: 150px; } -/* dropdown navbar */ \ No newline at end of file +/* 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 30px; + 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 30px; + 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; +} \ No newline at end of file diff --git a/home.html b/home.html index 113ffb8..31a6de3 100644 --- a/home.html +++ b/home.html @@ -7,8 +7,9 @@ Sugar Cosmetics + - + @@ -80,6 +81,7 @@ + @@ -23,40 +19,40 @@ - -
+ +
+

BEST SELLERS

+
+ + + + + +
+

QUICK BEAUTY TIPS WITH SUGAR

+
+ + + + + +
+

HOT DEALS

+
+ + + + + + +
+

NEW LAUNCHES

+
+ + + + - \ No newline at end of file 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.css b/header.css new file mode 100644 index 0000000..8d99ebd --- /dev/null +++ b/header.css @@ -0,0 +1,174 @@ +@import url("https://use.typekit.net/zna8lui.css"); + +#head1 { + display: flex; + padding: 20px; + + background-color: whitesmoke; +} + +#logo { + width: 250px; + +} + +#search { + width: 52%; + + display: flex; + +} + +#search-bar { + width: 90%; + margin-top: 5px; + margin-left: 30px; + margin-bottom: 5px; + 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; + +} + + +body { + margin: 0px; + font-family: quicksand, sans-serif; + + font-weight: 400; + + font-style: normal; + +} + +#search-icon { + margin-top: 5px; + margin-bottom: 5px; + width: 18%; + border: none; + border-bottom-right-radius: 30px; + border-top-right-radius: 30px; + color: white; + background-color: black; + font-family: quicksand, sans-serif; + + font-weight: 400; + + font-style: normal; + font-size: 20px; + cursor: pointer; +} + +#login-signup { + + margin-top: 22px; + font-size: 20px; + color: black; + font-family: quicksand, sans-serif; + + font-weight: 400; + + +} + +.icon-c { + width: 20px; + height: 20px; + padding: 5px; + margin-top: 15px; +} + +#heart { + margin-left: 120px; +} + +#user { + margin-left: 120px; + + /* Carousel */ + +} + +.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; + } + \ No newline at end of file diff --git a/modules/header.js b/header.js similarity index 100% rename from modules/header.js rename to header.js diff --git a/home.html b/home.html index 15cfa94..5eac412 100644 --- a/home.html +++ b/home.html @@ -243,7 +243,7 @@

$1099

From 3ba7dc0ad8c9af2a21ab728be1bbc8341a707e28 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 4 Aug 2022 12:06:48 +0530 Subject: [PATCH 6/9] added footer --- footer.css | 112 --------- footer.html | 19 -- home.css | 209 +++++++++++++++- home.html | 690 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 870 insertions(+), 160 deletions(-) delete mode 100644 footer.css delete mode 100644 footer.html diff --git a/footer.css b/footer.css deleted file mode 100644 index 04fbd20..0000000 --- a/footer.css +++ /dev/null @@ -1,112 +0,0 @@ -#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; -} \ No newline at end of file diff --git a/footer.html b/footer.html deleted file mode 100644 index 590c212..0000000 --- a/footer.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - Footer - - - - -
- - - - \ No newline at end of file diff --git a/home.css b/home.css index 1e45c85..16a44a4 100644 --- a/home.css +++ b/home.css @@ -7,6 +7,7 @@ background-color: whitesmoke; } + #logo { width: 250px; @@ -38,6 +39,11 @@ } +* { + box-sizing: border-box; + margin: revert; + padding: revert; +} body { margin: 0px; @@ -80,8 +86,8 @@ body { } .icon-c { - width: 20px; - height: 20px; + width: 30px; + height: 30px; padding: 5px; margin-top: 15px; } @@ -135,9 +141,10 @@ body { .refer-h1 { - margin-top: 35px; + margin-top: 25px; + padding: 15px; text-align: center; - padding: 25px; + font-family: quicksand, sans-serif; font-size: 40px; } @@ -281,8 +288,11 @@ body { margin:0; } h5{ - margin-top:10px; - margin-left:25%; + /*margin-top:10px; + margin-left:25%;*/ + margin: auto; + text-align: center; + font-size: 15px; } .price{ @@ -358,5 +368,190 @@ height:60px; 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: 40%; + margin: 10px 70px; + +} +#tot{ + margin-left: 40px; +} +#explore-img img{ + margin: 10px 30px; +} +#explore-img { + margin-left: 20px; +} + + +#mainfooter{ + + background-color: black; - \ No newline at end of file + 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; +} \ No newline at end of file diff --git a/home.html b/home.html index 5eac412..72d9a99 100644 --- a/home.html +++ b/home.html @@ -19,7 +19,8 @@
- + +