Creating Uplabs Website Html Css Javascript
.png)
Introduction:
Discover the art of crafting a captivating UpLabs website redesign in this comprehensive tutorial. Learn how to build a responsive and visually appealing website using HTML, CSS, and JavaScript. Our step-by-step guide takes you through every aspect of the process, from structuring the HTML to styling with CSS and adding interactivity with JavaScript.
With detailed insights into creating an engaging user experience, optimizing for different devices, and implementing seamless navigation, this video is a must-watch for both beginners and experienced developers. By following along, you'll not only enhance your coding skills but also gain a deeper understanding of UI/UX design principles.
Unlock the potential of your web development journey as we delve into the world of UpLabs-inspired design and bring it to life with code. Don't miss out – start creating your own impressive website projects today!
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="mockup">
<div class="top">
<img class="logo" src="https://www.uplabs.com/logos/uplabs/default--color.svg" />
<ul>
<li>Challenges</li>
<li>Boards</li>
<li class="store">Store</li>
</ul>
<div class="user_control">
<img id="profile_img"
src="https://s3.amazonaws.com/assets.materialup.com/users/
pictures/000/131/507/thumb/insta_logo.png?1531583275" />
<div id="notifications">
<i class="material-icons">notifications</i>
</div>
<div id="new">New</div>
</div>
</div>
<div class="outer-search">
<div class="search-filter">
<div class="search-container">
<input type="text" id="search" placeholder="Search" />
</div>
<div class="filter">
<div class="pill active">For Me</div>
<div class="pill">Android</div>
<div class="pill">Web</div>
<div class="pill">iOS</div>
<div class="pill">Branding</div>
<div class="pill">3D</div>
<i class="material-icons">keyboard_arrow_right</i>
</div>
</div>
</div>
<div class="feeds" id="feeds">
<div class="board s-1">
<h1>Board</h1>
<div class="card top-challenge">
<div class="overlay">
<span class="title-card">News App Challenge</span>
<p class="card-body">Time to vote for your
favorite posts created by the UPLABS community</p>
<i class="material-icons forwards">arrow_forward</i>
</div>
</div>
<div class="card list-challenge">
<span class="title-card">Active Challenge</span>
<div class="challenge-element">
<i class="material-icons">access_time</i>
<div class="challenge-info">
<h5>Clock App Challenge</h5>
<span class="challengers">131 challengers</span>
</div>
<div class="vote">Vote</div>
</div>
<div class="challenge-element">
<i class="material-icons">show_chart</i>
<div class="challenge-info">
<h5>Analytics Dashboard</h5>
<span class="challengers">150 challengers</span>
</div>
<div class="vote">Vote</div>
</div>
<div class="challenge-element">
<i class="material-icons">vertical_split</i>
<div class="challenge-info">
<h5>News App Challenge</h5>
<span class="challengers">160 challengers</span>
</div>
<div class="vote">Vote</div>
</div>
<div class="viewall">View All</div>
</div>
<div class="card">
<span class="title-card">Advert</span>
<div class="placeholder" style="width: 250px"></div>
<div class="placeholder" style="width: 200px"></div>
<div class="placeholder" style="width: 150px"></div>
<div class="placeholder" style="width: 180px"></div>
</div>
</div>
<div class="today s-2">
<h1>Today</h1>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
c486aeec-6646-47a6-a612-1b9f3379bcee/preview.png" />
<div class="card-footer">
<div class="card-info">
<h4>Message App</h4>
<span class="card-maker"></span>
</div>
<span class="costs">FREE</span>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">126</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
f3ff5385-a13d-4336-8146-bcb7b8f3d2f0/preview.jpg" />
<div class="card-footer">
<div class="card-info">
<h4>Devils Backbone Mile 842</h4>
<span class="card-maker">Brian Edward Miller</span>
</div>
<span class="costs"></span>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">199</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img id="porco"
src="https://assets.materialup.com/uploads/
6b9a82e5-89e5-41d9-abc5-7bd2291f3a68/preview.png" />
<div class="card-footer">
<div class="card-info">
<h4>Oneplus 6T Mockup</h4>
<span class="card-maker">Ayushi Patel</span>
</div>
<span class="costs">FREE</span>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">56</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
95f83b0c-45bc-435e-8981-980426dc69e8/preview.jpg" />
<div class="card-footer">
<div class="card-info">
<h4>Boring Flat Design</h4>
<span class="card-maker">Moh. Zainul Muttaqin</span>
</div>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">63</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
da5618d8-56e2-48a2-b9f7-2f94a5c65e4d/teaser.png" />
<div class="card-footer">
<div class="card-info">
<h4>Furniture Shop App</h4>
<span class="card-maker">Muhammad Wildan Wari</span>
</div>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">18</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
b97ad186-7d63-4d19-a789-1e03e61f9f36/preview.png" />
<div class="card-footer">
<div class="card-info">
<h4>City At Night</h4>
<span class="card-maker">Noms Edit (Noman)</span>
</div>
<span class="costs">FREE</span>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">126</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
d50d86d7-a197-4838-ad33-1d173d98409e/teaser.png" />
<div class="card-footer">
<div class="card-info">
<h4>Musicia Web Music App</h4>
<span class="card-maker">Raman Yv ✪</span>
</div>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">203</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
c940a00c-5b9d-48f5-990e-c313b1d88ad0/preview.png" />
<div class="card-footer">
<div class="card-info">
<h4>Dark Landing Page</h4>
<span class="card-maker">Hadi Hafeez</span>
</div>
<span class="costs">FREE</span>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">7</span>
</div>
</div>
</div>
</div>
<div class="yesterday s-2">
<h1>Yesterday</h1>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
75b6c075-0d1a-47c8-81f9-35819d9fa7d0/preview.png" />
<div class="card-footer">
<div class="card-info">
<h4>Space Page</h4>
<span class="card-maker">Julien</span>
</div>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">194</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
3b22b71e-f03a-4005-a046-e2d177f908a8/teaser.png" />
<div class="card-footer">
<div class="card-info">
<h4>Creative Design Agency Header</h4>
<span class="card-maker">Mahir Abrar Akash</span>
</div>
<span class="costs"></span>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">37</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
20c72095-5bd8-4259-8c27-c5e0b12ebc5d/animated_teaser.gif" />
<div class="card-footer">
<div class="card-info">
<h4>Glance Clock Case Study #2</h4>
<span class="card-maker">Halo Lab</span>
</div>
<span class="costs">FREE</span>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">25</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
64a5e896-5bf2-40b1-bbb3-b96640ab2ad3/teaser.png" />
<div class="card-footer">
<div class="card-info">
<h4>Yosemite</h4>
<span class="card-maker">brandnew</span>
</div>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">24</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
2917de44-ef35-4229-ad67-2bf73e2290ff/preview.png" />
<div class="card-footer">
<div class="card-info">
<h4>Ui Crypto Wallet</h4>
<span class="card-maker">uixNinja</span>
</div>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">19</span>
</div>
</div>
</div>
<div class="card">
<div class="add"><i class="material-icons">add</i></div>
<img src="https://assets.materialup.com/uploads/
302100ce-f92b-46b2-b59a-c88dd012ec25/preview.png" />
<div class="card-footer">
<div class="card-info">
<h4>Speed Bike Concept</h4>
<span class="card-maker">Broklin Onjei</span>
</div>
<span class="costs">FREE</span>
<div class="card-vote">
<i class="material-icons up">arrow_drop_up</i>
<span class="upvotes">16</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="module" src="script.js"></script>
</html>
Css Code:
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
background: #f1f1f1;
font-family: Open Sans;
height: 100%;
overflow: auto;
margin: 0;
font-size: 14px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#container {
position: relative;
display: flex;
margin: auto;
height: 100%;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
#container .mockup {
position: relative;
background: #fff;
margin: auto;
width: 100%;
height: 100%;
overflow: hidden;
}
#container .mockup .top {
position: relative;
display: flex;
width: 100%;
height: 55px;
background: #fff;
box-shadow: 0 15px 30px -20px rgba(0, 0, 0, 0.1);
align-items: center;
}
#container .mockup .top .logo {
position: relative;
height: 20px;
margin-left: 20px;
}
#container .mockup .top ul {
display: block;
margin-left: 20px;
padding: 0;
list-style: none;
}
#container .mockup .top ul li {
display: inline-block;
line-height: 35px;
cursor: pointer;
padding: 0 10px;
font-weight: 600;
color: #777;
text-transform: uppercase;
}
#container .mockup .top ul li:hover {
color: #333;
background: rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
#container .mockup .top ul .store {
color: #ff5572;
}
#container .mockup .top ul .more i {
font-size: 24px;
vertical-align: middle;
color: #777;
}
#container .mockup .top .user_control {
flex: 1;
height: 55px;
display: flex;
flex-direction: row-reverse;
align-items: center;
margin-right: 20px;
}
#container .mockup .top .user_control #profile_img {
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
}
#container .mockup .top .user_control #profile_img:hover {
box-shadow: inset 0 2px 10px 1px rgba(0, 0, 0, 0.5);
}
#container .mockup .top .user_control #notifications {
width: 35px;
height: 35px;
margin-right: 20px;
border-radius: 50%;
box-shadow: 0 3px 20px -4px rgba(0, 0, 0, 0.08);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
line-height: 35px;
}
#container .mockup .top .user_control #notifications:hover {
box-shadow: 0 3px 15px -4px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
#container .mockup .top .user_control #notifications:active {
box-shadow: inset 0 2px 15px -4px rgba(0, 0, 0, 0.2);
}
#container .mockup .top .user_control #notifications i {
line-height: 35px;
font-size: 16px;
color: #777;
}
#container .mockup .top .user_control #new {
width: 70px;
height: 35px;
margin-right: 20px;
border-radius: 50px;
box-shadow: 0 3px 20px -4px rgba(0, 0, 0, 0.08);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
line-height: 35px;
text-transform: uppercase;
color: #4d69e6;
font-weight: 600;
}
#container .mockup .top .user_control #new:hover {
box-shadow: 0 3px 15px -4px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
#container .mockup .top .user_control #new:active {
box-shadow: inset 0 2px 15px -4px rgba(0, 0, 0, 0.2);
}
#container .mockup .outer-search {
width: 100%;
position: relative;
}
#container .mockup .outer-search .search-filter {
position: relative;
width: 600px;
margin: auto;
margin-top: 25px;
overflow: hidden;
}
#container .mockup .outer-search .search-filter .search-container {
display: flex;
width: 100%;
height: 40px;
border-radius: 50px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0px 10px 45px -16px rgba(0, 0, 0, 0.1);
align-items: center;
}
#container .mockup .outer-search .search-filter
.search-container .search-icon {
color: #8099aa;
font-size: 22px;
margin: 0 10px;
}
#container .mockup .outer-search .search-filter
.search-container #search {
width: 100%;
padding-left: 15px;
height: 100%;
border-radius: 50px;
border: none;
font-size: 18px;
font-weight: 400;
color: #777;
}
#container .mockup .outer-search .search-filter
.search-container #search::-webkit-input-placeholder {
font-weight: 500;
font-size: 18px;
color: #8099aa;
}
#container .mockup .outer-search .search-filter
.search-container #search:focus {
outline-width: 0;
}
#container .mockup .outer-search .search-filter .filter {
display: flex;
width: 100%;
height: 50px;
margin: 8px 0;
align-items: center;
}
#container .mockup .outer-search .search-filter .filter .pill {
width: 85px;
height: 35px;
margin-right: 10px;
border-radius: 50px;
box-shadow: 0 3px 20px -4px rgba(0, 0, 0, 0.08);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
line-height: 35px;
color: #8099aa;
font-weight: 600;
}
#container .mockup .outer-search .search-filter .filter .pill:hover {
box-shadow: 0 3px 15px -4px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
#container .mockup .outer-search .search-filter .filter .pill:active {
box-shadow: inset 0 2px 15px -4px rgba(0, 0, 0, 0.2);
}
#container .mockup .outer-search .search-filter .filter .active {
background-image: linear-gradient(to right, #0084FF, #58D3FF);
box-shadow: 0 3px 25px -5px #58D3FF;
color: white;
}
#container .mockup .outer-search .search-filter .filter .material-icons {
color: #8099aa;
}
#container .mockup .feeds {
display: flex;
height: calc(100% - 185px);
overflow: auto;
padding-left: 100px;
justify-content: flex-start;
align-content: flex-start;
}
#container .mockup .feeds h1 {
color: #555;
font-weight: 700;
width: 100%;
}
#container .mockup .feeds .s-1,
#container .mockup .feeds .s-2 {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
flex-basis: auto;
}
#container .mockup .feeds .board {
padding-right: 20px;
flex-grow: 0;
flex-basis: 320px;
}
#container .mockup .feeds .top-challenge {
position: relative;
width: 300px;
height: 330px;
border-radius: 15px;
box-shadow: 0 6px 50px -10px #58D3FF;
flex-basis: auto;
flex-shrink: 2;
flex-grow: 2;
margin-bottom: 25px;
margin-right: 20px;
overflow: hidden;
transition: all 0.3s ease;
background-image: url("https://assets.materialup.com/
uploads/55e489cf-8772-4b80-b5a8-e43ead66857f/preview.jpg");
background-size: 158%;
background-position: center;
overflow: hidden;
}
#container .mockup .feeds .top-challenge:hover {
box-shadow: 0 15px 70px -15px #58D3FF;
transition: all 0.3s ease;
}
#container .mockup .feeds .top-challenge .title-card {
position: relative;
display: block;
font-size: 18px;
color: #fff;
padding: 15px 0 0 20px;
font-weight: 600;
z-index: 10;
}
#container .mockup .feeds .top-challenge .card-body {
color: #fff;
padding: 0 20px;
font-size: 13px;
}
#container .mockup .feeds .top-challenge .forwards {
color: #fff;
position: absolute;
bottom: 15px;
right: 20px;
}
#container .mockup .feeds .top-challenge .title-card {
margin-top: 70%;
}
#container .mockup .feeds .top-challenge .overlay {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background-image: linear-gradient(transparent, #58D3FF);
z-index: 0;
}
#container .mockup .feeds .list-challenge {
position: relative;
width: 300px;
height: 250px;
border-radius: 15px;
box-shadow: 0 6px 50px -10px #B864FF;
flex-basis: auto;
flex-shrink: 2;
flex-grow: 2;
margin-bottom: 25px;
margin-right: 20px;
overflow: hidden;
transition: all 0.3s ease;
background-image: linear-gradient(to right, #6823F4, #B864FF);
}
#container .mockup .feeds .list-challenge:hover {
box-shadow: 0 15px 70px -15px #B864FF;
transition: all 0.3s ease;
}
#container .mockup .feeds .list-challenge .title-card {
position: relative;
display: block;
font-size: 18px;
color: #fff;
padding: 15px 0 0 20px;
font-weight: 600;
z-index: 10;
}
#container .mockup .feeds .list-challenge .card-body {
color: #fff;
padding: 0 20px;
font-size: 13px;
}
#container .mockup .feeds .list-challenge .forwards {
color: #fff;
position: absolute;
bottom: 15px;
right: 20px;
}
#container .mockup .feeds .list-challenge .challenge-element {
display: flex;
color: white;
align-items: center;
padding: 10px 20px;
}
#container .mockup .feeds .list-challenge .challenge-element i {
font-size: 18px;
flex: 0;
}
#container .mockup .feeds .list-challenge .challenge-element .challenge-info {
display: flex;
flex-direction: column;
align-content: center;
padding: 0 10px;
flex: 1;
}
#container .mockup .feeds .list-challenge .challenge-element .challenge-info h5 {
margin: 0;
font-size: 14px;
font-weight: 400;
}
#container .mockup .feeds .list-challenge .challenge-element
.challenge-info .challengers {
font-size: 11px;
color: #bbb;
}
#container .mockup .feeds .list-challenge .challenge-element .vote {
width: 74px;
height: 30px;
margin-right: 0px;
border-radius: 50px;
box-shadow: 0 3px 20px -4px rgba(0, 0, 0, 0.08);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
line-height: 30px;
flex-basis: auto;
background: white;
color: #6823F4;
font-weight: 600;
}
#container .mockup .feeds .list-challenge .challenge-element .vote:hover {
box-shadow: 0 3px 15px -4px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
#container .mockup .feeds .list-challenge .challenge-element .vote:active {
box-shadow: inset 0 2px 15px -4px rgba(0, 0, 0, 0.2);
}
#container .mockup .feeds .list-challenge .viewall {
width: 100px;
height: 30px;
margin-right: 0px;
border-radius: 50px;
box-shadow: 0 3px 20px -4px rgba(0, 0, 0, 0.08);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
line-height: 30px;
flex-basis: auto;
background: white;
color: #6823F4;
font-weight: 600;
margin: 6px 20px;
}
#container .mockup .feeds .list-challenge .viewall:hover {
box-shadow: 0 3px 15px -4px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
#container .mockup .feeds .list-challenge .viewall:active {
box-shadow: inset 0 2px 15px -4px rgba(0, 0, 0, 0.2);
}
#container .mockup .feeds .today {
flex-basis: 640px;
flex-grow: 2;
flex-shrink: 2;
}
#container .mockup .feeds .yesterday {
flex-basis: 320px;
flex-grow: 2;
flex-shrink: 3;
}
.card {
position: relative;
width: 300px;
height: auto;
border-radius: 15px;
box-shadow: 0 5px 30px -10px rgba(0, 0, 0, 0.2);
flex-basis: auto;
flex-shrink: 2;
flex-grow: 2;
margin-bottom: 25px;
margin-right: 20px;
overflow: hidden;
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 10px 45px -15px rgba(0, 0, 0, 0.35);
transition: all 0.3s ease;
}
.card .title-card {
position: relative;
display: block;
font-size: 18px;
color: #777;
padding: 15px 0 0 20px;
font-weight: 600;
z-index: 10;
}
.card .card-body {
color: #777;
padding: 0 20px;
font-size: 13px;
}
.card .forwards {
color: #777;
position: absolute;
bottom: 15px;
right: 20px;
}
.card .add {
width: 35px;
height: 35px;
margin-right: 20px;
border-radius: 50%;
box-shadow: 0 3px 20px -4px rgba(0, 0, 0, 0.08);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
line-height: 35px;
position: absolute;
top: 15px;
background: white;
right: 0;
}
.card .add:hover {
box-shadow: 0 3px 15px -4px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
.card .add:active {
box-shadow: inset 0 2px 15px -4px rgba(0, 0, 0, 0.2);
}
.card .add i {
line-height: 35px;
}
.card img {
width: 100%;
cursor: pointer;
}
.card .card-footer {
position: absolute;
display: flex;
bottom: 0;
width: 100%;
min-height: 60px;
height: auto;
background: white;
padding: 5px 20px;
align-items: center;
}
.card .card-footer .card-info {
display: flex;
flex-direction: column;
align-content: center;
flex: 1;
}
.card .card-footer .card-info h4 {
font-size: 14px;
margin: 0;
color: #555;
}
.card .card-footer .card-info .card-maker {
font-size: 12px;
color: #8099aa;
cursor: pointer;
}
.card .card-footer .card-info .card-maker:hover {
text-decoration: underline;
}
.card .card-footer .costs {
color: #8099aa;
margin-right: 10px;
}
.card .card-footer .upvotes {
font-weight: 700;
}
.card .card-footer .card-vote {
display: flex;
flex-direction: column;
color: #777;
align-items: center;
}
.card .card-footer .card-vote .up {
position: absolute;
top: 5px;
}
.placeholder {
height: 18px;
background: #f1f1f1;
border-radius: 20px;
margin: 20px;
}
.doShadow {
z-index: 999;
box-shadow: 0 15px 40px -25px rgba(0, 0, 0, 0.25);
transition: box-shadow 0.4s ease;
display: block;
}
/* width */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
JavaScript Code:
$(".feeds").scroll(function () {
if ($(this).scrollTop() > 50) {
$(".outer-search").addClass("doShadow");
} else {
$(".outer-search").removeClass("doShadow");
}
});
