This content originally appeared on DEV Community and was authored by Himanshu
Either it being a company portfolio website or being an e-commerce website they all need a feature section. Making cool feature section is easy and thus is this styled section.
Below I will be guiding you to make one such RESPONSIVE FEATURES SECTION with ADVANCED CSS PROPERTIES.
Live Demo:
Setting Up The Files
In the project, folders make these three files accordingly.
- Index.html
- Styles.css
Linking the Files
Your stater index.html should be similar to the one shown Below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Navigation Bar</title>
</head>
<body>
</body>
</html>
Clearing the Predefined Browser Styles
Every Browser has its own predefined CSS styles such as margin, padding, and many more which may interrupt our design. So to get rid of it configure the CSS FILE as shown below.
*,
*::after,
*::before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
/* This Converts 1rem = 16px from 1rem = 10px */
font-size: 62.5%;
}
Now we have linked the CSS file with your HTML and ready to go.
Writing the markup
<div class="main">
<div class="main_content">
<div class="content">
<div class="element">
<h3 class="heading">
Code Faster
</h3>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper ipsum nibh, in commodo elit volutpat et. Suspendisse potenti. Sed dignissim lectus nec.
</p>
</div>
<div class="element">
<h3 class="heading">
Code Faster
</h3>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper ipsum nibh, in commodo elit volutpat et. Suspendisse potenti. Sed dignissim lectus nec.
</p>
</div>
<div class="element">
<h3 class="heading">
Code Faster
</h3>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper ipsum nibh, in commodo elit volutpat et. Suspendisse potenti. Sed dignissim lectus nec.
</p>
</div>
<div class="element">
<h3 class="heading">
Code Faster
</h3>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper ipsum nibh, in commodo elit volutpat et. Suspendisse potenti. Sed dignissim lectus nec.
</p>
</div>
</div>
</div>
</div>
Styling the Markup
.main {
margin: 3rem;
}
.main_content {
background-image: linear-gradient(to right bottom, rgba(187, 225, 250, 0.4), rgba(50, 130, 184, 0.4) , rgba(15, 76, 117, 0.4), rgba(27, 38, 44, 0.4)), url("https://blogsmedia.lse.ac.uk/blogs.dir/76/files/2016/11/technology-785742_1920-1024x683.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 20rem 5rem;
}
.content {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 3rem;
}
NOW to give the div desired shape we will use clip-path property on the main_content div.
.main_content{
clip-path: polygon(0 20%, 100% 0, 100% 80% , 0 100% );
}
Hence we get the desired results.
Also Checkout:
Styling the Cards
.element {
background-color: rgba(255, 255, 255, 0.7);
padding: 3rem 2rem;
text-align: center;
border-radius: 3px;
box-shadow: 0rem 2rem 4rem rgba(0,0,0,0.3);
transition: all 0.2s;
}
.heading {
letter-spacing: 0.2rem;
margin-bottom: 1rem;
font-size: 1.6rem;
}
.text {
font-size: 1.2rem;
line-height: 1.4;
}
.element:hover {
transform: translateY(-4rem);
}
This gives us a cool animated styled white cards to hold our content.
Making the design Responsive
@media (max-width: 700px) {
.content {
grid-template-columns: 1fr 1fr;
grid-gap: 4.5rem;
}
.main {
margin: 0rem;
}
.main_content {
clip-path: polygon(0 10%, 100% 0, 100% 90% , 0 100%);
padding: 10rem 5rem;
}
}
Hurrah! We completed the features section design.
If you face any difficulty in making this. I will be more than happy to help you out with it.
Can you help me?
My GitHub Profile:
I'm a computer engineering student ? from India who loves to code.
An avid and passionate coder specializing in different languages. I love to build and design websites which the end user would enjoy using while keeping the website performant and the code clean. Up for freelance web development work and collaborating on exciting Open Source & Personal projects.
⚡ Stuff I Know
? Stuff To Explore
Happily turning coffee into code!✅
My profile contains lots of open source projects. I will be happy to know reviews about them. It will also be appreciated if you fork the repo and help me out with the code and making them better.
If you're interested in contributing, the project is open-source and I would appreciate any sort of help. Otherwise, you can share it or star the repo, if you want to of course.
Happily turning ☕ into code.
This content originally appeared on DEV Community and was authored by Himanshu
Himanshu | Sciencx (2021-05-29T05:53:10+00:00) How I made this styled DIV (Feature Section)!. Retrieved from https://www.scien.cx/2021/05/29/how-i-made-this-styled-div-feature-section/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.