Skip to content

Instantly share code, notes, and snippets.

@emersonbroga

emersonbroga/index.html Secret

Created February 21, 2022 19:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emersonbroga/3f65e1deca24e3d321dc2b7aff768f83 to your computer and use it in GitHub Desktop.
Save emersonbroga/3f65e1deca24e3d321dc2b7aff768f83 to your computer and use it in GitHub Desktop.
Download ZIP
Hexagonal avatars
Raw
index.html
<!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">
<title>Hexagonal Avatar</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #1e1e1e;
color: #e1e1e1;
}
.title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.title h1 {
color: rgb(202, 138, 4);
}
.title p strong {
color: rgb(202, 138, 4);
}
.team {
margin: 32px 0;
display: flex;
gap: 10px;
}
.team .avatar {
display: block;
width: 200px;
height: 200px;
filter: grayscale(1);
cursor: pointer;
clip-path: url("#twitter-avatar");
}
.team .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 0.5s ease;
}
.team .avatar:hover {
filter: grayscale(0);
}
.team .avatar:hover img {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="container">
<div class="title">
<h1>Our Team</h1>
<p>The most talented people in <strong>Web3</strong>.</p>
</div>
<div class="team">
<div class="avatar">
<img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
</div>
<div class="avatar">
<img src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
</div>
<div class="avatar">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
</div>
<div class="avatar">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
</div>
</div>
</div>
<svg width="0" height="0">
<clipPath id="twitter-avatar">
<path d="M187.34 72C192.699 81.282 192.699 92.718 187.34 102L154.66 158.603C149.301 167.885 139.397 173.603 128.679 173.603H63.3205C52.6026 173.603 42.6987 167.885 37.3397 158.603L4.66026 102C-0.698722 92.718 -0.698726 81.282 4.66026 72L37.3397 15.3975C42.6987 6.11543 52.6025 0.397461 63.3205 0.397461H128.679C139.397 0.397461 149.301 6.11543 154.66 15.3975L187.34 72Z" fill="#C4C4C4"/>
</clipPath>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment