web-css/hobby.html at master · anggapw/web-css · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hobby</title>
    <script
      src="https://kit.fontawesome.com/6645177271.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="css/main.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Roboto:wght@500;900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="navbar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="works.html">Works</a></li>
        <li><a href="hobby.html">Hobby</a></li>
        <li><a href="https://angga.pw/" target="_blank">My Website</a></li>
      </ul>
    </div>
    <div class="contentHobby">
      <h1>hobby</h1>

      <div class="card">
        <div class="container">
          <i class="fas fa-plane fa-5x"></i>
          <p>
            Fusce ipsum metus, elementum et turpis vitae, posuere posuere purus.
            Nullam at ligula mattis, lobortis sem id, egestas ligula. Vestibulum
            egestas dolor sed pharetra iaculis. In hendrerit tellus vitae justo
            luctus dapibus. Etiam congue dolor sit amet erat scelerisque auctor.
            Mauris eu erat eu turpis vestibulum convallis vel quis nisi. Nunc
            faucibus efficitur arcu, at rhoncus lorem. Duis a mauris in lorem
            convallis tempus. Vivamus rhoncus volutpat odio.
          </p>
        </div>
      </div>

      <div class="card">
        <div class="container">
          <p>
            Vivamus mi nisl, rhoncus ac consectetur vitae, elementum nec libero.
            Orci varius natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Proin viverra lacus nec tellus sodales
            lobortis. Praesent ac arcu feugiat, iaculis sem eu, pulvinar justo.
          </p>
          <i class="fas fa-utensils fa-5x"></i>
        </div>
      </div>
    </div>
  </body>
</html>