Accueil Explorer Aide
Connexion
Emmanuil
/
Vartanian_hw5
Suivre 1
Voter 0
Fork 0
Fichiers Tickets 1 Pull Requests 0 Wiki
Parcourir la source

all homework 5

Emmanuil il y a 5 ans
commit
3bcdfc8637
7 fichiers modifiés avec 367 ajouts et 0 suppressions
Vue séparée Afficher les stats Diff
  1. BIN
      img/box.jpg
  2. BIN
      img/logo.png
  3. 121 0
      index.html
  4. 43 0
      style/reset.css
  5. 203 0
      style/style.css
  6. BIN
      valid css.png
  7. BIN
      valid html.png

BIN
img/box.jpg
Voir le fichier


BIN
img/logo.png
Voir le fichier


+ 121 - 0
index.html
Voir le fichier 

@@ -0,0 +1,121 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Homework 5</title>
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/style.css" />
 
+  </head>
 
+  <body>
 
+    <div class="wrapper">
 
+      <header class="header">
 
+        <div class="container-logo-nav">
 
+          <img class="logo" src="img/logo.png" alt="logo" />
 
+          <nav class="nav">
 
+            <ul>
 
+              <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>
 
+        </div>
 
+      </header>
 
+
 
+      <main class="main">
 
+        <div class="block-center">
 
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem,
 
+          tempore eius! Rem possimus mollitia officia commodi cupiditate ipsam
 
+          quo dolorum obcaecati dignissimos, molestiae voluptates reiciendis
 
+          nemo officiis fugit quia quos.
 
+          <p>OUR WORK</p>
 
+          <div class="flex-boxs">
 
+            <div class="box">
 
+              <img class="img-box" src="img/box.jpg" alt="image" />
 
+              <h1>Lorem ipsum dolor sit amet.</h1>
 
+              <p>
 
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
 
+                ex sint molestiae numquam dolore adipisci quaerat tenetur,
 
+                facere illum deserunt excepturi aperiam voluptates! Unde
 
+                repudiandae omnis autem optio? Voluptates, eaque!
 
+              </p>
 
+              <a href="#">Go</a>
 
+            </div>
 
+            <div class="box">
 
+              <img class="img-box" src="img/box.jpg" alt="image" />
 
+              <h1>Lorem ipsum dolor sit amet.</h1>
 
+              <p>
 
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
 
+                ex sint molestiae numquam dolore adipisci quaerat tenetur,
 
+                facere illum deserunt excepturi aperiam voluptates! Unde
 
+                repudiandae omnis autem optio? Voluptates, eaque!
 
+              </p>
 
+              <a href="#">Go</a>
 
+            </div>
 
+            <div class="box">
 
+              <img class="img-box" src="img/box.jpg" alt="image" />
 
+              <h1>Lorem ipsum dolor sit amet.</h1>
 
+              <p>
 
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
 
+                ex sint molestiae numquam dolore adipisci quaerat tenetur,
 
+                facere illum deserunt excepturi aperiam voluptates! Unde
 
+                repudiandae omnis autem optio? Voluptates, eaque!
 
+              </p>
 
+              <a href="#">Go</a>
 
+            </div>
 
+            <div class="box">
 
+              <img class="img-box" src="img/box.jpg" alt="image" />
 
+              <h1>Lorem ipsum dolor sit amet.</h1>
 
+              <p>
 
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
 
+                ex sint molestiae numquam dolore adipisci quaerat tenetur,
 
+                facere illum deserunt excepturi aperiam voluptates! Unde
 
+                repudiandae omnis autem optio? Voluptates, eaque!
 
+              </p>
 
+              <a href="#">Go</a>
 
+            </div>
 
+            <div class="box">
 
+              <img class="img-box" src="img/box.jpg" alt="image" />
 
+              <h1>Lorem ipsum dolor sit amet.</h1>
 
+              <p>
 
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
 
