Terms and Conditions

By signing up and using our platform, you agree to the collection, use, and protection of your personal information in accordance with our policies. This includes:

- Your name (first, middle, and last)

- Your email address

- Your organization details

- Your account type (student or educator)

- Any uploaded profile pictures

- Your interactions with tutorials, exercises, and classes

This data is collected to:

- Create and manage your account

- Facilitate participation in classes and exercises

We store this data securely and will not share it with third parties, except with your consent or when required by law. The data is retained for as long as you maintain an account on our platform.

Your Rights

In accordance with the Data Privacy Act of 2012, you have the right to:

- Be informed of how your data is collected and used

- Access and correct your data

- Request the deletion of your data

- Request portability of your data

To exercise any of these rights, please contact us at visualwebbits@gmail.com.

Data Security

We use encryption and security best practices to protect your data. However, no method of transmission over the internet is 100% secure.

By using our platform, you acknowledge that you have read and understood this Data Privacy Statement and agree to the collection and use of data as described.

Live Source Code

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <title>Circular Profiles with Hover</title>
  </head>
  <body>
    <div class="container">
      <div class="icon">
        <div class="imgBx active" style="--i: 1" data-id="content1">
          <img src="https://i.imgur.com/OlXcGaW.png" />
        </div>

<div class="imgBx" style="--i: 4" data-id="content4">
          <img src="https://i.imgur.com/IRxUmeF.png" />
        </div>
      </div>
      <div class="content">
        
        <div class="contentBx active" id="content1">
          <div class="card">
            <div class="imgBx"><img src="https://imgur.com/ygPupOn.png" /></div>
            <div class="textBx">
              <h2>Kervy Gulmatico<br /><span>Project Manager</span></h2>
              <ul class="sci">
                <li>
                  <a href="email"
                    ><i class="fa fa-envelope-o" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="phone"
                    ><i class="fa fa-phone" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="fb"
                    ><i class="fa fa-facebook" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="twt"
                    ><i class="fa fa-twitter" aria-hidden="true"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>

<div class="contentBx" id="content2">
          <div class="card">
            <div class="imgBx"><img src="https://imgur.com/CEqp4KF.png" /></div>
            <div class="textBx">
              <h2>Lee Anne Parafina<br /><span>System Developer</span></h2>
              <ul class="sci">
                <li>
                  <a href="email"
                    ><i class="fa fa-envelope-o" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="phone"
                    ><i class="fa fa-phone" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="fb"
                    ><i class="fa fa-facebook" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="twt"
                    ><i class="fa fa-twitter" aria-hidden="true"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>

<div class="contentBx" id="content3">
          <div class="card">
            <div class="imgBx"><img src="https://imgur.com/U3pkRwB.png" /></div>
            <div class="textBx">
              <h2>Daniela Dela Cruz<br /><span>UI/UX Designer</span></h2>
              <ul class="sci">
                <li>
                  <a href="email"
                    ><i class="fa fa-envelope-o" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="phone"
                    ><i class="fa fa-phone" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="fb"
                    ><i class="fa fa-facebook" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="twt"
                    ><i class="fa fa-twitter" aria-hidden="true"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>

<div class="contentBx" id="content4">
          <div class="card">
            <div class="imgBx"><img src="https://imgur.com/6SZ5ofD.png" /></div>
            <div class="textBx">
              <h2>Aljane Guzman<br /><span>Technical Documentator</span></h2>
              <ul class="sci">
                <li>
                  <a href="email"
                    ><i class="fa fa-envelope-o" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="phone"
                    ><i class="fa fa-phone" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="fb"
                    ><i class="fa fa-facebook" aria-hidden="true"></i
                  ></a>
                </li>
                <li>
                  <a href="twt"
                    ><i class="fa fa-twitter" aria-hidden="true"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0c074a;
}

.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.container .icon {
  position: relative;
  left: -50%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.container .icon .imgBx {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  transition: 0.5s;
  border: 1px solid #fff;
  box-shadow: 0 0 0 4px #222, 0 0 0 6px #fff;
  transform: rotate(calc(360deg / 4 * var(--i)));
  transform-origin: 280px;
  z-index: 100;
  overflow: hidden;
}

.container .icon .imgBx.active {
  box-shadow: 0 0 0 6px #222, 0 0 0 12px #d9cf0d;
}

.container .icon .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  transform: rotate(calc(-360deg / 4 * var(--i)));
  transition: 0.5s;
  filter: grayscale(1);
}

.container .icon .imgBx.active img {
  filter: grayscale(0);
}

.content {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content::before {
  content: "";
  position: absolute;
  inset: 60px;
  border: 4px solid transparent;
  border-left: 4px solid #d9cf0d;
  border-right: 4px solid #d9cf0d;
  border-radius: 50%;
  animation: animte_01 5s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes animte_01 {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

.content::after {
  content: "";
  position: absolute;
  inset: 90px;
  border: 4px solid transparent;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
  border-radius: 50%;
  animation: animte_02 2.5s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes animte_02 {
  0% {
    rotate: 360deg;
  }
  100% {
    rotate: 0deg;
  }
}

.contentBx {
  position: absolute;
  transform: scale(0);
  transition: 0.5s;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contentBx.active {
  transform: scale(1);
  opacity: 1;
  transition-delay: 0.5s;
}

.contentBx .card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;
}

.contentBx .card .imgBx {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 10%;
  overflow: hidden;
}

.contentBx .card .imgBx img {
  width: 100%;
  height: auto;
  object-fit: contain; /* or `cover`, depending on preference */
}

.contentBx .card .textBx {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contentBx .card .textBx h2 {
  position: relative;
  font-size: 1.25em;
  font-weight: 600;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
  text-align: center;
}

.contentBx .card .textBx h2 span {
  font-size: 0.65em;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.sci {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 7px;
}

.sci li {
  display: inline-block;
}

.sci li a {
  display: flex;
  list-style: none;
  gap: 7px;
  padding: 0;
  margin: 0;
}
.sci li a:hover {
  background: #d9cf0d;
}

Live Source Code

HTML

CSS

JS

Circular Profiles with Hover

Live Preview

Sign Up

Login

Terms and Conditions

Your Rights

Data Security

Live Source Code

HTML

CSS

JS

Circular Profiles with Hover

Live Preview

Circular Profiles with Hover

HTML Explanation

CSS Explanation

Javascript Explanation

HTML

CSS

JavaScript

Combine Tutorial

Oh no!😱