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 5cb025cef..a1ad3e353 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,254 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/* HEADER style */ + +.header { + display: flex; + justify-content: space-around; + gap: 300px; + height: 80px; + align-items: center; + background-color: rgb(238, 238, 238); +} + +.nav-list { + display: flex; + list-style: none; + justify-content: space-between; + width: 500px; + color: grey; + text-decoration: none; +} +.header .nav-item a { + color: grey; + text-decoration: none; +} + +.header .nav-item a:hover { + color: orange; +} + +/* END of HEADER style */ + +/* MAIN style */ +.main { + display: flex; + flex-direction: column; + text-align: center; +} + +.main-container-up { + background-image: url("../img/first-background.jpg"); /* The image used */ + background-color: #cccccc; /* Used if the image is unavailable */ + height: 500px; /* You must set a specified height */ + background-position: center; /* Center the image */ + background-repeat: no-repeat; /* Do not repeat the image */ + background-size: cover; /* Resize the background image to cover the entire container */ + /* background-size: cover; + background-repeat: no-repeat; + position: fixed; */ + display: flex; + flex-direction: column; + border-bottom: 2px solid grey; + color: rgb(231, 231, 231); + height: 670px; + align-items: center; + justify-content: center; +} + +.up-button { + background-color: orange; + color: white; + padding: 10px 30px; + border-radius: 5px; + margin-top: 30px; +} + +.main-container-down { + align-content: center; + height: 500px; +} +.down-h1 { + margin-top: 150px; + margin-bottom: 80px; +} +.icons { + display: flex; + justify-content: center; + gap: 140px; + margin: 0 100px 100px 100px; +} +.line { + border-bottom: 2px solid rgb(236, 236, 236); + margin-left: 275px; + margin-right: 280px; +} +/* END of MAIN style */ + +/* FOOTER style */ +.footer { + text-align: center; +} +.social-media-icons { + justify-content: center; +} + +.social_media_icon { + height: 18px; + border: 1px solid gray; + border-radius: 50%; + padding: 10px; +} + +/* END of FOOTER style */ + +/* STORE PAGE STYLE */ + +.store-main { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 950px; + grid-template-areas: "form img"; +} +.form { + grid-area: form; + padding-left: 90px; + margin-right: 90px; +} +.background-img { + background-image: url("../level-2/store-image_by-andrew-neel-unsplash.jpg"); + grid-area: img; + background-position: center; /* Center the image */ + background-repeat: no-repeat; /* Do not repeat the image */ + background-size: cover; /* Resize the background image to cover the entire container */ + padding-left: 0px; +} + +/* c */ +.form-h2 { + color: orange; + padding-top: 60px; +} +.form-group { + display: flex; + flex-direction: column; + margin-bottom: 20px; + padding-top: 10px; +} +.form-checkbox { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 20px; +} + +.form-group-inline { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 20px; +} +.city-postcode { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 20px; +} +.orange-grey { + display: flex; + flex-direction: row; + gap: 20px; + margin-bottom: 20px; +} +.form-button { + color: orange; + background-color: orange; +} +.terms { + color: orange; +} +.form-line { + border-top: 2px solid rgb(235, 235, 235); + margin-left: 90px; +} +.form-line-mobile{ + display: none; +} +.mobile-img{ + display: none; +} + +label { + font-weight: bold; + margin-bottom: 10px; +} +input[type="text"], +select { + padding: 10px; + font-size: 16px; + margin-bottom: 10px; +} + +input[type="radio"], +input[type="checkbox"] { + margin-right: 10px; +} + +input[type="submit"] { + background-color: orange; + color: white; + padding: 20px 40px; + border-radius: 5px; + border: none; + cursor: pointer; +} +input[type="radio"]:checked { + background-color: orange; + color: orange; +} + +/* none-display for desktop size */ + +#hamburger-menu { + display: none; +} +.mobile-threelines{ + display: none; +} + + +@media screen and (max-width: 540px) { + /* MEET KARMA PAGE */ + .nav-desktop { + display: none; + } + #hamburger-menu { + width: 40px; + height: 40px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + cursor: pointer; + } + + #hamburger-menu span { + width: 10px; + height: 10pxpx; + background-color: #000; + border-radius: 5px; + } + + /* main */ + .icons { + display: flex; + flex-direction: column; + gap: 40px; + border-bottom: 2px solid rgb(223, 223, 223); + } + + /* STORE PAGE */ + +} diff --git a/index.html b/index.html index 3e742ef04..2cbca3bac 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,110 @@ - - - + + + Karma - - - - - - - + + + + + + - +
+ + + + + +
+ +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+ +
+

Everyone needs a little Karma.

+
+
+ +

Internet for all devices

+
+
+ +

Boost your productivity

+
+
+ +

Pay as You Go

+
+
+
+
+
+ + + diff --git a/store-mobile.css b/store-mobile.css new file mode 100644 index 000000000..d4dd02dd9 --- /dev/null +++ b/store-mobile.css @@ -0,0 +1,83 @@ +@media screen and (max-width: 540px) { + /* HEADER */ + .nav-list { + display: none; + } + #hamburger-menu { + grid-area: b; +} + + .karma-logo{ + grid-area: a; + } + .images{ + display: grid; + grid-template-columns: 10px 50px 30px 30px 30px 30px 30px 30px 30px 30px 50px 10px; + grid-row: auto; + grid-template-areas: ". a . . . . . . . . b ."; + position: absolute; + } + /* MAIN */ + .store-main { + display: flex; + flex-direction: column; + } + + .form-group-inline { + display: flex; + flex-direction: column; + } + .city-postcode { + display: flex; + flex-direction: column; + } + #postcode { + width: 120px; + } + .orange-grey { + display: grid; + grid-template-columns: 30px 160px; + grid-template-rows: repeat(2, 1fr); + grid-template-areas: + "a c" + "b d"; + } + #color1 { + grid-area: a; + } + #color2 { + grid-area: b; + } + .color1-orange { + grid-area: c; + } + .color1-grey { + grid-area: d; + } + .form-line { + display: none; + } + .form-line-mobile { + border-bottom: 2px solid grey; + margin-top: 10px; + } + + .mobile-img { + display: inline; + background-position: center; /* Center the image */ + background-repeat: no-repeat; /* Do not repeat the image */ + background-size: cover; /* Resize the background image to cover the entire container */ + margin-top: 80px; + margin-bottom: 50px; + } + + footer { + border-top: 2px solid rgb(223, 221, 221); + margin-right: 30px; + margin-left: 30px; + } + .form-button { + margin-left: 70px; + margin-top: 30px; + } +} diff --git a/store.html b/store.html new file mode 100644 index 000000000..00a34349c --- /dev/null +++ b/store.html @@ -0,0 +1,133 @@ + + + + + + + Document + + + + +
+
+ + + +
+ +
+ + +
+
+

Order your Karma wifi device today!

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