An Interest In:
Web News this Week
- March 14, 2024
- March 13, 2024
- March 12, 2024
- March 11, 2024
- March 10, 2024
- March 9, 2024
- March 8, 2024
October 13, 2021 09:52 am GMT
Original Link: https://dev.to/ezekiel8807/creating-a-cool-profile-card-52c6
Creating a cool profile card
Hello guys,
today i will be showing how I created this cool profile card, let's get started..
Create a workspace
cd /Desktop mkdir profile_card cd profile_card touch index.html touch style.css
cd /Desktop: is use to change directory to the desktop
mkdir profile_card: this command is use to create a folder called ptofile_card.
cd profile_card: the command is use to navigate inside the profile_card folder.
touch index.html: create a index.html file inside the profile_card folder.
touch style.css: create a style.css file inside the profile_card folder.
create profile card
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA- Compatible" content=" IE=edge"> <meta name="viewport" content="width=device- width, initial-scale=1.0"> <title>Profile page</title> <link rel="stylesheet" href="style.css"></head><body> <div class="profile-block"> <div class="cover-img"> <img src="c.png" alt="cover-photo"> </div> <div class="profile-image-box"> <img src="a.jpg" alt="profile picture"> </div> <span>Ayebidun Ezekiel</span> <p>Full_stack Developer</p> <div class="more"> <button type="button" >Portfolio</button> </div> </div></body></html>
styling our profile card
*{ width: 100%; margin: 0; padding: 0;}.profile-block{ top: 20%; left: 15%; width: 250px; position: absolute; border-radius: 5px; box-shadow: 0px 0px 4px 0px #5c75b1;}.cover-img{ width: 100%; height: 150px;}.cover-img img{ width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat:no-repeat; border-top-right-radius: 5px; border-top-left-radius: 5px;}.profile-image-box { top: 80px; left: 65px; width: 100px; height: 100px; border-radius: 50%; position: absolute; border: solid 7px #4d6cb2; box-shadow: 0px 0px 4px 0px #5c75b1;}.profile-image-box img{ width: 100%; height: 100%; border-radius: 50%;}.profile-block span{ font-size: 25px; font-weight: bold; margin-top: 50px; position: absolute; text-align: center; font-family: 'franklin gothic medium', 'arial narrow', arial, sans-serif;}.profile-block p{ margin-top: 80px; text-align: center; font-weight: lighter;}.more{ text-align: center;}.more button{ width: 150px; height: 30px; border: none; margin-top: 40px; color: #ffffff; font-weight: bold; margin-bottom: 50px; background-color: #5c75b7;}%
Original Link: https://dev.to/ezekiel8807/creating-a-cool-profile-card-52c6
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