How To Create Services Section Using HTML And CSS
Learn How To Make Services Section Using HTML And CSS. I Will Create Services Section Using HTML. Easy Way To Learn HTML For Beginners.
I will Create a Full Responsive Services Section Only Using HTML And CSS. This Is Very Easy to Create. This Is a fully Responsive Services Section For All Device Tab, Mobile, Laptop, And Computer(PC). You Will Create This Services Section Using By Following These Steps Which I Given Below.
How To Create Services Section Using HTML And CSS.
- 0.0 - 1.0 min : Intro
- 1.0 - 18.0 min: How To Create Services Section HTML
In This Tutorial, I Will Teach You How To Create a Fully Responsive Services Section. In This Tutorial First 60s, I Will Show You That What I will Create In This Tutorial. After I will Create HTML And CSS File And Link The CSS File With HTML File Using Link Tag. Then I will Create The Structure Of The Services Section In HTML File and Design This Structure Using CSS. After Designing I Use Media Query For Make This Services Section Responsive For All Devices(Tab, Mobile, Laptop, PC). After Doing This All procedure The Services Section Is Ready To Use In Your Website. I Hope You Like This Tutorial.
1) Open Any Text Editor Like NotePade++.
2) Create HTML And CSS File (Index.html, Style.css) And In Your Project Folder. I Recommended You Put the CSS File In the "CSS" Folder.
3) Link The CSS File With HTML File Using "Link" Tag.
4) Copy the Services Section HTML Code Which I Given Below And Past In Your HTML File
HTML
<html> <head> <meta charset="utf-8"/> <meta content="IE=edge" http-equiv="X-UA-Compatible"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/> <title>Services Section</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <section class="services"> <!--heading----------------> <div class="s-heading"> <h1>Ser<font color="#4a90e2">vic</font>es</h1> <p>We Provide The Best In Class Servies For Our Customers</p> </div> <!--services-box-container-------------------> <div class="s-box-container"> <!--service-box-1----------------> <div class="s-box"> <!--top-bar--------> <div class="bar"></div> <!--img----------> <img alt="1" src="images/1.png" /> <!--servies-name----------> <h1>Spend Money</h1> <!--details------> <p>Track on your all daily expense and make your day to life easier.</p> <!--btn----------> <a class="s-btn" href="#">More</a> </div> <!--service-box-1----------------> <div class="s-box"> <!--top-bar--------> <div class="bar"></div> <!--img----------> <img alt="2" src="images/2.png" /> <!--servies-name----------> <h1>Set Budget</h1> <!--details------> <p>Make a Budget That Fit Right With You And Can Do Most With It</p> <!--btn----------> <a class="s-btn" href="#">More</a> </div> <!--service-box-3----------------> <div class="s-box"> <!--top-bar--------> <div class="bar"></div> <!--img----------> <img alt="3" src="images/3.png" /> <!--servies-name----------> <h1>Security</h1> <!--details------> <p>We Store All Card Info And Money Safe To Make You Relax And Crazy</p> <!--btn----------> <a class="s-btn" href="#">More</a> </div> </div> </section> </body> </html>
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding: 0px;
background-color: #FFFFFF;
font-family: calibri;
}
a{
text-decoration:none;
}
.services{
width:100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.s-heading{
text-align:center;
}
.s-heading h1{
color:#576975;
font-size: 3rem;
font-weight: 400;
letter-spacing: 1px;
margin: 0px;
}
.s-heading p{
color: rgba(87,105,117,0.60);
font-size: 1rem;
margin: 5px;
text-align: center;
}
.s-box-container{
width:100%;
display: flex;
justify-content: center;
align-items: center;
}
.s-box{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
width:300px;
padding: 20px 25px;
height: 400px;
box-sizing: border-box;
margin: 30px;
position: relative;
}
.s-box img{
height: 75px;
}
.s-box h1{
color:#576975;
letter-spacing: 1px;
font-size: 1.5rem;
margin-bottom: 8px;
}
.s-box p{
color: rgba(87,105,117,0.90);
text-align: center;
}
.s-btn{
width: 140px;
height: 40px;
border-radius: 20px;
border:1px solid rgba(74,144,226,0.50);
display: flex;
justify-content: center;
align-items: center;
color:#576975;
margin-top:10px;
}
.bar{
width: 100px;
height: 6px;
position: absolute;
left: 50%;
top: 0%;
transform: translateX(-50%);
background-color:#4a90e2;
border-radius: 0px 0px 10px 10px;
display: none;
animation: bar 0.5s;
}
.s-box:hover{
box-shadow: 2px 2px 30px rgba(0,0,0,0.08);
transition: all ease 0.3s;
}
.s-btn:hover{
background-color:#4a90e2;
border: 1px solid #4a90e2;
color:#FFFFFF;
transition: all ease 0.3s;
}
.s-box:hover .bar{
display: block;
}
@keyframes bar{
0%{
width:0px;
}
100%{
width:100px;
}
}
@media(max-width:1050px){
.s-box-container{
flex-wrap: wrap;
}
.services{
height: auto;
}
.s-heading{
margin: 15px;
}
.s-box{
flex-grow: 1;
}
}
6) Download Images File And Put In The "Images" Folder. These Images I Use In The Services Box.
7) After Doing All Steps Just Open The HTML File And Enjoy This Services Section Design.
The Download Links Will Be Shown in 30 Seconds
Comments