diff --git a/css/store.css b/css/store.css new file mode 100644 index 000000000..42d44cfdb --- /dev/null +++ b/css/store.css @@ -0,0 +1,295 @@ +body { + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; + height: 100%; +} + +.header { + display: grid; + grid-template-columns: repeat(2, 1fr); + /* background-color: rgb(223, 219, 219); */ +} + +.imageLeft { + grid-column: 1/2; + /* background-image: url('/img/karma-logo.svg'); */ +} + +.karmaIcon { + width: 35px; + height: 35px; + margin-left: 150px; +} + +.navBar { + grid-column: 2/3; + margin-left: 10px; + /* padding-left: 100px; */ + align-self: center; + /* text-decoration: none; */ +} + +.linkStyle { + text-decoration: none; + margin-right: 20px; +} + +.nav1 { + grid-column: 7/14; + color: black; +} + +.nav2 { + grid-column: 7/14; + color: grey; +} + +.nav3 { + grid-column: 7/14; + color: rgb(252, 109, 57); +} + +.nav4 { + grid-column: 7/14; + color: gray; +} + +.nav5 { + grid-column: 7/14; + color: gray; +} + +.nav6 { + grid-column: 7/14; + color: gray; +} + +.main { + display: grid; + grid-template-columns: 10% 30% 10% 50%; + /* grid-template-rows: 1fr 1fr 1fr 1fr; */ +} + +.formDiv { + grid-column: 2/3; +} + +.formh1 { + color: rgb(252, 109, 57); + font-weight: 800; + margin-top: 100px; + transform: scaleY(1.1); +} + +.mainImageDiv { + grid-column: 4/5; + grid-row: 1/5; + /* background-image: url("/level-2/storeImage.jpg"); */ + /* background-size: auto auto; */ + background-repeat: no-repeat; +} +.mainImage { + background-image: url('/level-2/storeImage.jpg'); + background-size: cover ; + height: 100%; + width: 100%; +} + +.verticalFlex { + display: flex; + flex-direction: column; + row-gap: 0px; +} + +.horizontalFlex { + display: flex; + flex-direction: row; + align-items: center; + row-gap: 10px; +} + +.double { + justify-content: space-between; +} + +.labelGap { + margin-bottom: 10px; + margin-top: 15px; +} + +input, +select { + /* line-height: 15px; */ + padding: 10px; + font-size: medium; +} + +.accent:checked { + /* background-color: rgb(252, 109, 57); */ + accent-color: rgb(252, 109, 57); + /* filter: invert(1); */ + filter: drop-shadow(white); + background-color: #fff; + +} +.accent{ + /* accent-color: rgb(252, 109, 57); */ +/* filter: invert(); */ +/* appearance: none; +/* background-color: green; */ +/* accent-color: rgb(252, 109, 57); */ +/* background-image: url('/level-2/checkmark.svg'); */ +/* background-repeat: no-repeat; */ +transform: scale(1.1); + +} + + +.checkboxxx{ + appearance: none; + /* background-color: green; */ + /* accent-color: rgb(252, 109, 57); */ + /* background-image: url('/level-2/checkmark.svg'); */ + color: white; + background-repeat: no-repeat; + border: 1px solid black; + border-radius: 5px; +} + + +.checkboxxx:checked{ + appearance: none; + /* background-color: green; */ + /* accent-color: rgb(252, 109, 57); */ + background-image: url('/level-2/checkmark.svg'); + background-repeat: no-repeat; + border: 1px solid black; + border-radius: 5px; +} + +select:nth-child(1){ + /* appearance: none; */ + font-style: italic; + /* color: orangered; */ + + /* + appearance:none; + width:20px; + height:20px; + border:1px solid orangered; + border-radius:5px; + outline:none; + box-shadow:0 0 5px 0px rgb(0, 0, 0) inset; */ +} + +fieldset{ + border-radius: 5px; + +} + +.placeOrderButton { + color: white; + background-color: rgb(252, 109, 57); + border: 2px solid rgb(252, 109, 57); + padding: 10px; + padding-left: 40px; + padding-right: 40px; + border-radius: 5px; + font-size: 15px; + font-weight: 100; +} + +.footer { + display: flex; + flex-direction: column; + align-content: center; + text-align: center; +} + +.footerIconsDiv { + text-align: center; +} + +.footerIcons { + width: 20px; + height: 20px; + padding: 10px; + border: 2px solid grey; + border-radius: 50%; +} + + + + +/* MEDIA QUERY FOR MOBILE DEVICES - STARTS BELOW*/ + +@media screen and (max-width: 500px) { + +body{ + + /* display: flex; + flex-direction: column; + */ + +} + +/* HEADER STARTS BELOW */ + +.mediaHeader{} + +.mediaImageLeft{} + +.mediaKarmaIcon{} + +.mediaNavBar{ + display: none; + +} + +.mediaLinkStyle{} + +.mediaNav1{} +.mediaNav2{} +.mediaNav3{} +.mediaNav4{} +.mediaNav5{} +.mediaNav6{} + +/* HEADER ENDS ABOVE */ + + +/* MAIN STARTS HERE */ + +.mediaMain{} + +.mediaFormDiv{} + +.mediaForm{} + +.mediaHorizontalFlex{} + +.mediaDouble{} + +.mediaVerticalFlex{} + +.mediaLabelGap{} + +.mediaCheckBoxxx{ + + +} + +.mediaPlaceOrderButton{} + +.mediaMainImageDiv{} + +.mediaMainImage{} + +.mediaFooter{} + +.mediaFooterIconsDiv{} + + +/* MAIN ENDS ABOVE */ + +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 5cb025cef..0e62dba73 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,203 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +.links { + display: flex; + flex-direction: row; + float: right; + text-decoration: none; +} + +.topLinks { + color: gray; +} + +.topLinks:hover { + color: orangered; +} + +.topLinks:active, +.active { + color: black; +} + +.icon1 { + height: 25%; + width: 25%; +} + +ul { + list-style: none; + display: flex; + margin-right: 150px; +} +li { + margin: 10px; + text-decoration: none; +} +a { + text-decoration: none; +} +.topBar { + display: flex; + flex-direction: row-reverse; +} + +.middle { + background-image: url("/img/first-background.jpg"); + background-size: cover; + background-repeat: no-repeat; + color: #fff; + + height: 735px; + text-align: center; + font-family: "Roboto", sans-serif; + margin-bottom: 50px; + display: flex; + align-items: center; + justify-content: center; +} +/*something random*/ +.mid { + font-weight: 75px; +} + +.learnMore { + background-color: rgb(252, 109, 57); + border: 2px solid rgb(252, 109, 57); + padding: 10px; + border-radius: 5px; + font-size: 20px; + font-weight: 100; +} + +.bottom { + font-family: "Roboto", sans-serif; + display: flex; + justify-content: center; +} + +.bottomImages { + height: 100px; + width: 100px; +} + +.internet, +.coffee, +.refill { + padding: 25px; + margin: 35px; + display: block; + align-items: center; +} + +.h2o h2 { + margin-right: 20px; + margin-left: 20px; + text-align: center; + font-size: 35px; + font-weight: 100; + margin-top: 100px; +} + +.hygge .bottom { + text-align: center; +} + +.icons { + width: 25px; + height: 25px; + border-radius: 50%; +} +.footer { +} + +.footerCombined { + display: block; + justify-content: center; + align-items: center; + text-align: center; +} + +hr { + width: 50%; +} + +footer { + color: gray; +} + +.fontType { + font-size: 55px; + font-weight: 100; +} + +.fontType2 { + font-size: 35px; + font-weight: 100; +} + +.karmaLogo { + width: 30px; + height: 30px; + display: flex; + margin-right: 800px; + margin-top: 30px; +} + +.section3 { +} + +.extendedSection { + height: 100%; + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr 1fr; + grid-template-rows: auto auto auto auto; + background-color: rgba(250, 229, 233, 0.76); +} + +.extendedSectionImage { + grid-column: 1/3; + grid-row: 1/5; + background-image: url("/level-2/homepage-feature.png"); + background-size: cover; + + height: 550px; +} + +.extendedSectionRight { + grid-column: 4/5; + grid-row: 2/4; + /* background-color: rgba(250, 229, 233, 0.76); */ + text-align: center; + align-items: center; + /* align-self: center; */ +} + +.extendedSectionText { + grid-row: 2/3; + font-size: 25px; + font-style: italic; +} + +.extendedSectionButton { + grid-row: 3/4; + color: white; + background-color: rgb(252, 109, 57); + border: 3px solid rgb(252, 109, 57); + border-radius: 5px; +} + +span { + color: rgb(252, 109, 57); + /* font-weight: bolder; */ + font-size: 30px; +} + +.storeLink{ + + text-decoration: none; + color:white; + +} diff --git a/girlWorking.png b/girlWorking.png new file mode 100644 index 000000000..704dc4f86 Binary files /dev/null and b/girlWorking.png differ diff --git a/index.html b/index.html index 3e742ef04..d57be8a23 100755 --- a/index.html +++ b/index.html @@ -15,5 +15,116 @@ + + +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+ +
+
+ + +
+
+

Everyone needs a little Karma.

+
+ +
+ +
+ Devices +

Internet for all devices

+
+
+ Devices +

Boost your productivity

+
+
+ Devices +

Pay as you go

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

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

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

Join us on

+
+ + twitter + fb + insta +
+ + + +
+ + + + +
+ + diff --git a/level-2/store-image_by-andrew-neel-unsplash.jpg b/level-2/storeImage.jpg similarity index 100% rename from level-2/store-image_by-andrew-neel-unsplash.jpg rename to level-2/storeImage.jpg diff --git a/store.html b/store.html new file mode 100644 index 000000000..b76ac86ec --- /dev/null +++ b/store.html @@ -0,0 +1,143 @@ + + + + + + + + + Karma Store + + + + + + + +
+
+ +
+ +
+ + + + + +
+
+

Order your Karma wifi device today!

+

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

+
+
+ Select a colour * +
+ + + + +
+
+
+


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