diff --git a/css/store.css b/css/store.css new file mode 100644 index 000000000..73f9cfa6d --- /dev/null +++ b/css/store.css @@ -0,0 +1,248 @@ +/* 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; + + display: grid; + grid-template-columns: auto; + grid-template-rows: 10vh 75vh auto; +} + +.header { + grid-row: 1 / 2; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + background-color: aliceblue; +} + +.main { + grid-row: 2 / 3; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: auto; + border-bottom: 1px solid gray; +} + +.footer { + grid-row: 3 / -1; + text-align: center; + margin-bottom: 2rem; +} + +.header img { + width: 10%; + height: 80%; +} + +.header nav { + display: flex; + flex-direction: row; + gap: 1rem; +} + +.header a { + text-decoration: none; + color: grey; +} + +.header a:hover { + color: orangered; +} + +#section1 { + grid-column: 1 / 7; + margin: 1rem 2rem 0px; + display: flex; + flex-direction: column; + margin: 1rem 5rem 1rem; + height: 75vh; +} + +#section1 h1 { + color: orangered; + text-align: center; + margin: 2rem; +} + +#section1 form .form { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(7, auto); + grid-template-areas: + "f f f f f f l l l l l l" + "a a a a a a a a a a a a" + "b b b b b b b b b b b b" + "c c c c c c c c p p p p" + "r r r r r r r r r r r r" + "t t t t t t t t t t t t" + "o o o o o o . . . . . ."; + gap: 1rem; +} + +#section1 form .firstName { + grid-area: f; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .lastName { + grid-area: l; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .address { + grid-area: a; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .address2 { + grid-area: b; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .city { + grid-area: c; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .postcode { + grid-area: p; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .radio-div { + grid-area: r; +} +#section1 form .radio-div #grey { + margin-left: 2rem; +} + +/* Customise the radio input control*/ +input[type="radio"] { + appearance: none; + display: inline-block; + width: 1rem; + height: 1rem; + padding: 0.1rem; + border: 1px solid black; + border-radius: 50%; + background-color: white; + background-clip: content-box; + cursor: pointer; +} +input[type="radio"]:checked { + background-color: orangered; +} + +/* Customise the checkbox input control*/ +.container { + position: relative; + padding-left: 1.75rem; + margin-top: 1.5rem; +} + +.container input[type="checkbox"] { + appearance: none; +} + +.container .checkmark { + position: absolute; + top: 0; + left: 0; + width: 20px; + height: 20px; + border: 1px solid black; + background-color: white; + border-radius: 15%; + cursor: pointer; +} + +.container .checkmark::after { + content: ""; + position: absolute; + display: none; +} + +.container input[type="checkbox"]:checked ~ .checkmark::after { + display: block; +} + +.container .checkmark::after { + top: 0px; + left: 6px; + width: 5px; + height: 16px; + border: solid orangered; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +/* grid items of main*/ +#section1 form .terms-div { + grid-area: t; + display: flex; + flex-direction: row; + align-items: center; +} +#section1 form .btn { + grid-area: o; + background-color: orangered; + border: none; + border-radius: 5%; + padding: 2rem; + margin: 3rem 0px; + color: white; +} + +#section1 form .terms-div img { + height: 3vh; + width: 2vw; + border: 1px solid black; + border-radius: 10%; +} +#section1 form .terms-div a { + color: orangered; +} +#section1 form .terms-div p { + padding-left: 0.25rem; +} + +#section1 form .italic { + font-style: italic; +} + +#section2 { + grid-column: 7 / -1; +} +#section2 img { + width: 100%; + height: 75vh; +} + +.footer div img { + height: 2%; + width: 2%; +} + +.footer div a { + text-decoration: none; + margin: 0 0.5rem; +} + +/** + * 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' + */ ; diff --git a/css/style.css b/css/style.css index 5cb025cef..31cdd9d58 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,158 @@ - - /* 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; + + display: grid; + grid-template-columns: auto; + grid-template-rows: 10vh auto auto; +} + +.header { + grid-row: 1 / 2; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + background-color: aliceblue; +} + +.main { + grid-row: 2 / 3; + display: flex; + flex-direction: column; + border-bottom: 1px solid gray; + padding-bottom: 5rem; +} + +.footer { + grid-row: 3 / -1; + text-align: center; + margin-bottom: 2rem; +} + +.header img { + width: 10%; + height: 80%; +} + +.header nav { + display: flex; + flex-direction: row; + gap: 1rem; +} + +.header a { + text-decoration: none; + color: grey; +} + +.header a:hover { + color: orangered; +} + +#section1 { + background-image: url("../img/first-background.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-clip: padding-box; + margin: 0px 2rem; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 80vh; +} +#section1 button { + background-color: orangered; + border: none; + font-size: 0.75rem; + margin: 1rem 1rem; + padding: 0.75rem 1.5rem; + border-radius: 5%; +} +#section2 { + text-align: center; + margin: 5rem 5rem 0px; +} +#section2 div { + display: flex; + flex-direction: row; + justify-content: center; +} + +#section2 div a { + text-decoration: none; + color: black; +} + +#section2 figure img { + width: auto; + height: 10vh; +} + +#section2 figure figcaption { + margin-top: 1rem; + margin-bottom: 5rem; +} + +.section3 { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: auto; + justify-content: center; + gap: 0px; + margin: 0px 2rem; +} + +.section3 .next-page { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: pink; + grid-column: 5 / -1; +} + +.section3 a { + text-decoration: none; + color: white; +} + +.section3 button { + background-color: orangered; + border: none; + border-radius: 5%; + padding: 1rem; + margin-top: 3rem; +} + +.section3 .image { + grid-column: 1 / 5; +} + +.section3 q:before { + color: orangered; +} + +.section3 q:after { + color: orangered; +} + +.section3 q { + padding: 0px 8rem; +} + +.footer div img { + height: 2%; + width: 2%; +} + +.footer div a { + text-decoration: none; + margin: 0 0.5rem; } /** @@ -14,6 +163,4 @@ body { * 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' - */ - - + */ ; 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..2f23b209f 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..eb229acf4 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,97 @@ - - - + + + Karma - - - - - - + + + + + + +
+ logo + +
+ +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+ +
+

Everyone needs a little Karma.

+
+ +
+ computer +
Internet for all devices
+
+ + +
+ coffee mug +
Boost your productivity
+
+ + +
+ petrol pump +
Pay as You Go
+
+ +
+
+ +
+
+ photo +
+
+ + 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..f86f16877 --- /dev/null +++ b/store.html @@ -0,0 +1,121 @@ + + + + + + Karma + + + + + + +
+ logo + +
+ +
+
+

Order your Karma WiFi device today!

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

Select a colour

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