<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1.0"
>
<
title
>Smooth Scrolling Effect </
title
>
<
style
>
body {
margin: 0;
font-family: Arial, sans-serif;
scroll-behavior: smooth;
}
nav {
background-color: #207217;
padding: 20px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 15px;
}
section {
padding: 50px;
text-align: center;
min-height: 400px;
}
#home {
background-color: #f2f2f2;
}
#about {
background-color: #ffc107;
}
#contacts {
background-color: #28a745;
color: #fff;
}
#courses {
background-color: #007bff;
color: #fff;
}
</
style
>
</
head
>
<
body
>
<
nav
>
GeeksforGeeks
</
a
>
<
a
href
=
"#home"
>Home</
a
>
<
a
href
=
"#about"
>About</
a
>
<
a
href
=
"#contacts"
>Contacts</
a
>
<
a
href
=
"#courses"
>Courses</
a
>
</
nav
>
<
section
id
=
"home"
>
<
h2
>Home Section</
h2
>
<
p
>Welcome to GeeksforGeeks!</
p
>
</
section
>
<
section
id
=
"about"
>
<
h2
>About Section</
h2
>
<
p
>
DSA is defined as a combination of
two separate yet interrelated topics
– Data Structure and Algorithms.
</
p
>
</
section
>
<
section
id
=
"contacts"
>
<
h2
>Contact Us</
h2
>
<
p
>
geeksforgeeks-footer-logo
A-143, 9th Floor, Sovereign Corporate
Tower, Sector-136, Noida, Uttar Pradesh
- 201305
</
p
>
</
section
>
<
section
id
=
"courses"
>
<
h2
>Our Courses</
h2
>
<
p
>DSA, MERN</
p
>
</
section
>
</
body
>
</
html
>