website/index.html at master · LilHattaf/website · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Abdul Fattahilah</title>
  <link rel="icon" type="image/png" href="images/logo.png">
  <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="assets/style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">


  <div class="profile-card js-profile-card">
    <div class="profile-card__img">
      <img src="images/me.jpg" alt="profile card">
    </div>

    <div class="profile-card__cnt js-profile-cnt">
      <div class="profile-card__name">Abdul Fattahilah</div>
      <div class="profile-card__mail">fattahilah45@gmail.com</div>
      <div class="profile-card__txt">22 y.o | Nature Enthusiast</div>
      <div class="profile-card-loc">
        <span class="profile-card-loc__icon">
          <svg class="icon"><use xlink:href="#icon-location"></use></svg>
        </span>

        <span class="profile-card-loc__txt">
          Bogor, Indonesia
        </span>
      </div>

            <div class="profile-card-social">
        <a href="https://www.instagram.com/abdulfattahilah" class="profile-card-social__item instagram" target="_blank">
          <span class="icon-font">
              <svg class="icon"><use xlink:href="#icon-instagram"></use></svg>
          </span>
        </a>

        <a href="https://www.linkedin.com/in/abdul-fattahilah-b02106247" class="profile-card-social__item twitter" target="_blank">
          <span class="icon-font">
              <svg class="icon"><use xlink:href="#icon-twitter"></use></svg>
          </span>
        </a>

        <a href="https://github.com/lilhattaf" class="profile-card-social__item github">
          <span class="icon-font">
              <svg class="icon"><use xlink:href="#icon-github"></use></svg>
          </span>
        </a>

        <a href="https://www.facebook.com/netizen.budiman.75" class="profile-card-social__item twitter" target="_blank">
         <span class="icon-font">
              <svg class="icon"><use xlink:href="#icon-telegram"></use></svg>
          </span>
        </a>

        <a href="https://open.spotify.com/playlist/16wEHrntp1msM1LFTlOXAV" class="profile-card-social__item codepen">
          <span class="icon-font">
              <svg class="icon"><use xlink:href="#icon-donate"></use></svg>
          </span>
        </a>

        <a href="https://youtu.be/Nu9_fRJbD7U" class="profile-card-social__item link" target="_blank">
          <span class="icon-font">
              <svg class="icon"><use xlink:href="#icon-link"></use></svg>
          </span>
        </a>
      </div>
  </div>
</div>


