<body class="black-theme">
<div id="switch">
<i class="fas fa-sun"></i>
</div>
<div class="container">
<div class="card">
<div class="card__top">
<img src="https://cdn.pixabay.com/photo/2016/10/26/23/24/colors-1772977_1280.jpg" alt="Sky">
<div class="profile__photo">
<img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Profile Photo">
</div>
</div>
<div class="card__content">
<h2>Alison Doe</h2>
<h3>Web Designer</h3>
<p><span><i class="fas fa-map-marker-alt"></i></span>Paris, France</p>
<p><span><i class="far fa-building"></i></span>Fantasy Company Inc.</p>
<p><span><i class="far fa-envelope"></i></span><a href="#">alison@fantasy.com</a></p>
<a href="#" class="button">Read More</a>
</div>
</div>
</div>
</body>@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
$black:rgba(0,0,0,0.85);
$white:#fff;
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.black-theme{
display:flex;
justify-content:center;
align-items:center;
background:#161623;
position:relative;
min-height:100vh;
overflow:hidden;
font-family: 'Lato', sans-serif;
letter-spacing:0.5px;
font-weight:400;
&:before{
position:absolute;
content:"";
left:40%;
bottom:-40%;
width:600px;
height:600px;
background:linear-gradient(#FF5722, #FF9800);
border-radius:50%;
}
.card{
width:350px;
height:500px;
box-shadow:0 15px 35px rgba(0,0,0,0.5);
border-radius:10px;
background: rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
overflow:hidden;
.card__top{
height:155px;
position:relative;
img{
width:100%;
height:100%;
object-fit:cover;
}
.profile__photo{
width:130px;
height:130px;
position: absolute;
bottom: -60px;
left:50%;
transform:translatex(-50%);
img{
width:100%;
border-radius:50%;
height:100%;
object-fit:cover;
border:7px solid rgba(0,0,0,0.35);
}
}
}
.card__content{
text-align:center;
color:#fff;
padding:5em 2.5em;
h2{
font-weight:700;
font-size:24px;
}
h3{
font-weight:400;
margin:5px 0 30px;
font-size:16px;
}
p{
text-align:left;
span{
margin-right:10px;
}
a{
text-decoration:none;
color:#fff;
&:hover{
text-decoration:underline;
}
}
}
p+p{
margin-top:10px;
}
}
a.button{
text-decoration:none;
color:#fff;
background:rgba(0,0,0,0.85);
padding:9px 30px 10px 30px;
display:inline-block;
margin-top:2em;
&:hover{
background:rgba(0,0,0,0.7);
}
}
}
}
.white-theme{
display:flex;
justify-content:center;
align-items:center;
background-color: #3fe2f2;
background-image: linear-gradient(135deg, #3fe2f2 0%, #43dbc0 16%, #29b7f2 49%, #3cabe8 86%);
position:relative;
min-height:100vh;
overflow:hidden;
font-family: 'Lato', sans-serif;
letter-spacing:0.5px;
font-weight:400;
&:before{
position:absolute;
content:"";
left:40%;
bottom:-40%;
width:600px;
height:600px;
background: linear-gradient(135deg, #3fe2f2 0%, #43dbc0 24%, #3cabe8 91%);
border-radius: 50%;
}
.card{
width:350px;
height:500px;
background: rgba( 255, 255, 255, 0.30 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
border-radius: 10px;
overflow:hidden;
.card__top{
height:155px;
position:relative;
img{
width:100%;
height:100%;
object-fit:cover;
}
.profile__photo{
width:130px;
height:130px;
position: absolute;
bottom: -60px;
left:50%;
transform:translatex(-50%);
img{
width:100%;
border-radius:50%;
height:100%;
object-fit:cover;
border:8px solid rgba(255,255,255,0.55);
}
}
}
.card__content{
text-align:center;
color:$black;
padding:5em 2.5em;
h2{
font-weight:700;
font-size:24px;
}
h3{
font-weight:400;
margin:5px 0 30px;
font-size:16px;
}
p{
text-align:left;
span{
margin-right:10px;
}
a{
text-decoration:none;
color:$black;
&:hover{
text-decoration:underline;
}
}
}
p+p{
margin-top:10px;
}
}
a.button{
text-decoration:none;
color:$white;
background:$black;
padding:9px 30px 10px 30px;
display:inline-block;
margin-top:2em;
&:hover{
background:rgba(0,0,0,0.7);
}
}
}
}
#switch{
position:absolute;
top:35px;
right:35px;
background:$white;
border-radius:50px;
width:50px;
height:50px;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
&:hover i{
animation:rotation 1.5s linear forwards infinite;
}
i{
font-size:1.5rem;
}
@keyframes rotation{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
}const black_theme = document.querySelector(".black-theme");
const change = document.querySelector("#switch");
change.addEventListener("click",changeTheme);
function changeTheme(){
if(document.body.classList.contains("black-theme")){
document.body.classList.remove("black-theme");
document.body.classList.add("white-theme");
change.innerHTML ='<i class="fas fa-moon"></i>';
}else{
document.body.classList.remove("white-theme");
document.body.classList.add("black-theme");
change.innerHTML ='<i class="fas fa-sun"></i>';
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.