lesson 6

Markup Lesson 6/css/normalize.css

@@ -0,0 +1,363 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+li {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }

Markup Lesson 6/css/style.css

@@ -0,0 +1,380 @@
+main {
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+}
+
+.wrapper {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.content {
+    display: flex;
+    order: 2;
+}
+
+.container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 15px;
+}
+
+.content__wrapper {
+    margin-top: 30px;
+}
+
+.content__text {
+    padding: 0 40px;
+}
+
+.content__wrapper h1 {
+    text-transform: uppercase;
+}
+
+.menu {
+    background-color: rgb(226, 188, 21);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 50px;
+}
+
+.menu__img {
+    width: 190px;
+    position: relative;
+    z-index: 9;
+}
+
+.burger,
+#opener {
+    display: none;
+}
+
+.menu__list ul {
+    display: flex;
+    font-size: 15px;
+}
+
+.menu__list li {
+    padding-left: 10px;
+}
+
+.menu__list a {
+    font-size: 25px;
+    color: black;
+}
+
+.menu__list a {
+    transition: all 0.5s;
+
+}
+
+.menu__list a:hover {
+    color: rgb(34, 132, 149);
+}
+
+.box {
+    display: flex;
+    text-align: center;
+}
+
+.content__list {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    align-items: stretch;
+}
+
+.content__item {
+    width: calc(100% / 3);
+    display: flex;
+    margin-bottom: 15px;
+    justify-content: center;
+}
+
+.item__box {
+    border: 2px solid gray;
+    border-radius: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 15px 10px;
+    transition: all 0.5s;
+}
+
+.item__box:hover {
+    box-shadow: 0px 5px 10px 2px rgb(34 60 80 / 31%);
+    border: 2px solid transparent;
+}
+
+.item__img img {
+    height: 80px;
+    width: 80px;
+    border-radius: 50%;
+    border: 10px solid rgb(167, 167, 128);
+}
+
+.item__text {
+    flex-grow: 1;
+    width: 250px;
+}
+
+.item__btn {
+    background-color: rgb(87, 54, 116);
+    color: white;
+    padding: 5px 20px;
+    border-radius: 30px;
+    font-weight: bold;
+    transition: all 0.7s;
+}
+
+.item__btn:hover {
+    box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
+    transform: scale(1.2);
+    background-color: rgb(182, 158, 204);
+    color: black;
+}
+
+.aside__first,
+.aside__second {
+    width: 210px;
+    height: auto;
+    font-weight: bold;
+}
+
+.aside__first {
+    background-color: rgb(235, 111, 208);
+    order: 1;
+}
+
+.aside__second {
+    background-color: rgb(111, 189, 235);
+    order: 3;
+}
+
+.footer {
+    background-color: cadetblue;
+    padding: 15px 0;
+    text-align: center;
+    width: 100%;
+    font-weight: bold;
+}
+
+.holder__wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 35px auto 50px;
+}
+
+.holder {
+    flex-basis: 400px;
+    height: 100px;
+    border-radius: 20px 20px 0 0;
+    overflow: hidden;
+    border: 2px solid black;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.item {
+    flex-basis: 100px;
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.item__one {
+    background-color: coral;
+    order: 1;
+    flex-basis: 50%;
+}
+
+.item__two {
+    background-color: rgb(164, 164, 236);
+    order: 4;
+}
+
+.item__three {
+    background-color: rgb(205, 80, 255);
+    order: 3;
+}
+
+.item__four {
+    background-color: rgb(11, 105, 11);
+    order: 5;
+}
+
+.item__five {
+    background-color: orange;
+    order: 2;
+    flex-basis: 50%;
+}
+
+@media (max-width: 1280px) {
+    .menu__list a {
+        font-size: 20px;
+    }
+    .content__item {
+        width: calc(100% / 2);
+    }
+}
+
+@media (max-width: 855px) {
+    .menu__nav {
+        display: flex;
+        justify-content: flex-end;
+        flex-grow: 1;
+    }
+    .menu__img {
+        width: 150px;
+    }
+    .burger {
+        position: relative;
+        display: block;
+        width: 30px;
+        height: 20px;
+        font-size: 0;
+    }
+    .burger::before,
+    .burger span,
+    .burger::after {
+        position: absolute;
+        content: "";
+        display: block;
+        height: 2px;
+        width: 35px;
+        background-color: black;
+        left: 50%;
+        transform: translateX(-50%);
+        transition: all .8s;
+    }
+    .burger::before {
+        top: 0;
+    }
+    .burger span {
+        top: 50%;
+        margin-top: -1px;
+        transition: opacity .5s .5s;
+    }
+    .menu__list ul {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100vh;
+        position: absolute;
+        left: -280px;
+        top: 0;
+        width: 280px;
+        background-color: rgb(226, 188, 21);
+        padding: 100px 15px 60px;
+        transition: left .8s;
+    }
+    .menu__list li {
+        padding: 0 0 10px;
+        font-size: 30px;
+        transition: all .5s;
+    }
+    .menu__list li:hover {
+        transform: scale(1.2);
+    }
+    .menu__list a {
+        font-size: 30px;
+    }
+    #opener:checked ~ ul {
+        left: 0;
+    }
+    #opener:checked ~ .burger::before {
+        top: 50%;
+        transform: translate(-50%, -50%) rotate(-45deg);
+    }
+    #opener:checked ~ .burger span {
+        opacity: 0;
+        transition: opacity .5s;
+    }
+    #opener:checked ~ .burger::after {
+        top: 50%;
+        transform: translate(-50%, -50%) rotate(45deg);
+    }
+    .burger::after {
+        top: calc(100% - 2px);
+    }
+    .content__wrapper h1 {
+        font-size: 28px;
+    }
+    .content__item {
+        width: calc(100% / 1);
+    }
+    .box {
+        display: block;
+    }
+    .aside__first,
+    .aside__second {
+        width: 50%;
+        float: left;
+    }
+}
+
+@media (max-width: 500px) {
+    .menu {
+        padding: 15px 20px;
+    }
+    .menu__img {
+        width: 125px;
+    }
+    .holder__wrapper {
+        margin: 35px 15px 50px;
+    }
+    .holder {
+        flex-basis: 280px;
+    }
+    .item__two,
+    .item__three,
+    .item__four {
+        flex-basis: 33%;
+    }
+}
+
+
+@media (max-width: 380px) {
+    .menu__img {
+        width: 100px;
+    }
+    .burger::before,
+    .burger span,
+    .burger::after {
+        width: 25px;
+    }
+    .content__wrapper h1 {
+        font-size: 25px;
+    }
+    .aside__first,
+    .aside__second {
+        width: 100%;
+        float: none;
+        padding: 5px;
+    }
+    .item__img img {
+        height: 70px;
+        width: 70px;
+        border: 8px solid rgb(167, 167, 128);
+    }
+    .item__paragraph {
+        font-size: 15px;
+    }
+    .item__text {
+        width: 220px;
+    }
+}
+
+@media (max-width: 300px) {
+    .item__text {
+        width: 180px;
+    }
+}

