html-css-project/index.html at master · vikrep/html-css-project · 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
<!DOCTYPE html>
<html lang="en">
    <head>
       <title>Blog about photography</title>
       <meta charset="utf-8">
			 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
  <body>
      <div class="container">

          <header class="header">
            <h1>Blog about photography</h1>
            <div class="menu-bar">
            <nav>
              <ul class="site-navigation">
                <li><a href="#">Home</a></li>
                <li><a href="#">Landscape</a></li>
                <li><a href="#">Flowers</a></li>
                <li><a href="#">Birds</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Workshop</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
          </div>
          </header>
      <div class="content-sidebar">
        <div class="box content">
            <article class="landscape">
              <h2>landscape photography</h2>
                  <img src="img/landscape-img.jpg" alt="Landscape" width="150" class="zoom">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Aenean vitae mauris imperdiet, lacinia felis nec, blandit
                    orci. Praesent sed magna tristique metus placerat faucibus.
                    Sed in nulla tempus, interdum dolor eu, convallis ex.
                    Vestibulum ante ipsum primis in faucibus orci luctus et
                    ultrices posuere cubilia Curae; Orci varius natoque penatibus
                    et magnis dis parturient montes, nascetur ridiculus mus.
                    Maecenas sed ligula ut diam pellentesque bibendum eget ut
                    nibh. </p>
                  <a href="http://35photo.ru/photo_775825/#author/775825"
                  target="_blank">Sourse - www.35photo.ru</a>
            </article>
            <article class="flower">
              <h2>Photos of flowers</h2>
                <img src="img/flower-img.jpg" alt="Tulip" width="150" class="zoom">
                  <p>Fusce blandit, orci eu fringilla porta, odio ipsum faucibus
                  augue, ut viverra sem orci sed erat. Suspendisse ut arcu quis
                  lorem convallis molestie a sit amet arcu. Phasellus quis posuere
                  magna. Duis suscipit, odio vitae convallis viverra, risus diam
                  varius turpis, vel eleifend ligula lorem vel libero. Nunc bibendum
                  sapien risus, ac eleifend dui vestibulum et. Class aptent taciti
                  sociosqu ad litora torquent per conubia nostra, per inceptos
                  himenaeos. </p>
              <a href="http://35photo.ru/photo_1293003/#author/1293003"
              target="_blank">Sourse - www.35photo.ru</a>
            </article>
            <article class="bird">
              <h2>Photos of wild birds</h2>
                <img src="img/bird-img.jpg" alt="Birds" width="150" class="zoom">
                  <p>Sed ullamcorper neque justo, luctus hendrerit ante porttitor
                  ac. Aliquam eget suscipit ex. Nam nec tempus neque. Cras in tellus
                  elementum, mattis odio condimentum, sagittis massa. Pellentesque
                  iaculis vel justo non posuere. Quisque ut porta libero. Nullam
                  maximus ante ex, ut rutrum sem varius nec. In hac habitasse platea
                  dictumst. Integer pellentesque nisi imperdiet, iaculis nisl at,
                  feugiat erat. </p>
              <a href="http://35photo.ru/photo_1255249/#author/1255249"
              target="_blank">Sourse - www.35photo.ru</a>
            </article>
            <article class="animal">
              <h2>Photos of wild animals</h2>
                <img src="img/animal-img.jpg" alt="Animals" width="150" class="zoom">
                  <p>Sed ullamcorper neque justo, luctus hendrerit ante porttitor
                  ac. Aliquam eget suscipit ex. Nam nec tempus neque. Cras in tellus
                  elementum, mattis odio condimentum, sagittis massa. Pellentesque
                  iaculis vel justo non posuere. Quisque ut porta libero. Nullam
                  maximus ante ex, ut rutrum sem varius nec. In hac habitasse platea
                  dictumst. Integer pellentesque nisi imperdiet, iaculis nisl at,
                  feugiat erat. Donec lectus ligula, eleifend ut accumsan sed,
                  porttitor vitae quam. </p>
              <a href="http://35photo.ru/photo_1255249/#author/1255249" target="_blank">Sourse - www.35photo.ru</a>
          </article>
            <article class="portrait">
              <h2>Photos of people</h2>
                <img src="img/portrait-img.jpg" alt="Portrait" width="150" class="zoom">
                  <p>Sed ullamcorper neque justo, luctus hendrerit ante porttitor
                  ac. Aliquam eget suscipit ex. Nam nec tempus neque. Cras in tellus
                  elementum, mattis odio condimentum, sagittis massa. Pellentesque
                  iaculis vel justo non posuere. Quisque ut porta libero. Nullam
                  maximus ante ex, ut rutrum sem varius nec. In hac habitasse platea
                  dictumst. Integer pellentesque nisi imperdiet, iaculis nisl at,
                  feugiat erat. Donec lectus ligula, eleifend ut accumsan sed,
                  porttitor vitae quam.</p>
              <a href="http://35photo.ru/photo_1255249/#author/1255249"
              target="_blank">Sourse - www.35photo.ru</a>
          </article>
            <article class="children">
              <h2>Photos of children</h2>
                <img src="img/children-img.jpg" alt="Children" width="150" class="zoom">
                  <p>Sed ullamcorper neque justo, luctus hendrerit ante porttitor
                  ac. Aliquam eget suscipit ex. Nam nec tempus neque. Cras in tellus
                  elementum, mattis odio condimentum, sagittis massa. Pellentesque
                  iaculis vel justo non posuere. Quisque ut porta libero. Nullam
                  maximus ante ex, ut rutrum sem varius nec. In hac habitasse platea
                  dictumst. Integer pellentesque nisi imperdiet, iaculis nisl at,
                  feugiat erat. Donec lectus ligula, eleifend ut accumsan sed,
                  porttitor vitae quam. </p>
              <a href="http://35photo.ru/photo_1255249/#author/1255249"
              target="_blank">Sourse - www.35photo.ru</a>
            </article>
          </div>
          <div class=" box sidebar">
            <h2>About this blog</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Aenean vitae mauris imperdiet, lacinia felis nec, blandit
              orci. Praesent sed magna tristique metus placerat faucibus.
              Sed in nulla tempus, interdum dolor eu, convallis ex.
              Vestibulum ante ipsum primis in faucibus orci luctus et
              ultrices posuere cubilia Curae; Orci varius natoque penatibus
              et magnis dis parturient montes, nascetur ridiculus mus.
              Maecenas sed ligula ut diam pellentesque bibendum eget ut
              nibh. </p>
          </div>
        </div>
        <div class="footer">
          <footer>
            <p>© Copyright 2017. Design and photos copied by <a href="https://github.com/vikrep"  target="_blank">Viktor Protsenko</a> for <a href="https://codeyourfuture.co/"  target="_blank">CodeYourFuture.</a></p>
          </footer>
        </div>
      </div>
  </body>
</html>