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
Services Section Services
We Provide The Best In Class Servies For Our Customers
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