Sticky-circle-animation/index.html at main · CodeWithAlamin/Sticky-circle-animation · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta name="description" content="SeamlessHR's Sticky circle animation" />
    <meta
      property="og:title"
      content="Sticky circle animation clone of SeamlessHR home page - CodeWithAlamin"
    />
    <meta
      property="og:description"
      content="Sticky circle animation clone of SeamlessHR home page coded by Alamin"
    />
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/CodeWithAlamin/Sticky-circle-animation/main/screenshots/Screenshot%20-%20Sticky%20circle%20animation%20clone%20of%20SeamlessHR%20home%20page%20-%20CodeWithAlamin.png"
    />

    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>SeamlessHR's Sticky circle animation</title>
  </head>

  <body>
    <main>
      <div class="top-container">
        <div class="middle-images">
          <img
            src="images/alamin-pic-1.jpg"
            alt="Alamin's photo, CodeWithAlamin"
          />
          <img
            src="images/alamin-pic-2.jpg"
            alt="Alamin's photo, CodeWithAlamin"
          />
        </div>
        <div class="circles-container">
          <div class="circle-1 circle">
            <div class="circle-contents">
              <img src="images/analytics.svg" alt="" />
              <p>Analytics & Reporting</p>
            </div>
          </div>
          <div class="circle-2 circle">
            <div class="circle-contents">
              <img src="images/calendar.svg" alt="" />
              <p>Time & Attendance</p>
            </div>
          </div>
          <div class="circle-3 circle">
            <div class="circle-contents">
              <img src="images/person.svg" alt="" />
              <p>Onboarding</p>
            </div>
          </div>
          <div class="circle-4 circle">
            <div class="circle-contents">
              <img src="images/finger-print.svg" alt="" />
              <p>HR Information System</p>
            </div>
          </div>
          <div class="circle-5 circle">
            <div class="circle-contents">
              <img src="images/coconut.svg" alt="" />
              <p>Leaves & Holidays</p>
            </div>
          </div>
          <div class="circle-6 circle">
            <div class="circle-contents">
              <img src="images/logout.svg" alt="" />
              <p>Exit & Off-boarding</p>
            </div>
          </div>
          <div class="circle-7 circle">
            <div class="circle-contents">
              <img src="images/plane-1.svg" alt="" />
              <p>Travel & Requisitions</p>
            </div>
          </div>
          <div class="circle-8 circle">
            <div class="circle-contents">
              <img src="images/law.svg" alt="" />
              <p>Disciplinary</p>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="attribution-wrapper">
        <p class="attribution">
          Coded by <a href="https://github.com/CodeWithAlamin">Alamin</a><br />
          Ideas from
          <a href="https://www.seamlesshr.com" target="_blank">SeamlessHR</a>
        </p>
      </div>
    </footer>
  </body>
</html>