less7/index.html at master · 84Inna/less7 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./styles/common/reset.off.css">
  <link rel="stylesheet" href="./styles/header/header.css">
  <link rel="stylesheet" href="./styles/header/mainScreen.css">
  <link rel="stylesheet" href="./styles/footer/footer.css">

  <title>Minimo</title>
</head>
<body>
  <header class="header">
   <h1 class="header-logo">MINIMO</h1>
   <nav>
   <ul class="navigation">
     <li class="navigation-item">Lifestyle</li>
     <li class="navigation-item">Fotodiary</li>
     <li class="navigation-item">Music</li>
     <li class="navigation-item">Travel</li>
   </ul>
  </nav>
  </header>
  <main class="main main-pages">
     <img  class=" main__main-article-img"  src="./imgs/image1.jpg" alt="">
     <section class="main__main-article">
     <div>
       <h2 class="main__main-article-chapter">Photodiary</h2>
       <h3 class="main__main-article-caption">Article heading</h3>
       <p class="main__main-article-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
         Dolorum, perspiciatis tempore maxime magnam quaerat possimus porro
         debitis nihil dolor culpa maiores quam neque, consequuntur mollitia
          necessitatibus quidem sequi sit optio? Lorem ipsum, dolor sit amet
           consectetur adipisicing elit. Quod sit qui nisi, laborum eaque quis
           cum nesciunt quam voluptates in sapiente, voluptatem fugiat perspiciatis
           busdam dicta debitis reprehenderit eos blanditiis! Lorem ipsum dolor sit
            amet consectetur adipisicing elit. Autem maiores commodi animi qui
            consequuntur. Quaerat optio sed placeat? Quo cum veniam eius,
            necessitatibus qui molestiae debitis provident nobis aspernatur eum. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
            Dolorum, perspiciatis tempore maxime magnam.Lorem ipsum, dolor sit amet
            consectetur adipisicing elit. Quod sit qui nisi, laborum eaque quis
       </p>
       <button class="main__main-article-btn--leave-a-comment">Leave a comment</button>
     </div>
   </section>
   <section class="main__article-list-wrap">
     <ul class="main__article-list">
       <li class="main__article-list-item">
         <div>
         <img class="main__article-list-item-img" src="./imgs/left post.jpg">
         <h2 class="main__main-article-chapter">Lifestyle</h2>
         <h3 class="main__main-article-caption">More than just a music festival </h3>
         <p> ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, perspiciatis tempore maxime magnam quaerat possimus porro debitis nihil dolor culpa maiores quam neque, consequuntur mollitia necessitatibus quidem sequi sit optio?
         </p>
        </div>
        </li>

        <li class="main__article-list-item">
        <div>
          <img class="main__article-list-item-img" src="./imgs/Filtro fotografico 5 copia 2.jpg">
          <h2 class="main__main-article-chapter">Lifestyle</h2>
          <h3 class="main__main-article-caption">Life tastes better with coffee</h3>
          <p> ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, perspiciatis tempore maxime magnam quaerat possimus porro debitis nihil dolor culpa maiores quam neque, consequuntur mollitia necessitatibus quidem sequi sit optio?
         </p>
        </div>
      </li>

       <li class="main__article-list-item">
         <div>
         <img class="main__article-list-item-img" src="./imgs/image left.jpg">
         <h2 class="main__main-article-chapter">Lifestyle</h2>
         <h3 class="main__main-article-caption">American dream</h3>
         <p> ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, perspiciatis tempore maxime magnam quaerat possimus porro debitis nihil dolor culpa maiores quam neque, consequuntur mollitia necessitatibus quidem sequi sit optio?
        </p>
        </div>
      </li>

       <li class="main__article-list-item">
         <div>
            <img class="main__article-list-item-img" src="./imgs/img right.jpg">
            <h2 class="main__main-article-chapter">Lifestyle</h2>
            <h3 class="main__main-article-caption">A day exploring the Alps</h3>
         <p> ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, perspiciatis tempore maxime magnam quaerat possimus porro debitis nihil dolor culpa maiores quam neque, consequuntur mollitia necessitatibus quidem sequi sit optio?
        </p>
      </div>
      </li>
     </ul>
   </section>

   <section  class="main__sing-up">
   <form class="main__form">
   <h4 class="main__form-title"> Sing up for our newsletter</h4>
   <input class="main__form-title-input" type="email" placeholder="Enter a valid email adress">
   </form>
  </section>
   <section>
     <ul class="main__article-list-second">
       <li class="main__article-list-item-second">
         <div>
           <img class="main__article-list-item-img" src="./imgs/image left 2.jpg">
           <h2 class="main__main-article-chapter">Photodiary</h2>
           <h3 class="main__main-article-caption">Top 10 song for running</h3>
           <p> ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, perspiciatis tempore maxime magnam quaerat possimus porro debitis nihil dolor culpa maiores quam neque, consequuntur mollitia necessitatibus quidem sequi sit optio?
          </p>
         </div>
       </li>

       <li class="main__article-list-item-second">
         <div>
           <img class="main__article-list-item-img" src="./imgs/image right.jpg">
           <h2 class="main__main-article-chapter">Photodiary</h2>
           <h3 class="main__main-article-caption">Cold winter days</h3>
           <p> ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, perspiciatis tempore maxime magnam quaerat possimus porro debitis nihil dolor culpa maiores quam neque, consequuntur mollitia necessitatibus quidem sequi sit optio?
          </p>
         </div>
       </li>
     </ul>
   </section>
   <section>
     <button class="btn-btn-primary">Load mode</button>
   </section>
  </main>
  <footer class="footer">
   <div class="footer__rules">
     <a href="#">Terms and conditions</a>
     <a href="#">Privacy</a>
   </div>
   <div
  class="footer__socials">
  <a href="#" class="footer__social-rules">Follow</a>
     <span class="footer__socials-icon">
     <a href="">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs/>
  <path d="M352 0H160C72 0 0 72 0 160v192c0 88 72 160 160 160h192c88 0 160-72 160-160V160C512 72 440 0 352 0zm112 352c0 62-50 112-112 112H160c-62 0-112-50-112-112V160C48 98 98 48 160 48h192c62 0 112 50 112 112v192z"/>
  <path d="M256 128a128 128 0 100 256 128 128 0 000-256zm0 208a80 80 0 110-160 80 80 0 010 160z"/>
  <circle cx="393.6" cy="118.4" r="17.1"/>
  </svg>
     </a>

     <a href="">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.1 96.1">
        <defs/>
        <path d="M72 0H60C46 0 37 9 37 24v11H24c-1 0-2 0-2 2v15l2 2h13v40c0 1 0 2 2 2h16l2-2V54h14c2 0 2-1 2-2V37a2 2 0 00-1-2H57V25c0-4 1-6 7-6h8l2-2V2l-2-2z"/>
      </svg>
     </a>

     <a href="">
      <svg xmlns="http://www.w3.org/2000/svg"
      width="40"
       height="40"
      viewBox="0 0 500 500"><defs/>
      <path d="M449.956 85.657c-17.702 7.614-35.408 12.369-53.102 14.279 19.985-11.991 33.503-28.931 40.546-50.819-18.281 10.847-37.787 18.268-58.532 22.267-18.274-19.414-40.73-29.125-67.383-29.125-25.502 0-47.246 8.992-65.24 26.98-17.984 17.987-26.977 39.731-26.977 65.235 0 6.851.76 13.896 2.284 21.128-37.688-1.903-73.042-11.372-106.068-28.407C82.46 110.158 54.433 87.46 31.403 59.101c-8.375 14.272-12.564 29.787-12.564 46.536 0 15.798 3.711 30.456 11.138 43.97 7.422 13.512 17.417 24.455 29.98 32.831-14.849-.572-28.743-4.475-41.684-11.708v1.142c0 22.271 6.995 41.824 20.983 58.674 13.99 16.848 31.645 27.453 52.961 31.833a95.543 95.543 0 01-24.269 3.138c-5.33 0-11.136-.475-17.416-1.42 5.9 18.459 16.75 33.633 32.546 45.535 15.799 11.896 33.691 18.028 53.677 18.418-33.498 26.262-71.66 39.393-114.486 39.393-8.186 0-15.607-.373-22.27-1.139 42.827 27.596 90.03 41.394 141.612 41.394 32.738 0 63.478-5.181 92.21-15.557 28.746-10.369 53.297-24.267 73.665-41.686 20.362-17.415 37.925-37.448 52.674-60.097 14.75-22.651 25.738-46.298 32.977-70.946 7.23-24.653 10.848-49.344 10.848-74.092 0-5.33-.096-9.325-.287-11.991 18.087-13.127 33.504-29.023 46.258-47.672z"/>
    </svg>
     </a>
     </span>
   </div>
  </footer>
</body>
</html>