Explorar o código

home work markup

serg155alternate %!s(int64=2) %!d(string=hai) anos
pai
achega
59c563d26b
Modificáronse 6 ficheiros con 847 adicións e 0 borrados
  1. BIN=BIN
      MarkupHW2/icons/favicon.ico
  2. BIN=BIN
      MarkupHW2/img/card_img.jpg
  3. BIN=BIN
      MarkupHW2/img/logo.png
  4. 148 0
      MarkupHW2/index.html
  5. 350 0
      MarkupHW2/main.css
  6. 349 0
      MarkupHW2/normalize.css

BIN=BIN
MarkupHW2/icons/favicon.ico


BIN=BIN
MarkupHW2/img/card_img.jpg


BIN=BIN
MarkupHW2/img/logo.png


+ 148 - 0
MarkupHW2/index.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="zxx">
+<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">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon">
+    <title>HOME WORK 6</title>
+
+</head>
+<body>
+    <div class="body__wrapper" >
+        <header class="header">
+            <a href="#" class="header__logo"><img src="img/logo.png" alt="A-level"></a>
+            <nav>
+                <ul class="header__nav">
+                    <li> <a href="#">Item1</a></li>
+                    <li><a href="#">Item2</a></li>
+                    <li><a href="#">Item3</a></li>
+                    <li><a href="#">Item4</a></li>
+                    <li><a href="#">Item5</a></li>
+                </ul>
+            </nav>  
+            <nav class="main-nav hamburger-menu">
+                <input id="menu__toggle" type="checkbox" />
+                <label class="menu__btn" for="menu__toggle">
+                    <span></span>
+                </label>
+                
+                <ul class="menu__box">
+                  <li><a class="menu__item" href="#">Главная</a></li>
+                  <li><a class="menu__item" href="#">Проекты</a></li>
+                  <li><a class="menu__item" href="#">Команда</a></li>
+                  <li><a class="menu__item" href="#">Блог</a></li>
+                  <li><a class="menu__item" href="#">Контакты</a></li>
+                </ul>
+              </nav> 
+        </header>
+        <main class="main">
+            <div class="main__wrapper">
+                <div class="main__content">
+                       <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, impedit quasi recusandae minus similique voluptatem, fugit hic perspiciatis laboriosam accusantium numquam? Ea incidunt vel odit excepturi minima maxime, doloribus fugit!</p>  
+                       <h1>our work</h1>
+                       <div class="card__row">
+                                <div class="col">
+                                    <div class="card">
+                                        <div class="card__img"></div>
+                                        <!-- можно ли не использовать обертки под телокарты хедер и футер? -->
+                                        <div class="card__body">
+                                            <h3>Lorem ipsum dolor sit amet .</h3>
+                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tempore, perspiciatis sit voluptatum totam sed laudantium iste ipsam adipisci aut laboriosam dignissimos nihil inventore molestiae sapiente praesentium, tempora illum aspernatur.</p> 
+                                        </div>
+                                        <div class="card__footer">
+                                            <button class="card__btn"><b>Go</b> </button> 
+                                        </div>
+                                    </div>   
+                                </div>
+                                <div class="col">
+                                    <div class="card">
+                                        <div class="card__img"></div>
+                                        <!-- можно ли не использовать обертки под телокарты хедер и футер? -->
+                                        <div class="card__body">
+                                            <h3>Lorem ipsum dolor sit amet .</h3>
+                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tempore, perspiciatis sit voluptatum totam sed laudantium iste ipsam adipisci aut laboriosam dignissimos nihil inventore molestiae sapiente praesentium, tempora illum aspernatur.</p> 
+                                        </div>
+                                        <div class="card__footer">
+                                            <button class="card__btn"><b>Go</b> </button> 
+                                        </div>
+                                    </div>   
+                                </div>
+                                <div class="col">
+                                    <div class="card">
+                                        <div class="card__img"></div>
+                                        <!-- можно ли не использовать обертки под телокарты хедер и футер? -->
+                                        <div class="card__body">
+                                            <h3>Lorem ipsum dolor sit amet .</h3>
+                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tempore, perspicimpora illum aspernatur.</p> 
+                                        </div>
+                                        <div class="card__footer">
+                                            <button class="card__btn"><b>Go</b> </button> 
+                                        </div>
+                                    </div>   
+                                </div>
+                                <div class="col">
+                                    <div class="card">
+                                        <div class="card__img"></div>
+                                        <!-- можно ли не использовать обертки под телокарты хедер и футер? -->
+                                        <div class="card__body">
+                                            <h3>Lorem ipsum dolor sit amet .</h3>
+                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tempore, perspiciatis sil inventore molestiae sapiente praesentium, tempora illum aspernatur.</p> 
+                                        </div>
+                                        <div class="card__footer">
+                                            <button class="card__btn"><b>Go</b> </button> 
+                                        </div>
+                                    </div>   
+                                </div>
+                                <div class="col">
+                                    <div class="card">
+                                        <div class="card__img"></div>
+                                        <!-- можно ли не использовать обертки под телокарты хедер и футер? -->
+                                        <div class="card__body">
+                                            <h3>Lorem ipsum dolor sit amet .</h3>
+                                            <p>Lorem ipsum dolor sit amet consectetur adipisiciium, tempora illum aspernatur.</p> 
+                                        </div>
+                                        <div class="card__footer">
+                                            <button class="card__btn"><b>Go</b> </button> 
+                                        </div>
+                                    </div>   
+                                </div>
+                                <div class="col">
+                                    <div class="card">
+                                        <div class="card__img"></div>
+                                        <!-- можно ли не использовать обертки под телокарты хедер и футер? -->
+                                        <div class="card__body">
+                                            <h3>Lorem ipsum dolor sit amet .</h3>
+                                            <p>Lorem ipsum dolor sit amet consectetur adipispsam adipisci aut laboriosam dignissimos nihil inventore molestiae sapiente praesentium, tempora illum aspernatur.</p> 
+                                        </div>
+                                        <div class="card__footer">
+                                            <button class="card__btn"><b>Go</b> </button> 
+                                        </div>
+                                    </div>   
+                                </div>
+                            
+                        </div>
+                         
+                        <div class="main__blocks">
+                            <div class="holder">
+                                <div class="item">1</div>
+                                <div class="item">2</div>
+                                <div class="item">3</div>
+                                <div class="item">4</div>
+                                <div class="item">5</div>
+                              </div>
+                        </div>
+                </div>
+                <aside class="aside_l"> <span>Aside 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nostrum, harum non molestiae officiis corporis accusamus eius blanditiis quibusdam consectetur odit obcaecati doloremque autem. Harum cumque distinctio unde rem eos.</span></aside>
+                <aside class="aside_r"> <span>Aside 2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores, tenetur. Vitae iure eos sunt nihil reprehenderit sint vel, dignissimos tenetur possimus praesentium laborum perspiciatis ducimus nulla natus fuga officiis vero.</span></aside>
+            </div>
+            
+        </main>      
+        <footer class="footer">
+           <span>Footer</span>
+        </footer>
+    </div>
+</body>
+</html>

