From 99acebbe67677f292b062d5bfec7ef1c9f77d693 Mon Sep 17 00:00:00 2001 From: Delnia Alipour Date: Fri, 27 Jan 2023 00:35:46 +0000 Subject: [PATCH 1/7] Initial version(level 1) semantic HTML CSS style --- css/normalize.css | 52 +++++++++----- css/style.css | 173 +++++++++++++++++++++++++++++++++++++++++++++- index.html | 95 ++++++++++++++++++++++++- 3 files changed, 298 insertions(+), 22 deletions(-) diff --git a/css/normalize.css b/css/normalize.css index 957605911..3f16d500d 100755 --- a/css/normalize.css +++ b/css/normalize.css @@ -1,4 +1,3 @@ - /** * --------------------------------------- * DO NOT EDIT THIS FILE. @@ -16,9 +15,12 @@ */ html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } /** @@ -64,8 +66,10 @@ audio, canvas, progress, video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** @@ -263,9 +267,12 @@ input, optgroup, select, textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } /** @@ -297,11 +304,14 @@ select { */ button, -html input[type="button"], /* 1 */ +html input[type="button"], +/* 1 */ input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } /** @@ -342,8 +352,10 @@ input { input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } /** @@ -364,9 +376,11 @@ input[type="number"]::-webkit-outer-spin-button { */ input[type="search"] { - -webkit-appearance: textfield; /* 1 */ + -webkit-appearance: textfield; + /* 1 */ -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ + -webkit-box-sizing: content-box; + /* 2 */ box-sizing: content-box; } @@ -397,8 +411,10 @@ fieldset { */ legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } /** diff --git a/css/style.css b/css/style.css index 5cb025cef..be536bea8 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,10 @@ - - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + background-color: rgb(255, 255, 255); + } /** @@ -15,5 +16,173 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/* General style------------------------ */ + + + +.container { + height: 100%; + display: grid; + grid-gap: 1px; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: 4rem auto 8rem; + grid-template-areas: + ". h h h h h h h h h h ." + ". c c c c c c c c c c ." + ". . f f f f f f f f . ."; +} + +/* ----------------Header Style--------------- */ +.header { + /* background-color: bisque; */ + grid-area: h; + display: flex; + justify-content: space-between; +} +.logo { + padding-left: 5rem; + padding-top: 1rem; +} + +.navlist { + display: flex; + padding-right: 5rem; +} + +.navitems { + padding-left: 2rem; + list-style: none; +} + +.navitems>a { + text-decoration: none; + color: rgba(137, 141, 150, 255); + font-size: 0.9rem; +} + +.navitems>a:hover { + color: orangered; + +} + +.navitems:first-child a { + color: rgb(31, 28, 28); + +} + +/* ------------------Main style ----------------- */ +.content { + + grid-area: c; + +} + +/* First section -----------*/ +.hero-image { + background-image: url("/img/first-background.jpg"); + background-color: #cccccc; + height: 43rem; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} + +.hero-text { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: rgba(250, 251, 251, 255); +} + +.header-hero { + font-weight: lighter; + font-size: 3.5rem; + margin: 1rem 0rem; + +} + +.hero-p { + font-size: 1.9rem; + font-weight: lighter; +} + +.hero-button { + background-color: rgba(224, 99, 58, 255); + margin-top: 1rem; + border-radius: 6px; + padding: 17px 28px; +} + +/* Second Section----------------- */ +.services { + display: inline-block; + width: 100%; +} + +#service-header { + padding-top: 5rem; + text-align: center; + font-weight: lighter; + color: black; + font-size: 2.5rem; +} + +.three-services { + display: flex; + justify-content: space-around; + padding-top: 0.6rem; + padding-bottom: 3rem; + padding-left: 9rem; + padding-right: 9rem; +} + +.three-services, +a { + text-decoration: none; + color: black; + text-align: center; +} + +.img-service { + width: 6rem; + height: 6rem; + +} + +/* -------------------Footer style--------------- */ +.footer { + border-top: 2px solid rgb(239, 237, 237); + grid-area: f; +} + +#p-footer { + text-align: center; +} + +.join-footer { + display: flex; + justify-content: center; +} + +.img-footer { + width: 1rem; + height: 1rem; + border-radius: 100%; + border: 1px solid rgb(239, 237, 237); + padding: 0.7rem; +} + +.icons { + padding: 0.3rem; +} +#pp-footer { + text-align: center; + color: #cccccc; + padding-bottom: 2rem; + font-size: 0.8rem; +} \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..03fe8c621 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,13 +8,103 @@ - + + +
+
+ + + +
+
+
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go. +

+ +

+
+
+
+

Everyone needs a little karma.

+
+
+ + devices +

Internet for all devices

+ +
+
+ + coffee +

Boost your productivity

+ +
+
+ + icon-refill +

Pay as you go

+ +
+
+
+ +
+
+ +
+
+ + twitter-icon + +
+
+ + facebook-icon + +
+
+ + instagram-icon + +
+
+ +
+
+ - + + \ No newline at end of file From e06c8631ae5fec39968944adf91988ab51c2b29e Mon Sep 17 00:00:00 2001 From: Delnia Alipour Date: Fri, 27 Jan 2023 01:58:14 +0000 Subject: [PATCH 2/7] clean the code --- css/style.css | 70 +++++++++++++++++++++++++++------------------------ index.html | 10 ++++---- 2 files changed, 42 insertions(+), 38 deletions(-) diff --git a/css/style.css b/css/style.css index be536bea8..a1d0cddc8 100755 --- a/css/style.css +++ b/css/style.css @@ -7,15 +7,7 @@ body { } -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ + /* General style------------------------ */ @@ -24,12 +16,13 @@ body { height: 100%; display: grid; grid-gap: 1px; + text-align: center; grid-template-columns: repeat(12, 1fr); grid-template-rows: 4rem auto 8rem; grid-template-areas: ". h h h h h h h h h h ." ". c c c c c c c c c c ." - ". . f f f f f f f f . ."; + ". f f f f f f f f f f ."; } /* ----------------Header Style--------------- */ @@ -87,15 +80,16 @@ body { background-repeat: no-repeat; background-size: cover; position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .hero-text { - text-align: center; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + font-weight: 2rem; color: rgba(250, 251, 251, 255); + text-align: center; } .header-hero { @@ -112,20 +106,24 @@ body { .hero-button { background-color: rgba(224, 99, 58, 255); + width: 10rem; + height: 4rem; margin-top: 1rem; border-radius: 6px; - padding: 17px 28px; + } /* Second Section----------------- */ .services { - display: inline-block; - width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } #service-header { padding-top: 5rem; - text-align: center; font-weight: lighter; color: black; font-size: 2.5rem; @@ -133,39 +131,46 @@ body { .three-services { display: flex; - justify-content: space-around; + justify-content: space-between; padding-top: 0.6rem; padding-bottom: 3rem; - padding-left: 9rem; - padding-right: 9rem; + } -.three-services, -a { +.service-part { + padding-left: 4.2rem; + padding-right: 4.2rem; +} + +.link-service { text-decoration: none; color: black; - text-align: center; + display: flex; + flex-direction: column; + align-items: center; + } .img-service { width: 6rem; height: 6rem; - } /* -------------------Footer style--------------- */ .footer { border-top: 2px solid rgb(239, 237, 237); grid-area: f; -} - -#p-footer { - text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 3rem; } .join-footer { display: flex; justify-content: center; + align-items: center; } .img-footer { @@ -173,7 +178,7 @@ a { height: 1rem; border-radius: 100%; border: 1px solid rgb(239, 237, 237); - padding: 0.7rem; + padding: 0.5rem; } .icons { @@ -181,8 +186,7 @@ a { } #pp-footer { - text-align: center; color: #cccccc; padding-bottom: 2rem; - font-size: 0.8rem; + font-size: x-small; } \ No newline at end of file diff --git a/index.html b/index.html index 03fe8c621..270b6e81e 100755 --- a/index.html +++ b/index.html @@ -51,8 +51,8 @@

Introducing Karma

Bring WiFi with you, everywhere you go. -

- +

+
@@ -60,19 +60,19 @@

Introducing Karma

Everyone needs a little karma.

- + devices

Internet for all devices
- + coffee

Boost your productivity
- + icon-refill

Pay as you go

 From 61e63bfab766f161fa9bdda55897d235c4ee73b4 Mon Sep 17 00:00:00 2001 From: Delnia Alipour Date: Tue, 31 Jan 2023 14:05:43 +0000 Subject: [PATCH 3/7] Add level 2: extended page and Karma Store add store.html add CSS style for Karma Store style Radio button and Checkbox --- css/style.css | 295 ++++++++++++++++++++++++++++++++++++++++++++++---- index.html | 13 ++- store.html | 137 +++++++++++++++++++++++ 3 files changed, 420 insertions(+), 25 deletions(-) create mode 100644 store.html diff --git a/css/style.css b/css/style.css index a1d0cddc8..0e586d768 100755 --- a/css/style.css +++ b/css/style.css @@ -18,11 +18,11 @@ body { grid-gap: 1px; text-align: center; grid-template-columns: repeat(12, 1fr); - grid-template-rows: 4rem auto 8rem; + grid-template-areas: - ". h h h h h h h h h h ." - ". c c c c c c c c c c ." - ". f f f f f f f f f f ."; + "h h h h h h h h h h h h" + "c c c c c c c c c c c c" + "f f f f f f f f f f f f"; } /* ----------------Header Style--------------- */ @@ -31,16 +31,18 @@ body { grid-area: h; display: flex; justify-content: space-between; + align-items: center; + background: rgba(196, 196, 196, 0.1); } .logo { - padding-left: 5rem; - padding-top: 1rem; + width: 1.5rem; + padding-left: 4rem; } .navlist { display: flex; - padding-right: 5rem; + padding-right: 4rem; } .navitems { @@ -75,7 +77,7 @@ body { .hero-image { background-image: url("/img/first-background.jpg"); background-color: #cccccc; - height: 43rem; + height: 42rem; background-position: center; background-repeat: no-repeat; background-size: cover; @@ -114,13 +116,6 @@ body { } /* Second Section----------------- */ -.services { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - -} #service-header { padding-top: 5rem; @@ -131,16 +126,16 @@ body { .three-services { display: flex; - justify-content: space-between; + justify-content: space-around; padding-top: 0.6rem; - padding-bottom: 3rem; + padding-bottom: 7rem; } -.service-part { - padding-left: 4.2rem; - padding-right: 4.2rem; -} +/* .service-part { + padding-left: 5rem; + padding-right: 5rem; +} */ .link-service { text-decoration: none; @@ -155,7 +150,53 @@ body { width: 6rem; height: 6rem; } +/* Level 2- Extended Page style */ +.get-karma{ + display: flex; + flex-direction: row; + padding-bottom: 2rem; + height: 20rem; +} +.karma-img{ +width: 40rem; +} +.karma2{ + width: 60rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: rgba(224, 99, 58, 0.1); +} +.karma-text{ +font-family: 'Roboto'; +font-style: italic; +font-weight: 400; +font-size: 2rem +} +#quoto::before +{ + content: "“"; + color: #E0633A; + font-weight: 400; +} +#quoto::after{ + content: "”"; + color: #E0633A; + font-weight: 400; +} +.karma-btn{ + background: #E0633A; + border-radius: 8px; + color: white; + border: none; + padding: 0.8rem 1.5rem; +} +.karma-btn a{ + color: white; + text-decoration: none; +} /* -------------------Footer style--------------- */ .footer { border-top: 2px solid rgb(239, 237, 237); @@ -164,7 +205,7 @@ body { flex-direction: column; justify-content: center; align-items: center; - padding-top: 3rem; + /* padding-top: 3rem; */ } .join-footer { @@ -189,4 +230,212 @@ body { color: #cccccc; padding-bottom: 2rem; font-size: x-small; -} \ No newline at end of file +} +/* ------Karma-sore style----- */ + +.store-content{ + height: 1235px; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-areas: ". f f f f . i i i i i i" + ". f f f f . i i i i i i"; + color: #666666; + + +} +.form-section{ + grid-area: f; + font-family: 'Roboto'; + font-style: normal; + font-size: 21px; + +} +.img-section{ + grid-area: i; +} +.store-img{ + width: 100%; + height: 100%; +} +.form-header{ +font-style: normal; +font-weight: 400; +font-size: 50px; +line-height: 59px; +color: #E0633A; +padding-top: 4rem; +padding-bottom: 5rem; +} +.fieldset-store{ + border: none; + margin: 0; + padding: 0; + /* display: flex; */ + /* flex-direction: column; + justify-content: flex-start; + align-items: flex-start; */ +} +.form-input { + width: 100%; + height: 2rem; + margin-bottom: 2rem; + border: 2px solid #666666; +border-radius: 4px; + } + .full-name{ + display: flex; + gap: 3rem + ; + } + .city-postcode{ + width: 100%; + display: flex; + gap: 3rem; + } + .city{ + width: 70%; + } + .postcode{ + width: 30%; + } + select{ + width: 100%; + height: 2.4rem; + border: 2px solid #666666; + border-radius: 4px; + } + + label{ + display: block; + text-align: left; + padding-bottom: 0.8rem; + } + + select:required:invalid { + color: #666666; +font-style: italic; + } + option[value=""][disabled] { + display: none; + } + option { + color:#666666; + } + .select-color{ + margin-bottom: 0rem; + } +.color-choice{ + + width: 100%; + display: flex; + align-content: center; +} +.radio-label { + padding-left: 1rem; + padding-right: 3rem; + padding-bottom: 0; + font-weight: 350; + } + +input[type="radio"] { + width: 24px; + + } + + input[type="radio"] { + opacity: 0; + } + + input[type="radio"] + label { + position: relative; + padding-left: 30px; + cursor: pointer; + display: inline-block; + + } + + input[type="radio"] + label::before { + content: ""; + position: absolute; + left: 0px; + top: 0px; + width: 20px; + height: 20px; + border-radius: 50%; + border: 2px solid grey; + background-color: white; + } + + input[type="radio"]:checked + label::after { + content: ""; + position: absolute; + left: 3px; + top: 3px; + /* padding: 0rem 0rem; */ + width: 17px; + height: 17px; + border-radius: 50%; + background-color: #e0633a; + } + .terms{ + /* display: flex; + align-items: flex-start; */ + } + input[type="checkbox"] { + opacity: 0; + } + input[type="checkbox"] + label { + position: relative; + /* padding-left: 30px; */ + cursor: pointer; + /* display: inline-block; */ + columns: #666; + line-height: 25px; + } + + input[type="checkbox"] + label::before { + content: ""; + position: absolute; + width: 14px; + height: 14px; + outline: 1px solid grey; + background: white; + left: 0; + top: 5px; + } + input[type="checkbox"]:checked + label::before { + content: ""; + position: absolute; + width: 14px; + height: 14px; + outline: 1px solid grey; + background: white; + left: 0; + top: 5px; + } + input[type="checkbox"]:checked + label::after { + content: ""; + position: absolute; + width: 14px; + height: 14px; + background-image: url(/level-2/checkmark.svg); + background-size: contain; + /* background: white; */ + left: 0; + top: 5px; + } + .term-label{ + padding-left: 1.5rem; + font-size: 18px; + } + .term-label a{ + color:#E0633A; + } + .order-btn{ + background-color: #E0633A; + color: white; + border-radius: 0.8rem; + padding: 1rem 3rem; + margin-top: 2rem; + border: none; + } \ No newline at end of file diff --git a/index.html b/index.html index 270b6e81e..78fb0be2c 100755 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@
+
+ + a happy girl watching her tablet and is excited +
+

Wherever I am, I just don't worry
about my connection
anymore!

+ +
+ +
diff --git a/store.html b/store.html new file mode 100644 index 000000000..71bd8d731 --- /dev/null +++ b/store.html @@ -0,0 +1,137 @@ + + + + + + + + + + + + Karma Store + + +
+
+ + + +
+
+
+

Order your Karma wifi device today!

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

Select a color

+
+ + + + + +
+ +
+
+ + + +
+
+ +
+
+
+
+
+ +
+ +
+
+ +
+
+ + twitter-icon + +
+
+ + facebook-icon + +
+
+ + instagram-icon + +
+
+ +
+
+ + + \ No newline at end of file From b3c0a285fa08a5a701cee5ee403e7569087171a0 Mon Sep 17 00:00:00 2001 From: Delnia Alipour Date: Tue, 31 Jan 2023 23:47:04 +0000 Subject: [PATCH 4/7] add css styles --- .vscode/settings.json | 3 +++ css/style.css | 7 +------ 2 files changed, 4 insertions(+), 6 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/style.css b/css/style.css index 0e586d768..49a5245e1 100755 --- a/css/style.css +++ b/css/style.css @@ -284,8 +284,7 @@ border-radius: 4px; } .full-name{ display: flex; - gap: 3rem - ; + gap: 3rem; } .city-postcode{ width: 100%; @@ -371,7 +370,6 @@ input[type="radio"] { position: absolute; left: 3px; top: 3px; - /* padding: 0rem 0rem; */ width: 17px; height: 17px; border-radius: 50%; @@ -386,9 +384,7 @@ input[type="radio"] { } input[type="checkbox"] + label { position: relative; - /* padding-left: 30px; */ cursor: pointer; - /* display: inline-block; */ columns: #666; line-height: 25px; } @@ -420,7 +416,6 @@ input[type="radio"] { height: 14px; background-image: url(/level-2/checkmark.svg); background-size: contain; - /* background: white; */ left: 0; top: 5px; } From d9d0e16088ed1d2caefaa80a4988a2baf2985177 Mon Sep 17 00:00:00 2001 From: Delnia Alipour Date: Wed, 1 Feb 2023 00:10:01 +0000 Subject: [PATCH 5/7] css --- css/style.css | 91 +++++++++++++++++++++++++-------------------------- 1 file changed, 45 insertions(+), 46 deletions(-) diff --git a/css/style.css b/css/style.css index 49a5245e1..7f1bf8fde 100755 --- a/css/style.css +++ b/css/style.css @@ -329,6 +329,29 @@ font-style: italic; display: flex; align-content: center; } + +input[type="radio"] + label::before { + content: ""; + position: absolute; + width: 1.3rem; + height: 1.3rem; + border-radius: 50%; + border: 2px solid grey; + background-color: white; + left: 0px; + top: 0px; +} + +input[type="radio"]:checked + label::after { + background-color: #e0633a; + content: ""; + position: absolute; + left: 3px; + top: 3px; + width: 17px; + height: 17px; + border-radius: 50%; +} .radio-label { padding-left: 1rem; padding-right: 3rem; @@ -337,51 +360,23 @@ font-style: italic; } input[type="radio"] { - width: 24px; - - } - - input[type="radio"] { + width: 2rem; opacity: 0; + } - + input[type="radio"] + label { position: relative; - padding-left: 30px; + padding-left: 2rem; cursor: pointer; display: inline-block; - - } - - input[type="radio"] + label::before { - content: ""; - position: absolute; - left: 0px; - top: 0px; - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid grey; - background-color: white; - } - - input[type="radio"]:checked + label::after { - content: ""; - position: absolute; - left: 3px; - top: 3px; - width: 17px; - height: 17px; - border-radius: 50%; - background-color: #e0633a; } + .terms{ /* display: flex; align-items: flex-start; */ } - input[type="checkbox"] { - opacity: 0; - } + input[type="checkbox"] + label { position: relative; cursor: pointer; @@ -399,33 +394,37 @@ input[type="radio"] { left: 0; top: 5px; } + input[type="checkbox"] { + opacity: 0; + } + .term-label{ + padding-left: 1.5rem; + font-size: 18px; + } + .term-label a{ + color:#E0633A; + } input[type="checkbox"]:checked + label::before { + outline: 1px solid grey; + background: white; + left: 0; content: ""; position: absolute; width: 14px; height: 14px; - outline: 1px solid grey; - background: white; - left: 0; top: 5px; } input[type="checkbox"]:checked + label::after { + background-image: url(/level-2/checkmark.svg); + background-size: contain; content: ""; position: absolute; width: 14px; height: 14px; - background-image: url(/level-2/checkmark.svg); - background-size: contain; left: 0; top: 5px; } - .term-label{ - padding-left: 1.5rem; - font-size: 18px; - } - .term-label a{ - color:#E0633A; - } + .order-btn{ background-color: #E0633A; color: white; From 01609994859411416ce9f26c4b29bcc25962984b Mon Sep 17 00:00:00 2001 From: Delnia Alipour Date: Wed, 1 Feb 2023 11:26:07 +0000 Subject: [PATCH 6/7] Style Radio button --- css/style.css | 93 +++++++++++++++++++-------------------------------- 1 file changed, 35 insertions(+), 58 deletions(-) diff --git a/css/style.css b/css/style.css index 7f1bf8fde..82c63fae0 100755 --- a/css/style.css +++ b/css/style.css @@ -329,68 +329,54 @@ font-style: italic; display: flex; align-content: center; } - -input[type="radio"] + label::before { - content: ""; - position: absolute; - width: 1.3rem; - height: 1.3rem; - border-radius: 50%; - border: 2px solid grey; - background-color: white; - left: 0px; - top: 0px; -} - -input[type="radio"]:checked + label::after { - background-color: #e0633a; - content: ""; - position: absolute; - left: 3px; - top: 3px; - width: 17px; - height: 17px; - border-radius: 50%; -} .radio-label { padding-left: 1rem; padding-right: 3rem; padding-bottom: 0; - font-weight: 350; + font-weight: 400; } -input[type="radio"] { + input[type="radio"] { width: 2rem; opacity: 0; - } - input[type="radio"] + label { - position: relative; - padding-left: 2rem; - cursor: pointer; - display: inline-block; - } - - .terms{ - /* display: flex; - align-items: flex-start; */ - } - +input[type="radio"] + label::before { + content: ""; + display: inline-block; + vertical-align: bottom; + width: 1.4rem; + height: 1.4rem; + margin-right: 0.3rem; + border-radius: 50%; + border-style: solid; + border-width: 0.1rem; + border-color: gray; +} +input[type="radio"]:checked + label { + color:#666666; +} +input[type="radio"]:checked + label::before { + background: radial-gradient(#E0633A 0%, #E0633A 60%, transparent 50%, transparent); + +} + +input[type="radio"] + label { + padding: 0.5rem 1rem; + cursor: pointer; + display: inline-block; +} input[type="checkbox"] + label { position: relative; - cursor: pointer; - columns: #666; - line-height: 25px; + padding-top: 2px; } input[type="checkbox"] + label::before { content: ""; position: absolute; - width: 14px; - height: 14px; - outline: 1px solid grey; - background: white; + width: 0.9rem; + height: 0.9rem; + border: 1px solid grey; left: 0; top: 5px; } @@ -404,23 +390,14 @@ input[type="radio"] { .term-label a{ color:#E0633A; } - input[type="checkbox"]:checked + label::before { - outline: 1px solid grey; - background: white; - left: 0; - content: ""; - position: absolute; - width: 14px; - height: 14px; - top: 5px; - } + input[type="checkbox"]:checked + label::after { background-image: url(/level-2/checkmark.svg); background-size: contain; content: ""; position: absolute; - width: 14px; - height: 14px; + width: 0.9rem; + height: 0.9rem; left: 0; top: 5px; } @@ -429,7 +406,7 @@ input[type="radio"] { background-color: #E0633A; color: white; border-radius: 0.8rem; - padding: 1rem 3rem; + padding: 1rem 2.5rem; margin-top: 2rem; border: none; } \ No newline at end of file From 121832b3c7e8cdf6a8e7ef59a095a1af64c32b5f Mon Sep 17 00:00:00 2001 From: Delnia Alipour Date: Wed, 8 Feb 2023 20:51:40 +0000 Subject: [PATCH 7/7] Clean the code --- .vscode/settings.json | 2 +- css/style.css | 49 +++++++++++++++++------------------ index.html | 14 +++++----- store.html | 60 ++++++++++++++++++++++++------------------- 4 files changed, 66 insertions(+), 59 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 6b665aaa0..4c7ff40f6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } diff --git a/css/style.css b/css/style.css index 82c63fae0..01b239c98 100755 --- a/css/style.css +++ b/css/style.css @@ -18,7 +18,7 @@ body { grid-gap: 1px; text-align: center; grid-template-columns: repeat(12, 1fr); - + grid-template-rows: auto; grid-template-areas: "h h h h h h h h h h h h" "c c c c c c c c c c c c" @@ -27,7 +27,6 @@ body { /* ----------------Header Style--------------- */ .header { - /* background-color: bisque; */ grid-area: h; display: flex; justify-content: space-between; @@ -40,28 +39,28 @@ body { padding-left: 4rem; } -.navlist { +.nav-list { display: flex; padding-right: 4rem; } -.navitems { +.nav-items { padding-left: 2rem; list-style: none; } -.navitems>a { +.nav-items>a { text-decoration: none; color: rgba(137, 141, 150, 255); font-size: 0.9rem; } -.navitems>a:hover { +.nav-items>a:hover { color: orangered; } -.navitems:first-child a { +.nav-items:first-child a { color: rgb(31, 28, 28); } @@ -132,11 +131,6 @@ body { } -/* .service-part { - padding-left: 5rem; - padding-right: 5rem; -} */ - .link-service { text-decoration: none; color: black; @@ -158,10 +152,10 @@ body { height: 20rem; } .karma-img{ -width: 40rem; +width: 50rem; } .karma2{ - width: 60rem; + width: 100%; display: flex; flex-direction: column; justify-content: center; @@ -205,7 +199,7 @@ font-size: 2rem flex-direction: column; justify-content: center; align-items: center; - /* padding-top: 3rem; */ + } .join-footer { @@ -231,6 +225,9 @@ font-size: 2rem padding-bottom: 2rem; font-size: x-small; } + @media screen and (max-width: 768px) { + /* level 3 to be completed in few next days */ +} /* ------Karma-sore style----- */ .store-content{ @@ -270,10 +267,6 @@ padding-bottom: 5rem; border: none; margin: 0; padding: 0; - /* display: flex; */ - /* flex-direction: column; - justify-content: flex-start; - align-items: flex-start; */ } .form-input { width: 100%; @@ -312,7 +305,7 @@ border-radius: 4px; select:required:invalid { color: #666666; -font-style: italic; + font-style: italic; } option[value=""][disabled] { display: none; @@ -324,21 +317,26 @@ font-style: italic; margin-bottom: 0rem; } .color-choice{ - width: 100%; display: flex; - align-content: center; + align-content:flex-start; +} +fieldset{ + width: 100%; + padding-left: 0; + border: none; } .radio-label { padding-left: 1rem; - padding-right: 3rem; + padding-right: 3rem; padding-bottom: 0; - font-weight: 400; + font-weight: 300; } input[type="radio"] { - width: 2rem; + width: 1rem; opacity: 0; + } input[type="radio"] + label::before { @@ -365,6 +363,7 @@ input[type="radio"] + label { padding: 0.5rem 1rem; cursor: pointer; display: inline-block; + ; } input[type="checkbox"] + label { position: relative; diff --git a/index.html b/index.html index 78fb0be2c..922e06ede 100755 --- a/index.html +++ b/index.html @@ -22,23 +22,23 @@