liakos/index.html at master · kamile-b/liakos · 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
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Liakos</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./styles/main.css">
</head>
<body>
  <div class="wrapper">
    <header class="navbar">
      <a class="navbar-logo">logo</a>
      <div class="navbar-main">
        <nav>
          <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#articles">Articles</a></li>
            <li><a href="#contact">Contact us</a></li>
          </ul>
        </nav>
        <div class="social">
          <a id="twitter">
          <!--svg-->
            <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
              <path d="M612 116.3c-22.5 10-46.7 16.8-72.1 19.8 25.9-15.5 45.8-40.2 55.2-69.4 -24.3 14.4-51.2 24.8-79.8 30.5 -22.9-24.4-55.5-39.7-91.6-39.7 -69.3 0-125.6 56.2-125.6 125.5 0 9.8 1.1 19.4 3.3 28.6C197.1 206.3 104.6 156.3 42.6 80.4c-10.8 18.5-17 40.1-17 63.1 0 43.6 22.2 82 55.8 104.5 -20.6-0.7-39.9-6.3-56.9-15.8v1.6c0 60.8 43.3 111.6 100.7 123.1 -10.5 2.8-21.6 4.4-33.1 4.4 -8.1 0-15.9-0.8-23.6-2.3 16 49.9 62.3 86.2 117.3 87.2 -42.9 33.7-97.1 53.7-155.9 53.7 -10.1 0-20.1-0.6-29.9-1.7 55.6 35.7 121.5 56.5 192.4 56.5 230.9 0 357.2-191.3 357.2-357.2l-0.4-16.3C573.9 163.5 595.2 141.4 612 116.3z"/>
          </svg>
          </a>
          <a id="github">
          <!--svg-->
            <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92">
              <path d="M61.9 52.5c-3.6 0-6.5 4-6.5 9 0 5 2.9 9 6.5 9 3.6 0 6.5-4 6.5-9C68.4 56.6 65.5 52.5 61.9 52.5zM84.5 29.1c0.7-1.8 0.8-12.2-3.2-22.1 0 0-9.1 1-22.8 10.4 -2.9-0.8-7.7-1.2-12.6-1.2s-9.7 0.4-12.6 1.2C19.7 8 10.6 7 10.6 7c-3.9 9.9-3.9 20.3-3.2 22.1C2.8 34.2 0 40.2 0 48.5c0 35.9 29.8 36.5 37.3 36.5 1.7 0 5.1 0 8.7 0 3.6 0 7 0 8.7 0C62.2 85 92 84.4 92 48.5 92 40.2 89.2 34.2 84.5 29.1zM46.1 80.6H45.9c-18.9 0-33.5-2.3-33.5-20.6 0-4.4 1.5-8.5 5.2-11.8 6.1-5.6 16.5-2.7 28.3-2.7 0 0 0.1 0 0.1 0 0 0 0.1 0 0.1 0 11.8 0 22.2-3 28.3 2.7 3.7 3.4 5.2 7.5 5.2 11.8C79.7 78.3 65 80.6 46.1 80.6zM30.1 52.5c-3.6 0-6.5 4-6.5 9 0 5 2.9 9 6.5 9 3.6 0 6.5-4 6.5-9C36.6 56.6 33.7 52.5 30.1 52.5z"/>
            </svg>
          </a>
        </div>
        <div id="hamburger-menu">
          <span></span>
          <span></span>
          <span></span>
      </div>
        <nav class="collapse-menu">
          <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#articles">Articles</a></li>
            <li><a href="#contact">Contact us</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <main>
    <!--Hero-->
      <section class="hero row-flex">
        <h1>Liakos</h1>
        <img src="./img/abstract-320-240-3.jpg"
        srcset="./img/abstract-320-240-3.jpg 320w,
        ./img/abstract-567-426-3.jpg 567w,
        ./img/abstract-767-576-3.jpg 767w,
        ./img/abstract-992-746-3.jpg 992w,
       ./img/abstract-1200-902-3.jpg 1200w">
      </section>
    <!--About-->
      <section id="about" class="about row-flex">
        <div class="card col">
          <article>
            <h2>Etiam malesuada sed</h2>
            <p>Aenean laoreet lacus diam, eget consectetur ante rutrum vitae. Fusce quis erat varius, convallis magna at, bibendum nulla. Curabitur lobortis nibh vitae lacus gravida, at ullamcorper purus facilisis. Duis mauris purus, molestie in hendrerit vel, fringilla quis lectus. Etiam a ex efficitur, posuere sapien a, tristique lacus. Maecenas facilisis augue libero, nec aliquet dui gravida molestie. Praesent fringilla sagittis tincidunt. Sed bibendum velit et sagittis suscipit.</p>
          </article>
          <button class="primary-btn">pretium</button>
        </div>
        <div class="card col">
          <article>
            <h2>Quisque efficitur</h2>
            <img src="./img/placeimg-640-480-tech-port.jpg" alt="Portrait of creator">
            <p>In eu nulla eros. Etiam bibendum interdum nulla aliquet dignissim. Aenean ac tellus lacinia, feugiat magna in, sodales enim. Nam efficitur arcu sed ex hendrerit rhoncus. Fusce a luctus metus. Morbi maximus sapien et mauris blandit tempor. Curabitur vehicula ultrices urna in efficitur. Curabitur libero dolor, fermentum ac erat eget, venenatis pulvinar lorem. Pellentesque sit amet pharetra ligula. Quisque efficitur diam elit, vel volutpat ex sollicitudin at. Suspendisse scelerisque porta augue a scelerisque. Donec non fermentum elit. Cras elementum molestie feugiat. Nullam molestie risus id porta sollicitudin. Praesent ut sapien sit amet ante lobortis condimentum nec sed arcu.</p>
          </article>
        </div>
      </section>
    <!--Portfolio-->
      <section id="portfolio" class="portfolio">
        <div class="row-flex">
          <div class="card col">
            <a href="#">
              <img width="640" height="480" src="./img/placeimg-992-746-tech-desk.jpg" alt="Picture of project a">
            </a>
          </div>
          <div class="card col">
            <div class="wrapper-video">
              <iframe src="https://player.vimeo.com/video/100902001?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
          </div>
          <div class="card col">
            <a href="#">
              <img width="640" height="480" src="./img/placeimg-992-746-tech-desk.jpg" alt="Picture of project b">
            </a>
          </div>
        </div>
        <div class="row-flex">
          <div class="card card_quote col">
            <div class="wrapper_quote">
              <blockquote>
                <p>Vivamus quam lacus, hendrerit sed tincidunt quis, dapibus quis ipsum.</p>
                <footer>
                  <p> ―Eupeithes Boosalis</p>
                </footer>
              </blockquote>
            </div>
          </div>
          <div class="card card_img col">
            <a href="#">
              <img width="640" height="480" src="./img/placeimg-992-746-tech-desk.jpg" alt="Picture of project c">
            </a>
          </div>
          <div class="card card_quote col">
            <div class="wrapper_quote">
              <blockquote>
                <p>Mauris suscipit quis tortor at ultricies. Phasellus congue est vel tempor lacinia.</p>
                <footer>
                  <p> ―Agape Matis</p>
                </footer>
              </blockquote>
            </div>
          </div>
        </div>
      </section>
    <!--Articles-->
      <section id="articles" class="articles row-flex">
        <div class="card col">
          <article>
            <h2>Nunc ullamcorper maximus</h2>
            <p>Nam condimentum vitae ligula et iaculis. Duis leo sem, euismod quis orci et, volutpat dignissim ex. Vestibulum at feugiat sapien. Suspendisse potenti. Nunc ullamcorper maximus massa, at pulvinar ipsum dictum non. Nam accumsan faucibus lacus, a tempor elit semper at. Nunc tempus in tortor et imperdiet. Donec maximus dolor commodo, tincidunt massa vitae, dictum massa. Donec lectus neque, aliquam quis urna interdum, hendrerit dapibus libero. Curabitur ultricies mollis ipsum eu finibus.</p>
            <p>Proin ultrices lectus lacus, vel facilisis metus aliquet in. Nulla sed eros porta, tincidunt velit sagittis, vestibulum diam. Ut non porta urna. Praesent quis consequat nisi, sodales consequat odio. Aliquam vitae orci mattis, condimentum ante et, auctor risus. Vivamus ornare vehicula lectus eu posuere. Donec convallis, orci at volutpat feugiat, lorem mauris semper turpis, eget gravida ante nisl id eros. Aenean eu ante lorem.</p>
            <p>Aliquam a dictum enim, vel eleifend felis. Curabitur porta ligula quis volutpat finibus. Nam a sagittis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent ullamcorper sit amet metus vitae rutrum. Maecenas commodo nisl tellus, vel lacinia purus scelerisque eget. Phasellus ut efficitur ipsum, fermentum pretium diam. Suspendisse.</p>
          </article>
        </div>
        <div class="card col">
          <article>
            <h2>Elementum viverra ipsum</h2>
            <p>Suspendisse ultrices risus non tellus sodales, vitae dictum nisl pharetra. Vestibulum ultrices posuere ante, a pretium metus egestas a. Nam commodo lacus ac mi volutpat vestibulum. Cras condimentum dictum pharetra. Cras non ligula vel eros lacinia porttitor. Aenean et tortor mi. Nunc pulvinar magna ut nisl facilisis, at varius sapien placerat. Vestibulum arcu felis, maximus vel leo id, elementum viverra ipsum. Phasellus varius libero molestie, posuere nunc ac, placerat diam. Nulla gravida lectus sed iaculis sollicitudin.</p>
            <p>Curabitur pellentesque egestas augue, vel tempor purus rutrum vitae. Quisque id ultricies nisl. Morbi volutpat nisi nec ipsum molestie, vehicula semper sem pharetra. Donec condimentum sagittis ipsum, sit amet iaculis nisl consectetur ac. Fusce dictum velit ac dui venenatis euismod. Nulla commodo tincidunt aliquet. Nulla varius sed odio sit amet facilisis. Donec eget diam eleifend, molestie velit eu, volutpat ligula. Duis id eros iaculis, sollicitudin tortor eu, malesuada quam. Donec feugiat egestas nibh, id lacinia ante tincidunt ut. Phasellus vulputate vitae velit id imperdiet. In feugiat risus suscipit lacus tincidunt elementum. Nullam accumsan nibh ut quam faucibus bibendum.</p>
          </article>
        </div>
      </section>
    <!--Contact-->
      <section id="contact" class="join row-flex">
        <div class="card col">
          <div class="wrapper-form">
            <h2 class="primary-form_title">Neque porro!</h2>
            <form class="primary-form" action="/action_page.php">
              <fieldset>
                <legend>Cras sit amet enim mattis. Mauris elementum, lectus ac consectetur.</legend>
                <label for="name">Name</label>
                <input type="text" id="name" required name="name" placeholder="Name" pattern="[a-zA-Z]">
                <span>Invalid name</span>
                <label for="email">Email</label>
                <input type="text" id="phone" name="phone" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
                <span>Invalid email address</span>
                <label for="phone">Phone number</label>
                <input type="text" id="phone" name="phone" placeholder="Phone" pattern="[0-9]{3}(-)?[0-9]{3}(-)?[0-9]{4}">
                <span>Invalid phone number</span>
                <label for="country">Country</label>
                <input class="btn primary-btn" type="submit" value="Submit">
              </fieldset>
            </form>
          </div>
        </div>
        <div class="card card_link col">
          <a href="#"></a>
        </div>
      </section>
    </main>
    <footer class="primary-footer"><small>Design inspired by kasra</small></footer>
  </div>
</body>
</html>