animations/index.html at main · KostasSliazas/animations · 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
<!doctype html>
<html lang="en" class="index">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="CSS animations" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CSS animations</title>
    <link rel="stylesheet" href="css/main.min.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
    <link rel="manifest" href="site.webmanifest" />
  </head>

  <body>
    <div id="loader" aria-hidden="true">Loading...</div>
    <input type="checkbox" id="theme" aria-label="theme" title="Theme" />
    <label for="theme" id="theme-label">Theme</label>
    <!--[if lt IE 8]>
      <p class="browsehappy">
        You are using an
        <strong>outdated</strong>
        browser. Please
        <a href="#">upgrade your browser</a>
        to improve your experience.
      </p>
    <![endif]-->
    <div id="wrapper">
      <a id="top"></a>
      <header id="header">
        <a href="/">
          <span>daug.eu</span>
          <span id="logo"></span>
        </a>
      </header>
      <button class="toggle-btn" id="menu">menu</button>
      <div class="nav">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="tetris-animation.html">tetris animation</a></li>
          <li><a href="spining-dots-animation.html">spinning dots animation</a></li>
          <li><a href="loader3d-animation.html">loader3d animation</a></li>
          <li><a href="Lithuania-animation.html">Lithuania animation</a></li>
          <li><a href="cassette-animation.html">cassette animation</a></li>
          <li><a href="box3d-animation.html">box3d animation</a></li>
          <li><a href="scale-animation.html">scale animation</a></li>
          <li><a href="numbers-animation.html">numbers animation</a></li>
          <li><a href="loader-animation.html">loader animation</a></li>
          <li><a href="data-title-animation.html">data attribute animation</a></li>
          <li><a href="speaker-animation.html">speaker animation</a></li>
          <li><a href="kitty-animation.html">kitty animation</a></li>
          <li><a href="digital-text-animation.html">digital text animation</a></li>
          <li><a href="svg-animation.html">svg animation</a></li>
        </ul>
      </div>
      <main class="container">
        <article>
          <div class="block">
            <div class="box">
              <h2>Animating the Web: A CSS Animation Portfolio</h2>
              <p>
                Welcome to my portfolio of CSS animations—a collection of interactive and dynamic
                designs that bring ideas to life.
              </p>
              <p>
                From smooth transitions to eye-catching effects, each animation reflects creativity,
                precision, and a passion for crafting engaging web experiences.
              </p>
              <p>
                Animations are the heartbeat of modern web design, adding depth, personality, and
                interactivity to static pages. With CSS, we can craft seamless transitions, playful
                effects, and dynamic experiences that captivate and engage users.
              </p>
              <p>
                Whether you're creating a simple loading spinner, a rotating cube, or a 3D box, CSS
                animations offer a wealth of possibilities for creating engaging and visually
                appealing web experiences.
              </p>
              <p>
                Feel free to explore, experiment, and even copy-paste the code to test it out on
                your own projects.
              </p>
            </div>
          </div>
        </article>
        <aside>
          <div class="block">
            <div class="box">
              <svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="m30.23 70.18c4.827 3.932 10.26 6.671 14.96 6.671h10.86c3.536 0 6.648-5.835 4.281-9.866m-6.513-19h37.62c4.467 7.3e-4 7.259-4.835 5.024-8.703a5.801 5.801 0 0 0-5.024-2.901h-50.33"
                />
                <path
                  d="m53.82 59.59h4.742c4.467 7.3e-4 5.798-6.296 3.564-10.16-1.037-1.795-2.952-1.44-5.024-1.44h-3.282"
                />
                <path
                  d="m53.82 68.27h3.282c4.467 7.29e-4 7.076-6.331 4.842-10.2-2.084 1.951-2.769 1.517-4.842 1.517h-3.282m-9.355-23.17h20.92c4.467 7.3e-4 7.259-4.835 5.024-8.703a5.8 5.8 0 0 0-5.024-2.901h-20.18c-7.003 0-11.08 2.47-14.93 5.973"
                />
                <path
                  d="m54.56 25.01a5.801 5.801 0 0 0 8.703 5.024 5.801 5.801 0 0 0 2.901-5.024"
                />
                <path
                  d="m30.28 32.56v43.24c0 0.9807-0.7895 1.77-1.77 1.77h-22c-0.9807 0-1.77-0.7895-1.77-1.77v-43.24c0-0.9807 0.7895-1.77 1.77-1.77h22c0.9807 0 1.77 0.7895 1.77 1.77z"
                />
                <path d="m88.95 45.56a3.379 3.379 0 1 1 0-6.757h1.997a3.379 3.379 0 1 1 0 6.757z" />
                <path
                  d="m22.87 74.64a4.463 4.463 0 0 1-4.463-4.463 4.463 4.463 0 0 1 4.463-4.463 4.463 4.463 0 0 1 4.463 4.463 4.463 4.463 0 0 1-4.463 4.463z"
                />
              </svg>
              <p>
                Explore my work, get inspired, and discover the endless possibilities of web
                animations. Click the menu at the top-right corner to browse through animations and
                find inspiration.
              </p>
            </div>
            <div class="box">
              <svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="m49.25 71.76-11.59 3.162a4.633 4.633 0 0 1-5.701-5.649 4.633 4.633 0 0 1 3.262-3.292l11.1-3.029m5.129 13.45-3.601 0.9828a4.633 4.633 0 0 1-5.764-3.564"
                />
                <path
                  d="m42.12 64.1-13.78 3.761c-3.442 0.941-6.611-2.199-5.701-5.65 0.421-1.601 1.664-2.856 3.262-3.291l13.78-3.761 11.14-11.06m1.877 36.68c-2.341 0.1848-4.45-1.41-4.909-3.713m-4.423-48.78 14.94 3.434m14.35 30.43c-2.628-2.627-1.426-7.113 2.164-8.073 1.665-0.4459 3.441 0.03031 4.66 1.249l2.017 2.016c2.628 2.626 1.426 7.113-2.163 8.073-1.665 0.4463-3.442-0.02972-4.661-1.249z"
                />
                <path
                  d="m65.82 68.98a4.825 4.825 0 0 1 2.164-8.073 4.825 4.825 0 0 1 4.66 1.249l2.017 2.016a4.825 4.825 0 0 1-2.163 8.073 4.825 4.825 0 0 1-4.661-1.249zm-6.824 6.83a4.825 4.825 0 0 1 2.164-8.073 4.825 4.825 0 0 1 4.66 1.249l2.017 2.016a4.825 4.825 0 0 1-2.163 8.073 4.825 4.825 0 0 1-4.661-1.249z"
                />
                <path
                  d="m52.71 80.64a3.977 3.977 0 0 1 1.783-6.654 3.977 3.977 0 0 1 3.842 1.029l1.662 1.662a3.977 3.977 0 0 1-1.784 6.654 3.977 3.977 0 0 1-3.841-1.029zm20.72-20.71a2.699 2.699 0 1 1 3.816-3.816l1.128 1.128a2.699 2.699 0 1 1-3.816 3.816zm-6.824 6.824a2.699 2.699 0 1 1 3.816-3.816l1.128 1.128a2.699 2.699 0 1 1-3.816 3.816zm-6.824 6.824a2.699 2.699 0 1 1 3.816-3.816l1.128 1.128a2.699 2.699 0 1 1-3.816 3.816z"
                />
                <path
                  d="m53.16 78.6a2.224 2.224 0 1 1 3.145-3.145l0.9291 0.9291a2.224 2.224 0 1 1-3.145 3.145zm-5.512-37.37 6.343 5.729a4.633 4.633 0 0 0 7.637-2.469 4.633 4.633 0 0 0-1.425-4.409l-5.903-5.331c-4.152-3.749-11.06-7.333-15.22-7.317"
                />
                <path
                  d="m53.67 34.41a4.633 4.633 0 0 0 2.469 7.637 4.633 4.633 0 0 0 4.409-1.425"
                />
                <path
                  d="m57.4 30.67 23.15 25.63c0.525 0.5813 1.416 0.6266 1.997 0.1016l13.04-11.78c0.5813-0.525 0.6266-1.416 0.1016-1.997l-23.15-25.63c-0.525-0.5813-1.416-0.6266-1.997-0.1016l-13.04 11.78c-0.5813 0.525-0.6266 1.416-0.1016 1.997z"
                />
                <path
                  d="m84.31 51.64a3.565 3.565 0 0 0 0.2562-5.035 3.565 3.565 0 0 0-5.035-0.2562 3.565 3.565 0 0 0-0.2562 5.035 3.565 3.565 0 0 0 5.035 0.2562z"
                />
                <path
                  d="m39.08 27.44-17.27 29.91c-0.3916 0.6783-1.253 0.9091-1.931 0.5175l-15.22-8.787c-0.6783-0.3916-0.9091-1.253-0.5175-1.931l17.27-29.91c0.3916-0.6783 1.253-0.9091 1.931-0.5175l15.22 8.787c0.6783 0.3916 0.9091 1.253 0.5175 1.931z"
                />
                <path
                  d="m17.15 53.58a3.565 3.565 0 0 1-1.305-4.87 3.565 3.565 0 0 1 4.87-1.305 3.565 3.565 0 0 1 1.305 4.87 3.565 3.565 0 0 1-4.87 1.305z"
                />
                <path d="m20.89 57.75 4.207 1.102" />
              </svg>
              <p>
                Animations bring a unique charm to web design, transforming static elements into
                engaging, dynamic experiences. This portfolio is a showcase of animations I’ve
                discovered and reimagined in my own way, blending creativity with precision. Explore
                a variety of designs, from smooth transitions to playful effects, all crafted to
                inspire and captivate.
              </p>
            </div>
          </div>
        </aside>
      </main>
      <footer>
        <p>2023 by Kostas Šliažas</p>
      </footer>
      <a href="#top" id="totop">Back to top</a>
    </div>
    <script src="js/script.min.js"></script>
  </body>
</html>