+                ex sint molestiae numquam dolore adipisci quaerat tenetur,
 
+                facere illum deserunt excepturi aperiam voluptates! Unde
 
+                repudiandae omnis autem optio? Voluptates, eaque!
 
+              </p>
 
+              <a href="#">Go</a>
 
+            </div>
 
+            <div class="box">
 
+              <img class="img-box" src="img/box.jpg" alt="image" />
 
+              <h1>Lorem ipsum dolor sit amet.</h1>
 
+              <p>
 
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
 
+                ex sint molestiae numquam dolore adipisci quaerat tenetur,
 
+                facere illum deserunt excepturi aperiam voluptates! Unde
 
+                repudiandae omnis autem optio? Voluptates, eaque!
 
+              </p>
 
+              <a href="#">Go</a>
 
+            </div>
 
+          </div>
 
+          <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 class="block-left">Aside1</div>
 
+
 
+        <div class="block-right">Aside2</div>
 
+      </main>
 
+
 
+      <footer class="footer">
 
+        <p>Footer</p>
 
+      </footer>
 
+    </div>
 
+  </body>
 
+</html>

+ 43 - 0
style/reset.css
Voir le fichier 

@@ -0,0 +1,43 @@
 
+html, body, div, span, applet, object, iframe,
 
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
+    a, abbr, acronym, address, big, cite, code,
 
+    del, dfn, em, img, ins, kbd, q, s, samp,
 
+    small, strike, strong, sub, sup, tt, var,
 
+    b, u, i, center,
 
+    dl, dt, dd, ol, ul, li,
 
+    fieldset, form, label, legend,
 
+    table, caption, tbody, tfoot, thead, tr, th, td,
 
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
 
+    time, mark, audio, video {
 
+    	margin: 0;
 
+    	padding: 0;
 
+    	border: 0;
 
+    	font-size: 100%;
 
+    	font: inherit;
 
+    	vertical-align: baseline;
 
+    }
 
+    /* HTML5 display-role reset for older browsers */
 
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
 
+    	display: block;
 
+    }
 
+    body {
 
+    	line-height: 1;
 
+    }
 
+    ol, ul {
 
+    	list-style: none;
 
+    }
 
+    blockquote, q {
 
+    	quotes: none;
 
+    }
 
+    blockquote:before, blockquote:after,
 
+    q:before, q:after {
 
+    	content: '';
 
+    	content: none;
 
+    }
 
+    table {
 
+    	border-collapse: collapse;
 
+    	border-spacing: 0;
 
+    }

+ 203 - 0
style/style.css
Voir le fichier 

@@ -0,0 +1,203 @@
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: border-box;
 
+}
 
+
 
+/* WRAPPER */
 
+.wrapper{
 
+    display: flex;
 
+    flex-direction: column;
 
+    min-height: 100vh;
 
+}
 
+
 
+
 
+/* HEADER */
 
+.header{
 
+    background: rgb(222, 184, 0);
 
+}
 
+
 
+.container-logo-nav{
 
+    padding: 15px;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+}
 
+
 
+.logo{
 
+    width: 220px;
 
+    height: 70px;
 
+}
 
+
 
+li, a{
 
+    text-decoration: none;
 
+    color: rgb(0, 0, 0);
 
+    display: inline;
 
+    margin-right: 3px;
 
+    font-size: 20px;
 
+}
 
+
 
+li>a:hover{ 
+    color: rgb(255, 255, 255);
 
+}
 
+
 
+
 
+
 
+
 
+/* MAIN */
 
+.main{
 
+    display: flex;
 
+    text-align: center;
 
+    flex-grow: 1;
 
+}
 
+
 
+.block-center{
 
+    order: 2;
 
+    padding-top: 20px;
 
+}
 
+
 
+.block-center>p{
 
+    padding-top: 20px;
 
+    font-weight: bold;
 
+    font-size: 20px;
 
+}
 
+
 