<svg hidden="hidden">
  <defs>
    <symbol id="icon-github" viewBox="0 0 32 32">
      <title>github</title>
      <path d="M16.192 0.512c-8.832 0-16 7.168-16 16 0 7.072 4.576 13.056 10.944 15.168 0.8 0.16 1.088-0.352 1.088-0.768 0-0.384 0-1.632-0.032-2.976-4.448 0.96-5.376-1.888-5.376-1.888-0.736-1.856-1.792-2.336-1.792-2.336-1.44-0.992 0.096-0.96 0.096-0.96 1.6 0.128 2.464 1.664 2.464 1.664 1.44 2.432 3.744 1.728 4.672 1.344 0.128-1.024 0.544-1.728 1.024-2.144-3.552-0.448-7.296-1.824-7.296-7.936 0-1.76 0.64-3.168 1.664-4.288-0.16-0.416-0.704-2.016 0.16-4.224 0 0 1.344-0.416 4.416 1.632 1.28-0.352 2.656-0.544 4-0.544s2.72 0.192 4 0.544c3.040-2.080 4.384-1.632 4.384-1.632 0.864 2.208 0.32 3.84 0.16 4.224 1.024 1.12 1.632 2.56 1.632 4.288 0 6.144-3.744 7.488-7.296 7.904 0.576 0.512 1.088 1.472 1.088 2.976 0 2.144-0.032 3.872-0.032 4.384 0 0.416 0.288 0.928 1.088 0.768 6.368-2.112 10.944-8.128 10.944-15.168 0-8.896-7.168-16.032-16-16.032z"></path>
      <path d="M6.24 23.488c-0.032 0.064-0.16 0.096-0.288 0.064-0.128-0.064-0.192-0.16-0.128-0.256 0.032-0.096 0.16-0.096 0.288-0.064 0.128 0.064 0.192 0.16 0.128 0.256v0z"></path>
      <path d="M6.912 24.192c-0.064 0.064-0.224 0.032-0.32-0.064s-0.128-0.256-0.032-0.32c0.064-0.064 0.224-0.032 0.32 0.064s0.096 0.256 0.032 0.32v0z"></path>
      <path d="M7.52 25.12c-0.096 0.064-0.256 0-0.352-0.128s-0.096-0.32 0-0.384c0.096-0.064 0.256 0 0.352 0.128 0.128 0.128 0.128 0.32 0 0.384v0z"></path>
      <path d="M8.384 26.016c-0.096 0.096-0.288 0.064-0.416-0.064s-0.192-0.32-0.096-0.416c0.096-0.096 0.288-0.064 0.416 0.064 0.16 0.128 0.192 0.32 0.096 0.416v0z"></path>
      <path d="M9.6 26.528c-0.032 0.128-0.224 0.192-0.384 0.128-0.192-0.064-0.288-0.192-0.256-0.32s0.224-0.192 0.416-0.128c0.128 0.032 0.256 0.192 0.224 0.32v0z"></path>
      <path d="M10.912 26.624c0 0.128-0.16 0.256-0.352 0.256s-0.352-0.096-0.352-0.224c0-0.128 0.16-0.256 0.352-0.256 0.192-0.032 0.352 0.096 0.352 0.224v0z"></path>
      <path d="M12.128 26.4c0.032 0.128-0.096 0.256-0.288 0.288s-0.352-0.032-0.384-0.16c-0.032-0.128 0.096-0.256 0.288-0.288s0.352 0.032 0.384 0.16v0z"></path>
    </symbol>

    <symbol id="icon-location" viewBox="0 0 32 32">
      <title>location</title>
      <path d="M16 31.68c-0.352 0-0.672-0.064-1.024-0.16-0.8-0.256-1.44-0.832-1.824-1.6l-6.784-13.632c-1.664-3.36-1.568-7.328 0.32-10.592 1.856-3.2 4.992-5.152 8.608-5.376h1.376c3.648 0.224 6.752 2.176 8.608 5.376 1.888 3.264 2.016 7.232 0.352 10.592l-6.816 13.664c-0.288 0.608-0.8 1.12-1.408 1.408-0.448 0.224-0.928 0.32-1.408 0.32zM15.392 2.368c-2.88 0.192-5.408 1.76-6.912 4.352-1.536 2.688-1.632 5.92-0.288 8.672l6.816 13.632c0.128 0.256 0.352 0.448 0.64 0.544s0.576 0.064 0.832-0.064c0.224-0.096 0.384-0.288 0.48-0.48l6.816-13.664c1.376-2.752 1.248-5.984-0.288-8.672-1.472-2.56-4-4.128-6.88-4.32h-1.216zM16 17.888c-3.264 0-5.92-2.656-5.92-5.92 0-3.232 2.656-5.888 5.92-5.888s5.92 2.656 5.92 5.92c0 3.264-2.656 5.888-5.92 5.888zM16 8.128c-2.144 0-3.872 1.728-3.872 3.872s1.728 3.872 3.872 3.872 3.872-1.728 3.872-3.872c0-2.144-1.76-3.872-3.872-3.872z"></path>
      <path d="M16 32c-0.384 0-0.736-0.064-1.12-0.192-0.864-0.288-1.568-0.928-1.984-1.728l-6.784-13.664c-1.728-3.456-1.6-7.52 0.352-10.912 1.888-3.264 5.088-5.28 8.832-5.504h1.376c3.744 0.224 6.976 2.24 8.864 5.536 1.952 3.36 2.080 7.424 0.352 10.912l-6.784 13.632c-0.32 0.672-0.896 1.216-1.568 1.568-0.48 0.224-0.992 0.352-1.536 0.352zM15.36 0.64h-0.064c-3.488 0.224-6.56 2.112-8.32 5.216-1.824 3.168-1.952 7.040-0.32 10.304l6.816 13.632c0.32 0.672 0.928 1.184 1.632 1.44s1.472 0.192 2.176-0.16c0.544-0.288 1.024-0.736 1.28-1.28l6.816-13.632c1.632-3.264 1.504-7.136-0.32-10.304-1.824-3.104-4.864-5.024-8.384-5.216h-1.312zM16 29.952c-0.16 0-0.32-0.032-0.448-0.064-0.352-0.128-0.64-0.384-0.8-0.704l-6.816-13.664c-1.408-2.848-1.312-6.176 0.288-8.96 1.536-2.656 4.16-4.32 7.168-4.512h1.216c3.040 0.192 5.632 1.824 7.2 4.512 1.6 2.752 1.696 6.112 0.288 8.96l-6.848 13.632c-0.128 0.288-0.352 0.512-0.64 0.64-0.192 0.096-0.384 0.16-0.608 0.16zM15.424 2.688c-2.784 0.192-5.216 1.696-6.656 4.192-1.504 2.592-1.6 5.696-0.256 8.352l6.816 13.632c0.096 0.192 0.256 0.32 0.448 0.384s0.416 0.064 0.608-0.032c0.16-0.064 0.288-0.192 0.352-0.352l6.816-13.664c1.312-2.656 1.216-5.792-0.288-8.352-1.472-2.464-3.904-4-6.688-4.16h-1.152zM16 18.208c-3.424 0-6.24-2.784-6.24-6.24 0-3.424 2.816-6.208 6.24-6.208s6.24 2.784 6.24 6.24c0 3.424-2.816 6.208-6.24 6.208zM16 6.4c-3.072 0-5.6 2.496-5.6 5.6 0 3.072 2.528 5.6 5.6 5.6s5.6-2.496 5.6-5.6c0-3.104-2.528-5.6-5.6-5.6zM16 16.16c-2.304 0-4.16-1.888-4.16-4.16s1.888-4.16 4.16-4.16c2.304 0 4.16 1.888 4.16 4.16s-1.856 4.16-4.16 4.16zM16 8.448c-1.952 0-3.552 1.6-3.552 3.552s1.6 3.552 3.552 3.552c1.952 0 3.552-1.6 3.552-3.552s-1.6-3.552-3.552-3.552z"></path>
    </symbol>

    <symbol id="icon-instagram" viewBox="0 0 32 32">
      <title>Instagram</title>
      <path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
      <path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path>
      <path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
    </symbol>

    <symbol id="icon-twitter" viewBox="0 0 32 32">
      <title>Linkedin</title>
      <path d="M7.396 10.221H1.019a0.514 0.514 0 0 0 -0.514 0.514v20.492a0.514 0.514 0 0 0 0.514 0.514h6.378a0.514 0.514 0 0 0 0.514 -0.514V10.734a0.514 0.514 0 0 0 -0.514 -0.514z"></path>
      <path d="M4.211 0.037A4.213 4.213 0 0 0 0 4.238a4.211 4.211 0 0 0 8.415 0A4.21 4.21 0 0 0 4.211 0.037z"></path>
      <path d="M23.621 9.713c-2.564 0 -4.457 1.103 -5.605 2.352v-1.33a0.514 0.514 0 0 0 -0.514 -0.514h-6.109a0.514 0.514 0 0 0 -0.514 0.514v20.492a0.514 0.514 0 0 0 0.514 0.514h6.365a0.514 0.514 0 0 0 0.514 -0.514V21.09c0 -3.415 0.928 -4.748 3.311 -4.748 2.592 0 2.801 2.135 2.801 4.923v9.963a0.514 0.514 0 0 0 0.514 0.514h6.364a0.514 0.514 0 0 0 0.514 -0.514V19.986c0 -5.081 -0.968 -10.274 -8.155 -10.274z"></path>
    </symbol>

    <symbol id="icon-donate" viewBox="0 0 512 512">
      <title>Spotify</title>
      <path fill="#ffffff" d="M65.117 153.365a16 16 0 1 0 8.432 30.869L65.12 153.365Zm15.216 91.499a16 16 0 0 0 9.123 30.672l-9.123 -30.672Zm15.093 91.917a16 16 0 1 0 10.179 30.339l-10.179 -30.339Zm282.525 53.307a16.003 16.003 0 0 0 15.173 -28.176l-15.173 28.176Zm39.459 -83.712a16 16 0 1 0 14.747 -28.4l-14.747 28.4Zm39.355 -83.691a16 16 0 0 0 14.469 -28.544l-14.469 28.544ZM73.549 184.232C118.616 171.925 166.144 165.333 215.269 165.333V133.333c-52 0 -102.36 6.973 -150.152 20.032l8.432 30.869Zm15.907 91.304c39.787 -11.835 82.024 -18.208 125.813 -18.208v-32c-46.907 0 -92.219 6.827 -134.939 19.536l9.125 30.672Zm16.149 91.584c34.363 -11.531 71.248 -17.797 109.664 -17.797v-32c-41.915 0 -82.237 6.84 -119.843 19.459l10.179 30.339Zm109.664 -17.797c59.024 0 114.453 14.792 162.683 40.765l15.173 -28.176c-52.797 -28.432 -113.429 -44.589 -177.856 -44.589v32Zm0 -91.995c73.077 0 141.861 17.747 202.141 49.048l14.747 -28.4c-64.747 -33.619 -138.579 -52.648 -216.888 -52.648v32Zm0 -91.995c87.107 0 169.211 20.712 241.496 57.352l14.469 -28.544C394.549 155.275 307.496 133.333 215.269 133.333v32Z"></path>
    </symbol>

    <symbol id="icon-telegram" viewBox="0 0 32 32">
      <title>Facebook</title>
      <path style="fill:#ffffff;" d="M8.431 17.044h3.506v14.44a0.516 0.516 0 0 0 0.516 0.516h5.947a0.516 0.516 0 0 0 0.516 -0.516V17.113h4.032a0.516 0.516 0 0 0 0.513 -0.456l0.613 -5.319a0.516 0.516 0 0 0 -0.513 -0.575H18.917V7.431c0 -1.006 0.541 -1.516 1.606 -1.516h3.038a0.516 0.516 0 0 0 0.516 -0.516V0.519a0.516 0.516 0 0 0 -0.516 -0.516h-4.184A4.119 4.119 0 0 0 19.191 0c-0.725 0 -3.25 0.144 -5.244 1.978 -2.209 2.031 -1.903 4.469 -1.831 4.891v3.897H8.433a0.516 0.516 0 0 0 -0.516 0.516v5.247a0.516 0.516 0 0 0 0.516 0.516z"></path>
    </symbol>

    <symbol id="icon-link" viewBox="-4.211 0 32 32">
      <title>YouTube</title>
      <path fill-rule="evenodd" d="M22.013 10.952a2.681 2.681 0 0 0 -1.886 -1.9A63.363 63.363 0 0 0 11.789 8.606a63.363 63.363 0 0 0 -8.337 0.448A2.681 2.681 0 0 0 1.566 10.952a28.126 28.126 0 0 0 -0.446 5.171A28.126 28.126 0 0 0 1.566 21.288a2.681 2.681 0 0 0 1.886 1.9 63.36 63.36 0 0 0 8.337 0.448 63.36 63.36 0 0 0 8.337 -0.448 2.681 2.681 0 0 0 1.886 -1.9 28.126 28.126 0 0 0 0.446 -5.169 28.126 28.126 0 0 0 -0.446 -5.171zM15.074 16.147 9.602 13.036v6.221z"></path>
    </symbol>
  </defs>
</svg>
<!-- partial -->
  <script src="assets/script.js"></script>

</body>
</html>