Skip to content

Instantly share code, notes, and snippets.

@SamPandey001

SamPandey001/daily-ui-006-profile.markdown

Created August 7, 2023 13:27
Show Gist options
  • Save SamPandey001/8b02d17d61cb1a4430c3e576e9ba5f19 to your computer and use it in GitHub Desktop.
Save SamPandey001/8b02d17d61cb1a4430c3e576e9ba5f19 to your computer and use it in GitHub Desktop.
Download ZIP
Daily UI #006 - Profile
Raw
index.html
<!-- about -->
<div class="about">
<a class="bg_links social portfolio" href="https://www.rafaelalucas.com/dailyui" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links social dribbble" href="https://dribbble.com/rafaelalucas" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links social linkedin" href="https://www.linkedin.com/in/rafaelalucas/" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links logo"></a>
</div>
<!-- end about -->
<div class="wrapper">
<section class="module-team">
<div class="team">
<h2 class="title">Meet our Team</h2>
<div class="team-cards">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper"></div>
</div>
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="navigation">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</section>
</div>
Raw
script.js
window.addEventListener("load", event => {
var swiperWrapper = document.querySelector('.swiper-wrapper');
/* The Team */
var team = [{
name: "Rahul Agrawal",
role: "FOUNDER & CEO",
desc: "Far far away, behind the world mountains, far from the countries Vokalia and Consonantia, theres live the blind texts.",
photo: "https://www.taskmatch.in/assets/rahul.jpeg",
website: "https://rafaelalucas.com",
email: "mailto:[email protected]",
linkedin: "https://www.linkedin.com/in/rafaelalucas/",
dribbble: "https://dribbble.com/rafaelalucas",
},
{
name: "Amit Kumar Das",
role: "Co-Founder",
desc: "Far far away, behind the world mountains, far from the countries Vokalia and Consonantia, theres live the blind texts.",
photo: "https://www.taskmatch.in/assets/amit.jpg",
website: "https://rafaelalucas.com",
email: "mailto:[email protected]",
linkedin: "https://www.linkedin.com/in/rafaelalucas/",
dribbble: "https://dribbble.com/rafaelalucas",
},
];
/* Social Icons */
var icons = [{
iWebsite: "https://rafaelalucas.com/dailyui/6/assets/link.svg",
iEmail: "https://rafaelalucas.com/dailyui/6/assets/email.svg",
iLinkedin: "https://rafaelalucas.com/dailyui/6/assets/linkedin.svg",
iDribbble: "https://rafaelalucas.com/dailyui/6/assets/dribbble.svg",
}];
var iWebsite = icons[0].iWebsite,
iEmail = icons[0].iEmail,
iLinkedin = icons[0].iLinkedin,
iDribbble = icons[0].iDribbble;
/* Function to populate the team members */
function addTeam() {
for (let i = 0; i < 2; i++) {
/* Variables for the team */
var name = team[i].name,
role = team[i].role,
desc = team[i].desc,
photo = team[i].photo,
website = team[i].website,
email = team[i].email,
linkedin = team[i].linkedin,
dribbble = team[i].dribbble;
/* Template for the Team Cards */
var template = `
<div class="swiper-slide">
<div class="card">
<span class="bg"></span>
<span class="more"></span>
<figure class="photo"><img src="${photo}"></figure>
<article class="text">
<p class="name">${name}</p>
<p class="role">${role}</p>
<p class="desc">${desc}</p>
</article>
<div class="social">
<span class="pointer"></span>
<div class="icons">
<a class="icon" href="${website}" target="_blank" data-index="0"><img src="${iWebsite}"></a>
<a class="icon" href="${email}" target="_blank" data-index="1"><img src="${iEmail}"></a>
<a class="icon" href="${linkedin}" target="_blank" data-index="2"><img src="${iLinkedin}"></a>
<a class="icon" href="${dribbble}" target="_blank" data-index="3"><img src="${iDribbble}"></a>
</div>
</div>
</div>
</div>`;
swiperWrapper.insertAdjacentHTML('beforeend', template);
}
};
addTeam();
/* Swiper Settings */
var mySwiper = new Swiper(".swiper-container", {
// Optional parameters
direction: "horizontal",
loop: false,
centeredSlides: false,
speed: 800,
slidesPerView: 2,
spaceBetween: 40,
threshold: 5,
// If we need pagination
pagination: {
el: ".swiper-pagination",
clickable: true
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
breakpoints: {
1180: {
slidesPerView: 3,
spaceBetween: 40,
centeredSlides: false,
},
799: {
slidesPerView: 1,
spaceBetween: 20,
centeredSlides: true,
loop: false,
},
}
});
/* Show More */
var btnShow = document.querySelectorAll('.more');
btnShow.forEach(function (el) {
el.addEventListener('click', showMore);
});
function showMore(event) {
var card = event.target.closest(".swiper-slide");
if (card.classList.contains('show-more')) {
card.classList.remove('show-more');
} else {
card.classList.add('show-more')
}
}
/* Social Hover */
var icon = document.querySelectorAll('.icon');
icon.forEach(function (el) {
el.addEventListener("mouseenter", followCursor);
});
function followCursor(event) {
var pointer = event.currentTarget.closest(".swiper-slide").querySelector('.pointer'),
index = event.currentTarget.dataset.index,
sizeIcon = (60 * index) + 25;
pointer.style.transform = `translateX(${sizeIcon}px)`;
}
/* end */
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
Raw
style.scss
.about {
$cubic: cubic-bezier(0.64, 0.01, 0.07, 1.65);
$transition: 0.6s $cubic;
$size: 40px;
position: fixed;
z-index: 10;
bottom: 10px;
right: 10px;
width: $size;
height: $size;
display: flex;
justify-content: flex-end;
align-items: flex-end;
transition: all 0.2s ease;
.bg_links {
width: $size;
height: $size;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(#000000, 0.2);
border-radius: 100%;
backdrop-filter: blur(5px);
position: absolute;
}
.logo {
width: $size;
height: $size;
z-index: 9;
background-image: url(https://rafaelavlucas.github.io/assets/codepen/logo_white.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: 10px 7px;
opacity: 0.9;
transition: all 1s 0.2s ease;
bottom: 0;
right: 0;
}
.social {
opacity: 0;
right: 0;
bottom: 0;
.icon {
width: 100%;
height: 100%;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
display: flex;
transition: all 0.2s ease, background-color 0.4s ease;
opacity: 0;
border-radius: 100%;
}
&.portfolio {
transition: all 0.8s ease;
.icon {
background-image: url(https://rafaelavlucas.github.io/assets/codepen/link.svg);
}
}
&.dribbble {
transition: all 0.3s ease;
.icon {
background-image: url(https://rafaelavlucas.github.io/assets/codepen/dribbble.svg);
}
}
&.linkedin {
transition: all 0.8s ease;
.icon {
background-image: url(https://rafaelavlucas.github.io/assets/codepen/linkedin.svg);
}
}
}
&:hover {
width: 105px;
height: 105px;
transition: all $transition;
.logo {
opacity: 1;
transition: all 0.6s ease;
}
.social {
opacity: 1;
.icon {
opacity: 0.9;
}
&:hover {
background-size: 28px;
.icon {
background-size: 65%;
opacity: 1;
}
}
&.portfolio {
right: 0;
bottom: calc(100% - 40px);
transition: all 0.3s 0s $cubic;
.icon {
&:hover {
background-color: #698fb7;
}
}
}
&.dribbble {
bottom: 45%;
right: 45%;
transition: all 0.3s 0.15s $cubic;
.icon {
&:hover {
background-color: #ea4c89;
}
}
}
&.linkedin {
bottom: 0;
right: calc(100% - 40px);
transition: all 0.3s 0.25s $cubic;
.icon {
&:hover {
background-color: #0077b5;
}
}
}
}
}
}
@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,500,600,700,800,900|Barlow:300,400,500,600,700,800,900&display=swap");
$font-01: "Barlow",
sans-serif;
$font-02: "Barlow Condensed",
sans-serif;
$m-01: #D45B7A;
$m-02: #FDA576;
$g-01: linear-gradient(140deg, $m-01, $m-02);
$neu-01: #EAEAEA;
$neu-02: #EDEEF4;
$neu-03: #6F7073;
$neu-04: #505050;
$neu-05: #403E3E;
$transition: all 0.4s cubic-bezier(0.7, 0.29, 0.68, 1.43);
@mixin lg {
@media screen and (max-width: 1180px) {
@content;
}
}
@mixin md {
@media screen and (max-width: 1023px) {
@content;
}
}
@mixin sm {
@media screen and (max-width: 799px) {
@content;
}
}
@mixin xs {
@media screen and (max-width: 511px) {
@content;
}
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
button,
a,
i,
input,
figure,
img {
margin: 0;
padding: 0;
list-style: none;
border: 0;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
color: inherit;
&:focus {
outline: 0;
}
}
div {
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
padding: 0;
height: auto;
font-family: $font-01;
background: white;
//background-color: #CBCBCB;
}
.wrapper {
.module-team {
position: relative;
&:before {
width: 100%;
height: 380px;
background-color: $neu-01;
content: '';
position: absolute;
z-index: -1;
@include sm {
height: 250px;
}
}
.team {
max-width: 1440px;
margin: 0 auto;
padding: 100px 5%;
@include sm {
padding: 50px 0%;
}
.title {
text-align: center;
margin-bottom: 80px;
color: $neu-03;
font-size: 44px;
line-height: normal;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1.3px;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100px;
&:before {
content: '';
position: absolute;
width: 80px;
height: 10px;
background: $neu-03;
border-radius: 50px;
bottom: 0;
opacity: 0.2;
@include sm {
width: 60px;
height: 5px;
}
}
@include sm {
font-size: 32px;
height: 60px;
margin-bottom: 40px;
}
}
.team-cards {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.swiper-container {
max-width: 920px;
height: 360px;
padding: 0 20px;
cursor: default;
@include lg {
max-width: 600px;
}
@include sm {
max-width: 280px;
height: 370px;
padding: 0 20px;
overflow: visible;
}
/* Card */
.swiper-slide {
background-color: white;
width: 280px !important;
height: 320px;
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px $neu-02;
position: relative;
transition: all 0.4s ease;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0px 20px 40px -20px #EAEAEA;
top: 0px;
z-index: -1;
transition: all 0.4s ease;
}
.card {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
.bg {
position: absolute;
width: 100%;
height: 100px;
top: 0;
border-radius: 4px 4px 0px 0px;
transition: all 0.4s ease;
background: $g-01;
z-index: 1;
}
.more {
width: 24px;
height: 24px;
position: absolute;
z-index: 2;
right: 20px;
top: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.4s ease;
border-radius: 100%;
&:before,
&:after {
width: 16px;
height: 2px;
background-color: white;
content: '';
position: absolute;
border-radius: 4px;
transition: all 0.4s ease;
}
&:after {
transform: rotate(90deg);
}
@include sm {
padding: 10px;
top: 10px;
right: 10px;
}
&:hover {
transform: scale(1.1);
background-color: rgba(white, 0.2);
@include sm {
transform: scale(1);
background-color: transparent;
}
}
}
.photo {
width: 120px;
height: 120px;
border-radius: 100%;
overflow: hidden;
z-index: 1;
position: absolute;
top: 40px;
border: 3px solid #FFFFFF;
transition: all 0.4s ease;
box-shadow: 0px 4px 10px rgba($neu-03, 0.3);
&:before,
&:after {
width: 100%;
height: 100px;
border-radius: 4px;
content: '';
position: absolute;
transition: all 0.4s ease;
opacity: 0;
left: 0;
top: 0;
}
&:before {
background: $neu-05;
z-index: 1;
}
&:after {
background: $g-01;
z-index: 2;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.text {
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
transform: translateY(50px);
transition: all 0.3s ease;
.name {
font-size: 20px;
color: #6F7073;
font-weight: 300;
}
.role {
font-size: 14px;
font-weight: 600;
color: #CBCBCB;
letter-spacing: 0.8px;
margin-top: 5px;
}
.desc {
color: white;
display: none;
margin-top: 20px;
font-size: 16px;
letter-spacing: 0.6px;
text-align: center;
padding: 0 40px;
font-weight: 400;
line-height: 22px;
}
}
.social {
z-index: 1;
display: flex;
align-items: center;
background-color: rgba($neu-01, 0.5);
box-shadow: inset 0px 11px 13px -20px $neu-03;
width: 100%;
position: absolute;
bottom: 0;
height: 50px;
padding: 0 20px;
box-sizing: border-box;
border-radius: 0px 0px 4px 4px;
transition: all 0.4s ease;
.pointer {
display: block;
width: 10px;
height: 10px;
z-index: 2;
bottom: 50px;
position: absolute;
transform: translateX(25px);
transition: all 0.4s ease;
opacity: 0;
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: white;
transform: rotate(45deg);
}
@include sm {
display: none;
}
}
.icons {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
.icon {
width: 25%;
height: 24px;
opacity: 0.3;
transition: all 0.4s ease;
&:hover {
opacity: 0.6;
@include sm {
opacity: 0.3;
}
}
img {
width: 100%;
height: 100%;
}
}
}
&:hover {
.pointer {
opacity: 1;
bottom: 45px;
}
}
}
}
&:hover {
transform: translateY(3px);
&:before {
box-shadow: 0px 10px 10px -10px #EAEAEA;
}
@include sm {
transform: translateY(0px);
&:before {
box-shadow: 0px 20px 40px -20px #EAEAEA;
}
}
.card {
.photo {
transform: translateY(-5px);
box-shadow: 0px 6px 20px rgba($neu-03, 0.3);
@include sm {
transform: translateY(0px);
box-shadow: 0px 4px 10px rgba($neu-03, 0.3);
}
}
}
}
&.show-more {
.card {
overflow: hidden;
.more {
transform: rotate(45deg) scale(1);
&:hover {
transform: rotate(45deg) scale(1.1);
@include sm {
transform: rotate(45deg) scale(1);
}
}
}
.social {
transform: translateY(55px);
}
.text {
color: white;
transform: translateY(0px);
transition: all 0.6s ease;
.name,
.role {
color: white;
}
.desc {
display: block;
}
}
.photo {
width: 100%;
height: 100%;
top: 0px;
border: solid 0px transparent;
border-radius: 4px;
box-shadow: 0px 4px 10px rgba($neu-03, 0);
transform: translateY(0px);
transition: all 0.4s ease;
&:before {
height: 100%;
opacity: 0.5;
}
&:after {
height: 100%;
opacity: 0.8;
border-radius: 4px;
}
img {
filter: grayscale(100%);
}
&:hover {
transform: translateY(0px);
}
}
.bg {
width: 100%;
height: 100%;
//z-index: 2;
border-radius: 4px;
&:before {
opacity: 0.5;
}
&:after {
opacity: 0.8;
}
}
}
}
}
}
.swiper-pagination {
bottom: 0;
display: none;
@include sm {
display: block;
}
.swiper-pagination-bullet {
background-color: $neu-03;
margin: 0 5px;
border-radius: 5px;
transition: all 0.4s ease;
&:focus {
outline: 0;
}
}
.swiper-pagination-bullet-active {
background: $g-01;
width: 16px;
}
}
.navigation {
width: 1098px;
height: 28px;
position: absolute;
margin: 0 auto;
padding: 0 5%;
box-sizing: border-box;
top: 86px;
display: flex;
justify-content: center;
align-items: center;
@include lg {
width: 750px;
}
.swiper-button-prev,
.swiper-button-next {
width: 28px;
height: 28px;
background-position: center;
transition: all 0.4s ease;
top: 0;
margin-top: 0;
&:focus {
outline: none;
}
@include sm {
display: none;
}
}
.swiper-button-prev {
background-image: url("https://rafaelalucas.com/dailyui/6/assets/arrow-prev.svg");
background-position-x: 5px;
transform: translateX(5px);
&:hover {
transform: translateX(0px);
}
}
.swiper-button-next {
background-image: url("https://rafaelalucas.com/dailyui/6/assets/arrow-next.svg");
background-position-x: -5px;
transform: translateX(-5px);
&:hover {
transform: translateX(0px);
}
}
}
}
}
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment