Skip to content

Commit

Permalink
SUCCESSFULLY ENHANCED THE UI OF THE LINKTREE AND MAKE IT VERY INTERAC…
Browse files Browse the repository at this point in the history 
…TIVE AND ATTRACTIVE
  • Loading branch information
@dnyanesh99borse
dnyanesh99borse committed Oct 13, 2024
1 parent 1347b41 commit dea8560
Show file tree
Hide file tree
Showing 10 changed files with 247 additions and 101 deletions.
Binary file added projects/Linktree clone/images/FACEBOOK.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/Linktree clone/images/X.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed projects/Linktree clone/images/display-picture.png
View file
Binary file not shown.
Binary file added projects/Linktree clone/images/face8.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/Linktree clone/images/insta.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/Linktree clone/images/linkdin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/Linktree clone/images/youtube.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
127 changes: 71 additions & 56 deletions projects/Linktree clone/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,73 @@
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
<link rel="stylesheet" href="./style.css" />
<title>Linktree Page Clone</title>
</head>
<body>
<main>
<div class="flex-container" id="share-link">
<a href="#" class="share-btn">
<i class="bi bi-share-fill"></i>
</a>
</div>
<section class="profile">
<img
src="./images/display-picture.png"
alt="Profile Picture"
id="profile-picture"
/>
<h1>Himangshu Kalita</h1>
<h2>Aspiring Software Engineer and UI/UX designer</h2>
</section>
<!-- Links Section -->
<ul class="links-container">
<li>
<a
href="#"
target="_blank"
class="nav-link"
><i class="bi bi-cup-hot"></i> Buy Me a Coffee
</a>
</li>
<li>
<a href="#" class="nav-link" target="_blank"
><i class="bi bi-twitter"></i> Twitter
</a>
</li>
<li>
<a href="#" class="nav-link"
><i class="bi bi-youtube"></i> Youtube Channel
</a>
</li>
<li>
<a href="#" class="nav-link"
><i class="bi bi-book-fill"></i> Read My Blog
</a>
</li>
</ul>
</main>
</body>
</html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/projects/Linktree clone/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Linktree Profile</title>
</head>

<body>

<div class="container">

<div class="profile">
<div class="profile-picture-container">
<img src="/projects/Linktree clone/images/face8.png" alt="Profile Picture">
</div>
<h1 class="profile-name">John Doe</h1>
<p class="profile-specialist">Web Developer & Designer</p>
<p class="about">
👨‍💻 Frontend Developer | Interaction Enthusiast 🌐

I'm a passionate frontend developer from India, dedicated to crafting engaging and dynamic user
interfaces. With a strong foundation in HTML, CSS, and JavaScript, I love exploring the art of
interaction to create immersive, intuitive web experiences. My journey focuses on blending design and
technology, leveraging frameworks like React, Vue.js, and cutting-edge animation techniques to bring web
applications to life. 🚀

I thrive on solving complex problems with clean, scalable code and ensuring that every interface I build
not only looks stunning but feels smooth and responsive. As I continue to explore the evolving frontend
ecosystem, my goal is to master the interactive elements that make digital experiences unforgettable.
🎨✨

Let’s build the future of the web—one interaction at a time. 👾
</p>
</div>

<div class="social-media">
<a href="https://www.facebook.com" target="_blank" class="icon facebook">
<i class="fab fa-facebook-f"></i> Facebook
</a>
<a href="https://www.instagram.com" target="_blank" class="icon instagram">
<i class="fab fa-instagram"></i> Instagram
</a>
<a href="https://twitter.com" target="_blank" class="icon twitter">
<i class="fab fa-twitter"></i> X (formerly Twitter)
</a>
<a href="https://www.youtube.com" target="_blank" class="icon youtube">
<i class="fab fa-youtube"></i> YouTube
</a>
<a href="https://www.linkedin.com" target="_blank" class="icon linkedin">
<i class="fab fa-linkedin-in"></i> LinkedIn
</a>
<a href="https://github.com" target="_blank" class="icon github">
<i class="fab fa-github"></i> GitHub
</a>
<a href="https://www.tiktok.com" target="_blank" class="icon tiktok">
<i class="fab fa-tiktok"></i> TikTok
</a>
<a href="https://www.quora.com" target="_blank" class="icon quora">
<i class="fab fa-quora"></i> Quora
</a>
<a href="https://www.pinterest.com" target="_blank" class="icon pinterest">
<i class="fab fa-pinterest"></i> Pinterest
</a>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
Empty file added projects/Linktree clone/script.js
View file
Empty file.
221 changes: 176 additions & 45 deletions projects/Linktree clone/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,198 @@
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Manrope", sans-serif;
}
a {
color: black;
text-decoration: none;
}

