Glasgow 6 - Alena Lazareva - HTML/CSS - Week 1

css/store-style.css

@@ -0,0 +1,108 @@
+/* Page container */
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: auto;
+    width: 100vw;
+}
+
+
+/* Form */
+.form-container {
+    grid-column: 2/6;
+    padding: 6rem 0;
+}
+
+.form-container h1 {
+    color: var(--orange);
+    font-size: 5rem;
+    font-weight: 500;
+    margin-bottom: 3rem;
+}
+
+.form {
+    box-sizing: border-box;
+    color: var(--dark-gray);
+    font-size: 2rem;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: auto;
+    gap: 2rem;
+    row-gap: 2rem;
+
+}
+
+
+.grid-1 {
+    grid-column: 1/3;
+}
+
+.grid-2 {
+    grid-column: 3/5;
+}
+
+.grid-center {
+    grid-column: 1/ -1;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+}
+
+/* form elements */
+input[type=text],
+input[type=radio],
+input[type=checkbox],
+input[type=option] {
+    padding: 1rem;
+    border: 1px solid var(--dark-gray);
+    border-radius: 5px;
+    height: 5rem;
+
+
+}
+
+
+fieldset {
+    margin-top: 1rem;
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+.colors {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.city-box {
+    height: 5rem;
+    /* width: 25rem; */
+    border-radius: 5px;
+}
+
+.agreement-box {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+}
+
+.agreement-box input {
+    height: 2rem;
+}
+
+.agreement-box a {
+    color: var(--orange);
+}
+
+/* Image aside */
+.side-img-box {
+    grid-column: 7/13;
+    background-image: url(/img/store-image_by-andrew-neel-unsplash.jpg);
+    background-size: 110% 110%;
+    /* background-repeat: no-repeat; */
+}

css/style.css

@@ -1,19 +1,227 @@
+/* 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 */
+:root {
+    --orange: #DE6E49;
+    --light-orange: #f1dcd5;
+    --gray: #e9ecef;
+    --white: #fff;
+    --dark-gray: #495057;
+    --text: #212529;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 62.5%;
+    overflow-x: hidden;
+}
 
 body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
+
+}
+
+/* Header & Nav*/
+.main-nav {
+    background-color: var(--gray);
+    height: 9rem;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 5rem;
+    position: relative;
+}
+
+.nav-list {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    list-style: none;
+    gap: 3rem;
+}
+
+.nav-link {
+    text-decoration: none;
+    font-size: 2rem;
+    color: var(--dark-gray);
+}
+
+.main-nav li:first-child a {
+    font-weight: 500;
+}
+
+/* Hero section */
+.hero-section {
+    background-image: url(/img/first-background.jpg);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    padding-top: 10rem;
+    padding-bottom: 20rem;
+    text-align: center;
+}
+
+
+/* Feature Section */
+.feature-section {
+    color: var(--text);
+    text-align: center;
+    padding: 5rem;
+
+}
+
+.feature-flex {
+    display: flex;
+    gap: 5rem;
+    justify-content: space-evenly;
+    margin: 6rem;
+}
+
+.feature {
+    height: 30rem;
+    width: 30rem;
+    text-align: center;
+}
+
+
+/* Testimonial */
+.testimonial-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--light-orange);
+    height: 44rem;
+    width: 100vw;
+    margin-bottom: 5rem; 
+}
+
+.test-img {
+    height: 100%;
+}
+
+/* Footer */
+.footer {
+    height: 15rem;
+    border-top: 1px solid var(--gray);
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.media-icons {
+    display: flex;
+    justify-content: center;
+    gap: 1.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'
- */
+/* Buttons and Links */
+.btn-primary {
+    background-color: var(--orange);
+    border: none;
+    padding: 1.2rem 2.4rem;
+    color: var(--white);
+    font-size: 1.8rem;
+    border-radius: 4px;
+}
+
+.btn-primary:hover,
+.btn-primary:active {
+    background-color: var(--dark-gray);
+}
+
+.nav-link:hover,
+.nav-link:active {
+    color: var(--orange);
+}
+
+.media-icons a:hover,
+.media-icons a:active {
+    background-color: var(--gray);
+    border-radius: 50%;
+}
+
+
+/* Images */
+.karma-logo {
+    height: 5rem;
+}
+
+.big-logo {
+    height: 20rem;
+    width: 20rem;
+    margin-bottom: 3rem;
+}
+
+.test-img img {
+    height: 100%;
+
+}
+
+.media-icon {
+    height: 5rem;
+    width: 5rem;
+    padding: 1rem;
+    border: 1px solid var(--gray);
+    border-radius: 50%;
+}
 
 
+/* Headings & p */
+.heading-h1 {
+    color: var(--white);
+    font-size: 6rem;
+    font-weight: 300;
+}
+
+.heading-h2 {
+    font-size: 4rem;
+    font-weight: 300;
+}
+
+.heading-h3 {
+    color: var(--white);
+    font-size: 3rem;
+    font-weight: 200;
+    margin-bottom: 4rem;
+}
+
+.logo-decr {
+    font-size: 2.4rem;
+}
+
+.test-quote {
+    text-align: center;
+    margin: auto;
+}
+
+blockquote {
+    font-size: 3rem;
+    font-style: italic;
+    font-weight: 400;
+    margin-bottom: 3rem;
+}
+
+blockquote span:first-child,
+blockquote span:last-child {
+    font-size: 4rem;
+    color: var(--orange);
+    margin: 0.6rem;
+    font-weight: 600;
+}
+
+.footer-p {
+    font-size: 2rem;
+    font-weight: 500;
+    margin: 1.5rem;
+}
+
+.copyright {
+    font-size: 1rem;
+    color: var(--dark-gray);
+    font-weight: 200;
+    margin-top: 1.5rem;
+}

img/README.md

@@ -0,0 +1,35 @@
+# karma-clone
+## Level 2
+The aim of this exercise is to:
+-  add a new section to the homepage
+-  create a new 'store' page with an order form
+-  connect the 2 pages together by adding navigation
+
+# Instructions
+
+- You'll find the designs inside the 'level-2' folder.
+- Add the new section in your `index.html`
+- Create a new page called `store.html` and re-create the design for the store page (the design is `level-2/store-desktop.png`)
+- For the store page styles, you can keep using the same `style.css` file and add your store page styles in there.
+You could also create a specific `store.css` file, but make sure you don't repeat the CSS already in `style.css`! 
+- Connect the 2 pages by:
+  - making the homepage's "Get Karma today" button navigate to the store page.
+  - making the header navigation "Store" link navigate to the store page, and the "Meet Karma" link navigate to the homepage.
+
+### Stretch goal
+
+**Custom radio buttons and checkbox**
+
+The 2 radio buttons and the checkbox in the store page design are tricky to style and will require you to do a little research. Focus on the rest of the form and layout first, and leave these until the end as a stretch goal.
+
+## Submitting your work
+ - Remember to **commit and push your code often**
+ - 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).
+ **Note:** If you've added your level 2 code to the same branch, then it will just update your previous Pull Request and you won't need a new PR.
+
+## Designs
+
+![Homepage extended design](./homepage-desktop-extended.png)
+
+![Store design](./store-desktop.png)
+