-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathposition_fixed.html
51 lines (51 loc) · 5.09 KB
/
position_fixed.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
<!DOCTYPE html>
<html>
<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 href="assets/fontawesome/css/all.min.css" rel="stylesheet">
<title>Position: Fixed</title>
<style>
.btn_top {
position: fixed;
bottom: 0;
right: 0;
}
.icon {
font-size: 20px;
color: #555;
border: 1px solid lightgray;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 100%;
margin: 20px;
transition: 0.2s;
}
.icon:hover {
color: white;
background-color: #222;
transition: 0.2s;
margin-bottom: 25px;
}
h1 {
padding-left: 20px;
}
p {
text-align: justify;
padding-left: 20px;
padding-right: 80px;
line-height: 1.5em;
}
</style>
</head>
<body>
<h1 class="top">Position : fixed</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi est, iure harum adipisci suscipit doloremque laboriosam nihil quae pariatur alias quidem deleniti, illo perspiciatis odio omnis! Officia veniam quas animi iure, autem, facere deleniti aspernatur ratione impedit totam recusandae tenetur ipsam nulla dolor, eveniet dolores facilis neque. Totam nihil nesciunt consectetur qui aliquam dolorum, ab, cumque fugit expedita suscipit facilis culpa quidem facere. Consequuntur nam, architecto sint natus ea consectetur ad nulla deleniti obcaecati officia rerum dolores impedit molestiae praesentium maxime placeat eaque reiciendis, voluptatibus similique aspernatur reprehenderit eius odit. Eius ducimus aperiam commodi non, quidem voluptatibus recusandae possimus et fugiat, eos in id repellendus officiis, illum dignissimos? Accusamus quasi, dignissimos tempora maxime, ad blanditiis modi debitis officia assumenda cupiditate necessitatibus nam unde ab illum voluptas iure tempore nisi velit a voluptates sed dolorem! Doloribus, laborum ut reprehenderit rerum adipisci facilis sunt dignissimos rem sequi libero aperiam cupiditate ipsam ducimus ea nobis fuga. Et laborum, corporis fugit facere odit perferendis, quod error enim, quaerat sunt cum quo asperiores vitae molestiae consequatur commodi! Facilis ipsa temporibus blanditiis ex vel, doloribus voluptatibus praesentium deserunt aspernatur expedita placeat earum enim necessitatibus iste natus aut cumque sit consequatur reprehenderit doloremque nemo, quaerat exercitationem officiis error? Dignissimos, officiis asperiores. Sunt totam laudantium, esse itaque molestias atque numquam distinctio! Quam, quos nulla porro aut saepe maxime quae, mollitia, laboriosam illum assumenda officiis tenetur fuga? Reprehenderit ratione odit, et adipisci maiores animi, dicta exercitationem aspernatur labore commodi necessitatibus dolorum laborum. Impedit cum fugiat itaque rerum quia, cumque nemo ducimus iste aut nihil dolore sequi exercitationem pariatur voluptatibus atque magni nesciunt. Assumenda ad, ut recusandae repellat labore quidem, libero ipsa quod, iure eius in deleniti sapiente quas illum? Sequi hic nemo consectetur esse adipisci animi facilis architecto. Ab cupiditate corrupti, quaerat deserunt minus consequuntur laudantium, nulla, debitis a distinctio fuga quis explicabo voluptatibus magnam. Distinctio, sunt? Reiciendis maxime obcaecati tempora, repudiandae labore ex perspiciatis veritatis quasi voluptates velit itaque vel ullam earum laboriosam quidem quam, officia quod, voluptate omnis asperiores. Tempora veritatis excepturi ipsam repellendus asperiores rem omnis, cum minus. Delectus, doloribus excepturi consequuntur fugit commodi harum minima repudiandae fugiat deleniti, aut minus! Perspiciatis aliquam molestiae nihil, impedit repudiandae mollitia veritatis non in! Laudantium tempore eligendi labore delectus inventore dolor, distinctio laboriosam sint soluta obcaecati eos, aliquam voluptate sed id quis? Doloribus labore error perferendis nulla cum voluptatum id ducimus ipsum pariatur! Exercitationem impedit nobis vitae illum neque ipsam pariatur quidem aliquam autem laborum, eum tenetur iure debitis animi, placeat, cupiditate laudantium alias dignissimos ea? Sapiente soluta veritatis, quis est deleniti id iusto ad incidunt blanditiis quae numquam pariatur vero perspiciatis, quas sed placeat beatae praesentium? Nihil at animi esse, similique cupiditate placeat nemo consequuntur. Optio sequi beatae harum repellendus nulla dolor atque quas placeat, voluptatum natus saepe laborum veritatis voluptas consequatur enim cum non perspiciatis soluta sed molestias! Optio officiis voluptatibus aliquid blanditiis iusto saepe, sed error accusamus, nihil dignissimos, vero soluta eius illo perferendis hic nulla. Aliquid sit voluptates illum blanditiis consequuntur nam accusamus commodi similique!
</p>
<a href="#" class="btn_top"><i class="icon fa fa-arrow-up"></i></a>
</body>
</html>