diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..b57a2df49 Binary files /dev/null and b/.DS_Store differ 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..fd4032f7d 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,527 @@ - - /* 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; } /** * Add your custom styles below * * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks + * - Be organized, 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' */ +body { + margin: 40px; +} + +.header, +.main, +.footer { + margin: 0; +} + +/* Index-page | Header-styles */ + +.header { + display: flex; + justify-content: space-between; + padding: 10px 150px; + background-color: #f9f9f9; +} + +.header-logo { + max-width: 30px; + width: 100%; + height: 100%; +} + +.nav-list { + list-style: none; + display: flex; + margin: 0; + padding: 0; +} + +.nav-item { + margin-right: 50px; +} + +.nav-item:last-child { + margin-right: 0; +} + +.nav-link { + text-decoration: none; + color: gray; +} + +.nav-link:hover { + color: #e06239; +} + +#black-text { + color: black; +} + +#black-text:hover { + color: #e06239; +} + +/*Index-page | Main-styles */ + +.main { + text-align: center; + border-bottom: 2px solid lightgray; + margin-bottom: 20px; +} + +.xx-large-text { + font-size: 5em; +} + +.large-text { + font-size: 3em; +} + +.x-large-text { + font-size: 4em; +} + +.with-img-background { + background-image: url("../img/first-background.jpg"); + display: flex; + justify-content: center; + align-items: center; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 100vh; +} + +.content { + color: white; +} + +.button { + background-color: #e06239; + text-decoration: none; + color: white; + font-size: 1.5em; + border-radius: 5px; + border: 0; + padding: 20px 40px; +} + +.icons { + width: 10em; + height: 10em; + padding-left: 6em; + padding-right: 6em; +} + +.with-three-icons { + margin-top: 10em; + margin-bottom: 5em; +} + +.the-three-icons { + display: flex; + justify-content: center; +} + +.icons-texts { + margin-left: 2em; + margin-right: 2em; +} + +#p1 { + font-size: 2em; +} + +#p2 { + font-size: 2em; +} + +#p3 { + font-size: 2em; +} + +.with-img-connection { + display: flex; + margin: 5em 0; + background-color: #fcefeb; + text-align: center; + align-items: center; +} + +#italic-text { + font-style: italic; + padding-right: 1em; + padding-left: 1em; +} + +span { + color: #e06239; +} + +#img-laughing-lady { + width: 100%; + height: 100%; +} + +/*Index-page | Footer-styles */ + +.footer { + text-align: center; +} + +.footer-items { + margin: 10px; +} + +.footer-icons { + max-width: 20px; + width: 100%; + height: 100%; + margin: 5px; + border-radius: 50%; + border: 1px lightgrey solid; + padding: 10px; +} + +.footer-text-grey { + color: grey; +} + +/* Store-page */ + +/* Store-page | Main-styles */ + +.main-store-page { + border-bottom: 2px solid lightgray; + border-top: 2px solid lightgray; + margin-bottom: 20px; +} + +.with-form-img { + display: flex; +} + +#img-working-lady { + width: 50%; +} + +#form-col { + width: 50%; +} + +#form-col-with-items { + margin-left: 15%; + margin-right: 15%; + height: 100%; +} + +#form-text-order { + color: #e06239; + margin-top: 20%; + width: 100%; +} + +.flex-inputs { + display: flex; + justify-content: space-between; + width: 100%; + margin-bottom: 5%; +} + +#radio-buttons { + display: flex; +} + +form { + margin-top: 10%; + margin-bottom: 10%; +} + +.form-items { + margin-bottom: 5%; +} + +label { + font-size: 1.5em; +} + +input { + width: 100%; + font-size: 1.5em; + padding: 0.4em; +} + +#city { + font-size: 1.5em; + padding: 0.4em; +} + +#postcode-container { + width: 25%; +} + +#city-container { + width: 75%; +} + +a { + color: #e06239; +} + +#agreement-text { + font-size: 1.2em; +} + +.radio-checkbox-text { + display: flex; + margin-right: 50px; +} + +#karma-orange { + accent-color: #e06239; + margin-right: 1em; + width: 1em; + height: 1em; +} + +#space-grey { + accent-color: #e06239; + width: 1em; + height: 1em; + margin-right: 1em; +} + +#agree { + accent-color: #e06239; + margin-right: 1em; + width: 1em; + height: 1em; +} + +/* Media-queries */ + +/* Media-queries | Index-page */ + +@media (max-width: 768px) { + body { + margin: 0; + } + + /* Media-queries | Index-page | Header-styles */ + + .header { + padding: 20px; + background-color: white; + } + + .nav-list { + flex-direction: column; + } + + .nav-item { + margin: 5px 0; + } + + /* Media-queries | Index-page | Main-styles */ + + .with-img-background { + height: auto; + padding: 2em; + } + + .content { + text-align: center; + padding: 3em; + } + + .button { + padding: 0.5em 1em; + margin-bottom: 2em; + } + + .xx-large-text { + font-size: 3em; + } + .large-text { + font-size: 2em; + } + + .x-large-text { + font-size: 2.5em; + } + + .with-three-icons { + margin-top: 3em; + margin-bottom: 5em; + } + + .the-three-icons { + display: block; + } + + #p1 { + font-size: 1.3em; + } + + #p2 { + font-size: 1.3em; + } + + #p3 { + font-size: 1.3em; + } + + .icons-texts { + margin: 1em; + } + + .icons { + width: 5em; + height: 5em; + margin-top: 3em; + margin-bottom: 1em; + } + + .with-img-connection { + display: block; + background-color: #fcefeb; + text-align: center; + align-items: center; + } + + #img-laughing-lady { + width: 100%; + } + + #last-text-button { + margin: 4em 2em; + padding-top: 1em; + padding-bottom: 6em; + } + + #last-button { + padding: 20px 40px; + } + + #italic-text { + margin-bottom: 3em; + } + + /* Media-queries | Index-page | Footer-styles */ + + .footer { + padding-bottom: 4em; + } + + /* Media-queries | Store-page */ + + /* Media-queries | Store-page | Main-styles */ + + form { + padding-top: 3em; + } + + #form-col-with-items { + padding: 1em; + margin: 1em; + } + + .with-form-img { + flex-direction: column; + } + + #city { + width: 143%; + } + + #postcode { + width: 200%; + } + + #img-working-lady { + width: 100%; + height: 100%; + margin-bottom: 3em; + } + + #form-col { + width: 100%; + } + + #order-paragraph { + text-align: center; + } + + #form-text-order { + margin-top: 0.5em; + } + + .flex-inputs { + flex-direction: column; + } + + .flex-inputs-children { + margin-bottom: 1em; + } + + #radio-buttons { + flex-direction: column; + } + + .radio-checkbox-text { + margin-bottom: 1em; + } + + #agree { + width: 2em; + height: 2em; + } + + #order-button { + padding: 20px 60px; + } + + #order-button-div { + display: flex; + justify-content: center; + align-items: center; + margin-top: 2em; + } +} + +/* Hamburger-menu */ + +#ham-nav label, +#hamburger { + display: none; +} + +/* Hamburger-menu | Media-queries */ + +@media (max-width: 768px) { + #ham-nav label { + display: flex; + justify-content: right; + font-size: 3em; + } + + #ham-items { + display: none; + } + + #ham-nav input:checked ~ #ham-items { + display: block; + } +} diff --git a/index.html b/index.html index 3e742ef04..134ac7bff 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,137 @@ - - - + + + Karma - - - - - - - + + + + + + - +
+ + + +
+ +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+ +
+

Everyone needs a little Karma.

+
+
+ Icon for devices +

Internet for all devices

+
+
+ Icon for coffee +

Boost your productivity

+
+
+ Icon for refill +

Pay as You Go

+
+
+
+
+ A lady sitting comfortably with her cup of coffee on a table and laughing and looking at her tablet +
+

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

+ Get Karma today + +
+
+
+ + + diff --git a/store.html b/store.html new file mode 100644 index 000000000..4fcfef09c --- /dev/null +++ b/store.html @@ -0,0 +1,227 @@ + + + + + + Karma + + + + + + + + + + +
+ + + +
+ +
+
+
+
+
+

+ Order your Karma wifi device today! +

+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ + +
+
+
+
+ +
+
+
+
+ A lady sitting and working with her laptop and holding a cup of coffee with the other hand +
+
+ + + +