An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Some of Our Sources
- Mashable
- Technology Review
- Team Treehouse
- Just Creative
- Pearsonified
- Vandelay Design
- Naldz Graphics
- FanExtra - PSD
- Web Resource Source
- Hashedout
Help Webnuz
Referal links:
April 8, 2022 04:44 pm GMT
Original Link: https://dev.to/robsonmuniz16/profile-card-html-css-1o81
Profile Card | html & CSS
Create a Profile Card using HTML & CSS, step-by-step from scratch.
Markup
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Profile Card | HTML CSS</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"></head><body><section> <div class="personal"> <span class="pro">Pro</span> <img src="/img/Avatar.jpg" alt=""> <h1 class="name">Sarah Smith</h1> <p class="country">UK</p> <p class="stack">Full Stack Developer</p> <button class="primary">Message</button> <button class="secondary">Following</button> <div class="social"> <a href="#"><i class="fa-brands fa-linkedin-in"></i></a> <a href="#"><i class="fa-brands fa-twitter"></i></a> <a href="#"><i class="fa-brands fa-instagram"></i></a> <a href="#"><i class="fa-brands fa-github"></i></a> <a href="#"><i class="fa-brands fa-youtube"></i></a> </div> </div><div class="skills"> <h2>Skills</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>React</li> <li>NodeJS</li> <li>Express</li> <li>Mongodb</li> </ul></div></section></body></html>CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');*{ padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}body{ font: 'Poppins', sans-serif; background-color: #28223f; display: flex; justify-content: center; -ms-align-items: center; align-items: center; min-height: 100vh; color: #b3b8cd;}section{ width: 30rem; position: absolute; box-shadow: 2px 10px 20px -10px rgba(0,0,0,0.75);}.personal{ background-color: #231e39; padding: 2.5rem 0 1.5rem 0; text-align: center;}.personal .name{ margin-top: 1.3rem;}.personal .country{ font-size: 1.3rem; margin: 0.2rem;}.personal .stack{ font-size: 1.6rem; margin-top: 1.5rem;}.personal button{ border: 1px solid #03bfcb; padding: 0.8rem 1.8rem; border-radius: 0.3rem; font-size: 1.3rem; cursor: pointer; margin: 0.5rem;}.personal button.primary{ background-color: #03bfcb; color: #231e39;}.personal button.secondary{ background-color: transparent; color: #02899c;}.personal .pro{ background-color: #febb0b; color: #231e39; border-radius: 0.2rem; font-size: 1.4rem; padding: 0.1rem 0.8rem; position: absolute; top: 1rem; left: 2rem;}.personal img{ width: 12rem; height: 12rem; border-radius: 50%; border: 0.2rem solid #03bfcb;}.social i{ font-size: 1.8rem; margin: 1rem 0.4rem; color: #b3b8cd; transition: color 0.5s}.fa-linkedin-in:hover{ color: #0a66c2;}.fa-twitter:hover{ color: #1da1f2;}.fa-instagram:hover{ color: #c32aa3;}.fa-github:hover{ color: #171515;}.fa-youtube:hover{ color: #ff0000;}.skills{ background-color: #1f1a36; padding: 1.6rem 1rem;}.skills h2{ text-transform: uppercase; font-size: 1.2rem; margin-bottom: 0.5rem;}.skills ul li{ display: inline-block; list-style-type: none; font-size: 1.2rem; border: 2px solid #272240; padding: .4rem; border-radius: 0.2rem; margin: 0.2rem 0.1rem;} Follow me on, for more like this:
Youtube: https://bit.ly/3oBQbc0
Facebook: https://bit.ly/3cp2S5W
Original Link: https://dev.to/robsonmuniz16/profile-card-html-css-1o81
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