How to Create Service Page in Website
How to write a source code – Service Page
Step 1: Create a folder. Folder name Project.
Step 2: Open Sublime text and Type given HTML code.
Step 3: After enter this code, Save file name index.html (inside the Project folder)
Step 4: Open index.html with any browser like Chrome, Internet explorer, etc.
Step 5: Finally get an output.
Note
*service icons must be placed on your Device.
(For Ex: Here service icon Name- serve1.png, File Name: Project
<link href=“css/iconeffects.css” rel=’stylesheet’ type=’text/css’ />
Here I’m used Bootstrap Coding to developed an about us designing & Page alignment, If u need and test the code Click Here
index.html
<html>
<head>
<title>Career Lines</title>
<link href=”css/bootstrap.css” rel=’stylesheet’ type=’text/css’ />
<link href=”css/iconeffects.css” rel=’stylesheet’ type=’text/css’ />
</head>
<body>
<div class=”service” id=”services”>
<div class=”container”>
<h3 class=”tittle”>Services</h3><br>
<div class=”inst-grids”>
<div class=”col-md-3 services-gd text-center wow slideInLeft” data-wow-duration=”1s” data-wow-delay=”.3s”>
<div class=”hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a”>
<a href=”#” class=”hi-icon”><img src=”images/serve4.png” alt=” ” /></a>
</div>
<h4>Choose Courses</h4>
<p>Choose course which you want to learn. Career Lines is a best place to Learn.</p>
</div>
<div class=”col-md-3 services-gd text-center wow slideInDown” data-wow-duration=”1s” data-wow-delay=”.2s”>
<div class=”hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a”>
<a href=”#” class=”hi-icon”><img src=”images/serve2.png” alt=” ” /></a>
</div>
<h4>Get Certification</h4>
<p>After Completing course you get a valuable certification from Career Lines. </p>
</div>
<div class=”col-md-3 services-gd text-center wow slideInUp” data-wow-duration=”1s” data-wow-delay=”.2s”>
<div class=”hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a”>
<a href=”#” class=”hi-icon”><img src=”images/serve3.png” alt=” ” /></a>
</div>
<h4>become a profession</h4>
<p >Join Career Lines for learn IT Courses after completing course you become a profession of your choosing course</p>
</div>
<div class=”col-md-3 services-gd text-center wow slideInRight” data-wow-duration=”1s” data-wow-delay=”.3s”>
<div class=”hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a”>
<a href=”#” class=”hi-icon”><img src=”images/serve1.png” alt=” ” /></a>
</div>
<h4>Contact Us</h4>
<p>careerlinesindia@gmail.com<br> 9360056327</p>
</div>
<div class=”clearfix”> </div>
</div>
</div>
<style type=”text/css”>
h3.tittle, h3.single {
font-size: 3.5em;
}
h3.tittle {
font-size: 3em;
color: darkblue;
}
h3.tittle {
font-size: 3em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: serif;
color: white;
font-style: bold;
}
#services {
background: transparent;
padding: 7em 0;
text-align: center;
}
a.hi-icon img {
margin: 22px 0 0;
}
.services-gd h4 {
color: #EFA52C;
font-size: 1.4em;
text-transform: uppercase;
line-height: 1.2em;
font-family: ‘Merriweather Sans’, sans-serif;
font-weight: bold;
margin: 0.5em 0;
}
html, body {
font-family: ‘Calibri’, sans-serif;
font-size: 100%;
background: transparent;
}
.services-gd p {
font-size: 15pt;
color: black;
}
.services-gd p {
color: #777;
line-height: 1.9em;
font-size: 1em;
}
p {
margin: 0;
font-family: serif;
color: yellow;
}
.hi-icon-wrap {
padding: 0;
}
</style>
</div>
</body>
</html>
Next Blog : How to Create Gallery in Website step by step guidance.
For Detailed Information: Click Here