diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..4c7ff40f6 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} diff --git a/README.md b/README.md index 31db35cef..c7da929ca 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,25 @@ # karma-clone -The aim of this exercise is to create a page that looks just like this one: +The aim of this exercise is to create a page that looks just like this one: ![Karma desktop design](./homepage-desktop.png) ### Set up - - **Fork and clone** this repo. - - To fork, hit the 'fork' button in the top right corner of this page on Github. - Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page. - - To clone, click the green button that says 'Code' on that page. - Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Karma repository on Github (which was created when you forked). +- **Fork and clone** this repo. + - To fork, hit the 'fork' button in the top right corner of this page on Github. + Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page. + - To clone, click the green button that says 'Code' on that page. + Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Karma repository on Github (which was created when you forked). # Instructions - - **Edit `index.html` and `style.css`** to re-create the design above. - - Remember, use semantic HTML to re-create the structure, and style each element using CSS to make a perfect copy of the above image. - - All the images and icons you need can be found in the `img` folder, and the font 'Roboto' is already loaded into the project. - - **Only create the desktop design** for now. +- **Edit `index.html` and `style.css`** to re-create the design above. + - Remember, use semantic HTML to re-create the structure, and style each element using CSS to make a perfect copy of the above image. + - All the images and icons you need can be found in the `img` folder, and the font 'Roboto' is already loaded into the project. + - **Only create the desktop design** for now. ### Submitting your work - - **Commit and push your code often** (for example every half an hour)so you get into the habit and you avoid losing any code that you write if your machine crashes for example. - - Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing). +- **Commit and push your code often** (for example every half an hour)so you get into the habit and you avoid losing any code that you write if your machine crashes for example. +- Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing). diff --git a/css/store.css b/css/store.css new file mode 100755 index 000000000..4557c6d2d --- /dev/null +++ b/css/store.css @@ -0,0 +1,247 @@ +body { + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; + color: black; +} + +a:hover { + color: orange; +} + +a, +li { + text-decoration: none; +} + +a:visited { + text-decoration: none; + color: inherit; +} + +button { + padding: 20px; + border: 0px; + background: none; + font-weight: 100; +} + +hr { + display: block; + margin-top: 40; + margin-bottom: 0.5em; + margin-left: 100px; + margin-right: 100px; + border-width: 1px; + opacity: 30%; +} + +#navbar-button { + padding: 10px; +} + +/* ---------- Main ---------- */ + +.body { + display: grid; + grid-template-rows: auto auto 1fr auto; + grid-template-columns: auto 1fr auto; + margin: 10px; + margin-right: 0%; +} + +header { + grid-column: 1 / -1; + display: flex; + flex-direction: row; + flex-direction: row; + align-content: center; + justify-content: space-around; + margin-top: 0px; + margin-bottom: 0px; + font-weight: 100; + background-color: #fdf6f8; +} + +.navbar-logo { + width: 2%; +} + +/* --------------- Footer -------------*/ + +footer { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 0%; +} + +footer > h4, +h3 { + font-weight: 100; + align-items: center; +} + +.social-media-handles { + display: flex; + flex-direction: row; + margin: 0%; +} + +.twitter-handle { + grid-column: 1; + grid-row: 1; + width: 30px; + height: 30px; + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 50px; + opacity: 60%; + margin: 10px; + padding: 5px; +} + +.facebook-handle { + grid-column: 2; + grid-row: 1; + width: 30px; + height: 30px; + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 50px; + opacity: 60%; + margin: 10px; + padding: 5px; +} + +.instagram-handle { + width: 30px; + height: 30px; + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 50px; + opacity: 60%; + margin: 10px; + padding: 5px; +} + +.karma-mobility { + color: rgb(104, 103, 103); +} + +/* +/* +/* ---------- Store Page Starts Here --------- */ +/* +*/ + +:root { + --color-gray: #737888; + --color-lighter-gray: #e3e5ed; + --color-light-gray: #f7f7fa; +} + +.store-container { + grid-column: 1 / -1; + display: flex; + flex-direction: row; + justify-content: space-evenly; +} + +.form-container { + display: flex; + flex-direction: column; + align-items: center; + min-width: 40%; + max-width: 65%rem; + padding: 10vw 2rem 0; + margin: 0 auto; + height: 100vh; +} + +.store-main-image { + max-width: 50%; +} + +/* +/* +/* ---------- Store Form Starts Here --------- */ +/* +*/ + +.form { + display: flex; + flex-direction: column; + justify-content: flex-start; + margin-left: 45px; + margin-right: 45px; +} + +.form > h1 { + color: orangered; + font-weight: 100; + line-height: 2; +} + +.field { + display: flex; + flex-direction: column; + padding: 0.5rem; + border-radius: 0.25rem; + color: #737888; + margin-right: 2%; +} + +label { + display: block; + margin-top: 0.25em; + margin-bottom: 0.25rem; +} + +.req { + color: red; +} + +.form-names, +.form-city-postcode { + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +.select-a-colour { + display: flex; + flex-direction: row; + margin-top: 0%; +} + +.radio-button, +.checkbox { + display: flex; + flex-direction: row; + padding: 0.5rem; + color: #737888; + margin-right: 2%; + cursor: pointer; +} + +#karma-orange, +#space-gray { + margin-right: 10px; +} + +#checkbox { + margin-left: 10px; +} + +.button { + background-color: orangered; + font-size: 0.8rem; + font-weight: 600; + color: #fff; + padding: 1rem; + border-radius: 0.25rem; + border: 0; + outline: 0; + margin-top: 5%; +} +.button:focus-visible { + background-color: #333; +} diff --git a/css/style.css b/css/style.css index 5cb025cef..a02ad6f0e 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,202 @@ +/* +/* +/* +/* --------- General Style --------- */ +/* +*/ - /* 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; + color: black; +} body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + display: grid; + grid-template-rows: auto auto 1fr auto; + grid-template-columns: auto 1fr auto; + margin: 10px; +} + +a:hover { + color: orange; +} + +a, +li { + text-decoration: none; + color: black; +} + +button { + padding: 20px; + border: 0px; + background: none; + font-weight: 100; +} + +hr { + display: block; + margin-top: 40; + margin-bottom: 0.5em; + margin-left: 100px; + margin-right: 100px; + border-width: 1px; + opacity: 30%; +} + +/* ------- IDs --------- */ + +#navbar-button { + padding: 10px; +} + +/* -------- Header adn Main ------ */ + +header { + grid-column: 1 / -1; + display: flex; + flex-direction: row; + flex-direction: row; + align-content: center; + justify-content: space-around; + font-weight: 100; + background-color: #fdf6f8; +} + +.navbar-logo { + width: 2%; +} + +.main > h1 { + font-weight: 100; + font-size: 45px; +} + +/* ---------- First Section -------- */ + +.first-section { + background-image: url("../img/first-background.jpg"); + background-size: cover; + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + color: aliceblue; + margin-bottom: 5%; +} + +.first-section > h1 { + font-weight: 100; } -/** - * 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' - */ +.first-section > h3 { + font-weight: 100; + margin-top: 0px; +} + +.first-section > button { + font-weight: 100; + margin-bottom: 5%; +} +/* ---------- Second Section -------- */ +.second-section { + grid-column: 1 / -1; + display: flex; + flex-direction: row; + align-content: center; + justify-content: center; + margin-bottom: 100px; +} + +.img-resize { + width: 40%; + padding: 60px; +} + +.main-links { + display: flex; + flex-direction: column; + align-items: center; + align-content: space-between; + text-align: center; +} + +/* ---------- Third Section -------- */ + +.third-section { + grid-column: 1 / -1; + display: flex; + flex-direction: row; + justify-content: space-evenly; + background-color: hsl(23, 71%, 92%); + margin-bottom: 10%; +} + +.homepage-feature { + width: 40%; +} + +.testimonial { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-right: 15px; + margin-left: 15px; +} + +.testimonial > h3 { + font-weight: 100; + line-height: 2; +} + +.button-orange { + background-color: #dc4a15; + border: none; + border-radius: 5px; + color: aliceblue; + padding: 10px 18px; + text-align: center; + font-size: 1.5vw; +} + +/* --------- Footer ---------- */ + +footer { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; +} + +footer > h4, +h3 { + font-weight: 100; + align-items: center; +} + +.social-media-handles { + display: flex; + flex-direction: row; + align-items: center; + margin: 0%; +} + +.twitter-handle, +.facebook-handle, +.instagram-handle { + width: 30px; + height: 30px; + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 50px; + opacity: 60%; + margin: 10px; + padding: 5px; +} + +.karma-mobility { + color: rgb(104, 103, 103); +} diff --git a/img/icon-coffee.svg b/img/icon-coffee.svg index 424d88ada..5a96a3e1e 100755 --- a/img/icon-coffee.svg +++ b/img/icon-coffee.svg @@ -1,4 +1,4 @@ - - + + \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..710702fe5 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,127 @@ - - - + + + Karma - - - - - - + + + + + - - - + + + +
+ + +
- + + +
+ +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+ + +

+
Everyone needs a little Karma.
+

+ +
    +
  1. + icon-devices + Internet for all Devices +
    2. +
  2. + icon-coffee + Boost Your Productivity +
    3. +
  3. + icon-refill + Pay as You Go +
    4. +
+ + +
+ homepage-feature +
+

+ "Whatever 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..cea22281e --- /dev/null +++ b/store.html @@ -0,0 +1,3074 @@ + + + + + + Karma + + + + + + + + + +
+ + +
+ + + +
+ + +
+ + + +
+

Order your Karma WiFi device today!

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

Select a colour

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

By placing your order you agree tp Karma's Terms and Conditions. *

+
+
+ +
+
+ store-image +
+
+ +
+ + + + + +