-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
168 lines (150 loc) · 7.75 KB
/
about.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About - Abi Samsu</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.kontainer-about
{
max-width: 800px;
margin: auto;
width: 100%;
margin-top: 100px;
}
.isi-about
{
font-size: 1rem;
line-height: 1.7rem;
margin: 1rem 0;
text-align: justify;
}
#btnScrollToTop
{
position: fixed;
right: 10px;
bottom: 10px;
height: 50px;
width: 50px;
border: none;
background: blue;
color: #fff;
outline: none;
cursor: pointer;
transition: 0.5s;
z-index: 100;
border-radius: 10px;
opacity: 0;
}
#btnScrollToTop.aktif
{
background: blue;
opacity: 1;
}
@media (max-width: 800px)
{
.kontainer-about
{
margin: 0 auto;
width: 90%;
margin-top: 100px;
}
}
</style>
<body>
<button id="btnScrollToTop">
<i class="fa fa-arrow-up"></i>
</button>
<!-- Navbar -->
<div class="container">
<nav class="navbar fixed-top navbar-expand-lg">
<div class="container-fluid">
<a class="brand-navbar">SamsoeSidqy.</a>
<!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<button id="togle" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-4">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- About -->
<div class="kontainer-about">
<div class="isi-about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus cursus, metus at molestie dapibus, lacus est lacinia nisl, non iaculis nunc metus vel tellus. Praesent sodales fermentum mauris, in imperdiet dui blandit faucibus. Suspendisse nec porttitor eros. Maecenas rutrum lectus diam, non lacinia quam convallis vel. Sed nec enim tristique, porta mauris eu, ornare purus. Nullam suscipit libero eget tellus sodales pulvinar. Cras at nulla tellus. Phasellus sed leo at nulla feugiat eleifend.
<p>Etiam congue malesuada diam, id fermentum elit lacinia nec. Mauris porta venenatis ipsum, non tristique ligula. Nunc eget quam sit amet nisi facilisis faucibus. Aenean convallis odio condimentum, fermentum velit at, iaculis nibh. Mauris et facilisis eros. Sed vehicula risus libero, eu vestibulum dolor lobortis non. Fusce auctor et libero eu pulvinar. Mauris ipsum eros, lobortis et elementum at, eleifend vestibulum leo. Vivamus et accumsan orci. Etiam egestas dictum blandit. Aliquam sed ante et erat cursus finibus. Donec vestibulum, libero vitae dictum accumsan, risus nulla blandit ligula, eget viverra augue augue in nulla. Praesent eget aliquam orci. Phasellus suscipit malesuada tristique. Ut condimentum eleifend arcu.</p>
<p>Suspendisse efficitur neque eget mi ultrices molestie. In ac libero molestie, ullamcorper lorem ac, iaculis diam. Sed scelerisque justo ut rutrum convallis. Donec ornare tortor vitae gravida dapibus. Etiam enim nisl, imperdiet sed odio vitae, finibus molestie sem. Phasellus urna risus, dictum feugiat sagittis nec, aliquam hendrerit nunc. Donec sed orci mi. Nam semper sapien a justo tristique, a feugiat nisi tristique. Praesent a imperdiet dui, eget pharetra turpis. Curabitur lorem velit, feugiat quis justo vel, semper tincidunt felis. Praesent lacinia risus nunc, viverra rutrum neque ullamcorper nec. Nullam vitae ex nulla. Ut ullamcorper nulla mattis tincidunt condimentum.</p>
<p>Vivamus euismod iaculis nibh at vehicula. Ut pellentesque dui id est ornare, eu tincidunt tellus vestibulum. Suspendisse eget tortor eu neque tempus luctus in id diam. Praesent condimentum lobortis ante eu volutpat. Proin hendrerit tellus eu luctus scelerisque. Donec tristique tincidunt nisl quis pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel interdum velit. Nulla quam urna, ullamcorper nec arcu at, eleifend semper felis. Nulla semper rutrum sem, eget mattis augue faucibus nec. Nulla eget orci tristique, laoreet tellus quis, imperdiet ipsum. Nunc quis bibendum ex. Vestibulum ut pellentesque odio, at tristique libero. Sed mollis quam augue, non iaculis ante tempor quis. Morbi eu tristique dui, vel porta mi. Suspendisse interdum mattis porttitor.</p>
<p>Nunc fringilla pretium elit. Nam commodo finibus dictum. Ut ut est eu magna maximus dictum sit amet eget tellus. Donec lobortis, mauris ut laoreet congue, sem mauris vulputate est, vitae blandit orci odio sed orci. Aenean id aliquam neque. Curabitur sit amet ligula eget risus interdum facilisis. Aliquam sodales turpis ut mi rutrum, non faucibus leo imperdiet. Vestibulum hendrerit urna ac dolor eleifend, vel pretium nisi cursus. In sit amet ultricies tellus. Curabitur elementum, justo at mollis convallis, lorem leo facilisis lorem, a vestibulum risus ante pellentesque lorem. Vivamus pretium interdum risus sed ornare. In bibendum mauris sed massa vehicula sollicitudin. Duis sodales blandit facilisis.
</p>
</div>
</div>
<!-- Footer -->
<section class="footer">
<div class="social">
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/abi-sidqy-92823024b/"><i class="fa fa-linkedin-square"></i></a>
<a href="https://github.com/SamsuSidqy"><i class="fa fa-github"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</div>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Service</a>
</li>
<li>
<a href="#">Terms</a>
</li>
<li>
<a href="#">Privacy Poilicy</a>
</li>
</ul>
<p class="copyright">
Abi Samsu © All Right Reserved
</p>
</section>
<script>
const togle = document.getElementById('togle');
togle.onclick = function(){
togle.classList.toggle('aktif');
}
</script>
<script>
const btnScrollToTop = document.querySelector("#btnScrollToTop");
btnScrollToTop.addEventListener("click", function () {
// window.scrollTo(0, 0);
window.scrollTo({
top :0,
left:0,
behavior:"smooth"
});
});
window.addEventListener("scroll", () => {
if (window.pageYOffset > 20) {
btnScrollToTop.classList.add('aktif');
}else{
btnScrollToTop.classList.remove('aktif');
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>