Markup Lesson 6/index.html

@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>A-level</title>
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header>
+            <div class="menu">
+                <div class="menu__logo">
+                    <a class="menu__link" href="#">
+                        <img class="menu__img" src="images/logo.png" alt="logo">
+                    </a>
+                </div>
+                <div class="menu__list">
+                    <nav class="menu__nav">
+                        <input id="opener" type="checkbox">
+                        <label class="burger" for="opener">
+                            <span>menu</span>
+                        </label>
+                        <ul>
+                            <li>
+                                <a class="menu__link" href="#">Item1</a>
+                            </li>
+                            <li>
+                                <a class="menu__link" href="#">Item2</a>
+                            </li>
+                            <li>
+                                <a class="menu__link" href="#">Item3</a>
+                            </li>
+                            <li>
+                                <a class="menu__link" href="#">Item4</a>
+                            </li>
+                            <li>
+                                <a class="menu__link" href="#">Item5</a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </header>
+
+        <main>
+            <div class="box">
+                <div class="content">
+                    <div class="container">
+                        <div class="content__wrapper">
+                            <p class="content__text">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ad provident
+                                voluptatem ab tenetur? Nesciunt, neque!
+                                Optio totam perferendis rem, iste voluptas, tempore eos itaque neque molestiae delectus,
+                                quo harum.
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ad provident
+                                voluptatem ab tenetur? Nesciunt, neque!
+                                Optio totam perferendis rem, iste voluptas, tempore eos itaque neque molestiae delectus,
+                                quo harum.
+                            </p>
+                            <h1>
+                                Our work
+                            </h1>
+                            <div class="content__cards">
+                                <ul class="content__list">
+                                    <li class="content__item">
+                                        <div class="item__box">
+                                            <div class="item__img">
+                                                <img src="images/card.jpg" alt="card">
+                                            </div>
+                                            <div class="item__text">
+                                                <h3 class="item__title">
+                                                    Lorem ipsum
+                                                </h3>
+                                                <p class="item__paragraph">
+                                                    Lorem ipsum dolor. Rem accusantium consectetur debitis mollitia quia
+                                                    sequi nostrum voluptatibus qui ad?
+                                                </p>
+                                            </div>
+                                            <a class="item__btn" href="#">Go</a>
+                                        </div>
+                                    </li>
+                                    <li class="content__item">
+                                        <div class="item__box">
+                                            <div class="item__img">
+                                                <img src="images/card.jpg" alt="card">
+                                            </div>
+                                            <div class="item__text">
+                                                <h3 class="item__title">
+                                                    Lorem ipsum
+                                                </h3>
+                                                <p class="item__paragraph">
+                                                    Lorem ipsum dolor. Rem accusantium consectetur debitis mollitia quia
+                                                    sequi nostrum voluptatibus qui ad?
+                                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
+                                                    ad provident voluptatem ab tenetur? Nesciunt, neque!
+                                                    Optio totam perferendis rem, iste voluptas, tempore eos itaque neque
+                                                    molestiae delectus, quo harum.
+                                                </p>
+                                            </div>
+                                            <a class="item__btn" href="#">Go</a>
+                                        </div>
+                                    </li>
+                                    <li class="content__item">
+                                        <div class="item__box">
+                                            <div class="item__img">
+                                                <img src="images/card.jpg" alt="card">
+                                            </div>
+                                            <div class="item__text">
+                                                <h3 class="item__title">
+                                                    Lorem ipsum
+                                                </h3>
+                                                <p class="item__paragraph">
+                                                    Lorem ipsum dolor. Rem accusantium consectetur debitis mollitia quia
+                                                    sequi nostrum voluptatibus qui ad?
+                                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
+                                                    ad provident voluptatem ab tenetur? Nesciunt, neque!
+                                                    Optio totam perferendis rem, iste voluptas, tempore eos itaque neque
+                                                    molestiae delectus, quo harum.
+                                                </p>
+                                            </div>
+                                            <a class="item__btn" href="#">Go</a>
+                                        </div>
+                                    </li>
+                                    <li class="content__item">
+                                        <div class="item__box">
+                                            <div class="item__img">
+                                                <img src="images/card.jpg" alt="card">
+                                            </div>
+                                            <div class="item__text">
+                                                <h3 class="item__title">
+                                                    Lorem ipsum
+                                                </h3>
+                                                <p class="item__paragraph">
+                                                    Lorem ipsum dolor. Rem accusantium consectetur debitis mollitia quia
+                                                    sequi nostrum voluptatibus qui ad?
+                                                </p>
+                                            </div>
+                                            <a class="item__btn" href="#">Go</a>
+                                        </div>
+                                    </li>
+                                    <li class="content__item">
+                                        <div class="item__box">
+                                            <div class="item__img">
+                                                <img src="images/card.jpg" alt="card">
+                                            </div>
+                                            <div class="item__text">
+                                                <h3 class="item__title">
+                                                    Lorem ipsum
+                                                </h3>
+                                                <p class="item__paragraph">
+                                                    Lorem ipsum dolor. Rem accusantium consectetur debitis mollitia quia
+                                                    sequi nostrum voluptatibus qui ad?
+                                                </p>
+                                            </div>
+                                            <a class="item__btn" href="#">Go</a>
+                                        </div>
+                                    </li>
+                                    <li class="content__item">
+                                        <div class="item__box">
+                                            <div class="item__img">
+                                                <img src="images/card.jpg" alt="card">
+                                            </div>
+                                            <div class="item__text">
+                                                <h3 class="item__title">
+                                                    Lorem ipsum
+                                                </h3>
+                                                <p class="item__paragraph">
+                                                    Lorem ipsum dolor. Rem accusantium consectetur debitis mollitia quia
+                                                    sequi nostrum voluptatibus qui ad?
+                                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
+                                                    ad provident voluptatem ab tenetur? Nesciunt, neque!
+                                                    Optio totam perferendis rem, iste voluptas, tempore eos itaque neque
+                                                    molestiae delectus, quo harum.
+                                                </p>
+                                            </div>
+                                            <a class="item__btn" href="#">Go</a>
+                                        </div>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="holder__wrapper">
+                                <div class="holder">
+                                    <div class="item item__one">1</div>
+                                    <div class="item item__two">2</div>
+                                    <div class="item item__three">3</div>
+                                    <div class="item item__four">4</div>
+                                    <div class="item item__five">5</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <aside class="aside__first">
+                    <p>
+                        Aside 1
+                    </p>
+                </aside>
+                <aside class="aside__second">
+                    <p>
+                        Aside 2
+                    </p>
+                </aside>
+            </div>
+        </main>
+        <footer class="footer">
+            Footer
+        </footer>
+    </div>
+</body>
+</html>