Muhammad Shahin's Blog

Design Card with Box Shadow & Flex.

Muhammad Shahin's photo
Muhammad Shahin
·

2 min read

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=h, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS flexbox</title>
    <style>
    *{
    font-family: Arial, Helvetica, sans-serif;

}
.card-container{
   display: flex;

}
.card-1{
    width: 300px;
    box-shadow: 5px 5px 20px black;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 20px;
}
.card-1:hover{
    box-shadow: 5px 5px 20px blueviolet;
}
.image-style{
    width: 100%;
    border-radius: 10px 10px 0px 0px;
}
.card-body{
    padding: 10px;
    text-align: center;
}
.card-desc{
    line-height: 25px;
    text-align: justify;
}
    </style>
</head>
<body>
    <div class="card-container"> <!--Firstly has been taken a container for card design----------->
        <div class="card-1"> <!---hole card model in this class--->
            <img class="image-style" src="images/shahin.jpg" alt="shahin's Image"> <!----at Firts has been taken a image----->
            <div class="card-body">
                <div class="card-title">
                    <h2>Md. Shahin Hossain</h2>
                </div>
                <div class="card-desc">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos impedit tenetur voluptas eum delectus provident ex beatae, dignissimos sed aliquam. Ipsum labore, commodi aliquam provident incidunt alias odit error, tenetur deleniti repellat autem modi numquam ab at suscipit obcaecati molestias est quo,</p>
                </div>
            </div>
        </div>
        <div class="card-1">
            <img class="image-style" src="images/shahin.jpg" alt="shahin's Image">
            <div class="card-body">
                <div class="card-title">
                    <h2>Md. Shahin Hossain</h2>
                </div>
                <div class="card-desc">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos impedit tenetur voluptas eum delectus provident ex beatae, dignissimos sed aliquam. Ipsum labore, commodi aliquam provident incidunt alias odit error, tenetur deleniti repellat autem modi numquam ab at suscipit obcaecati molestias est quo,</p>
                </div>
            </div>
        </div>
        <div class="card-1">
            <img class="image-style" src="images/shahin.jpg" alt="shahin's Image">
            <div class="card-body">
                <div class="card-title">
                    <h2>Md. Shahin Hossain</h2>
                </div>
                <div class="card-desc">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos impedit tenetur voluptas eum delectus provident ex beatae, dignissimos sed aliquam. Ipsum labore, commodi aliquam provident incidunt alias odit error, tenetur deleniti repellat autem modi numquam ab at suscipit obcaecati molestias est quo,</p>
                </div>
            </div>
        </div>
        <div class="card-1">
            <img class="image-style" src="images/shahin.jpg" alt="shahin's Image">
            <div class="card-body">
                <div class="card-title">
                    <h2>Md. Shahin Hossain</h2>
                </div>
                <div class="card-desc">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos impedit tenetur voluptas eum delectus provident ex beatae, dignissimos sed aliquam. Ipsum labore, commodi aliquam provident incidunt alias odit error, tenetur deleniti repellat autem modi numquam ab at suscipit obcaecati molestias est quo,</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer

Design-card