DOWNLOAD FULL BOOTSRTAP SERVICE SECTION USING HTML & CSS
All of the website in any fields required a service section. A service section defines the valuable assets of the website Like fees, money, offers. If you are searching that how to make a best service section , service section ideas and download source file. Then this artical is only for you. If you are going to design a website for your client then it is important that your service should be proper responsive and store much data in less space. The users of your clients wants this responsive. So it is very much important that service section looks like amazing design, responsive.
So It is a big task for you.
If you are begginer in web design field then you have a lot of questions in your mind like as
1.how to make a service section responsive
2. How to create a amazing service section
3. what details we want to fill in it.
So in this artical I am going to solve your problem. I am going to giving you the source code if a amzing service section. You can use it for your web design project. Read this artical and source code carefully.
About the project
Some queries are about this project. In this project I use html, Css and Javascript with bootsrap. It is very amazing and looking more proffessionally. Animation effect also used in this project to make it more responsive. By javascript code there used a click function. Position absolute and relative classes also used in this project. And the most important thing it is tottaly responsive. You can use this section code in all types of websites.
How to make it (SOURCE FIELS)
1.Index.html
make a file named by index.html. And put the html5 simple code like-:
<!DOCTYPE html>
<html lang="en">
<head>
<title>photogallary section</title>
<link rel="icon" type="image/jpg" href="image/team-6.jpg" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
</head>
<body>
<!--------------servicesection-------------->
pest html code
<!----------------service section-------------->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
2. Html code section
pest the html code below under the lines
<section id="portfolio">
<div class="section-title" data-aos="fade-up">
<h2>Services</h2>
<p>Check out the great services we offer</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="0" data-aos-duration="1000">
<div class="card">
<div class="details">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<div class="header">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 0,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<h4> ' . $row['topic'] . '</h4>';
echo '<p>';
echo $row['message'];
echo '</p>';
echo '<p>';
echo $row['post_date'];
echo '</p>';
?>
</div>
</div>
<div class="imgbox">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 0,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<a href="Admin/images/'. $row ['profile_image']. '"><img src= "Admin/images/'. $row ['profile_image']. '" width="340" height="400" alt=""></a>';
?>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="500" data-aos-duration="0">
<div class="card">
<div class="details">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<div class="header">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 1,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<h4> ' . $row['topic'] . '</h4>';
echo '<p>';
echo $row['message'];
echo '</p>';
echo '<p>';
echo $row['post_date'];
echo '</p>';
?>
</div>
</div>
<div class="imgbox">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 1,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<a href="Admin/images/'. $row ['profile_image']. '"><img src= "Admin/images/'. $row ['profile_image']. '" width="340" height="400" alt=""></a>';
?>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos="fade-up" data-aos-delay="1000" data-aos-duration="0">
<div class="card">
<div class="details">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<div class="header">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 2,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<h4> ' . $row['topic'] . '</h4>';
echo '<p>';
echo $row['message'];
echo '</p>';
echo '<p>';
echo $row['post_date'];
echo '</p>';
?>
</div>
</div>
<div class="imgbox">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 2,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<a href="Admin/images/'. $row ['profile_image']. '"><img src= "Admin/images/'. $row ['profile_image']. '" width="340" height="400" alt=""></a>';
?>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-offset="100" data-aos-delay="1500" data-aos-duration="0">
<div class="card">
<div class="details">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<div class="header">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 3,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<h4> ' . $row['topic'] . '</h4>';
echo '<p>';
echo $row['message'];
echo '</p>';
echo '<p>';
echo $row['post_date'];
echo '</p>';
?>
</div>
</div>
<div class="imgbox">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 3,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<a href="Admin/images/'. $row ['profile_image']. '"><img src= "Admin/images/'. $row ['profile_image']. '" width="340" height="400" alt=""></a>';
?>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="0" data-aos-duration="0">
<div class="box first">
<span class="icon-cont">
<i class="fa fa-graduation-cap"></i>
</span>
<h3>VIEW ALL COURSES</h3>
<br>
<ul class="hidden">
<li>SSC,BANK,RALWAY</li>
<li>NDA,AIRFORCE,NAVY</li>
<li>CDS,CTET,REET</li>
<li>ALL COMPETITIVE EXAM</li>
</ul>
<br><br>
<a class="expand">
<span class="plus">+</span>
<span class="minus">-</span>
</a>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="500" data-aos-duration="0">
<div class="box second">
<span class="icon-cont">
<i class="fa fa-rocket"></i>
</span>
<h3>SOCIAL ACTIVITY</h3>
<br>
<ul class="hidden">
<li>per month seminar for motivation</li>
<li>best motivation speakors guide you</li>
<li>make a better way of success</li>
<li>get a chance for your speech</li>
</ul>
<br><br>
<a class="expand">
<span class="plus">+</span>
<span class="minus">-</span>
</a>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="1000" data-aos-duration="0">
<div class="box third">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<h3>GET FREE CURRENT AFFAIRS</h3>
<br>
<ul class="hidden">
<li>reading news papers</li>
<li>watching news</li>
<li>magazines available</li>
<li>test series</li>
</ul>
<br><br>
<a class="expand">
<span class="plus">+</span>
<span class="minus">-</span>
</a>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="2000" data-aos-duration="0">
<div class="box fourth">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<h3>OUR ADVANTAGE</h3>
<br>
<ul class="hidden">
<li>fully upgraded study matrial</li>
<li>high experienced team</li>
<li>regular check-in in a candiates perfomance</li>
<li>weekly and monthly ranking test</li>
</ul>
<br><br>
<a class="expand">
<span class="plus">+</span>
<span class="minus">-</span>
</a>
</div>
</div>
</div>
</div>
</section>
4. JAVASCRIPT
copy and pest this code upper from </body> tag
<script>
$('.box').click(function(){
$(this).toggleClass('selected');
});
</script>
All of the website in any fields required a service section. A service section defines the valuable assets of the website Like fees, money, offers. If you are searching that how to make a best service section , service section ideas and download source file. Then this artical is only for you. If you are going to design a website for your client then it is important that your service should be proper responsive and store much data in less space. The users of your clients wants this responsive. So it is very much important that service section looks like amazing design, responsive.
So It is a big task for you.
If you are begginer in web design field then you have a lot of questions in your mind like as
1.how to make a service section responsive
2. How to create a amazing service section
3. what details we want to fill in it.
So in this artical I am going to solve your problem. I am going to giving you the source code if a amzing service section. You can use it for your web design project. Read this artical and source code carefully.
About the project
Some queries are about this project. In this project I use html, Css and Javascript with bootsrap. It is very amazing and looking more proffessionally. Animation effect also used in this project to make it more responsive. By javascript code there used a click function. Position absolute and relative classes also used in this project. And the most important thing it is tottaly responsive. You can use this section code in all types of websites.
How to make it (SOURCE FIELS)
1.Index.html
make a file named by index.html. And put the html5 simple code like-:
<!DOCTYPE html>
<html lang="en">
<head>
<title>photogallary section</title>
<link rel="icon" type="image/jpg" href="image/team-6.jpg" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
</head>
<body>
<!--------------servicesection-------------->
pest html code
<!----------------service section-------------->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
2. Html code section
pest the html code below under the lines
<section id="portfolio">
<div class="section-title" data-aos="fade-up">
<h2>Services</h2>
<p>Check out the great services we offer</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="0" data-aos-duration="1000">
<div class="card">
<div class="details">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<div class="header">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 0,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<h4> ' . $row['topic'] . '</h4>';
echo '<p>';
echo $row['message'];
echo '</p>';
echo '<p>';
echo $row['post_date'];
echo '</p>';
?>
</div>
</div>
<div class="imgbox">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 0,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<a href="Admin/images/'. $row ['profile_image']. '"><img src= "Admin/images/'. $row ['profile_image']. '" width="340" height="400" alt=""></a>';
?>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="500" data-aos-duration="0">
<div class="card">
<div class="details">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<div class="header">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 1,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<h4> ' . $row['topic'] . '</h4>';
echo '<p>';
echo $row['message'];
echo '</p>';
echo '<p>';
echo $row['post_date'];
echo '</p>';
?>
</div>
</div>
<div class="imgbox">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 1,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<a href="Admin/images/'. $row ['profile_image']. '"><img src= "Admin/images/'. $row ['profile_image']. '" width="340" height="400" alt=""></a>';
?>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos="fade-up" data-aos-delay="1000" data-aos-duration="0">
<div class="card">
<div class="details">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<div class="header">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 2,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<h4> ' . $row['topic'] . '</h4>';
echo '<p>';
echo $row['message'];
echo '</p>';
echo '<p>';
echo $row['post_date'];
echo '</p>';
?>
</div>
</div>
<div class="imgbox">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 2,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<a href="Admin/images/'. $row ['profile_image']. '"><img src= "Admin/images/'. $row ['profile_image']. '" width="340" height="400" alt=""></a>';
?>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-offset="100" data-aos-delay="1500" data-aos-duration="0">
<div class="card">
<div class="details">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<div class="header">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 3,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<h4> ' . $row['topic'] . '</h4>';
echo '<p>';
echo $row['message'];
echo '</p>';
echo '<p>';
echo $row['post_date'];
echo '</p>';
?>
</div>
</div>
<div class="imgbox">
<?php
$sql = "SELECT * FROM post WHERE option_subject= 'students' ORDER BY id DESC limit 3,1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo '<a href="Admin/images/'. $row ['profile_image']. '"><img src= "Admin/images/'. $row ['profile_image']. '" width="340" height="400" alt=""></a>';
?>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="0" data-aos-duration="0">
<div class="box first">
<span class="icon-cont">
<i class="fa fa-graduation-cap"></i>
</span>
<h3>VIEW ALL COURSES</h3>
<br>
<ul class="hidden">
<li>SSC,BANK,RALWAY</li>
<li>NDA,AIRFORCE,NAVY</li>
<li>CDS,CTET,REET</li>
<li>ALL COMPETITIVE EXAM</li>
</ul>
<br><br>
<a class="expand">
<span class="plus">+</span>
<span class="minus">-</span>
</a>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="500" data-aos-duration="0">
<div class="box second">
<span class="icon-cont">
<i class="fa fa-rocket"></i>
</span>
<h3>SOCIAL ACTIVITY</h3>
<br>
<ul class="hidden">
<li>per month seminar for motivation</li>
<li>best motivation speakors guide you</li>
<li>make a better way of success</li>
<li>get a chance for your speech</li>
</ul>
<br><br>
<a class="expand">
<span class="plus">+</span>
<span class="minus">-</span>
</a>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="1000" data-aos-duration="0">
<div class="box third">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<h3>GET FREE CURRENT AFFAIRS</h3>
<br>
<ul class="hidden">
<li>reading news papers</li>
<li>watching news</li>
<li>magazines available</li>
<li>test series</li>
</ul>
<br><br>
<a class="expand">
<span class="plus">+</span>
<span class="minus">-</span>
</a>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 crl" data-aos="fade-up" data-aos-delay="2000" data-aos-duration="0">
<div class="box fourth">
<span class="icon-cont">
<i class="fa fa-edit"></i>
</span>
<h3>OUR ADVANTAGE</h3>
<br>
<ul class="hidden">
<li>fully upgraded study matrial</li>
<li>high experienced team</li>
<li>regular check-in in a candiates perfomance</li>
<li>weekly and monthly ranking test</li>
</ul>
<br><br>
<a class="expand">
<span class="plus">+</span>
<span class="minus">-</span>
</a>
</div>
</div>
</div>
</div>
</section>
3. Css code
copy and pest the this code in <header>style</header>
<style>
/*---------================portfolio==========----------*/
#portfolio{
background-color: #fbe2d8 !important;
padding-top:30px;
padding-bottom: 20px;
width: 100%;
background-size: cover;
transition: all 0.5s;
overflow-x: hidden;
background: #fff;
overflow-y:hidden;
}
#portfolio h1{
position: relative;
text-align: center;
font-size: 3em;
padding: 30px 0px 30px 0px;
font-family: 'Gupter', serif;
}
#portfolio .crl{
width: 100%;
padding: 2px;
margin: 0;
}
#portfolio .box {
height: 350px;
width:100%;
margin: 0.2%;
padding: 15px;
box-sizing: border-box;
display: inline-block;
background-image: url('image/photo1.jpg');
background-position: center;
position: relative;
overflow: hidden;
cursor: pointer;
margin-top: -2px;
}
.box .icon-cont {
border: 6px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 75px;
height: 75px;
margin: 20px auto;
display: block;
text-align: center;
position: absolute;
top: 10px;
left: 0;
right: 0;
z-index: 5;
box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);
}
.card .icon-cont {
border: 6px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 75px;
height: 75px;
margin: 20px auto;
display: block;
text-align: center;
position: absolute;
top: 10px;
left: 0;
right: 0;
z-index: 5;
box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);
}
.box .icon-cont i {
color: #fff;
opacity: 0.6;
font-size: 2.5em;
line-height: 75px;
}
.box:hover .icon-cont {
animation: shady 4s linear infinite;
}
.card .icon-cont i {
color: #fff;
opacity: 0.6;
font-size: 2.5em;
line-height: 75px;
}
.card:hover .icon-cont {
animation: shady 4s linear infinite;
}
@keyframes shady {
0% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
20% {box-shadow: 0 0 0 100px rgba(255,255,255,0), 0 0 0 0px rgba(3, 108, 129, 0);}
20.1% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
50% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
70% {box-shadow: 0 0 0 100px rgba(255,255,255,0), 0 0 0 0px rgba(3, 108, 129, 0);}
70.1% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
100% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
}
.box h3 {
color: #fff;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 500;
font-size: 15px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
padding: 15px;
border-bottom: 1px solid rgba(255,255,255,0);
position: absolute;
top: 95px;
width: 70%;
left: 10%;
z-index: 4;
}
.box ul {
font-family: 'Open Sans', Arial, sans-serif;
color: #fff;
font-size: 12px;
line-height: 28px;
text-indent: 14px;
margin: 25px;
margin-top: 399px;
list-style-type: disc;
margin-left: -15px;
}
.box ul.hidden {
opacity: 0;
}
.box a.expand {
width: 35px;
height: 35px;
background: #fff;
font-weight: 600;
color: #036C81;
display: block;
margin: 15px auto 25px;
text-align: center;
line-height: 35px;
cursor: pointer;
position: absolute;
left: 0;
right: 0;
bottom: 10px;
border-radius: 50px;
}
.box a.expand span.minus {
opacity: 0;
}
.box a.expand span.plus {
opacity: 1;
padding-left: 5px;
}
.box.selected a.expand {
display: block;
position: absolute;
left: 180px;
right: -29px;
bottom: -39px;
width: 80px;
height: 50px;
background: #eee;
color: #036C81;
transform: rotate(-45deg);
}
.box.selected a.expand span {
display: block;
position: absolute;
top: -4px;
left: 38px;
transform: rotate(45deg);
font-size: 24px;
}
.box.selected a.expand span.minus {
opacity: 1;
}
.box.selected a.expand span.plus {
opacity: 0;
}
.box.selected .icon-cont {
transform: scale(1.5,1.5);
opacity: 0.3;
position: absolute;
top: -20px;
left: -5px;
right: 180px;
}
.box.selected:hover .icon-cont {
animation: none;
}
.box.selected h3 {
padding: 32px 15px 15px 15px;
border-bottom: 1px solid rgba(255,255,255,0.3);
width: 70%;
top: 16px;
left: 10%;
}
.box.selected ul.hidden {
opacity: 1;
margin-top: 95px;
}
4. JAVASCRIPT
copy and pest this code upper from </body> tag
<script>
$('.box').click(function(){
$(this).toggleClass('selected');
});
</script>
No comments:
Post a Comment
thanks for your comments