From a111b148b935bc5f3d503e79a46da7bc97564764 Mon Sep 17 00:00:00 2001 From: malkitbenning Date: Thu, 26 Jan 2023 16:59:16 +0000 Subject: [PATCH 01/11] All formatting complete top nav, hero section, main icons and footer done --- css/style.css | 116 ++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 79 +++++++++++++++++++++++++++++----- 2 files changed, 180 insertions(+), 15 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..2181f3514 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,8 @@ - - /* 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; + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; } /** @@ -16,4 +15,113 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +h1, +h2, +h3 { + font-weight: 100; +} + +h1 { + margin-bottom: 1rem; +} + +h2 { + font-size: 2rem; +} + +.top-container { + margin-left: 5rem; + margin-right: 5rem; + display: flex; + justify-content: space-between; + align-items: center; + height: 4rem; +} + +.logo-container { + width: 1.5rem; + padding-left: 2rem; +} +.nav-item { + padding-left: 2rem; + padding-right: 2 rem; +} + +.nav-item:hover { + color: orange; +} + +.nav-item-color { + color: grey; +} + +header { + border: 3px solid red; + background-image: url(/img/first-background.jpg); + background-repeat: no-repeat; + background-size: cover; + height: 40rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 4rem; +} + +.header-btn { + width: 10rem; + height: 3rem; + border-radius: 5%; + background-color: #c05326; + margin-top: 2rem; +} + +.hero-text { + color: white; +} + +main { + color: darkslategray; + text-align: center; +} + +.main-options { + margin: 0% 4rem 3rem 4rem; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-items: center; +} + +.main-options-icon { + width: 5rem; +} + +.horiz-rule { + width: 50%; + height: 1px; + border-width: 0; + background-color: lightgray; +} + +/* footer details */ +.join-text { + text-align: center; + font-size: small; +} + +.social-icons-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-items: center; + margin: 0 40%; +} + +.social-icon { + width: 1rem; +} + +.copyright-text { + text-align: center; + font-size: x-small; +} diff --git a/index.html b/index.html index 3e742ef04..03da685ca 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,76 @@ - - - + + + Karma - - - - - - - + + + + + + +
+
+ karma logo +
+ +
- +
+

Introducing Karma

+

Bring WIFI with you, everywhere you go

+ +
+
+

Everyone needs a little Karma

+
+ 3 devices icon + steaming coffee cup icon + fuel pump icon +

Internet for all devices

+

Boost your productivity

+

Pay as You Go

+
+
+
+ + From d7e244f215dfb0e4ee038e334ee9408990e78dc3 Mon Sep 17 00:00:00 2001 From: malkitbenning Date: Sun, 29 Jan 2023 20:21:09 +0000 Subject: [PATCH 02/11] Store page fixed listbox fixed sizing of list box using percentages --- css/style.css | 133 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 16 ++++-- store.html | 114 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 259 insertions(+), 4 deletions(-) create mode 100755 store.html diff --git a/css/style.css b/css/style.css index 2181f3514..4e26792ce 100755 --- a/css/style.css +++ b/css/style.css @@ -29,6 +29,27 @@ h2 { font-size: 2rem; } +a:link { + text-decoration: none; +} + +input { + width: 100%; + height: 2rem; + margin-bottom: 2rem; +} + +label { + display: block; + text-align: left; + padding-bottom: 0.6rem; +} + +select { + width: 100%; + height: 2rem; +} + .top-container { margin-left: 5rem; margin-right: 5rem; @@ -72,7 +93,8 @@ header { .header-btn { width: 10rem; height: 3rem; - border-radius: 5%; + border: none; + border-radius: 5px; background-color: #c05326; margin-top: 2rem; } @@ -97,6 +119,115 @@ main { width: 5rem; } +.get-karma-section { + display: grid; + grid-template-columns: 2fr 3fr; +} +.get-karma-img-div { + overflow: hidden; +} + +.get-karma-img { + /* max-width: 100%; */ + width: 100%; + height: 100%; + object-fit: cover; +} + +.get-karma-promo { + background-color: #e0633a10; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.karma-btn { + background-color: #e0633a; + color: white; + border-radius: 5px; + padding: 0.8rem 2rem; + border: none; +} + +.karma-btn a { + color: white; +} + +.get-karma-quote { + font-weight: 400; + font-style: italic; + font-size: 1.5rem; + padding: 0 4rem; +} + +.get-karma-quote::before { + content: "“"; + font-family: "Roboto"; + font-size: 1.5rem; + color: #e0633a; + padding: 0.25rem; +} + +.get-karma-quote::after { + content: "”"; + font-family: "Roboto"; + font-size: 1.5rem; + color: #e0633a; + padding: 0.25rem; +} + +.store-content { + display: grid; + grid-template-columns: 1fr 1fr; +} +.store-main { + padding: 10%; + text-align: left; +} + +.store-form-header { + color: #e0633a; + font-weight: 500; + text-align: center; +} + +.store-fieldset { + border: none; +} + +.form-names { + display: flex; + gap: 2rem; + /* border: 3px solid blue; */ + /* justify-content: space-between; */ +} +.form-first-name { + width: 100%; + /* border: 3px solid green; */ +} +.form-last-name { + /* border: 3px solid purple; */ + width: 100%; +} +.store-aside-image { + width: 100%; + max-height: 130vh; + /* border: 5px solid purple; */ +} + +.form-city-postcode { + display: flex; + gap: 2rem; +} + +.form-city { + width: 70%; +} +.form-postcode { + width: 30%; +} + .horiz-rule { width: 50%; height: 1px; diff --git a/index.html b/index.html index 03da685ca..9ea3cbfc3 100755 --- a/index.html +++ b/index.html @@ -25,9 +25,9 @@ karma logo