Responsive Service Section Tutorial Using HTML and SASS ( CSS Compiler ).
Responsive Service Section With Awesome Hover Effect.
Responsive Service Section Using CSS Grid Method And Some Media Queries.
The Reason I Used Sass Instead Of CSS…
Because Sass is a CSS pre-processor. Sass is completely compatible with all versions of CSS. Sass reduces repetition of CSS and therefore saves time.
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other
You Can use Sass In Your Project Using Scss Extension.
The Icons Used In This Video Are From FlatIcons:
https://www.flaticon.com/
And Shape Images are Made Using Figma:
Figma Is Free To Use: https://www.figma.com/downloads/
Note: There Was A Mistake While Writing Media Query In .service-container With…
wrong code:
grid-template-columns: repeat(2 minmax(30rem, 1fr));
grid-template-rows: repeat(3, minmax(30rem, 1fr));
Right Code:
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
grid-template-rows: repeat(auto-fit, minmax(30rem, 1fr));
You Have To Write Auto-fit In Media Queries.
#ServiceSection
#ResponsiveService
#Responsive
#HTML5
#SASS
#SCSS
#CSSGrid
Your Queries:
responsive services section using only html & css,
responsive service section,
responsive services page,
responsive service box html css,
responsive services section,
css services,
html css services section,
services html css,
service section html css,
service page html css,
service box css,
service box html css,
how to make service section,
how to create service section,
how to create responsive service box,
how to make responsive service section using html and sass.
source
