Hello everyone, I will give you all free code, in learning "Content Boxes With Hover using HTML and CSS 2022". Good luck, don't forget to keep learning and repeat until you can, happy coding and Spirit on.
this is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily
the best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic
This is the code HTML and CSS you need learn :
1. 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>football league</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/0c13660f55.js"></script>
</head>
<body>
<section class="club">
<h1 class="heading"> top fc</h1>
<div class="box-container">
<div class="box">
<h3 class="title">1st FC</h3>
<h3 class="asset">$19 /<sub>m</sub></h3>
<ul>
<li><i class="fas fa-check"></i>clean sheet</li>
<li> <i class="fas fa-check"></i> top scorer </li>
<li> <i class="fas fa-check"></i> statistic & assist </li>
<li> <i class="fas fa-check"></i> best player </li>
<li> <i class="fas fa-check"></i> best manager </li>
</ul>
<a href="#" class="btn">register</a>
</div>
<div class="box">
<h3 class="title">2nd FC</h3>
<h3 class="asset">$17 /<sub>m</sub></h3>
<ul>
<li><i class="fas fa-check"></i>clean sheet</li>
<li> <i class="fas fa-check"></i> top scorer </li>
<li> <i class="fas fa-check"></i> statistic & assist </li>
<li> <i class="fas fa-check"></i> best player </li>
<li> <i class="fas fa-check"></i> best manager </li>
</ul>
<a href="#" class="btn">register</a>
</div>
</div>
</section>
</body>
</html>
2. CSS
*{
font-family: 'kanit', sans-serif;
margin:0;
padding:0;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition: .2s linear;
}
html{
font-size: 62.5%;
}
body{
background: #222;
}
section{
padding:2rem 26%;
}
.heading{
text-align: center;
padding: 2rem;
color:#fff;
text-transform: uppercase;
font-size: 4rem;
}
.btn{
margin-top: 1rem;
display: inline-block;
padding:.8rem 3rem;
font-size: 1.7rem;
border-radius: .5rem;
background: #666;
color:#fff;
cursor: pointer;
font-weight: 600;
}
.btn:hover{
background:#f07400;
}
.club .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap:1.3rem;
}
.club .box-container .box{
padding:2rem 0;
background:#333;
border-radius: .5rem;
text-align: center;
border-bottom-right-radius: 3rem;
}
.club .box-container .box:hover{
transform: scale(1.03);
}
.club .box-container .box .title{
background:#f07400;
color:#fff;
padding:1.5rem 0;
font-size: 2rem;
}
.club .box-container .box .asset{
color:#fff;
padding-top: 1rem;
font-size: 4rem;
}
.club .box-container .box .asset sub{
text-transform: lowercase;
}
.club .box-container .box ul{
list-style-type: none;
padding:1rem 0;
}
.club .box-container .box ul li{
font-size: 1.5rem;
color:#eee;
padding:1rem 0;
}
.club .box-container .box ul li i{
color:#f07400;
padding-right: .5rem;
}
For more details, you can see the Video tutorial and Click link Channel below :
Don't forget to support my channel by comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Belum ada tanggapan untuk "Content Boxes With Hover using HTML and CSS 2022"
Post a Comment