A Pen by Sujay Kundu on CodePen.
Created
July 18, 2024 06:57
-
-
Save sujaykundu777/84c5d2d9cb1d5c8e1f55518c8631604a to your computer and use it in GitHub Desktop.
Levelupdev - Weekly Challenge #1 - Profile Card
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Profile Card</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="profile-card"> | |
| <div class="profile-image"> | |
| <img src="https://images.unsplash.com/photo-1698510047345-ff32de8a3b74?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjEyODQ2NzF8&ixlib=rb-4.0.3&q=85" alt="John Doe"> | |
| </div> | |
| <h1>John Doe</h1> | |
| <h2>Instructor</h2> | |
| <p>John is passionate about machine learning and AI, he values his learnings and loves to share with others</p> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fab fa-facebook"></i></a> | |
| <a href="#"><i class="fab fa-github"></i></a> | |
| <a href="#"><i class="fab fa-hashtag"></i></a> | |
| <a href="#"><i class="fas fa-envelope"></i></a> | |
| </div> | |
| <button class="message-button">Message me</button> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: Arial, sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background-color: #2b2b2b; | |
| } | |
| .profile-card { | |
| background-color: #1f1f1f; | |
| border-radius: 10px; | |
| padding: 20px; | |
| width: 300px; | |
| text-align: center; | |
| color: white; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .profile-image img { | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| border: 4px solid #ffd700; | |
| } | |
| .profile-card h1 { | |
| font-size: 24px; | |
| margin: 10px 0; | |
| } | |
| .profile-card h2 { | |
| font-size: 18px; | |
| color: #888; | |
| margin: 5px 0; | |
| } | |
| .profile-card p { | |
| font-size: 14px; | |
| margin: 15px 0; | |
| } | |
| .social-icons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| margin: 15px 0; | |
| } | |
| .social-icons a { | |
| color: white; | |
| font-size: 20px; | |
| text-decoration: none; | |
| } | |
| .message-button { | |
| background-color: #ffd700; | |
| color: black; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .message-button:hover { | |
| background-color: #e5c200; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment