diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Vector (1).svg b/Vector (1).svg new file mode 100644 index 000000000..c34202ed3 --- /dev/null +++ b/Vector (1).svg @@ -0,0 +1,3 @@ + + + diff --git a/css/style.css b/css/style.css index 5cb025cef..212ff536e 100755 --- a/css/style.css +++ b/css/style.css @@ -6,6 +6,12 @@ body { -webkit-font-smoothing: antialiased; } +.image.png { + width: 100%; + height: 100%; + object-fit: cover; +} + /** * Add your custom styles below * @@ -17,3 +23,197 @@ body { */ +body { + padding: 0px; + margin: 0px; + text-align: center; +} + +header { + display: flex; + justify-content:space-between; +} + +.logo-image { + width: 20px; + height: 20px; + padding: 15px 100px; +} + +a { + color: rgb(123, 123, 123); + text-decoration: none; +} + +a:hover { + color: orangered; +} + +.nav-text { + display: flex; + list-style: none; + gap: 30px; + margin: 15px 100px; +} + +.gap-list { + width: 100px; +} + +.bg-img { + background-size: cover; + width: 100%; + height: 70%; + display: flex; + z-index: -1; +} + +.text-img { + top: 50%; + position: absolute; + left: 50%; + transform: translate(-50%, -50%) +} + +.background-img { + position:relative; +} + +h1, p { + color: white; +} + +.text-img button { + background-color: orangered; + color: #fff; + justify-content: center; + align-items: center; + padding: 10px; + border-radius: 10px; +} + +.section-down h1 { + justify-content: center; +} + +.device-img, +.coffee-img, +.refill-img { + width: 100px; + height: 100px; +} + +.section-down { + justify-content: center; + align-content: center; + display: flex; + gap: 50px; + margin-top: 50px; +} + +.part-two { + color: black; + padding-top: 30px; + font-size: 30px; + font-weight: lighter; +} + +.section-down h3 { + font-size: 10px; +} + +.footer-img { + padding: 10px; + width: 20px; + height: 20px; + border: solid gray 1px; + border-radius: 50%; +} + + +h5 { + display: flex; + justify-content: center; + color: rgb(151, 150, 150); +} + +.footer-wrap { + display: flex; + gap: 5px; + justify-content: center; + height: 50px; +} + +hr { + background-color: lightgray; + color: lightgray; + width: 80%; +} + +.footer-p-tag { + color: lightgrey; + justify-content: center; + display: flex; + font-size: 10px; +} + + +/* Karma design */ + +.karma-design{ + /* width: 100%; */ + display: flex; + background-color: #ffe6e6; + margin: 50px 0 20px 0; + height: 100%; +} + +.img-karma{ + width: 40%; + height: 100%; + object-fit: cover; +} + +.karma-img{ + background-color: blue; + width: 100%; + height: 100%; + object-fit: cover; +} + +.karma-text{ + text-align: center; + justify-content: right; + align-content: center; + width: 40%; + height: 100%; + object-fit: cover; + padding-left: 150px; + padding-top: 85px; +} + +.karma-text > h4 { + justify-content: center; + font-size: 35px; + font-weight: lighter; +} + +.karma-btn { + background-color: rgb(255, 111, 58); + color: white; + justify-content: center; + align-items: center; + padding: 10px; + border-radius: 10px; + border: none; +} + +.karma-btn:hover { + background-color: white; + color: rgb(255, 111, 58); + border: 2px solid rgb(255, 111, 58);; +} + +.quotationMarks{ + color: rgb(255, 111, 58); +} \ No newline at end of file diff --git a/img/checkmark.svg.png b/img/checkmark.svg.png new file mode 100644 index 000000000..92d5db60b Binary files /dev/null and b/img/checkmark.svg.png differ diff --git a/img/homepage-feature.png b/img/homepage-feature.png new file mode 100644 index 000000000..3500b2e4c Binary files /dev/null and b/img/homepage-feature.png differ diff --git a/img/store-image_by-andrew-neel-unsplash.jpg b/img/store-image_by-andrew-neel-unsplash.jpg new file mode 100644 index 000000000..f0773ae13 Binary files /dev/null and b/img/store-image_by-andrew-neel-unsplash.jpg differ diff --git a/index.html b/index.html index 3e742ef04..8274cd964 100755 --- a/index.html +++ b/index.html @@ -10,7 +10,100 @@ +
+
+ logo-img +
+ +
+
+ +
+
+ background-img +
+

Introducing karma

+

Bring WiFi with you,everywhere you go.

+ +
+
+
+ +
+ +
Everyone needs a little Karma.
+ +
+
+ device +

Internet for all devices

+
+ +
+ coffee +

Boots your productivity

+
+ +
+ refill +

Pay as You Go

+
+
+ +
+ + + +
+ +
+ hompage +
+ +
+

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

+ +
+ +
+ +
+ +
+ + diff --git a/store.css b/store.css new file mode 100644 index 000000000..4ca097866 --- /dev/null +++ b/store.css @@ -0,0 +1,438 @@ +body { + margin: auto; + padding: 0; + width: 1280px; +} + + + +p, h1, h2, h3, h4 { + margin: 0; + padding: 0; +} + +fieldset { + border: none; + padding: 0; + margin: 0; +} + +.nav-items { + display: flex; + list-style-type: none; + margin: 0; +} + +.nav-option { + padding: 13px; +} + +.primary-button { + text-transform: uppercase; + background: rgb(255, 94, 0); + border: none; + color: white; + padding: 18px 30px; + font-size: 10px; + border-radius: 4px; + font-size: 13px; + margin-top: 10px; +} + +.secondary-button { + text-transform: uppercase; + background: white; + border: none; + color: black; + padding: 10px 15px; + font-size: 8px; +} + +.left-border { + border-left: 1px #a8a8a8 solid; +} + +.buttons-wrapper { + display: flex; + justify-content: flex-end; + border-bottom: 1px #ababab solid; +} + +.hero { + display: flex; + padding: 0 54px; + background-color: #60746e; +} + +.hero-content { + width: 50%; + padding-top: 50px; + padding-bottom: 70px; + padding-right: 20px; + color: white; +} + +.hero-main-title { + font-size: 10px; +} +.hero-title { + font-size: 18px; + margin: 13px 0; +} +.hero-copy{ + font-size: 14px; +} + + +.hero-image { + background-color: red; + width: 50%; +} + +.image-src { + width: 100%; + height: 100%; + object-fit: cover; +} + +.main-section { + display: flex; + justify-content: center; + background-color: #fff9e9; + padding: 20px 0; +} + +.elements-wrapper{ + width: 100%; + max-width: 80%; +} + +.form-title{ + text-align: center; + margin-bottom: 10px; +} + +.form-label { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; +} + +.form { + display: flex; + gap: 2%; +}; + +.form-label { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; +} + +.form-input { + flex-grow: 1; + border-radius: 0; + border-radius: 0px; + border: 1px black solid; +} + + +.title { + text-align: center; + font-size: 18px; + margin-bottom: 10px; +} + +.secondary-title { + text-align: center; + font-size: 14px; +} + +.donate-card { + width: 50%; +} + +.card-img { + height: 165px; + background-color: red; +} + +.card-img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.card-content { + padding: 20px; +} + +.card-heading { + font-size: 16px; +} + +.card-text { + font-size: 14px; +} + +.card-link { + font-size: 12px; +} + +.card-wrapper{ + display: flex; + gap: 20px; +} + + + + +/* karma form */ + +/* navbar style */ + +header { + display: flex; + justify-content:space-between; + background-color: rgba(239, 239, 239, 0.811); + border-bottom: 1px solid rgb(185, 185, 185); +} + +.logo-image { + width: 20px; + height: 20px; + padding: 15px 100px; +} + +a { + color: rgb(123, 123, 123); + text-decoration: none; +} + +a:hover { + color: orangered; +} + +.nav-text { + display: flex; + list-style: none; + gap: 30px; + margin: 15px 100px; +} + +/* text style */ + +.names-wrapper { + display: flex; + gap: 30px; +} + +.full-w-input { + width: 100%; + padding: 10px 5px; +} + +.name-style { + width: 50%; +} + +.countryInput { + flex-grow: 1; +} + +.postCode { + width: 30%; +} + +.formWrapper { + padding: 104px; + width: 50%; +} + +.formWrapper h1 { + color: rgb(255, 94, 0); + font-size: 30px; + margin-bottom: 30px; +} + +.selectInput { + padding: 10px 0; +} + +/* .name-style{ + display: flex; +} */ + +.chechbox-s { + display: flex; + margin-top: 90px; +} + +.label-style { + display: block; + margin: 5px 0 10px 0; +} + +.radio-wrapper { + display: inline-flex; + align-items: center; +} + +.input-space { + margin-bottom: 15px; + /* display: flex; */ +} + +.tandc { + margin-left: 10px; +} + +.tanc-a{ + color: rgb(255, 94, 0); +} + +.formSection { + display: flex; +} + +input[type='radio'] { + -webkit-appearance:none; + width:15px; + height:15px; + border:1px solid rgb(23, 23, 23); + border-radius:50%; + outline:none; + /* box-shadow:0 0 5px 0px gray inset; */ + } + + /* input[type='radio']:hover { + box-shadow:0 0 5px 0px orange inset; + } */ + + input[type='radio']:before { + content:''; + display:block; + width:80%; + height:80%; + margin: 10% auto; + border-radius:50%; + } + input[type='radio']:checked:before { + background:rgb(255, 91, 3); + } + + + /* checkbox styling */ + input[type="checkbox"] { + /* this removes the default css styling */ + -webkit-appearance: none; + appearance: none; + background-color: #fff; + margin: 0; + + /* font: inherit; + color: currentColor; + width: 1em; + height: 1em; + border: 1px solid currentColor; + border-radius: 0.15em; + + display: grid; + place-content: center; */ + } + + /* input[type="checkbox"]:before { + content: "✓"; + width: 0.65em; + height: 0.65em; + color: orange; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em var(--form-control-color); + } + + input[type="checkbox"]:checked:before { + transform: scale(1); + } */ + + + /* sbg example */ + + .tick-wrapper { + width: 15px; + height: 15px; + border: 1px black solid; + } + + .tick-wrapper svg { + display: none; + } + + input[type="checkbox"]:checked + .tick-wrapper .icon { + display: block; + } + + /* image style */ + +.image-wrapper{ + width: 50%; + /* background-image: url('/img/store-image_by-andrew-neel-unsplash.jpg'); */ + background-size: cover; + background-position: center; +} + +.image-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.deskimg { + width: 50%; +} + + /* footer style */ + + footer { + height: 200px; + padding-top: 50px; + } + + + .footer-img { + padding: 10px; + width: 20px; + height: 20px; + border: solid gray 1px; + border-radius: 50%; +} + + +h5 { + display: flex; + justify-content: center; + color: rgb(151, 150, 150); +} + +.footer-wrap { + display: flex; + gap: 5px; + justify-content: center; + height: 50px; +} + +hr { + background-color: lightgray; + color: lightgray; + width: 80%; +} + +.footer-p-tag { + color: lightgrey; + justify-content: center; + display: flex; + font-size: 10px; +} + diff --git a/store.html b/store.html new file mode 100644 index 000000000..f87d00d73 --- /dev/null +++ b/store.html @@ -0,0 +1,138 @@ + + + + + + + Karma design + + + + +
+ logo-img + +
+ +
+
+
+

order your karma wifi device today

+
+
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ +
+ Select a color: +
+ + +
+ +
+ + +
+
+
+ + + +
+ + + +
+ +
+ +
+
+
+ +
+
+ +
+ +
+ + + + + \ No newline at end of file