How to make website using HTML CSS || Full Responsive
Source Code
HTML Code
<!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">
<!-- style css -->
<link rel="stylesheet" href="style.css">
<!-- icon cdn -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>codewithme</title>
</head>
<body>
<!-- header section start -->
<header>
<div class="container">
<div class="headerInfo">
<div class="headerLogo">
<img src="img/Group.png" alt="">
<span>Codewithme</span>
</div>
<!-- main menu start -->
<div class="headerMenu">
<nav class="navMenu">
<div class="navToggleClose">
<span></span>
<span></span>
</div>
<ul class="navItems">
<li class="navItem">
<a href="#" class="navLink">home</a>
</li>
<li class="navItem">
<a href="#" class="navLink">about</a>
</li>
<li class="navItem">
<a href="#" class="navLink">work</a>
</li>
<li class="navItem">
<img src="img/Ellipse.png" alt="">
</li>
</ul>
</nav>
<div class="navToggleMenu">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- main menu end -->
</div>
</div>
</header>
<!-- header section end -->
<!-- main section start -->
<main>
<div class="container">
<div class="topPlayerBlogSection">
<!-- top player start -->
<div class="mainTitle">
<h4>Top Players</h4>
</div>
<div class="topPlayerInfo">
<div class="player">
<div class="playerImg">
<img src="img/p1.png" alt="">
</div>
<p class="playerName">john smith</p>
</div>
<div class="player">
<div class="playerImg">
<img src="img/p2.png" alt="">
</div>
<p class="playerName">john smith</p>
</div>
<div class="player">
<div class="playerImg">
<img src="img/p3.png" alt="">
</div>
<p class="playerName">john smith</p>
</div>
<div class="player">
<div class="playerImg">
<img src="img/p4.png" alt="">
</div>
<p class="playerName">john smith</p>
</div>
<div class="player">
<div class="playerImg">
<img src="img/p5.png" alt="">
</div>
<p class="playerName">john smith</p>
</div>
<div class="player">
<div class="playerImg">
<img src="img/p6.png" alt="">
</div>
<p class="playerName">john smith</p>
</div>
</div>
<!-- top player end -->
<div class="borderBottom"></div>
<!-- top blog start -->
<div class="mainTitle">
<h4>Top Blog</h4>
</div>
<div class="topBlogs">
<div class="blog">
<div class="blogImg">
<img src="img/b1.png" alt="">
</div>
<div class="blogContent">
<h4>your text</h4>
<p class="authorName"><span>By</span> <span class="name">john smith</span> </p>
</div>
</div>
<div class="blog">
<div class="blogImg">
<img src="img/b2.png" alt="">
</div>
<div class="blogContent">
<h4>your text</h4>
<p class="authorName"><span>By</span> <span class="name">john smith</span> </p>
</div>
</div>
<div class="blog">
<div class="blogImg">
<img src="img/b3.png" alt="">
</div>
<div class="blogContent">
<h4>your text</h4>
<p class="authorName"><span>By</span> <span class="name">john smith</span> </p>
</div>
</div>
<div class="blog">
<div class="blogImg">
<img src="img/b4.png" alt="">
</div>
<div class="blogContent">
<h4>your text</h4>
<p class="authorName"><span>By</span> <span class="name">john smith</span> </p>
</div>
</div>
</div>
<!-- top blog end -->
</div>
<!-- latest course -->
<div class="latestCourse">
<div class="mainTitle">
<h4>Latest Course</h4>
</div>
<div class="courseInfo">
<div class="course">
<img src="img/c1.png" alt="" class="courseImg">
<div class="courseContent">
<h4 class="courseTitle">your text</h4>
<span class="writerName">john smith</span>
<div class="courseRatingHour">
<div class="courseRating">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span>4.5</span>
</div>
<div class="courseHour">
<i class="far fa-clock"></i>
<span>01.30hr</span>
</div>
</div>
</div>
</div>
<div class="course">
<img src="img/c2.png" alt="" class="courseImg">
<div class="courseContent">
<h4 class="courseTitle">your text</h4>
<span class="writerName">john smith</span>
<div class="courseRatingHour">
<div class="courseRating">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span>4.5</span>
</div>
<div class="courseHour">
<i class="far fa-clock"></i>
<span>01.30hr</span>
</div>
</div>
</div>
</div>
<div class="course">
<img src="img/c3.png" alt="" class="courseImg">
<div class="courseContent">
<h4 class="courseTitle">your text</h4>
<span class="writerName">john smith</span>
<div class="courseRatingHour">
<div class="courseRating">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span>4.5</span>
</div>
<div class="courseHour">
<i class="far fa-clock"></i>
<span>01.30hr</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- main section end -->
<!-- -->
<script>
const navMenu = document.querySelector(".navMenu");
navToggleClose = document.querySelector(".navToggleClose");
navToggleMenu = document.querySelector(".navToggleMenu");
navToggleMenu.addEventListener("click", () => {
navMenu.classList.toggle("show")
});
navToggleClose.addEventListener("click", () => {
navMenu.classList.remove("show")
});
</script>
<!-- -->
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
/* font-family: 'Baloo Bhaijaan 2', cursive; */
background-color: #f7f7f7;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 150px;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
/* header section start */
header {
background-color: #562EFF;
padding: 10px 0;
}
.headerInfo {
display: flex;
justify-content: space-between;
align-items: center;
}
.headerLogo {
display: flex;
align-items: center;
}
.headerLogo img {
width: 30px;
margin-right: 10px;
}
.headerLogo span {
font-weight: bold;
color: #fff;
}
.navItems {
display: flex;
align-items: center;
}
.navItem {
margin-left: 20px;
}
.navLink {
color: #fff;
text-transform: capitalize;
font-family: 'Baloo Bhaijaan 2', cursive;
}
.navItem img {
width: 40px;
cursor: pointer;
}
.headerMenu, .navMenu {
display: flex;
align-items: center;
}
.navToggleClose, .navToggleMenu {
width: 35px;
height: 35px;
background-color: #fff;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .4);
border-radius: 5px;
position: relative;
display: none;
}
.navToggleClose span:nth-child(1) {
width: 3px;
height: 60%;
background-color: #562EFF;
position: absolute;
top: 7px;
left: 16px;
transform: rotate(-45deg);
}
.navToggleClose span:nth-child(2) {
width: 3px;
height: 60%;
background-color: #562EFF;
position: absolute;
top: 7px;
left: 16px;
transform: rotate(45deg);
}
.navToggleMenu span:nth-child(1) {
width: 15px;
height: 15px;
border: 2px solid #562EFF;
position: absolute;
top: 3px;
left: 3px;
border-radius: 2px;
animation: animationToggle 1s ease 1s;
}
.navToggleMenu span:nth-child(2) {
width: 12px;
height: 12px;
border: 2px solid #562EFF;
position: absolute;
top: 3px;
right: 3px;
border-radius: 2px;
animation: animationToggle 1s ease 1.7s;
}
.navToggleMenu span:nth-child(3) {
width: 16px;
height: 16px;
border: 2px solid #562EFF;
position: absolute;
right: 3px;
bottom: 3px;
border-radius: 50%;
animation: animationToggle 1s infinite 2.7s;
}
.navToggleMenu span:nth-child(4) {
width: 12px;
height: 12px;
border: 2px solid #562EFF;
position: absolute;
left: 3px;
bottom: 3px;
border-radius: 2px;
animation: animationToggle 1s ease;
}
@keyframes animationToggle {
0% {
background-color: transparent;
}
100% {
background-color: #562EFF;
}
}
/* header section end */
/* main section start */
/* top player section start */
.topPlayerBlogSection {
background-color: #fff;
padding: 50px;
margin: 40px 0;
border-radius: 10px;
}
.mainTitle {
margin: 20px 0;
}
.mainTitle h4 {
color: #562EFF;
}
.topPlayerInfo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.player {
display: flex;
align-items: center;
box-shadow: 0 1px 6px 0 rgba(0,0,0,0.1);
padding: 15px 10px;
justify-content: center;
border-radius: 20px;
transition: all .5s ease;
}
.player:hover {
box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
transform: scale(.95);
}
.playerImg {
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
box-shadow: 0 1px 6px 0 rgba(0,0,0,0.5);
}
.playerImg img {
width: 50px;
transition: all .5s ease;
}
.player:hover .playerImg img {
transform: scale(1.1);
}
.playerName {
font-family: 'Baloo Bhaijaan 2', cursive;
font-weight: 500;
text-transform: capitalize;
}
/* top player section end */
/* */
.borderBottom {
width: 90%;
height: 1px;
background-color: #562EFF;
margin: 50px auto;
}
/* */
.topBlogs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.blog {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
background-color: #f7f7f7;
border-radius: 20px;
padding: 20px;
}
.blogImg {
overflow: hidden;
border-radius: 20px;
}
.blogImg img {
border-radius: 20px;
transition: all .5s ease;
}
.blog:hover .blogImg img {
transform: scale(1.2);
}
.authorName span:first-child {
font-weight: 700;
font-size: 14px;
}
.name {
font-family: 'Baloo Bhaijaan 2', cursive;
text-decoration: underline;
color: #562EFF;
text-transform: capitalize;
}
/* latest course start */
.latestCourse {
margin: 50px 0;
background-color: #fff;
border-radius: 20px;
padding: 30px;
}
.courseInfo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.course {
background-color: #f7f7f7;
border-radius: 20px;
text-align: center;
}
.courseImg {
width: 100%;
height: 110px;
object-fit: cover;
border-radius: 20px 20px 0 0;
}
.courseContent {
padding: 20px;
}
.writerName {
color: #FF4A60;
font-weight: 500;
margin: 10px 0;
display: inline-block;
font-family: 'Baloo Bhaijaan 2', cursive;
}
.courseRatingHour {
display: flex;
justify-content: space-around;
}
.courseRating, .courseHour {
display: flex;
justify-content: center;
align-items: center;
}
.rating {
margin-right: 7px;
}
.rating i {
color: #FF4A60;
font-size: 12px;
margin-right: -2px;
transition: all .5s ease;
}
.course:hover .rating i {
transform: rotate(360deg);
}
.courseRating span {
font-family: 'Baloo Bhaijaan 2', cursive;
font-weight: bold;
}
.courseHour {
background-color: #FEE3E7;
padding: 1px 10px;
border-radius: 30px;
}
.courseHour i {
color: #FF4A60;
margin-right: 7px;
transition: all .5s ease;
}
.course:hover .courseHour i {
transform: rotate(360deg);
}
.courseHour span {
color: #FF4A60;
font-size: 14px;
font-family: 'Baloo Bhaijaan 2', cursive;
}
/* latest course end */
/* main section end */
/* media query start */
@media screen and (max-width: 1189.99px) {
.courseInfo {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 991.99px) {
.container {
margin: 0 20px;
}
/* header section start */
.navToggleClose {
position: absolute;
top: 12px;
right: 22px;
}
.navToggleClose, .navToggleMenu {
display: block;
}
.navMenu {
position: fixed;
top: 0;
right: -100%;
width: 60%;
height: 100vh;
background-color: #fff;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .4);
display: flex;
justify-content: center;
transition: all .9s ease;
z-index: 99;
}
.navItems {
display: flex;
flex-direction: column;
}
.navLink {
color: #562EFF;
}
.show {
right: 0;
}
/* header section end */
/* main section start */
/* top player section start */
.topPlayerInfo {
grid-template-columns: repeat(2, 1fr);
}
/* top player section end */
/* top blog section start */
.topBlogs {
grid-template-columns: repeat(1, 1fr);
}
/* top blog section end */
/* main section end */
}
@media screen and (max-width: 767.99px) {
.blog {
display: inherit;
margin: 0 auto;
text-align: center;
}
.authorName {
margin-top: 15px;
}
}
@media screen and (max-width: 614.99px) {
.courseInfo {
grid-template-columns: repeat(1, 1fr);
}
}
@media screen and (max-width: 575.99px) {
.topPlayerBlogSection {
padding: 30px;
margin: 20px 0;
}
.topPlayerInfo {
grid-template-columns: repeat(1, 1fr);
}
}
/* media query end */
NOTE
navigationColor: 562EFF;
bgColor: #9F9F9F;
hourBg: #FEE3E7
hourText: #FF4A60
0 Comments