Creating a Services section for a website in HTML and CSS involves several steps. Firstly, a section element with an ID of "services" should be defined in the HTML document. This section element will contain all of the service cards that will be displayed on the website. Next, a container div should be created within the section element. The container div is used to hold all of the service cards that will be added to the Services section.
To create the service cards, a div element with a class of "service-card" should be defined for each service that is offered by the website. The service card div should contain an image of the service, a heading that describes the service, a brief description that summarizes the service, and a link that directs users to learn more about the service. The service cards should be added to the container div in the Services section.
To style the Services section, CSS styles should be applied to adjust the background color, padding, and layout of the section and its contents. The background color can be set to a neutral color such as light gray or white, and padding can be added to increase the spacing between the section and other elements on the page.
To create a responsive Services section that adjusts to different screen sizes, flexbox can be used to display the service cards in a grid layout. The container div can be set to display as flex and wrap its contents, while the service cards can be given a width that allows them to fit evenly within the container div.
In conclusion, creating a Services section for a website using HTML and CSS involves defining a section element, creating a container div, adding service cards to the container div, applying CSS styles to adjust the appearance of the section and its contents, and making the section responsive using flexbox. By following these steps, a professional-looking Services section can be created for any website.
HTML CODE
<section>
<div class="main">
<div class="box animate__animated animate__zoomInDown ">
<div class="min_div1 min_div2">
<img src="image1.jpg" alt="">
</div>
<div class="min_div1 min_div3">
<h4>BY / ADMIN2 Creative | Illustration</h4>
<p>The Start-Up Ultimate Guide to Make Your
WordPress Journal. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Deserunt iure sapiente exercitationem
voluptas?</p>
<button class="btn">READ MORE</button>
<div class="circle">
7<br>JAN/2023
</div>
</div>
</div>
<div class="box animate__animated animate__zoomInDown">
<div class="min_div1 min_div2">
<img src="image2.jpg" alt="">
</div>
<div class="min_div1 min_div3">
<h4>BY / ADMIN2 Art | Technology</h4>
<p>Your
Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Deserunt iure sapiente exercitationem
voluptas?</p>
<button class="btn">READ MORE</button>
<div class="circle">
7<br>JAN/2023
</div>
</div>
</div>
<div class="box animate__animated animate__zoomInDown">
<div class="min_div1 min_div2">
<img src="image3.jpg" alt="">
</div>
<div class="min_div1 min_div3">
<h4>BY / ADMIN2 Modern</h4>
<p>Innovative Design Work to Make Your Website
amet consectetur
adipisicing elit. Deserunt iure sapiente exercitationem
voluptas?</p>
<button class="btn">READ MORE</button>
<div class="circle">
7<br>JAN/2023
</div>
</div>
</div>
</div>
</section>
CSS CODE
@import url('https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400;500;700&display=swap');
/*font-family: 'Roboto', sans-serif;*/
:root {
--main-color: #12c0e7;
--main-color2: #13161d;
--main-color3: #11141b;
--linear-g: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
--font-color: #eee;
}
* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: 1s linear;
}
html {
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: black;
border-radius: 4rem;
}
body {
background: var(--main-color3);
}
section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main {
width: 1200px;
height: 100%;
/* border: 2px solid #eee; */
display: flex;
justify-content: space-around;
align-items: center;
}
.main .box {
width: 350px;
height: 500px;
background: #11141b;
box-shadow: 11px 11px 22px #0d0f14,
-11px -11px 22px #151922;
position: relative;
overflow: hidden;
cursor: pointer;
transition: 1s;
}
.main .box::before {
content: " ";
width: 100%;
height: 0%;
position: absolute;
top: 50%;
transition: 1s;
background: var(--linear-g);
opacity: .1;
}
.main .box:hover::before {
height: 100%;
border-radius: 0%;
}
.main .box:hover {
transform: translateY(-10px);
}
.min_div1 {
width: 100%;
height: 50%;
overflow: hidden;
transition: .8s;
}
.min_div1 img {
width: 100%;
height: 100%;
}
.main .box:hover .min_div1 img {
transform: scale(1.3) rotate(-10deg);
}
.min_div1 h4 {
color: #eee;
padding: 40px 20px 15px 30px;
opacity: .5;
background: var(--linear-g);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.min_div1 p {
font-size: 15px;
color: #eee;
padding: 10px 20px 15px 30px;
opacity: .5;
}
.min_div1 .btn {
background: var(--linear-g);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
margin: 20px 30px;
padding: 10px;
font-size: 17px;
position: relative;
cursor: pointer;
}
.btn::after {
content: " ";
width: 0%;
height: 100%;
background: var(--linear-g);
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: .1;
transition: .5s;
}
.btn:hover::after {
width: 100%;
}
.circle {
width: 90px;
height: 90px;
border-radius: 50%;
background: var(--linear-g);
position: absolute;
top: 40%;
right: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 15px;
z-index: 9999;
color: #eee;
opacity: 0;
}
.min_div1:hover .circle {
opacity: .8;
}
Comments
Post a Comment