An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
January 22, 2021 04:45 pm GMT
Original Link: https://dev.to/stackfindover/profile-card-design-html-css-3ed9
Profile card design HTML CSS
Hello, guys in this tutorial we will create an animated profile card design using HTML & CSS.
First, we need to create two files index.html and style.css then we need to do code for it.
CSS library for icons
Font Awesome
Profile card design step:1
Add below code inside index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Developer Profile Card</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <section class="card-outer"> <div class="card"> <div class="top-content"> <div class="top-bar"> <div class="top-icon"> <i class="fa fa-arrow-circle-o-left"></i> </div> <div class="top-icon"> <i class="fa fa-dot-circle-o"></i> </div> </div> <div class="profile"> <img src="rahul.jpg"> </div> </div> <div class="mid-content"> <div class="info"> <h2>Rahul Jangid</h2> <span>UI/UX Designer</span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <button class="follow">Follow</button> <div class="follow-info"> <div> <span>Followers</span> <p>200k</p> </div> <div> <span>Following</span> <p>200</p> </div> </div> </div> </div> <div class="bottom-content"> <button class="hire">Hire Me</button> </div> </div> </section> </body></html>
Enter fullscreen mode Exit fullscreen mode
Profile card design step:2
Then we need to add code for style.css which code I provide in the below screen.
* { padding: 0; margin: 0; font-family: 'IBM Plex Sans', sans-serif;}body { display: flex; align-items: center; justify-content: center; height: 100vh; background: #f1f2f3;}.card { width: 350px; height: auto; background: #fefefe; border-radius: 10px; overflow: hidden; position: relative;}.card img { display: block; width: 100%;}.top-content { position: relative; width: 100%; height: 250px; display: flex; border-radius: 0 0 8% 8%;}.top-bar { position: absolute; padding: 20px 15px; display: flex; justify-content: space-between; width: 90%;}.top-icon { width: 25px; height: 25px; cursor: pointer; color: #fff; font-size: 30px; -webkit-text-stroke: 0.5px #000;}.mid-content { display: flex; justify-content: center;}.mid-content .info { position: absolute; padding: 20px 0 10px 0; top: 35%; width: 250px; height: 230px; text-align: center; z-index: 100; background: #fff; border-radius: 10px; box-shadow: 2px 2px 20px rgba(0,0,0,0.2); animation: anim 1s ease-in-out;}.info span { font-size: 15px; font-weight: 500; color: #b6b7b8;}.info p { font-size: 15px; font-weight: 500; margin-top: 10px; padding: 0 10px;}.follow-info p { margin: 0 !important; color: #e6391b; font-size: 14px; font-weight: 700;}.bottom-content { margin-top: 200px; display: flex; align-items: center; justify-content: center;}.bottom-content button.hire { width: 100%; font-size: 15px; margin-top: 10px; background-color: #4b00ff; padding: 12px 0; font-weight: 600; color: #fff; border: unset; cursor: pointer;}.follow-info { display: flex; justify-content: space-around; margin-top: 15px; border-top: 1px solid #eee; padding: 8px 0;}button.follow { font-size: 15px; margin-top: 15px; color: #4b00ff; padding: 8px 30px; background: transparent; border: 1px solid; font-weight: 700; border-radius: 20px; cursor: pointer;}@keyframes anim { 0% { top: -1000px; } 100% { top: 35%; }}button { outline: 0;}
Enter fullscreen mode Exit fullscreen mode
Profile card design Video Output:
Original Link: https://dev.to/stackfindover/profile-card-design-html-css-3ed9
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To