Create Personal Card

 



Create Personal Card using (HTML and CSS)

HTML cod (card.html):-

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- here i add awesome link because i have to use some of icons   -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="card.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="information">
                <div class="image"></div>
                <div class="name">
                    <h4> Ayoub Shindi </h4>
                </div>
            </div>
            <div class="contact">
                <a href="" class="fa fa-facebook"></a>
                <a href="" class="fa fa-envelope"></a>
                <a href="" class="fa fa-instagram"></a>
            </div>
        </div>
    </div>
</body>
</html>


CSS code (card.css):-

.container{
    width: 100%;
    height: 300px;
    padding: 0;
    margin-top: 200px;
    display: inline-flex;
    justify-content: center;
}
.card{
    width: 200px;
    height: 200px;
    background: #454648;
    border-radius: 25px 25px 0 0;
    box-shadow: rgb(38, 57, 77) 0px 20px 50px -10px;
    perspective: 100px;
    transition: all .4s ease-in-out;
}
.card:hover{
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    height: 250px;
    border-radius: 25px;
    transform: scale(1.1);
    transition: 1s;
}

.information{
    width: 200px;
    height: 200px;
    background: rgb(69, 70, 72);
    border-radius: 25px 25px 0 0;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}
.image{
    width: 200px;
    height: 150px;
    background-image: url("person.jpg");
    background-repeat: no-repeat;
    background-size: 100% 150px;
    padding: 0;
    margin: 0;
    border-radius: 25px 25px 0 0;
}
.name{
    width: 100%;
    height: 30px;
    color: white;
    text-align: center;
    background: #454648;
}
.contact{
    width: 100%;
    display: inline-flex;
    justify-content: center;
    position: fixed;
    bottom: 5px;
    color: white;
}
a{
    padding: 10px 15px;
    margin: 0px 5px;
    border-radius: 25px;
    color: black;
    background: white;
}

.fa-facebook{
    color: rgba(0, 0, 255, 0.76);
}
.fa-instagram{
    color: orange;
}             

person image:-

subscribe my channel on youtube :-  https://www.youtube.com/channel/UC1DFWpD1k1PtxIzYbdBAj6g



Comments

Post a Comment