-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
148a7b2
commit e8e3784
Showing
2 changed files
with
138 additions
and
129 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,124 +3,46 @@ | |
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="s.css"> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css"> | ||
| <title>Business Card with Colored Social Icons and QR Code</title> | ||
| </head> | ||
| <body> | ||
| <style> | ||
|
|
||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f0f0f0; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .business-card { | ||
| background-color: #ffffff; | ||
| border: 1px solid #ccc; | ||
| border-radius: 5px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| width: 500px; | ||
| text-align: center; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .social-media { | ||
| display: flex; | ||
| gap: 10px; | ||
| justify-content: center; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .social-media a { | ||
| text-decoration: none; | ||
| font-size: 30px; | ||
| transition: transform 0.2s; | ||
| } | ||
|
|
||
| .social-media a:hover { | ||
| transform: scale(1.1); | ||
| } | ||
|
|
||
|
|
||
| .bx-linkedin { color: #0077b5; } | ||
| .bx-github { color: #333; } | ||
| .bx-twitter { color: #1da1f2; } | ||
| .bx-facebook { color: #3b5998; } | ||
| .bx-instagram { color: #c32aa3; } | ||
|
|
||
| .qr-code { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .qr-code img { | ||
| width: 150px; | ||
| height: 150px; | ||
| } | ||
|
|
||
|
|
||
| .contact-us { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .contact-us a { | ||
| display: inline-block; | ||
| padding: 10px 20px; | ||
| background-color: #007bff; | ||
| color: white; | ||
| border-radius: 5px; | ||
| text-decoration: none; | ||
| font-weight: bold; | ||
| transition: background-color 0.3s, transform 0.2s; | ||
| } | ||
|
|
||
| .contact-us a:hover { | ||
| background-color: #0056b3; | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
|
|
||
| </style> | ||
| <div class="business-card"> | ||
| <div class="card-header"> | ||
| <p>Your Name</p> | ||
| <h1>Your Name</h1> | ||
| <p>Job Title</p> | ||
| <body> | ||
| <div class="business-card"> | ||
| <div class="card-header"> | ||
| <img src="https://via.placeholder.com/120" alt="Profile Picture"> | ||
| <h1>Your Name</h1> | ||
| <p>Job Title</p> | ||
| </div> | ||
| <div class="card-details"> | ||
| <p>Email: [email protected]</p> | ||
| <p>Phone: (123) 456-7890</p> | ||
| <p>Website: www.yourwebsite.com</p> | ||
| <p>Address: 123 Main St, City, Country</p> | ||
| </div> | ||
| <div class="social-media"> | ||
| <a href="https://www.linkedin.com/in/yourprofile" target="_blank"> | ||
| <i class='bx bxl-linkedin'></i> | ||
| </a> | ||
| <a href="https://github.com/yourprofile" target="_blank"> | ||
| <i class='bx bxl-github'></i> | ||
| </a> | ||
| <a href="https://twitter.com/yourprofile" target="_blank"> | ||
| <i class='bx bxl-twitter'></i> | ||
| </a> | ||
| <a href="https://www.facebook.com/yourprofile" target="_blank"> | ||
| <i class='bx bxl-facebook'></i> | ||
| </a> | ||
| <a href="https://www.instagram.com/yourprofile" target="_blank"> | ||
| <i class='bx bxl-instagram'></i> | ||
| </a> | ||
| </div> | ||
| <div class="contact-btn"> | ||
| <a href="mailto:[email protected]">Contact Us</a> | ||
| </div> | ||
| </div> | ||
| <div class="card-details"> | ||
| <p>Email: [email protected]</p> | ||
| <p>Phone: (123) 456-7890</p> | ||
| <p>Website: www.yourwebsite.com</p> | ||
| <p>Address: 123 Main St, City, Country</p> | ||
| </div> | ||
| <div class="social-media"> | ||
| <a href="https://www.linkedin.com/in/yourprofile" target="_blank"> | ||
| <i class='bx bxl-linkedin'></i> | ||
| </a> | ||
| <a href="https://github.com/yourprofile" target="_blank"> | ||
| <i class='bx bxl-github'></i> | ||
| </a> | ||
| <a href="https://twitter.com/yourprofile" target="_blank"> | ||
| <i class='bx bxl-twitter'></i> | ||
| </a> | ||
| <a href="https://www.facebook.com/yourprofile" target="_blank"> | ||
| <i class='bx bxl-facebook'></i> | ||
| </a> | ||
| <a href="https://www.instagram.com/yourprofile" target="_blank"> | ||
| <i class='bx bxl-instagram'></i> | ||
| </a> | ||
| </div> | ||
| <div class="qr-code"> | ||
| <img src="https://api.qrserver.com/v1/create-qr-code/?data=https://www.example.com&size=150x150" alt="QR Code" width="150" height="150"> | ||
| </div> | ||
| <div class="contact-us"> | ||
| <a href="mailto:[email protected]">Contact Us</a> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,128 @@ | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f0f0f0; | ||
| font-family: 'Poppins', sans-serif; | ||
| background: linear-gradient(135deg, #e0f7fa, #b2ebf2); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| margin: 0; | ||
| padding: 0; | ||
| transition: background 0.5s ease; | ||
| } | ||
|
|
||
| /* Business Card Container */ | ||
| .business-card { | ||
| background-color: #ffffff; | ||
| border: 1px solid #ccc; | ||
| border-radius: 5px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| width: 500px; | ||
| background: #ffffff; | ||
| border-radius: 20px; | ||
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | ||
| width: 400px; | ||
| text-align: center; | ||
| padding: 20px; | ||
| padding: 40px; | ||
| position: relative; | ||
| overflow: hidden; | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; | ||
| animation: bounce 1s infinite; | ||
| border: 2px solid #00796b; /* Deep teal border */ | ||
| } | ||
|
|
||
| @keyframes bounce { | ||
| 0%, 20%, 50%, 80%, 100% { | ||
| transform: translateY(0); | ||
| } | ||
| 40% { | ||
| transform: translateY(-10px); | ||
| } | ||
| 60% { | ||
| transform: translateY(-5px); | ||
| } | ||
| } | ||
|
|
||
| .business-card:hover { | ||
| transform: translateY(-8px); | ||
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); | ||
| } | ||
|
|
||
| /* Card Header Styling */ | ||
| .card-header img { | ||
| border-radius: 50%; | ||
| width: 100px; | ||
| height: 100px; | ||
| width: 120px; | ||
| height: 120px; | ||
| object-fit: cover; | ||
| border: 4px solid #ff6f20; /* Vibrant orange */ | ||
| box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); | ||
| margin-bottom: 15px; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .card-header img:hover { | ||
| transform: scale(1.1); | ||
| } | ||
|
|
||
| .card-header h1 { | ||
| margin: 10px 0; | ||
| color: #333; | ||
| margin: 0; | ||
| color: #00796b; /* Deep teal */ | ||
| font-size: 28px; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .card-header p { | ||
| margin: 0; | ||
| color: #777; | ||
| color: #555; | ||
| font-size: 16px; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| /* Card Details */ | ||
| .card-details { | ||
| margin-top: 20px; | ||
| padding: 0 10px; | ||
| } | ||
|
|
||
| .card-details p { | ||
| margin: 10px 0; | ||
| color: #333; | ||
| color: #444; | ||
| font-size: 15px; | ||
| margin: 8px 0; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .card-details p:hover { | ||
| color: #00796b; /* Deep teal on hover */ | ||
| } | ||
|
|
||
| /* Contact Button */ | ||
| .contact-btn a { | ||
| display: inline-block; | ||
| padding: 12px 35px; | ||
| background-color: #ff6f20; /* Vibrant orange */ | ||
| color: white; | ||
| border-radius: 50px; | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| text-decoration: none; | ||
| margin-top: 20px; | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .contact-btn a:hover { | ||
| background-color: #e65c00; /* Darker orange */ | ||
| transform: scale(1.05); | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| /* Social Media Icons */ | ||
| .social-media { | ||
| display: flex; | ||
| justify-content: center; | ||
| gap: 20px; | ||
| margin-top: 30px; | ||
| } | ||
|
|
||
| .social-media a { | ||
| font-size: 28px; | ||
| color: #00796b; /* Deep teal */ | ||
| transition: color 0.3s ease, transform 0.3s ease; | ||
| } | ||
|
|
||
| .social-media a:hover { | ||
| color: #004d40; /* Darker teal */ | ||
| transform: scale(1.2); | ||
| } |