├── img └── image.jpg ├── index.html └── style.css /img/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sukeshperiyasamy/card-design/HEAD/img/image.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CARD 8 | 9 | 10 | 11 | 12 |

13 |

14 |

15 |

Sukesh

16 |

Working as a prodect manager at Zoho

17 |

From: Chennai, Tamil Nadu

18 | Connect with me 19 |

20 |

21 |

22 | 24 | 25 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | background-color: rgb(204, 249, 249); 3 | } 4 | 5 | 6 | 7 | .user{ 8 | width:fit-content ; 9 | margin: 150px auto; 10 | display: flex; 11 | 12 | } 13 | .user img{ 14 | width:320px; 15 | cursor: pointer; 16 | border-radius: 10px; 17 | position: relative; 18 | z-index: 100; 19 | box-shadow: 10px 10px 10px rgba(0,0,0,0.3) ; 20 | } 21 | .info{ 22 | padding: 10px 50px; 23 | transform: translate3d(50px); 24 | opacity: 1; 25 | transition: transform 1s,opacity 1s; 26 | } 27 | .info h1 { 28 | font-size: 80px; 29 | font-weight: 500; 30 | 31 | } 32 | .info p{ 33 | line-height: 30px; 34 | } 35 | .info a{ 36 | background: #4f40ff; 37 | color: #fff; 38 | font-size: 15px; 39 | text-decoration: none; 40 | display: inline-block; 41 | padding: 12px 50px; 42 | margin-top:20px ; 43 | border-radius: 30px; 44 | } 45 | .info span{ 46 | color: #4f40ff; 47 | font-weight: 500; 48 | } 49 | .close-icon{ 50 | width: 320px; 51 | cursor: pointer; 52 | position: relative; 53 | } 54 | 55 | .close-icon::before, .close-icon::after{ 56 | content: ''; 57 | height: 100%; 58 | width: 2px; 59 | background: rgb(186, 90, 90); 60 | position: absolute; 61 | top: 0; 62 | left: 50%; 63 | margin-left: -1px; 64 | 65 | } 66 | 67 | .close-icon::before{ 68 | transform: rotate(30deg); 69 | 70 | } 71 | .close-icon::after{ 72 | transform: rotate(-30deg); 73 | } 74 | .hide-details .info{ 75 | transform: translate3d(50px); 76 | opacity: 0; 77 | 78 | } 79 | .hide-details .close-icon{ 80 | transform: translate(-410px); 81 | } 82 | .hide-details img{ 83 | transform: translate(410px); 84 | box-shadow: 0 0 0 rgb(186, 90, 90); 85 | } --------------------------------------------------------------------------------