-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstickky.html
104 lines (100 loc) · 9.86 KB
/
stickky.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky NavBar</title>
<style>
body{
background-color: rgb(93, 137, 4);
margin:0;
padding: 0;
}
.navbar{
top:0;
display: flex;
flex-direction: row;
border: 0%;
padding: 0%;
position: sticky;
width: 100%;
height: 10%;
background-color: rgb(142, 213, 0);
flex-wrap: wrap;
gap:20px;
}
img{
height: 8vh;
}
.buttn:hover{
background: rgba(93, 137, 4, 0.7);
}
p{
font-size: 30px;
}
.scrollingbody{
width: 70%;
height:100%;
align-items: center;
}
span{
display: flex;
justify-content: center;
align-items: center;
}
.icon{
background: none;
}
.icon:hover{
background: rgba(93,137,4,0.5);
}
a{
text-decoration: none;
color:black;
}
a:hover{
color:lime;
}
.btween{
width:300px;
height:300px;
float:left;
margin-right:10px;
margin-bottom:5px;
}
</style>
</head>
<body>
<div class ="navbar">
<div class="icon">
<a href="home"><img src="https://cdn-icons-png.flaticon.com/512/60/60817.png" alt="home_button"></a>
</div>
<div class = "buttn">
<a href="#feattures"><h2>Features</h2></a>
</div>
<div class = "buttn">
<a href="services"><h2>Services</h2></a>
</div>
<div class = "buttn">
<a href="contacts"><h2>Contacts</h2></a>
</div>
<div class = "buttn">
<a href="works"><h2>Our Works</h2></a>
</div>
</div>
<span>
<div class="scrollingbody">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium sunt officia laborum quia quis, nulla sapiente corrupti ipsam temporibus! Debitis placeat odit distinctio veniam itaque nulla, voluptates recusandae quaerat vel ipsa maxime, architecto vero quod. Dolore itaque optio adipisci, ab a officiis porro earum pariatur reiciendis doloribus dignissimos. Accusamus quidem quibusdam ex mollitia, dolores natus tempore illum molestiae cumque officia expedita! Aut odio eos alias sequi nisi quam, numquam sunt consectetur aliquid odit perferendis sapiente corporis, voluptatem quod perspiciatis culpa deserunt quo laborum, doloremque quibusdam provident dignissimos atque. Est possimus dignissimos aperiam ipsum aut repudiandae pariatur fugit, magni iure sit.
Facilis expedita voluptatum reiciendis placeat velit voluptatibus, sed quibusdam, corporis nulla cum corrupti recusandae dolores explicabo distinctio ipsum. Ipsa, optio placeat. Dolor non possimus doloribus aspernatur neque dolore esse earum ipsum quae, a consequuntur officia necessitatibus impedit.</p><img class="btween" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFcrHPWeyzyRZEcQj8Z4GPyZO052a6Cgps7-QwBICz0g&s"><p> Magni architecto, non voluptatem quae distinctio aliquid harum consequuntur amet officia deleniti libero eaque rerum officiis nesciunt, reprehenderit ipsum laboriosam fugiat magnam qui. Amet soluta quo necessitatibus maxime quod tenetur sequi minus odio quae dicta, molestias veniam laudantium repellat aliquid consectetur vero. Quae natus ex doloremque inventore quidem ipsa sunt alias asperiores! Esse at velit labore dolorum, voluptate minima possimus quia enim suscipit.
Voluptatibus esse quibusdam provident voluptate excepturi, dignissimos, illum velit eaque earum distinctio laborum ipsam cum ut a pariatur. Animi sequi rerum quasi aperiam esse, laudantium pariatur accusantium incidunt ducimus id, error eveniet qui, aut blanditiis dolore placeat dolor eaque ab. Rerum voluptates asperiores illo iusto qui quibusdam minima animi accusamus, quos aspernatur laboriosam neque culpa tempora magni doloribus deleniti fugiat consequuntur quas sed eligendi quidem veritatis consectetur officia veniam? Corporis similique ipsa quis iste officia mollitia doloribus officiis odit laboriosam quia aliquam iusto eaque beatae ea sed sint repellat, exercitationem, ipsam dignissimos cupiditate minus. Dolorem qui facere sed aperiam consectetur!
Blanditiis ipsa quod corrupti commodi nisi, maxime dicta illum recusandae laborum neque numquam at molestiae consequatur explicabo fugit inventore nemo et repellat possimus a.
Incidunt ad eligendi id voluptate enim porro, nulla, quidem assumenda unde perferendis iste harum qui nihil magni ipsum doloribus eveniet saepe maiores nostrum maxime consectetur iusto similique architecto! Voluptas quibusdam iste, tempore ut nisi nobis odit corporis voluptatibus dolorum id molestiae magni accusamus vel rem veritatis officiis. Odit veniam doloremque accusantium magnam aperiam similique odio, obcaecati non officia in nulla sapiente ipsum eius numquam quas sequi. Perferendis adipisci unde ea laborum enim. Earum deleniti veniam debitis!
Inventore quae iste, possimus dolores tempore minus harum deleniti cumque aliquid nulla dolor quas adipisci et repellendus perferendis. Suscipit officiis expedita deserunt maxime soluta tenetur sunt et? Unde tempora provident voluptates earum temporibus obcaecati molestias dolores recusandae cupiditate suscipit, incidunt aliquid fuga tenetur sequi cumque quo illum quidem veniam doloribus, accusantium animi dicta, at voluptatum! Veniam temporibus alias atque voluptas aut odio omnis eveniet praesentium laudantium dolore animi impedit quia debitis, tenetur accusantium ab expedita non iusto reprehenderit voluptatibus velit? Dicta facilis officiis, voluptates, non nostrum maxime ipsa placeat ab est nihil atque, ducimus libero. Accusamus quae similique asperiores unde!
Praesentium, soluta distinctio? Non, sint sunt. Cum odio dolorum corrupti! Libero eius eligendi dolore consequuntur totam alias aliquid nesciunt, repellendus sed, quod ut saepe cum rem! Officia rerum sit alias laboriosam error blanditiis repellat. Laborum pariatur fuga deleniti in adipisci magnam corrupti voluptatum, officia recusandae soluta dolore saepe ea aspernatur ipsam laudantium perferendis harum quos, et, ut veniam consequatur. Fuga expedita quam incidunt vitae eligendi dolorum veritatis unde, reprehenderit a aliquam, esse nulla aspernatur blanditiis aliquid praesentium consequuntur non error corporis, iste officia natus dicta quod velit libero. Dolor architecto minus, error molestiae reiciendis voluptas ut similique quis eveniet? Suscipit?
Quaerat rem provident voluptatum enim necessitatibus, vero eveniet eum aperiam nam minus veniam, saepe doloremque iste numquam non illum cum voluptates maiores illo omnis quia ea reiciendis aspernatur neque. Odit iusto dolorum assumenda, vel rem eum dolor neque, quisquam ea id eius magnam, iure numquam dolores dicta reiciendis voluptatibus accusantium illum est earum blanditiis veniam rerum et excepturi. Nobis voluptate mollitia quis molestias tempore eveniet exercitationem ipsam assumenda! Voluptatem, ad? Quod quas minima molestiae perspiciatis ex eius fugiat sed? Facilis ab, enim libero officia similique fugit atque repellendus aperiam? Ea debitis omnis fugiat quo? Aspernatur voluptas cum distinctio deleniti in?
Ipsa a deserunt dolore obcaecati laudantium ea id natus magni possimus modi, libero aliquam nulla error distinctio nesciunt, dolorum hic! Ipsam quaerat harum repudiandae nemo distinctio in, provident perspiciatis officia, autem consequuntur similique inventore earum numquam, doloribus perferendis accusantium magni? Sunt cum similique nisi explicabo incidunt recusandae vel, unde ipsam quibusdam eaque facilis cupiditate illo consequuntur sint. Debitis voluptas reprehenderit voluptatem. Nisi omnis autem mollitia ducimus neque inventore quam at nemo numquam amet, iusto soluta facere in excepturi tenetur reiciendis ad delectus placeat ipsum odio? Unde officia voluptatem ad tenetur culpa, animi amet velit esse doloremque, est ullam repellat? Optio?
Voluptate quas deleniti dicta dolore officiis earum fuga incidunt fugit aliquid quos molestias vitae laboriosam culpa, odio, non, accusamus amet assumenda. Saepe pariatur voluptatem nihil velit tempore soluta tenetur et sed quisquam sunt vel expedita optio itaque, corrupti rerum eligendi! Perferendis aspernatur eaque at blanditiis minus recusandae facilis ex temporibus aliquid officiis deleniti reprehenderit aliquam nulla, itaque culpa quae distinctio doloremque ratione sit nam optio eligendi, enim laborum commodi? Odio ab a recusandae fugit. Tempore suscipit praesentium, facere nobis maxime reiciendis incidunt at error omnis quae minus expedita modi perspiciatis dolor voluptas dignissimos ab labore ipsum? Autem nesciunt inventore fuga.
Similique tempore tempora, est pariatur libero officiis enim! Voluptatem ut necessitatibus quia quisquam rerum corrupti facere perferendis totam veniam sit quos id explicabo deserunt ullam nam blanditiis ab sed ea, a eum. Beatae ullam, voluptatem quae, libero praesentium tempore nobis dolores distinctio ea laudantium, nihil at illo placeat vel aperiam voluptate molestiae adipisci. Unde quidem porro, sequi, vitae explicabo dolorum voluptatum recusandae libero impedit magnam, ipsam quaerat fuga tempore at doloribus quia odio? Magnam eligendi aut qui minus dicta illum, blanditiis eaque repellat perspiciatis ex cupiditate quam. Sequi similique quas fugiat dolorem placeat, quisquam iste obcaecati sint eligendi labore illum.</p>
</div>
</span>
</body>