This repository has been archived by the owner on May 30, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
187 lines (154 loc) · 5.71 KB
/
index.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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>halo</title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}
*{
padding: 0;
margin: 0;
}
bodym{
overflow-x: hidden;
}
/* hamburger menu */
.menu-togle {
display:none;
flex-direction: column;
height:20px;
justify-content: space-between;
position: relative;
}
.menu-togle input{
position: absolute;
width: 37px;
height:37px;
top: -4px;
left:-3px;
opacity: 0;
cursor: pointer;
z-index: 7;
}
.menu-togle span{
display:block;
width:28px;
height:3px;
background-color: #fff;
border-top: 1px;
transition: 0.5s;
}
/* hamburger animation */
.menu-togle span:nth-child(2) {
transform-origin: 0 0;
}
.menu-togle span:nth-child(4) {
transform-origin: 0 0;
}
.menu-togle input:checked ~ span:nth-child(2) {
transform: rotate(45deg) translate(-1px, -2px);
color:#fff;
}
.menu-togle input:checked~span:nth-child(3) {
transform:scale(0);opacity: 0;
}
.menu-togle input:checked~span:nth-child(4) {
transform: rotate(-45deg) translate(-1px, -1px);
color:#fff;
}
/* navigasi */
.menu-togle {
display: flex;
}
nav ul.slide {
transform: translateX(0);
}
/* navigasi terbang cuk*/
#menukuh :hover{ background: red;transition: 1s;}
#menukuh { width:10%!important ;
display: flex; position:fixed;
top:0px;
z-index:100;height:60px;
}
#tag-menu { display:none; }
#tag-menu:checked ~ div.jw-drawer { animation: slide-in 0.5s ease-in-out; animation-fill-mode: forwards;
}
.jw-drawer { position:fixed; left:-400px; background-color:#5b5bff; height:100%; z-index:1; width:360px; top:65px;animation: slide-out 0.5s ease;
}
.jw-drawer ul li { list-style:none; display: block;}
.jw-drawer ul li a { padding:10px 20px; text-decoration:none; display:block; color:#FFF; border-top:1px solid #0000a0; }
.jw-drawer ul li a:hover{ background-color:rgba(0, 0, 0, 0.1); }
.jw-drawer ul li a i { width:50px; height:35px; text-align:center; padding-top:15px; }
.nano {
background: rgba(10, 0, 0, 0.1);
height: 70px;
width: 70px;
}
/* animasi */
@keyframes slide-in { from {left: -400px;} to {left: 0;} } @keyframes slide-out { from {left: 0;} to {left: -400px;} }
.content{ pading: 100px 0 0 250px; }
.gn-scroller {overflow-y: scroll;height: 100%;}
#follow-on-sidmar img{width: 13%;height: 30px;}
/* .container {
display: inline-block;
cursor: pointer;
top:100px;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
cursor: pointer;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
} */
</style>
</head>
<body>
<div class='content'>
<div id='menukuh' class='menu-ogle' >
<input id='tag-menu' class='container' type='checkbox'/>
<label class="container" for='tag-menu'>
<div class="nano menu-togle">
<input type="checkbox" class="togles" />
<span></span>
<span></span>
<span></span>
</div>
</label><div class='jw-drawer'><nav class='gn-scroller'>
<ul>
<li> <href="#">halo</a></li>
<li> <href="#">halo</a></li>
<li> <href="#">halo</a></li>
<li> <href="#">halo</a></li>
</ul>
</nav> </div> </div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis molestias laborum debitis unde dolorum molestiae natus, ea sequi, sunt at ad cumque quo dolor repellendus reprehenderit est aliquid. Similique, consequuntur?</div>
<div>Dolores sit repellendus odio laboriosam maiores molestias laborum corporis possimus magni, voluptatibus esse ratione autem cumque in suscipit aspernatur hic animi cum labore mollitia aperiam sapiente ex atque doloribus! Ex.</div>
<div>Repellat doloribus mollitia provident nulla, quae delectus distinctio dicta deserunt fugiat minus enim reiciendis velit nam eum quisquam magni ratione dolores. Rem reprehenderit vero molestias corporis illum, laborum totam! Quasi!</div>
<div>Quas at dignissimos, atque non quod dolorem, eveniet nulla porro enim dolorum tempora hic quo. Eius eos quas quos, ullam repellendus aut dolores, corporis reprehenderit qui, laborum dolorem totam soluta.</div>
<div>Dolorem quod, accusamus culpa illum voluptatibus quis nulla labore veritatis consectetur quasi, saepe recusandae doloremque ullam dolores asperiores amet eius ea error adipisci. Sequi placeat, sed. Velit in excepturi asperiores!</div>
<div>Ipsa quisquam harum facilis expedita sed, amet quasi ipsam culpa minima a explicabo totam cumque vel numquam eos rerum ea quam porro neque officia perspiciatis laborum. Quos deleniti, similique consequuntur?</div>
<div>Tenetur omnis, porro at explicabo eaque neque a. Commodi soluta cupiditate, ut explicabo harum excepturi quisquam beatae, molestias fuga cum assumenda esse tenetur inventore, eius animi ducimus! Fugiat, officia, qui?</div>
<div>Distinctio reprehenderit veritatis nemo natus eligendi vitae aut illum, unde qui velit! Illo officia nemo adipisci laudantium incidunt officiis voluptas cumque. Necessitatibus temporibus nulla sint voluptate quibusdam quisquam porro nihil.</div>
<div>Nesciunt libero, doloremque qui debitis culpa temporibus pariatur sunt iure voluptas sed facilis consequuntur dolore rem ducimus veniam, ipsa aperiam animi tempora architecto obcaecati maiores expedita saepe adipisci consectetur! Commodi.</div>
<div>Ratione perferendis et, quis quo doloremque explicabo nihil vel earum maxime assumenda, mollitia provident atque accusamus iure rerum. Ipsa rerum quaerat vitae explicabo dignissimos et doloremque corrupti, odio ratione aliquid.</div>
<!-- <script>
function myFunction(x) {
x.classList.toggle("change");
}
</script> -->
</body>
</html>