+ 350 - 0
MarkupHW2/main.css

@@ -0,0 +1,350 @@
+html {
+    box-sizing: border-box;
+    height: 100%;
+
+
+
+}
+body {
+    height: 100%;
+
+}
+*,
+:before,
+:after {
+    box-sizing: inherit;
+}
+a {
+    text-decoration: none;
+}
+.container {
+   max-width: 1150px;
+   margin: 0 auto; 
+   padding: 0 15px;
+}
+
+.body__wrapper {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    
+
+}
+.header {
+    min-height: 93px;
+    background-color: #d3b715;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+}
+.main {
+    flex-grow:1;
+}
+.header__nav {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    list-style: none;
+}
+.header__nav li{
+    padding-left: 10px;
+}
+
+.header__nav a {
+    color: black;
+    font-weight: 700;
+    }
+.main__wrapper {
+    display: flex;
+    
+}
+.main__content {
+    order: 2;
+    padding: 32px 15px;
+    text-align: center;
+    
+}
+h1 {
+    text-transform: uppercase;
+    margin-bottom: 30px;
+}
+
+.card__row {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -15px;
+  
+
+}
+.col {
+    width: 33.333%;
+    padding:0 15px 30px;  
+        
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    border: solid black 2px;
+    text-align: center;
+    min-height: 100%;
+    border-radius: 14px;
+    padding: 20px 15px;    
+}
+.col:hover {
+    cursor: pointer;
+    transition: all .5s ease-in;
+    transform: rotateY(360deg);
+    
+}
+.card__img {
+    width: 75px;
+    height: 75px;
+    margin: 0 auto;
+    border: 10px solid #9cb0c8;
+    border-radius:100%;
+    background: url('img/card_img.jpg') center center/cover no-repeat;
+}
+.card__body {
+    flex-grow: 1;
+    text-align: center;
+}
+.card__btn {
+    background-color: #695077;
+    border-radius:20px;
+    padding: 4px 18px;
+    color: aliceblue;
+}
+aside {
+    padding: 10px;
+}
+.aside_l {
+    background-color:#c798ba;
+    max-width: 234px;
+    width: 100%;
+    order: 1;
+    text-align: center;
+    padding-top: 10px;
+}
+.aside_r {
+    background-color:#9cb0c8;
+    min-width: 234px;
+    order: 3;
+    text-align: center;
+    padding-top: 10px;
+}
+
+.holder {
+    min-height: 110px;
+    max-width: 400px;
+    margin: 0 auto;
+    border: 2px solid black;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    border-radius:20px 20px 0 0;
+    overflow: hidden;
+}
+.item {
+    height: 55px;
+    text-align: center;
+    padding: 15px;
+}
+.item:first-child {
+    background-color: #fd634d;
+    width: 50%;
+    order: 1;
+    flex-grow: 1;
+
+}
+.item:nth-child(5) {
+    background-color: #fea429;
+    order: 2;
+    flex-grow: 1;
+    width: 50%;
+}
+.item:nth-child(2) {
+    background-color: #4984b0
+    ;
+    order: 4;
+    width: 33.33%;
+}
+.item:nth-child(3) {
+    background-color: #663a94
+    ;
+    order: 3;
+    width: 33.33%;
+
+}
+.item:nth-child(4) {
+    background-color:#0e7f13
+    ;
+    order: 5;
+    width: 33.33%;
+
+}
+.main-nav {
+    display: none;
+}
+.footer {
+    min-height:35px;
+    background-color:#86ed84;
+    text-align: center;
+}
+
+@media (max-width: 991px) { 
+    .col {
+        max-width: 50%;
+        padding:0 10px 20px 0;      
+    }
+    .aside_l {
+        min-width: 174px;
+ 
+    }
+    .aside_r {
+        min-width: 174px;
+       
+    }    
+ }
+
+@media (max-width: 767px) { 
+    h1 {
+        margin-bottom: 10px;
+        font-size: 28px;
+    }
+    .col {
+        width: 100%;
+        padding:0 10px 20px 0;      
+    }
+    .aside_l {
+        min-width: 144px;
+ 
+    }
+    .aside_r {
+        min-width: 144px;
+       
+    }  
+
+ }
+
+@media (max-width: 575px) { 
+    .header {
+        position: fixed;
+        width: 100%;
+        padding:10px;
+    }
+    .main__wrapper {
+        flex-direction: column;    
+    }
+    .col {
+        width: 100%;
+        padding:0 10px 20px 0;      
+    }
+    .aside_l {
+        min-width: 100%;
+        order:2;
+        min-height: auto;
+ 
+    }
+    .aside_r {
+        min-width: 100%;
+        min-height: auto;
+       
+    }
+    nav {
+        display: none;
+    } 
+    .main-nav {
+        display: block;
+    }
+    #menu__toggle {
+        opacity: 0;
+      }
+    .menu__btn {
+        display: flex;  
+        align-items: center;  
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: 26px;
+        height: 26px;
+        z-index: 1;
+    }
+    .menu__btn > span,
+    .menu__btn > span::before,
+    .menu__btn > span::after {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        background-color: #616161;
+    }
+    .menu__btn > span::before {
+        content: '';
+        top: -8px;
+      }
+    .menu__btn > span::after {
+        content: '';
+        top: 8px;
+    }
+    .menu__box {
+        display: block;
+        position: fixed;
+        visibility: hidden;
+        top: 0;
+        left: -100%;
+        width: 50%;
+        height: 100%;
+        margin: 0;
+        padding: 80px 0;
+        list-style: none;
+        text-align: center;
+        background-color: #fff;
+        border-radius: 0 10px 10px 0;
+    }
+    .menu__item {
+        display: block;
+        padding: 12px 24px;
+        color: #d3b715;
+        font-size: 20px;
+        font-weight: 500;
+        text-decoration: none;
+        text-transform: uppercase;
+    }
+    #menu__toggle:checked ~ .menu__btn > span {
+        transform: rotate(45deg);
+    }
+      
+    #menu__toggle:checked ~ .menu__btn > span::before {
+        top: 0;
+        transform: rotate(0);
+    }
+      
+    #menu__toggle:checked ~ .menu__btn > span::after {
+        top: 0;
+        transform: rotate(90deg);
+    }
+      
+    #menu__toggle:checked ~ .menu__box {
+        visibility: visible;
+        left: 0;
+    }
+    .menu__btn > span,
+    .menu__btn > span::before,
+    .menu__btn > span::after {
+        transition-duration: .25s;
+    }
+    .menu__box {
+        transition-duration: .25s;
+    }
+    .menu__item {
+        transition-duration: .25s;
+    }
+    
+
+ }

+ 349 - 0
MarkupHW2/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* 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;
+}
+
+/* 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;
+}