Responsive Team Section Using CSS Grid

Published by codingmaster on

Hello Friends, today in this blog you’ll learn how to create Responsive Team Section Using CSS Grid.

Creating Responsive Card Layouts is a great practice to improve your Web Design skills. So today in this blog we’re talking about Responsive Team Section Using CSS Grid. If you face some problem to create website layouts then you must have to be good at CSS Flexbox and CSS Grid. This tutorial helps you to better understanding on CSS Grid.

Video Tutorial of Responsive Team Section Using CSS Grid

In this video tutorial you’ve seen that we create a simple responsive team section using css grid it’s really very very simple tutorial. After watching this tutorial you guys can easily create responsive card layouts. If you’re not good at css grid then surely this tutorial will helpful for you. So must watch this amazing tutorial.

So, enjoy the tutorial & learn something new today 🙂

Responsive Team Section Using CSS Grid [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!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="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Responsive Section Using CSS Grid</title>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="image">
                <img src="1.jpg" alt="">
            </div>
            <h1>Member Name</h1>
            <h2>Web Developer</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro incidunt amet vel quisquam optio commodi aperiam eligendi.
            </p>
            <div class="icons">
                <a href=""><i class="fa fa-facebook"></i></a>
                <a href=""><i class="fa fa-instagram"></i></a>
                <a href=""><i class="fa fa-twitter"></i></a>
                <a href=""><i class="fa fa-linkedin"></i></a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="2.jpg" alt="">
            </div>
            <h1>Member Name</h1>
            <h2>Graphic Designer</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro incidunt amet vel quisquam optio commodi aperiam eligendi.
            </p>
            <div class="icons">
                <a href=""><i class="fa fa-facebook"></i></a>
                <a href=""><i class="fa fa-instagram"></i></a>
                <a href=""><i class="fa fa-twitter"></i></a>
                <a href=""><i class="fa fa-linkedin"></i></a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="3.jpg" alt="">
            </div>
            <h1>Member Name</h1>
            <h2>Web Designer</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro incidunt amet vel quisquam optio commodi aperiam eligendi.
            </p>
            <div class="icons">
                <a href=""><i class="fa fa-facebook"></i></a>
                <a href=""><i class="fa fa-instagram"></i></a>
                <a href=""><i class="fa fa-twitter"></i></a>
                <a href=""><i class="fa fa-linkedin"></i></a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="4.jpg" alt="">
            </div>
            <h1>Member Name</h1>
            <h2>App Developer</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro incidunt amet vel quisquam optio commodi aperiam eligendi.
            </p>
            <div class="icons">
                <a href=""><i class="fa fa-facebook"></i></a>
                <a href=""><i class="fa fa-instagram"></i></a>
                <a href=""><i class="fa fa-twitter"></i></a>
                <a href=""><i class="fa fa-linkedin"></i></a>
            </div>
        </div>

    </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

body {
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background: rgb(241,238,238);
     font-family: 'Poppins', sans-serif;
 }
 .container {
     width: 1200px;
     height: auto;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
     grid-gap: 10px;
     padding: 10px;
     box-sizing: border-box;
 }
 .container .box {
     position: relative;
     background: #222;
     padding: 10px 30px 30px;
     text-align: center;
     overflow: hidden;
     border-radius: 30px;
 }
 .container .image img {
     width: 100px;
     height: 100px;
     margin-top: 20px;
     border-radius: 50%;
     border: 5px solid rgba(245,154,9);
 }
 .container .box h1 {
     font-size: 25px;
     color: rgba(245,154,9);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .1em;
 }
 .container .box h2 {
    font-size: 17px;
    color: #fff;
    text-transform: uppercase;
    opacity: .4;
    z-index: 1;
    letter-spacing: .1em;
}
.container .box p {
    color: #fff;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: .1em;
    padding-top: 20px;
}
.icons {
    text-decoration: none;
    font-size: 25px;
    padding-top: 10px;
}
.fa {
    color: #fff;
    padding: 10px;
    margin-left: 5px;
    text-align: center;
}
.fa:hover {
    color: rgba(245,154,9);
    transition: all .5s;
}
DOWNLOAD SOURCE CODE FILES
codingmaster
Latest posts by codingmaster (see all)
Categories: CSS Cards
Tags:

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

Neumorphic Card using Bootstrap 5
CSS Cards HTML & CSS Projects

Neumorphic Post Card using Bootstrap 5

Neumorphism is the recent design trend, which uses cool shadow techniques to create a beautiful, subtle, and smooth design. Today, in this post we’ll create a beautiful Responsive Neumorphic Post Card using Bootstrap 5. You Read more…

CSS Cards

CSS Profile Card UI Design

Hello Friends, today in this blog you’ll learn how to create CSS profile card UI design using only HTML & CSS3. Creating CSS Cards is a great practice to improve your skills because when creating Read more…