x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-28 01:24:36 +03:00 committed by GitHub
parent 65ab79d989
commit a655060046
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 169 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
100_projects/35-profile-card/css/style.css Normal file
View File

@ -0,0 +1,128 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #FFF0F5;
}
.card{
position: relative;
width: 350PX;
height:90px;
background: #ADD8E6;
border-radius: 10px;
filter: drop-shadow(-20px 20px 40px #4682B4);
transition: .3s ease-in-out;
}
.card.active{
height: 420px;
}
.toggle{
position: absolute;
bottom: -50px;
left: 50%;
transform:translateX(-50%);
width: 70px;
height: 60px;
background: #ADD8E6;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
cursor: pointer;
}
.toggle::before{
content: '';
position: absolute;
left:-32px;
width: 35px;
height: 35px;
background: transparent;
border-top-right-radius: 30px;
box-shadow: 11px -10px 0 10px #ADD8E6;
}
.toggle::after{
content: '';
position: absolute;
right:-32px;
width: 35px;
height: 35px;
background: transparent;
border-top-left-radius: 30px;
box-shadow: -11px -10px 0 10px #ADD8E6;
}
.toggle span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -70%) rotate(405deg);
width: 10px;
height: 10px;
border-bottom:3px solid #FFF0F5;
border-right:3px solid #FFF0F5;
transition: .5s ease-in-out;
}
.card.active .toggle span{
transform: translate(-50%, -70%) rotate(225deg);
}
.box{
position: absolute;
inset: 0;
overflow: hidden;
}
.box .content{
position: relative;
padding: 20px;
text-align: center;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box .content h2{
color: #FFF0F5;
font-weight: 500;
font-size: 20px;
letter-spacing: 1px;
}
.box .content h2 span{
font-size:16px ;
font-weight: 400;
text-transform: initial;
}
.img{
position: relative;
width: 250px;
height: 250px;
background: #fff;
box-shadow: -10px 10px 10px rgba(0, 0, 0, .1);
border: 5px solid #FFF0F5;
margin-top: 30px;
}
.img img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content button{
position: relative;
margin-top: 20px;
padding: 10px 35px;
border-radius: 10px;
border: none;
outline: none;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
font-weight: emmet abbreviation;
color: #333;
box-shadow: -10px 1-px 10px rgba(0, 0, 0, .1);
}

BIN
100_projects/35-profile-card/img.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

31
100_projects/35-profile-card/index.html Normal file
View File

@ -0,0 +1,31 @@
<!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">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="box">
<div class="content">
<h2>Someone Sam<br><span>Creative Designer</span></h2>
<div class="img">
<img src="img.jpg">
</div>
<button>Here</button>
</div>
</div>
<div class="toggle">
<span></span>
</div>
</div>
<script src="js/main.js">
</script>
</body>
</html>

10
100_projects/35-profile-card/js/main.js Normal file
View File

@ -0,0 +1,10 @@
let card = document.querySelector('.card');
let toggle = document.querySelector('.toggle');
toggle.onclick = function(){
card.classList.toggle('active');
}