London9-OlehPysmenko-Week1

README.md

@@ -1,4 +1,5 @@
 # karma-clone
+live version https://tiritaki.github.io/HTML-CSS-Module-Project/
 
 The aim of this exercise is to create a page that looks just like this one: 
 

css/store.css

@@ -0,0 +1,227 @@
+
+ /* 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;
+}
+
+/**
+ * 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'
+ */
+
+ body {
+    margin: 0;
+  }
+
+  body,
+  button {
+    color: var(--grey-dark);
+    font-size: 1rem;
+  }
+
+  h1,h2,h3,h4,h5,h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .header,
+  .content,
+  .footer {
+    padding: 0 1.5rem;
+    margin: 0 auto;
+  }
+/* Header */
+ .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 5rem;
+    margin-bottom: 1rem;
+    padding-top: 1rem;
+  }
+
+  .header__logo {
+    max-height: 40px;
+    width: 40px;
+  }
+
+/* Navigation */
+
+.navigation__list {
+    display: flex;
+    list-style: none;
+    gap: 20px;
+  }
+
+  .navigation__item {
+    padding: 0.5rem 0;
+  }
+
+  .navigation__link {
+    color: var(--grey-dark);
+    font-weight: 300;
+    text-decoration: none;
+  }
+
+  .navigation__link:hover {
+    color: #c05326;
+  }
+
+/* karma-store */
+.content-store {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.article__summary {
+    font-size: 50px;
+    font-weight: 500;
+    color: #c05326;
+}
+/* contact-form */
+.orderForm{
+    display : flex;
+    flex-direction : column;
+    width: 501px;
+    height: 1200px;
+    left: 122px;
+    /* background-color: aquamarine; */
+  }
+
+.orderForm h2 {
+    justify-content: center;
+    margin-top: 117px;
+}
+  .Line {
+    margin-top: 60px;
+    display: flex;
+    justify-content: space-between;
+  }
+  input {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0px;
+    display: block;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  input:checked {
+    border: 1px solid black;
+  }
+  .address {
+    width: 100%;
+  }
+
+  select {
+    width: 170%;
+    padding: 12px 20px;
+    margin: 8px 0px;
+    display: block;
+    border: 1px solid black;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+  legend {
+    font-size: 21px;
+    font-weight: 500;
+  }
+  fieldset {
+    margin-top: 60px;
+    border: 0px;
+  }
+  .radio {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+  }
+
+  #orange {
+    width: 30px;
+    accent-color: #c05326;
+
+  }
+  #grey {
+    width: 30px;
+    accent-color: #c05326;
+  }
+  .label {
+    font-size: 21px;
+    font-weight: 400;
+  }
+  .get_karma {
+    background-color: #c05326;
+    border-radius: 3px;
+    border: none;
+    margin-top: 20px;
+    padding: 15px;
+    color: white;
+    font-size: 22px;
+    font-weight: 500;
+    width: 200px;
+  }
+  .checkbox {
+    accent-color: #c05326;
+    margin-top: 60px;
+    width: 100%;
+    display: flex;
+  }
+
+  .checkbox-line{
+    margin-left: 10px;
+    font-size: 18px;
+    font-weight: 400;
+    display: block;
+  }
+
+  .checkbox-input {
+    height: 20px;
+    width: 20px;
+    background-color: #eee;
+  }
+/* Footer */
+
+.footer {
+    margin-top: 2rem;
+  }
+
+.footer__content {
+    border-top: 2px solid lightgray;
+    padding-top: 0;
+    padding-bottom: 1rem;
+  }
+
+.footer p {
+    padding-bottom: 1rem;
+    text-align: center;
+    font-size: 0.85rem;
+  }
+ .social {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+ }
+.social-icons {
+    max-height: 30px;
+    width: 30px;
+    border: solid 1px lightgray;
+    border-radius: 50%;
+}
+
+.footer__content p {
+    padding-top: 20px;
+    font-size: 1rem;
+    font-weight: 300;
+}