Skip to content

Commit d35ebd0

Browse files
author
NaTi Jhon
committed
3. Scroll Bar
1 parent 415844b commit d35ebd0

File tree

3 files changed

+83
-0
lines changed

3 files changed

+83
-0
lines changed

‎3. Scroll Bar/assets/icons8-scroll-bar-96.png

2.67 KB
Loading

‎3. Scroll Bar/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Scroll Bar</title>
7+
<link rel="shortcut icon" href="assets/icons8-scroll-bar-96.png" type="image/x-icon">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<section></section>
12+
<div class="card">
13+
<h1 class="card-title">Title 01</h1>
14+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eum repellat non doloribus itaque quam odit dolore ullam explicabo soluta? Facilis iusto quae temporibus asperiores numquam modi et error a.</p>
15+
</div>
16+
<div class="card">
17+
<h1 class="card-title">Title 02</h1>
18+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eum repellat non doloribus itaque quam odit dolore ullam explicabo soluta? Facilis iusto quae temporibus asperiores numquam modi et error a.</p>
19+
</div>
20+
<div class="card">
21+
<h1 class="card-title">Title 03</h1>
22+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eum repellat non doloribus itaque quam odit dolore ullam explicabo soluta? Facilis iusto quae temporibus asperiores numquam modi et error a.</p>
23+
</div>
24+
<div class="card">
25+
<h1 class="card-title">Title 04</h1>
26+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eum repellat non doloribus itaque quam odit dolore ullam explicabo soluta? Facilis iusto quae temporibus asperiores numquam modi et error a.</p>
27+
</div>
28+
<div class="card">
29+
<h1 class="card-title">Title 05</h1>
30+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, minima? Aliquam sequi et recusandae qui aperiam non eaque, in cum doloremque amet culpa quos, sapiente sunt. Est itaque quo sed.</p>
31+
</div>
32+
<div class="card">
33+
<h1 class="card-title">Title 06</h1>
34+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eum repellat non doloribus itaque quam odit dolore ullam explicabo soluta? Facilis iusto quae temporibus asperiores numquam modi et error a.</p>
35+
</div>
36+
<div class="card">
37+
<h1 class="card-title">Title 07</h1>
38+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eum repellat non doloribus itaque quam odit dolore ullam explicabo soluta? Facilis iusto quae temporibus asperiores numquam modi et error a.</p>
39+
</div>
40+
<div class="card">
41+
<h1 class="card-title">Title 08</h1>
42+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eum repellat non doloribus itaque quam odit dolore ullam explicabo soluta? Facilis iusto quae temporibus asperiores numquam modi et error a.</p>
43+
</div>
44+
<div class="card">
45+
<h1 class="card-title">Title 09</h1>
46+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, a facere, natus accusantium pariatur minus nesciunt, possimus libero fugit illum dolore? Consectetur nihil quibusdam doloremque quaerat tempore natus eveniet sequi!</p>
47+
</div>
48+
49+
</body>
50+
</html>

‎3. Scroll Bar/style.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
body{
9+
background: crimson;
10+
}
11+
h1{
12+
font-size: 25px;
13+
}
14+
.card{
15+
width: 700px;
16+
background: #ccc;
17+
padding: 20px;
18+
margin: 20px;
19+
list-style: 28px;
20+
}
21+
22+
/* Scroll bar styles */
23+
24+
::-webkit-scrollbar{
25+
background-color: transparent;
26+
width: 6px;
27+
}
28+
29+
::-webkit-scrollbar-thumb{
30+
width: 5px;
31+
border-radius: 5px;
32+
background: linear-gradient(to right, #331717, rgb(54, 22, 22));
33+
}

0 commit comments

Comments
 (0)