body {
background-color: #333533;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.flex-container {

.container {
background: white;
border-radius: 10px;
box-shadow: 0 2px 8px whitesmoke;
padding: 20px;
width: 80%;
height: 90%;
text-align: center;
display: flex;
align-items: center;
gap: 5vw;
}
.share-btn {


.profile {
text-align: center;
padding: 30px;
background-color: white;
padding: 0.65rem 0.8rem;
border-radius: 50%;
border-radius: 20px 0 20px 0;
box-shadow: 5px 5px 1px rgba(15, 2, 34, 0.637);
width: 40rem;
height: 70%;
border:1px solid rgb(95, 50, 107) ;
}
#share-link {
justify-content: flex-end;
align-items: center;
margin: 1rem;

.profile-picture-container {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
border-radius: 50%;
background-color: white;
padding: 5px;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
animation: neon-border 2s linear infinite;
}
#profile-picture {
display: block;
width: 100px;
margin: 1rem auto;

.profile-picture-container img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.profile > h1,
.profile > h2 {
text-align: center;
color: white;

@keyframes neon-border {
0% {
box-shadow:1px 1px 1px rgb(53, 1, 53), 0 1px 2px bla;
}
50% {
box-shadow:0px 0px 6px 3px purple , 1px 0 3px paleturquoise ;
}
100% {
box-shadow: 0px 0px 5px lavender;
}
}
.profile > h1 {
font-size: 1.25rem;

.profile-name {
font-size: 28px;
font-weight: 700;
margin-top: 20px;
color: #333;
}
.profile > h2 {

.profile-specialist {
font-size: 18px;
font-weight: 400;
font-size: 1rem;
color: #666;
margin-bottom: 0;
border-top: 2px solid #ddd;
padding-top: 10px;
margin-top: 15px;
}

.about{
font-size: 15px;
font-weight: 500;
font-family: cursive;
overflow:scroll;
max-height: 40%;
text-align: left;
padding:5px;
}

.about ::-webkit-scrollbar{
width: 10px;
display: none;
}

/* Optional additional hover effects for profile picture */
.profile-picture-container:hover {
animation: neon-border-hover 1.5s linear infinite;
}
.links-container {
padding: 1rem 0.75rem;
list-style-type: none;

@keyframes neon-border-hover {
0% {
box-shadow: 0px 0px 5px rgb(0, 234, 255);

}
.links-container li {
}

.social-media {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Space between boxes */
}

.social-media a {
flex: 1 1 calc(33.33% - 20px); /* Each box takes up one-third of the row */
text-align: center;
margin: 1rem 0;
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
text-decoration: none;
color: #333;
font-family: Arial, sans-serif;
transition: background-color 0.3s;
}

.social-media i {
margin-right: 8px;
}
.social-media a{
margin: 5px;
}
.nav-link {

.social-media h2 {
margin-bottom: 20px;
font-size: 20px;
}

.icon {
display: block;
border-radius: 10px;
background-color: white;
padding: 1rem 0;
box-shadow: 10px 10px black;
font-weight: 600;
}
@media (min-width: 768px) {
main {
max-width: 750px;
margin: 0 auto;
}
background-color: #f0f0f0;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
color: #333;
text-decoration: none;
font-size: 16px;
transition: background-color 0.3s, color 0.3s;
}

.icon:hover {
color: white;
}

.facebook:hover {
background-color: #3b5998;
}

.instagram:hover {
background-color: #C13584;
}

.twitter:hover {
background-color: #1DA1F2;
}

.youtube:hover {
background-color: #FF0000;
}

.linkedin:hover {
background-color: #0077B5;
}

.github:hover {
background-color: #333;
}

.tiktok:hover {
background-color: #69C9D0;
}

.quora:hover {
background-color: #A82400;
}

.pinterest:hover {
background-color: #E60023;
}

0 comments on commit dea8560

Please sign in to comment.