kostya012
/
Netbook_HW


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!DOCTYPE html>
<html lang="zxx">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link media="all" rel="stylesheet" href="./css/all_hw6_1_2.css">
  <title>HW 6 Responsive Adaptive</title>
</head>
<body>
  <h1>Home Work 6 Level 1 Responsive and Adaptive</h1>
  <hr>
  <div class="wrapper">
    <header class="main-header">
      <div class="logo">
        <a href="https://a-level.com.ua/" target="blank">
          <img src="./images/logo.png" alt="A-Level Ukraine" title="A-level.com.ua">
        </a>
      </div>
      <nav class="navigation-bar">
        <input id="ch" type="checkbox"><!-- id и for должны быть одинаковые!!! -->
        <label class="menu_btn" for="ch">
          <span></span>
        </label>
        <ul class="bar-list">
          <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>
    </header>
    <main class="main">
      <section class="content">
        <header class="content-header">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem id pariatur porro eius odit iusto harum vitae totam ut natus nobis quos obcaecati laboriosam ea non, adipisci illum unde praesentium.</p>
          <h2>OUR WORK</h2>
        </header>
        <div class="card-box">
          <div class="card">
            <div class="card-content">
              <div class="image-box">
                <img src="images/alone.png" alt="Mount" title="Mount">
              </div>
              <h3>Lorem ipsum dolor sit amet.</h3>
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto iure inventore eos dignissimos ex consectetur dolorum, voluptatibus suscipit numquam commodi, dolorem nulla! Fuga sed beatae iure, perspiciatis sapiente odit qui!</p>
            </div>
            <a href="#" class="btn">Go</a>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="image-box">
                <img src="images/alone.png" alt="Mount" title="Mount">
              </div>
              <h3>Lorem ipsum dolor sit amet.</h3>
              <p>Lorem ipsum dolor sit, amet. dgdfghdfgdgdfgdggdfgdgdgfdgdgddgfdfgfdgdg</p>
            </div>
            <a href="#" class="btn">Go</a>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="image-box">
                <img src="images/alone.png" alt="Mount" title="Mount">
              </div>
              <h3>Lorem ipsum dolor sit amet.</h3>
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto iure inventore eos dignissimos ex consectetur dolorum, voluptatibus.</p>
            </div>
            <a href="#" class="btn">Go</a>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="image-box">
                <img src="images/alone.png" alt="Mount" title="Mount">
              </div>
              <h3>Lorem ipsum dolor sit amet.</h3>
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto iure inventore eos dignissimos ex consectetur dolorum, voluptatibus suscipit numquam commodi, dolorem nulla!!!</p>
            </div>
            <a href="#" class="btn">Go</a>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="image-box">
                <img src="images/alone.png" alt="Mount" title="Mount">
              </div>
              <h3>Lorem ipsum dolor sit amet.</h3>
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto iure inventore eos dignissimos ex consectetur dolorum, voluptatibus suscipit numquam commodi, dolorem nulla! Fuga sed beatae iure, perspiciatis sapiente odit qui!</p>
            </div>
            <a href="#" class="btn">Go</a>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="image-box">
                <img src="images/alone.png" alt="Mount" title="Mount">
              </div>
              <h3>Lorem ipsum dolor sit amet.</h3>
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto iure inventore eos dignissimos ex consectetur dolorum, voluptatibus suscipit numquam commodi, dolorem nulla! Fuga sed beatae iure, perspiciatis sapiente odit qui!</p>
            </div>
            <a href="#" class="btn">Go</a>
          </div>
        </div>
      </section>
      <aside class="sidebar left">
        <p>Aside 1</p>
      </aside>
      <aside class="sidebar right">
        <p>Aside 2</p>
      </aside>
    </main>
    <footer class="page-footer">
      <p>Footer</p>
    </footer>
  </div>
</body>
</html>