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-20 17:14:04 +03:00 committed by GitHub
parent 25abb9ed7a
commit 6928e5cd80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 75 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
100_projects/27-fill-element-background-from-other/index.html Normal file
View File

@ -0,0 +1,23 @@
<!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="style.css">
<title>Document</title>
</head>
<body>
<div class="product">
<div class="number">01</div>
<h3>Product Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Expedita tenetur accusantium recusandae perspiciatis
laborum. Aspernatur optio itaque accusamus ex molestiae dolorem,
quas qui illo similique fugit unde error sit
ipsa.
</p>
</div>
</body>
</html>

52
100_projects/27-fill-element-background-from-other/style.css Normal file
View File

@ -0,0 +1,52 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.product {
width: 325px;
margin: 20px auto;
box-shadow: 0 0 30px #ddd;
padding: 20px;
text-align: center;
overflow: hidden;
border-radius: 5px;
}
.product .number {
background-color: #DB7093;
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 26px;
transition: 1.5s;
border: 1px solid #fff;
}
.product h3 {
margin: 15px 0;
font-size: 26px;
transition: 0.6s;
}
.product p {
line-height: 1.6;
transition: 0.6s;
font-size: 18px;
}
.product:hover .number {
box-shadow: 0 0 0 500px #DB7093;
}
.product:hover h3,
.product:hover p {
color: white;
}