Skip to content

Commit

Permalink
Merge pull request #11 from shobhit15082003/hover_changes
Browse files Browse the repository at this point in the history 
added hover effect on various places
  • Loading branch information
@5h0ov
5h0ov authored Oct 1, 2024
2 parents 300b364 + b5f02ad commit 7e86980
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 13 deletions.
82 changes: 81 additions & 1 deletion css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -792,6 +792,8 @@ video {
background-color: rgb(22 24 28 / var(--tw-bg-opacity));
}



.bg-\[\#1d9bf0\] {
--tw-bg-opacity: 1;
background-color: rgb(29 155 240 / var(--tw-bg-opacity));
Expand All @@ -802,6 +804,12 @@ video {
background-color: rgb(47 51 54 / var(--tw-bg-opacity));
}

.bg-\[\#1a8cd8\] {
--tw-bg-opacity: 1;
background-color: rgb(26 140 216 / var(--tw-bg-opacity));
}


.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
Expand All @@ -817,6 +825,12 @@ video {
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.bg-green-800 {
--tw-bg-opacity: 1;
background-color: rgb(22 101 52 / var(--tw-bg-opacity));
}


.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -970,6 +984,17 @@ video {
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1a8cd8\]:hover {
--tw-bg-opacity: 1;
background-color: rgb(26 140 216 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#0a66c2\]:hover {
--tw-bg-opacity: 1;
background-color: rgb(10, 102, 194 / var(--tw-bg-opacity));
}


.hover\:bg-green-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -1012,4 +1037,59 @@ video {

.hover\:underline:hover {
text-decoration-line: underline;
}
}


.transform {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}


.transition {
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}


.duration-300 {
transition-duration: 300ms;
}


.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover {
--tw-scale-x: 1.10;
--tw-scale-y: 1.10;
transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}


.hover\:shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-shadow);
}

.cursor-pointer {
cursor: pointer;
}

.hover\:h-full:hover {
height: 100%; /* Sets height to 100% on hover */
}

.hover\:w-full:hover {
width: 100%; /* Sets width to 100% on hover */
}
24 changes: 12 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="flex container mx-auto">
<div class="first w-[50%] space-y-3">
<div class="invert logo mx-5 my-3">
<svg viewBox="0 0 24 24" aria-hidden="true" class="w-8 r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp r-1nao33i r-16y2uox r-8kz0gk"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>
<svg viewBox="0 0 24 24" aria-hidden="true" class="w-8 r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp r-1nao33i r-16y2uox r-8kz0gk"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>
</div>
<div class="sidebar">

Expand All @@ -26,8 +26,8 @@
<li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">bookmarks</span>Premium</li>
<li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">person</span>Profile</li>
<li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">more</span>More</li>
<li class="flex items-center gap-3 w-fit cursor-pointer py-3">
<button class="bg-[#1d9bf0] px-24 py-4 rounded-full">Post</button>
<li class="flex items-center gap-3 w-fit cursor-pointer py-3">
<button class=" bg-[#1d9bf0] hover:bg-[#1a8cd8] px-24 py-4 rounded-full">Post</button>
</li>
<li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer p-4 hover:rounded-full transition-all">
<img class="rounded-full" src="dp.jpg" alt="...">
Expand All @@ -40,12 +40,12 @@
</div>
</div>
<div class="second w-full border-[1px] border-x-[#2f3336] border-y-[#2f3336]">
<div class="top flex p-3 relative">
<div class="top flex p-3 relative cursor-pointer">
<div class="absolute w-16 h-1 bottom-0 bg-[#1d9bf0] left-[19%] rounded-full z-10"></div>
<div class="left bg-red-1 w-1/2 flex justify-center font-bold">For you</div>
<div class="right bg-green-4001 w-1/2 flex justify-center font-bold">Following</div>
<div class="left bg-red-1 w-1/2 flex justify-center font-bold ">For you</div>
<div class="right bg-green-4001 w-1/2 flex justify-center font-bold ">Following</div>
<div class="settings mx-2">
<span class="material-symbols-outlined">
<span class="material-symbols-outlined transform transition duration-300 hover:scale-110 hover:shadow-lg">
settings
</span>
</div>
Expand All @@ -59,9 +59,9 @@
<input class="w-full bg-black h-7 my-4 text-white outline-none text-xl" type="text" placeholder="What is happening?!">
<div class="text-[#1d9bf0] flex items-center gap-2 font-medium my-4">
<span class="material-symbols-outlined">
globe_asia
<!-- globe_asia -->
</span>
<span>Everyone can reply</span>
<span class="cursor-pointer">Everyone can reply</span>
</div>
<div class="w-[90%] h-[1px] bg-[#2f3336] my-3"></div>
<div class="blueicons flex gap-1 text-[#1d9bf0] items-center">
Expand All @@ -84,7 +84,7 @@
location_on
</span>
<span class="cursor-pointer">
<button class="text-white w-fit bg-[#1d9bf0] px-7 py-2 rounded-full font-bold">Post</button>
<button class="text-white w-fit bg-[#1d9bf0] hover:bg-[#1a8cd8] px-7 py-2 rounded-full font-bold">Post</button>
</span>
</div>
</div>
Expand Down Expand Up @@ -233,7 +233,7 @@ <h1 class="text-xl font-bold p-3">What's happening</h1>
<div class="font-bold text-sm text-gray-500">500K posts</div>
</div>
<div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer hover:rounded-xl transition-all">
<div class="text-blue-400">Show more</div>
<div class="text-blue-400 hover:underline ">Show more</div>
</div>
</div>
<div class="who bg-[#16181c] rounded-xl my-3 mx-6 w-96">
Expand All @@ -248,7 +248,7 @@ <h1 class="text-xl font-bold p-3">Who to follow</h1>
</div>

<div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer hover:rounded-xl transition-all">
<div class="text-blue-400">Show more</div>
<div class="text-blue-400 hover:underline">Show more</div>
</div>
</div>

Expand Down

0 comments on commit 7e86980

Please sign in to comment.