Responsive Our Services Box Hover Effects Using HTML & CSS

Irfan Hussain
May 08, 2020
Legenddocx Creation represents How to Create an Awesome Responsive Our Services Page using HTML and CSS

Source Code:-

 Download Here



Source Code:- 


<html>
<head>
<meta charset="utf-8">
<title>Our Services</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>


<style>
.services_all_section {
padding: 20px;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(ser.jpeg);
background-size: cover;
color: #fff ! important;
background-position: center;
}
.services {
margin-top: px;
font-family: cursive;
text-transform: uppercase;
text-align: center;
}
.border {
width: 100px;
height: 3px;
background: #58FAF4;
margin: 40px auto;
}
.border:hover {
background: red;
width: 200px;
transition: 1s;
transform: scaleX(250px);
}
.services_icon {
font-size: 40px;
margin: 22px auto;
padding-top: 22px;
height: 60px;
width: 60px;
color: cyan;
border: 2px solid white;
border-radius: 50%;
}
.services_icon:hover {
color: #FA58F4;
transition: .5s;
transform: rotate(360deg);
}
.services_work {
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
color: #9FF781;
font-family: monospace;
}
.services_work:hover {}
.service_box {
margin-top: 10px;
padding-right: 10px;
}
.service_box:hover {
box-shadow: 5px 7px 9px -3px;
cursor: pointer;
transition: .5s;
color: yellow;
}
.services_pragraph {
font-family: fantasy;
letter-spacing: 1px;
font-size: 14px;
}
.our_services_moredetails a {
text-decoration: none;
font-family: fantasy;
color: #E1F5A9;
font-size: 20px;
}
.our_services_moredetails a:hover {
text-decoration: none;
font-family: fantasy;
color: #81F7F3;
}


@media screen and (min-width:700px) {
.service_box {
transition: transform .5s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.card:nth-child(1) {
animation: fadeIn .5s .5s backwards;
}
.card:nth-child(2) {
animation: fadeIn .5s 1s backwards;
}
.card:nth-child(3) {
animation: fadeIn .5s 1.5s backwards;
}
.card:nth-child(4) {
animation: fadeIn .5 2s backwards;
}
.service_box:hover {
transform: scale(1.05);
}
}
</style>

<body>
<div class="services_all_section row-all ">
<div class="container">
<div class="services">
<a id="services" style="padding-top: 50px;"> &nbsp;</a>
<h1>Our Services</h1>
</div>
<div class="border"></div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 service_box text-center">
<div class="services_icon">
<i class="fab fa-accusoft" style="margin-top: -8px; margin-right: 3px; font-size: 30px;"></i>
</div>
<h3 class="services_work">Web Designing</h3>
<p class="services_pragraph">We use a variety of different tools depending on what part of the production process they are involved in to build a website. These tools are updated over time by newer standards and software but the principles behind them remain the same. </p>
<h5 class="our_services_moredetails"><a href="#">More Details</a></h5>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 service_box text-center">
<div class="services_icon">
<i class="fas fa-code" style="margin-top: -8px; margin-right: 2px; font-size: 30px;"></i>
</div>
<h3 class="services_work">Web Development</h3>
<p class="services_pragraph">Since the commercialization of the web, web development has been a growing industry.And so we are hear to help you out with a cheesy experience by developing websites according to your taste.An ever-growing set of tools and technologies. </p>
<h5 class="our_services_moredetails"><a href="#">More Details</a></h5>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 service_box text-center">
<div class="services_icon">
<i class="fab fa-android" style="margin-top:-8px; margin-right:2px; font-size: 30px;"></i>
</div>
<h3 class="services_work">Android App Development</h3>
<p class="services_pragraph">In the world of digitalization and Click & Get mode , how can someone stick to only websites. As everyone nowadays carry a smartphone with them, we are also here to build Android Apps for you. Having an Android App of your own, makes you more professional than others. </p>
<h5 class="our_services_moredetails"><a href="#">More Details</a></h5>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 service_box text-center">
<div class="services_icon">
<i class="fa fa-search" style="margin-right: 4px; margin-top: -9px; font-size: 30px;"></i>
</div>
<h3 class="services_work">S.E.O Services</h3>
<p class="services_pragraph">Website got ready?Then how will you get traffic on your website? Don't Worry! Don't Worry! We are here for you with the feature of Search Engine Optimisation (SEO), with which you will get more website traffic as we'll increase the visibility of your website to users of web search engines. </p>
<h5 class="our_services_moredetails"><a href="#">More Details</a></h5>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 service_box text-center">
<div class="services_icon">
<i class="fab fa-pied-piper-alt" style="margin-right: 7px; margin-top: -10px; font-size: 30px;"></i>
</div>
<h3 class="services_work">Logo Designing</h3>
<p class="services_pragraph">Want that dream logo for your business? Want it to be the cream of the crop? Then you're in the right place. We know start-ups, entrepreneurs and new businesses are all short on time - in fact who isn't? That's why we are here to help you out and get your job done in no time with perfection by our professional logo designer. </p>
<h5 class="our_services_moredetails"><a href="#">More Details</a></h5>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 service_box text-center">
<div class="services_icon">
<i class="fa fa-support" style="font-size: 30px; margin-top: -10px;"></i>
</div>
<h3 class="services_work">Technical Support</h3>
<p class="services_pragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<h5 class="our_services_moredetails"><a href="#">More Details</a></h5>
</div>
</div>
</div>
</div>
</body>
</html>