+.flex-boxs{
 
+    margin: 30px 30px 5px;
 
+    display: flex;
 
+    justify-content: space-around;
 
+    flex-wrap: wrap;
 
+}
 
+
 
+.box{
 
+    border: 2px rgb(128, 128, 128) solid;
 
+    border-radius: 20px;
 
+    width: 285px;
 
+    height: 350px;
 
+    padding-top: 15px;
 
+    margin-bottom: 25px;
 
+}
 
+
 
+.box:hover{
 
+    transform: scale(1.1);
 
+    background: rgb(16, 157, 251);
 
+    color: rgb(255, 255, 255);
 
+    box-shadow: 3px 5px 5px black;
 
+    
+}
 
+
 
+.img-box{
 
+    width: 100px;
 
+    border: 10px rgb(208, 187, 187) solid;
 
+    border-radius: 100%;
 
+}
 
+
 
+h1{
 
+    font-size: 20px;
 
+    font-weight: bold;
 
+    padding-top: 10px;
 
+}
 
+
 
+.box>p{
 
+    padding: 20px ;
 
+}
 
+
 
+.box>a{
 
+    border: 1px rgb(112, 80, 118) solid;
 
+    border-radius: 20px;
 
+    background: rgb(112, 80, 118);
 
+    width: 60px;
 
+    height: 30px;
 
+    display: inline-block;
 
+    padding-top: 3px;
 
+    color: rgb(255, 255, 255);
 
+    font-weight: bold;
 
+}
 
+
 
+.box>a:hover{
 
+    color: rgb(255, 255, 0);
 
+    transform: scale(1.4);
 
+    background: rgb(0, 128, 0);
 
+    border: 1px rgb(0, 128, 0) solid;
 
+    width: 70px;
 
+    box-shadow: 3px 3px 5px rgb(0, 0, 0);
 
+}
 
+
 
+
 
+
 
+.block-left{
 
+    background: rgb(215, 153, 187);
 
+    width: 210px;
 
+    order: 1;
 
+    padding-top: 10px;
 
+}
 
+
 
+.block-right{
 
+    background: rgb(148, 178, 201);
 
+    width: 210px;
 
+    order: 3;
 
+    padding-top: 10px;
 
+}
 
+
 
+/* Уровень 3 */ 
+.holder{
 
+    border: 2px black solid;
 
+    border-radius: 15px 15px 0 0;
 
+    width: 1138.5px;
 
+    height: 104px;
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    justify-content: space-between;
 
+}
 
+
 
+.item:first-child{
 
+    background: #fd644d;
 
+    border-radius: 15px 0 0 0;
 
+    width: 567.3px;
 
+    height: 50px;
 
+    order: 1;
 
+    padding-top: 15px;
 
+}
 
+
 
+.item:nth-child(2){
 
+    background: #4983b2;
 
+    width: 376.3px;
 
+    height: 50px;
 
+    order: 4;
 
+    padding-top: 15px;
 
+}
 
+
 
+.item:nth-child(3){
 
+    background: #663797;
 
+    width: 379px;
 
+    height: 50px;
 
+    order: 3;
 
+    padding-top: 15px;
 
+}
 
+
 
+.item:nth-child(4){
 
+    background: #0e7f12;
 
+    width: 379px;
 
+    height: 50px;
 
+    order: 5;
 
+    padding-top: 15px;
 
+}
 
+
 
+.item:last-child{
 
+    background: #fda429;
 
+    border-radius: 0 15px 0 0;
 
+    width: 567px;
 
+    height: 50px;
 
+    order: 2;
 
+    padding-top: 15px;
 
+}
 
+
 
+
 
+
 
+/* FOOTER */
 
+.footer{
 
+    background: rgb(11, 236, 128);
 
+    text-align: center;
 
+    height: 30px;
 
+    padding-top: 7px;
 
+}

BIN
valid css.png
Voir le fichier


BIN
valid html.png
Voir le fichier