1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+
4
+ < head >
5
+ < meta charset ="UTF-8 ">
6
+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
7
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
8
+ < title > Document</ title >
9
+ < style >
10
+ body {
11
+ margin : 0 ;
12
+ padding : 0 ;
13
+ background : radial-gradient (pink, violet, rgb (202 , 46 , 202 ));
14
+ font-family : 'Fantasy' ;
15
+ background-size : 'cover' ;
16
+ }
17
+
18
+ .hero {
19
+ margin-top : 15% ;
20
+ text-align : center;
21
+ font-family : 'Times New Roman' ;
22
+ }
23
+
24
+ .hero h1 {
25
+ font-size : 300px ;
26
+ padding : 0 ;
27
+ margin : 0 ;
28
+ }
29
+
30
+ .hero p {
31
+ font-size : 40px ;
32
+ padding : 0 ;
33
+ margin : 0 ;
34
+ }
35
+
36
+ .about {
37
+ font-family : 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif;
38
+ }
39
+
40
+ .about h2 {
41
+ font-size : 65px ;
42
+ padding : 0 ;
43
+ margin-top : 30% ;
44
+ text-align : center;
45
+ }
46
+
47
+ .about p {
48
+ padding : 0 ;
49
+ padding-left : 10px ;
50
+ }
51
+
52
+ .contact {
53
+ font-family : 'Gill Sans' , 'Gill Sans MT' , Calibri, 'Trebuchet MS' , sans-serif;
54
+ text-align : right;
55
+ margin-top : 10%
56
+ }
57
+
58
+ nav {
59
+ background-color : # 7b3fa6 ;
60
+ padding : 20px ;
61
+ position : fixed;
62
+ top : 0 ;
63
+ width : 100% ;
64
+ z-index : 1 ;
65
+ font-family : 'Segoe UI' ;
66
+ }
67
+
68
+ nav ul {
69
+ display : flex;
70
+ justify-content : space-between;
71
+ list-style : none;
72
+ margin : 0 ;
73
+ padding : 0 ;
74
+ }
75
+
76
+ nav ul li {
77
+ margin : 0 30px ;
78
+ }
79
+
80
+ nav a {
81
+ color : white;
82
+ text-decoration : none;
83
+ }
84
+
85
+
86
+ </ style >
87
+
88
+ </ head >
89
+
90
+ < body >
91
+
92
+ < div class ="preloader ">
93
+ < div class ="loading-bar "> </ div >
94
+ < div class ="loading-bar "> </ div >
95
+ < div class ="loading-bar "> </ div >
96
+ < div class ="loading-bar "> </ div >
97
+ </ div >
98
+
99
+
100
+ < nav >
101
+ < ul >
102
+ < li > < a href ="#Home "> Home</ a > </ li >
103
+ < li > < a href ="#About "> About</ a > </ li >
104
+ < li > < a href ="#Contact "> Contact</ a > </ li >
105
+ </ ul >
106
+ </ nav >
107
+ < div class ="hero " id ="Home ">
108
+ < h1 > RE:han</ h1 >
109
+ < p > The World In Our Hand</ p >
110
+ </ div >
111
+ < div class ="about " id ="About ">
112
+ < h2 > About Project</ h2 >
113
+ < p > Project was made by Tegar inspired from Fathir and Rehan</ p >
114
+ < p > This project may cannot be continued cause ive been stucked on my mind learning html and yeah just this xD
115
+ </ p >
116
+ </ div >
117
+
118
+ < div class ="contact " id ="Contact ">
119
+ < h3 > Contact Me!!</ h3 >
120
+
121
+ </ div >
122
+
123
+ < script >
124
+
125
+
126
+
127
+ // Select all the links in the navigation
128
+ const navLinks = document . querySelectorAll ( "nav a" ) ;
129
+
130
+ // Add an event listener to each link
131
+ navLinks . forEach ( ( link ) => {
132
+ link . addEventListener ( "click" , ( event ) => {
133
+ // Prevent the default behavior of the link (jumping to the target)
134
+ event . preventDefault ( ) ;
135
+
136
+ // Get the target element based on the link's href
137
+ const targetId = event . target . getAttribute ( "href" ) ;
138
+ const targetElement = document . querySelector ( targetId ) ;
139
+
140
+ // Animate the scroll to the target element
141
+ window . scroll ( {
142
+ top : targetElement . offsetTop ,
143
+ behavior : "smooth" ,
144
+ } ) ;
145
+ } ) ;
146
+ } ) ;
147
+
148
+ </ script >
149
+
150
+
151
+ </ body >
152
+
153
+ </ html >
0 commit comments