Feature/cakes co completed (new fixes) | Umair | Modult-HTML-CSS | Week 2

.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+  "cSpell.words": [
+    "adipisicing",
+    "amet",
+    "assumenda",
+    "Catalunya",
+    "consectetur",
+    "deserunt",
+    "dolorum",
+    "eaque",
+    "elit",
+    "ipsa",
+    "itaque",
+    "maxime",
+    "necessitatibus",
+    "nesciunt",
+    "Obcaecati",
+    "officia",
+    "recusandae",
+    "Specialities",
+    "unde",
+    "velit",
+    "Veniam",
+    "veritatis"
+  ]
+}

Cakes-Co/css/general.css

@@ -0,0 +1,108 @@
+/* General styling */
+:root {
+  /* Main colors */
+  --main-color: #fae5d3;
+  --main-light-color: #fdf2e9;
+  --main-color-2: #e67e22;
+  --cta-color: #45260a;
+
+  /* Shades */
+  --shade-dark: #eb984e;
+  --shade-light: #ddd;
+
+  /* Greys */
+  --grey-color-1: #888;
+  --grey-color-2: #555;
+  --grey-color-3: #333;
+  --grey-color-4: #767676; /* (Lightest grey allowed on #fff) */
+  --grey-color-5: #6f6f6f; /* (Lightest grey allowed on #fdf2e9) */
+}
+
+/* Box shadow
+box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15);
+box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
+ */
+
+/* Reset padding and margin for all elements and set box-sizing to border-box */
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+/* set default font size to 10px */
+html {
+  font-size: 62.5%;
+}
+
+/* Default for body */
+body {
+  font-family: "Rubik", sans-serif;
+  line-height: 1;
+  font-weight: 400;
+  color: var(--grey-color-4);
+}
+
+/* container sizing */
+.container {
+  max-width: 130rem;
+  padding: 0 3.2rem;
+  margin: 0 auto;
+}
+
+/* Headings sizing */
+.heading-primary,
+.heading-secondary,
+.heading-tertiary {
+  font-weight: 700;
+  color: var(--grey-color-5);
+  letter-spacing: -0.5px;
+}
+
+.heading-primary {
+  font-size: 5.2rem;
+  line-height: 1.05;
+  margin-bottom: 2.4rem;
+}
+
+.heading-secondary {
+  font-size: 4rem;
+  line-height: 1.2;
+  margin-bottom: 2rem;
+}
+
+hr {
+  max-width: 50%;
+  margin: 5rem auto;
+  opacity: 0.4;
+}
+
+/* select list first option styling */
+select {
+  font-style: italic;
+}
+
+select:focus option,
+select option {
+  font-style: normal;
+}
+
+select:valid {
+  font-style: normal;
+}
+
+/* Button styling */
+.btn,
+.btn:link,
+.btn:visited {
+  display: inline-block;
+  text-decoration: none;
+  font-size: 2rem;
+  font-weight: 600;
+  font-family: inherit;
+  border: none;
+  border-radius: 0.9rem;
+  padding: 1.6rem 3.2rem;
+  cursor: pointer;
+  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
+}

Cakes-Co/css/media-queries.css

@@ -0,0 +1,136 @@
+@media only screen and (max-width: 1024px) {
+  .main-nav-list {
+    font-size: 1.8rem;
+  }
+
+  .hero-heading {
+    line-height: 1.2em;
+    font-size: 3.4rem;
+    margin-bottom: 1.2rem;
+  }
+
+  .hero-description {
+    font-size: 1.8rem;
+    line-height: 1.4em;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  .cta-form {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  /* nav to menu */
+  .main-nav {
+    padding: 0;
+    height: 0;
+  }
+
+  .main-nav-list {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--main-light-color);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+  }
+
+  .main-nav-list li {
+    margin: 1rem 0;
+  }
+
+  .menu-icon {
+    display: block;
+    position: fixed;
+    top: 5rem;
+    right: 2rem;
+    z-index: 1000;
+  }
+
+  /* When the checkbox is checked, show the menu */
+  .menu-toggle:checked + .menu-icon + .main-nav-list {
+    display: flex;
+  }
+  /* nav to menu end */
+
+  .site-description {
+    font-size: 2.2em;
+    max-width: 60%;
+    line-height: 1.2;
+    margin: 0 2.5rem;
+  }
+  .featured-heading {
+    margin-bottom: 0;
+  }
+  .featured-section {
+    grid-template-columns: repeat(2, 1fr);
+    padding: 2.4rem;
+  }
+  .section-cta {
+    padding: 3rem 0 5.6rem 0;
+  }
+  .cta-text {
+    line-height: 1.4;
+  }
+  .cta {
+    grid-template-columns: 1fr;
+  }
+  .cta-text-box {
+    padding: 3.2rem;
+  }
+  .cta-img-box {
+    height: 24rem;
+    grid-row: 1;
+  }
+  .footer {
+    grid-template-columns: repeat(2, 1fr);
+    row-gap: 2.4rem;
+  }
+}
+
+/* Mobile devices */
+@media only screen and (max-width: 600px) {
+  .site-description {
+    font-size: 1.8em;
+    max-width: 60%;
+    line-height: 1.2;
+  }
+  .hero-section {
+    grid-template-columns: 1fr;
+  }
+  .hero-content {
+    order: -1;
+  }
+  .hero-heading {
+    line-height: 1.2em;
+    font-size: 2.8rem;
+    margin-bottom: 1.2rem;
+  }
+  .hero-image {
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+  .footer {
+    grid-template-columns: 1fr;
+    gap: 5rem;
+  }
+  .footer-heading {
+    font-size: 1.6rem;
+    font-weight: 500;
+    margin-bottom: 1.5rem;
+  }
+  .address {
+    margin-bottom: 1.2rem;
+  }
+  .contacts {
+    font-size: 1.4rem;
+    font-style: normal;
+    line-height: 1.2;
+  }
+}