Responsive Services Page For Website Using HTML and CSS....

HELLO FRIENDS......Welcome To Technovichar.com.This Post is About How to Make Responsive Services Page For Website Using HTML and CSS. So Check Out Full Post. If You Like This Article Content Then Share It With Your Friends.


Preview Of Page : 


Technovichar_Website_Preview


Preview Video:








HTML CODE :





<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Component Best Card Design</title>
<script src="https://kit.fontawesome.com/c834b7d5f0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body> <div class="maincont"> <div class="maincard">
<h2>Our Service</h2> <div id="part">
<div class="partone">
<div class="roundbox">
<div class="icon">
<i class="fas fa-space-shuttle fa-xs" id="space-shuttle"></i> </div> </div>
<div id="boxtwo">
<h3>Read More</h3>
</div>
</div>
<div class="parttwo">
<div class="roundbox">
<div class="icon">
<i class="fas fa-air-freshener" style="margin-left:25px;"></i>
</div>

</div>
<div id="boxtwo">
<h3>Read More</h3>

</div>
</div>
<div class="partthree">
<div class="roundbox">
<div class="icon">
<i class="fab fa-amazon"></i>
</div>

</div>
<div id="boxtwo">
<h3>Read More</h3>

</div>
</div>
</div>
<div id="part">
<div class="partone">
<div class="roundbox">

<div class="icon">
<i class="fab fa-google"></i>
</div>
</div>
<div id="boxtwo">
<h3>Read More</h3>
</div>
</div>
<div class="parttwo">
<div class="roundbox">
<div class="icon">
<i class="fab fa-google-drive"></i>
</div>
</div>
<div id="boxtwo">
<h3>Read More</h3>

</div>
</div>
<div class="partthree">
<div class="roundbox">
<div class="icon">
<i class="far fa-frown"></i>
</div>
</div>
<div id="boxtwo">
<h3>Read More</h3>

</div>
</div> </div>
<br><br><br>
<div class="mysocialmedia">
<a href="https://www.facebook.com/profile.php?id=100036401280861" >
<i class="fab fa-facebook" id="myfb"> </i></a> <a href=" https://www.instagram.com/a__b__h__i__0/" >
<i class="fab fa-instagram" id="myinsta"></i></a> <a href="https://www.linkedin.com/in/abhi-patel-0a12841b7">
<i class="fab fa-linkedin-in" id="mylinked"></i>
</i></a> </div> </div> </div> </body>
</html>



Also Read This :





CSS CODE :




body{
background-color: #34568B;
background:url("mybg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.maincard{
width:97%;
background-color: white;
margin:auto;
border-radius: 20px;;
box-shadow: 2px 2px 5px 5px #F7CAC9;
height:auto;
}
h2{
text-align: center;
padding-top:20px;
color:darkblue;
font-size:30px;
font-weight: 1000;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-shadow: 2px 2px white; }
.roundbox{
width:100px;
height:100px;
background-color: whitesmoke;
margin:auto;
margin-top:7px;
border-radius: 50px;;
}
#part{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height:auto;
overflow: hidden;
margin-top:20px;
padding:0px 20px;
}
.partone{

width:30% ;
margin:0px 20px;
height:250px;

background-color: rebeccapurple;
border:5px solid black;

border-radius: 20px;;

}
.parttwo{
width:30% ;
height:250px;
margin:0px 20px;
background-color: rebeccapurple;
border:5px solid black;
border-radius: 20px;;
}
.partthree{
margin:0px 10px;
width:30% ;
height:250px;
background-color: rebeccapurple;
border:5px solid black;
border-radius: 20px;;
}
.fas{ font-size: 60px;;
color:#955251;
margin-left:15px;
margin-top:20px;
}
.fab{ font-size: 60px;;
color:#955251;
margin-left:20px;
margin-top:20px;

}
.far{ font-size: 60px;;
color:#955251;
margin-left:20px;
margin-top:20px; }

#boxtwo{
width:97%;

margin:auto;
height:30px;
background-color:#F7CAC9 ;
margin-top:90px;
border-radius: 20px;;
cursor: pointer;
transition: 0.5s; }
#boxtwo:hover{
width:97%;
height:30px;
background-color:#FFFF00 ;
border-radius: 20px;;
cursor: pointer;
}
#space-shuttle:hover{
transition: 0.4s;
position: absolute;
animation: rotate 2s ease-in 0s 1; }
@keyframes rotate{
from{ transform:rotate(0deg); }
to{
transform:rotateY(350deg); } } h3{ text-align: center;
text-transform: uppercase;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
letter-spacing: 2px;
transition: 0.4s;
}
h3:hover{
letter-spacing: 5px;
}
@media only screen and (max-width:768px) {
h3:hover{
letter-spacing: 0px;
}
#boxtwo{ margin-top:40px;
}
.maincard{
width:97%; height:auto;
}
#part{
display: block;
height:auto;
}
.partone{
display: block;
width:95%;
height:200px;
margin:auto;
margin-top:30px;
background-color: rebeccapurple; } .parttwo{
margin:10px 0px;
width:95% ;
margin:auto;
height:200px;
margin-top:30px;
background-color: rebeccapurple;
} .partthree{
margin:10px 0px;
width:95% ;
height:200px;
margin:auto;
margin-top:30px;

} } .mysocialmedia{
height:30px;

margin-top:auto
}
#myfb{
font-size: 30px;;
color:black;
margin-left:20px;
margin-top:-20px;
}
#myfb:hover{
color:darkblue;
cursor: pointer;
}
#myinsta{
font-size: 30px;;
color:black;
margin-left:10px;
margin-top:-20px;
}
#myinsta:hover{
color:cadetblue;
cursor: pointer;
}
#mylinked{
font-size: 30px;;
color:black;
margin-left:10px;
margin-top:-20px;
}
#mylinked:hover{
color:blue;
cursor: pointer;
}
This is All About Responsive Services Page for Website Using HTML and CSS.if You Like This Article Then Share with Your Friends.



About Author : 

Hello friends, I am Abhi Patel author & founder of Technovichar.com. I am a student of IT engineering. I like to research and write about new things even if it is from any field. You will continue to support us in this way, we will keep on bringing such interesting information for you.








Post a Comment

0 Comments