Inicio Explorar Axuda
Iniciar sesión
Emmanuil
/
Vartanian_hw6
Seguir 1
Destacar 0
Fork 0
Ficheiros Incidencias 1 Pull Requests 0 Wiki
Explorar o código

сделал респонсив и адаптацию

Emmanuil %!s(int64=5) %!d(string=hai) anos
achega
e12263bbf8
Modificáronse 5 ficheiros con 408 adicións e 0 borrados
Dividir vista Mostrar estatísticas de Diff
  1. BIN=BIN
      img/box.jpg
  2. BIN=BIN
      img/logo.png
  3. 112 0
      index.html
  4. 43 0
      style/reset.css
  5. 253 0
      style/style.css

BIN=BIN
img/box.jpg
Ver ficheiro


BIN=BIN
img/logo.png
Ver ficheiro


+ 112 - 0
index.html
Ver ficheiro 

@@ -0,0 +1,112 @@
 
+<!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 class="nav-link" href="#">Item1</a></li>
 
+              <li><a class="nav-link" href="#">Item2</a></li>
 
+              <li><a class="nav-link" href="#">Item3</a></li>
 
+              <li><a class="nav-link" href="#">Item4</a></li>
 
+              <li><a class="nav-link" href="#">Item5</a></li>
 
+            </ul>
 
+          </nav>
 
+        </div>
 
+      </header>
 
+
 
+      <main class="main">
 
+        <div class="block-center">
 
+         <p>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> 
+          <h1>OUR WORK</h1>
 
+          <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. 
+              </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,
 
+              </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.
 
+              </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!
 
+              </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>
 
+
 
+        <aside class="aside-left">Aside1</aside>
 
+
 
+        <aside class="aside-right">Aside2</aside>
 
+      </main>
 
+
 
+      <footer class="footer">
 
+        <p>Footer</p>
 
+      </footer>
 
+    </div>
 
+  </body>
 
+</html>

+ 43 - 0
style/reset.css
Ver ficheiro 

@@ -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;
 
+    }

+ 253 - 0
style/style.css
Ver ficheiro 

@@ -0,0 +1,253 @@
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: border-box;
 
+}
 
+
 
+/* WRAPPER */
 
+.wrapper {
 
+  display: flex;
 
+  flex-direction: column;
 
+  min-height: 100vh;
 
+}
 
+
 
+/* HEADER */
 
+.header {
 
+  background: rgb(222, 184, 0);
 
+  /* min-width: 614px; */
 
+}
 
+
 
+.container-logo-nav {
 
+  padding: 15px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.logo {
 
+  width: 220px;
 
+  height: 70px;
 
+}
 
+
 
+a {
 
+  text-decoration: none;
 
+}
 
+
 
+.nav > ul > li,
 
+.nav-link {
 
+  color: rgb(0, 0, 0);
 
+  display: inline;
 
+  margin-right: 3px;
 
+  font-size: 20px;
 
+}
 
+
 
+li > .nav-link: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 > h1 {
 
+  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;
 
+  max-width: 285px;
 
+  min-height: 350px;
 
+  padding: 15px 15px 15px;
 
+  margin-bottom: 25px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  transition: all 0.5s;
 
+}
 
+
 
+.box:hover {
 
+  transform: scale(1.1);
 
+  background: rgb(16, 157, 251);
 
+  color: rgb(255, 255, 255);
 
+  box-shadow: 3px 5px 5px black;
 
+}
 
+
 
+.img-box {
 
+  height: 100px;
 
+  border: 10px rgb(208, 187, 187) solid;
 
+  border-radius: 100%;
 
+}
 
+
 
+.box > h1 {
 
+  font-size: 20px;
 
+  font-weight: bold;
 
+  padding-top: 15px;
 
+}
 
+
 
+.box > p {
 
+  padding: 20px 0 20px;
 
+  flex-grow: 1;
 
+}
 
+
 
+.box > a {
 
+  border: 1px rgb(112, 80, 118) solid;
 
+  border-radius: 20px;
 
+  background: rgb(112, 80, 118);
 
+  width: 70px;
 
+  height: 30px;
 
+  display: inline-block;
 
+  color: rgb(255, 255, 255);
 
+  font-weight: bold;
 
+  font-size: 20px;
 
+  padding-top: 3px;
 
+  transition: all 0.5s;
 
+}
 
+
 
+.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);
 
+}
 
+
 
+.aside-left {
 
+  background: rgb(215, 153, 187);
 
+  min-width: 210px;
 
+  order: 1;
 
+  padding-top: 10px;
 
+}
 
+
 
+.aside-right {
 
+  background: rgb(148, 178, 201);
 
+  min-width: 210px;
 
+  order: 3;
 
+  padding-top: 10px;
 
+}
 
+
 
+/* Уровень 3 */
 
+.holder {
 
+  border: 2px black solid;
 
+  border-radius: 15px 15px 0 0;
 
+  width: 100%;
 
+  /* height: 104px; */
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  /* justify-content: space-between; */
 
+  overflow: hidden;
 
+}
 
+
 
+.item {
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  flex-grow: 1;
 
+  flex-shrink: 0;
 
+  order: 10;
 
+  padding: 10px;
 
+}
 
+
 
+.item:first-child {
 
+  background: #fd644d;
 
+  border-radius: 15px 0 0 0;
 
+  flex-basis: 50%;
 
+  order: 1;
 
+}
 
+
 
+.item:nth-child(2) {
 
+  background: #4983b2;
 
+  order: 4;
 
+}
 
+
 
+.item:nth-child(3) {
 
+  background: #663797;
 
+  order: 3;
 
+}
 
+
 
+.item:nth-child(4) {
 
+  background: #0e7f12;
 
+  order: 5;
 
+}
 
+
 
+.item:last-child {
 
+  background: #fda429;
 
+  border-radius: 0 15px 0 0;
 
+  flex-basis: 50%;
 
+  order: 2;
 
+}
 
+
 
+/* FOOTER */
 
+.footer {
 
+  background: rgb(11, 236, 128);
 
+  text-align: center;
 
+  padding: 7px 0;
 
+  /* min-width: 614px; */
 
+  /* min-width: 320px; */
 
+}
 
+
 
+/* HOMEWORK 6 */
 
+@media (min-width: 320px) {
 
+  .header {
 
+    background: red;
 
+  }
 
+  .aside-left {
 
+    min-width: 19%;
 
+  }
 
+  .aside-right {
 
+    min-width: 19%;
 
+  }
 
+  .img-box {
 
+    height: 60px;
 
+    border: 5px rgb(208, 187, 187) solid;
 
+    border-radius: 100%;
 
+  }
 
+  .box > h1 {
 
+    font-size: 15px;
 
+    font-weight: bold;
 
+    padding-top: 10px;
 
+  }
 
+  .box > p {
 
+    padding: 15px 0 15px;
 
+    flex-grow: 1;
 
+    font-size: 12px;
 
+  }
 
+  
+  .box > a {
 
+    border: 1px rgb(112, 80, 118) solid;
 
+    border-radius: 20px;
 
+    background: rgb(112, 80, 118);
 
+    width: 60px;
 
+    height: 30px;
 
+    display: inline-block;
 
+    color: rgb(255, 255, 255);
 
+    font-weight: bold;
 
+    font-size: 15px;
 
+    padding-top: 6px;
 
+    transition: all 0.5s;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .header {
 
+    background: blue;
 
+  }
 
+}