WEB DESIGNING
Q.1 : Create a static webpage using table tags of
HTML.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Q.2 : Create a static web page which defines all text
formatting tags of HTML in tabular format.
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
Q.3 : Create a webpage using list tags of HTML
<html>
<head>
<title>ordered list</title>
</head>
<body>
<ul>
<li>c </li>
<li>c++ </li>
<li>Java</li>
<li>Python</li>
<li>Javascript</li>
</ul>
</body>
</html>
Q.4 : Create webpage to include image using HTML
tag.
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for the
referenced image.
The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
The <img> tag has two required attributes:
• Src – Specifies the path to the image
• Alt – Specifies an alternate text for the image
Syntax : <img src=”url” alt=”alternatetext”>
Q.5 : Create employee registration webpage using
HTML form objects.
<!DOCTYPE html>
<html>
<body>
<center>
<img src=”D:\Sindhu Ray\Desktop\1869679.png” height=”52”>
<font size=”+3” color=red>employee registration from</font>
<from method=post action=”prac.html”></table></from>
</center>
<tr>
<td></td>
<td><input type=radio name=initial checked>mr.
<input type=radio name=initial checked>mrs.
<input type=radio name=initial checked>ms.</td><br><br>
</tr>
<tr>
<td></td>
<td>first name</td>
<td><input type=text name=in placeholder=”first
name”</td><br>
</tr>
<tr>
<td>last name</td>
<td><input type=text name=in placeholder=”last
name”</td><br>
</tr>
<tr>
<td>mail address1</td>
<td><input type=text name=add1</td><br>
</tr>
<tr>
<td>mail address2</td>
<td><input type=text name=add2</td><br>
</tr>
<tr>
<td>state</td>
<td><select name=state>
<option value=”gujarat”>gujarat</option>
<option value=”maharastra”>maharastra</option>
<option value=”karnataka”>karnataka</option>
<option value=”delhi”>delhi</option></td><br>
</tr>
<tr>
<td>zip</td>
<td><input type=text name=zip></td><br>
</tr>
<tr>
<td>upload photo</upload></td>
<td><input type=file name=photo</td><br>
</tr>
<tr>
<td>mobile</td>
<td><input type=text name=mob placeholder=”+91”</td><br>
</tr>
<tr>
<td>e-mail</td>
<td><input type=text name=email size=30</td><br>
</tr>
<tr>
<td>languages known</td>
<td><input type=”checkbox” name=”1k” value =gujarati
checked>gujarati</td><br>
</tr>
<tr>
<td></td>
<td><input type=”checkbox” name=”1k” value =english
checked>english</td><br>
</tr>
<tr>
<td></td>
<td><input type=”checkbox” name=”1k” value =hindi
checked>hindi</td><br>
</tr>
<tr>
<td></td>
<td><input type=”checkbox” name=”1k” value =marathi
checked>marathi</td><br>
</tr>
<tr>
<td>additional information</td><br>
<td><textarea name=add rows=3 cols=20 placeholder=”optional”
wrap></textarea></td>
</tr>
<tr>
<td></td>
<td><input type=submit value=submit> <input type=reset
value=”reset”</td>
</tr>
</body>
</html>
Q.6 : Create an HTML file (e.g. first_page.html) that
specifies a page that contains a heading and two
paragraphs of text. Use the HTML tags <h1>, </h1>,
<p> and </p> in this exercise.
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
</head>
<body>
<h1>Heading</h1>
<p>This is another page.</p>
<p>Here are a couple of paragraphs.</p>
</body>
</html>
• HTML Headings Syntax:
<h1>TEXT</h1>
• HTML Paragraph Syntax:
<p>Paragraph Content</p>
• Unordered HTML List : An unordered list starts with the
<ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles)
by default -
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• Unordered HTML List : The CSS list-style-type property is
used to define the style of the list item marker. It can have one
of the following values
<ul style=”list-style-type:disc;”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• <ul>: The Unordered List element
<ul>
<li>Milk</li>
<li>
Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
• Converting an unordered list (using <ul> and </ul> tags) to an
ordered list (using <ol> and </ol>) changes the list’s
appearance and semantic meaning. The <ul> tag displays
items with bullet points, while the <ol> tag displays items with
numerical or alphabetical markers (defaulting to numbers).
Here’s how the conversion changes the list:
1. Appearance:
<ul> (Unordered):
Each list item (<li>) is typically displayed with a bullet point (disc)
before it.
<ol> (Ordered):
Each list item is displayed with a numbered marker (1, 2, 3…) by
default. You can also customize the marker type using the type
attribute (e.g., type=”A” for letters).
2. Semantic Meaning:
<ul> (Unordered):
Indicates that the order of the items is not significant. The items
could be rearranged without affecting the overall meaning of the list.
<ol> (Ordered):
Indicates that the order of the items is important. Changing the
order of items would alter the meaning or purpose of the list.
<!—Unordered List →
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!—Ordered List →
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
• Add an image to your web page. In this exercise you must use
the <img> tag. As an image, you Can use any .jpg or .png file
you find on the Internet.
To embed an image in a web page using the <img> tag, you’ll need to
specify the image source (URL) and optionally include attributes like
alt (alternative text) and width/height. The basic syntax is:
<img src=”image_source_url.jpg” alt=”Alternative text”
width=”width_in_pixels” height=”height_in_pixels”>
Q.7 : Create another .html file that contains a
heading and a couple of paragraphs. You could
name this new file another page.html, and you
should place it into the same folder where your first
.html is. After you have created the new .html page,
add a link to the first page so that the browser will
load another_page.html when you click the text Go
to the other page. In the first page. You need to use
the <a> and </a> tags in this exercise. Inside the tag
<a> you need to use a href attribute that specifies
which page will be loaded when the link is clicked.
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
</head>
<body>
<h1>Heading</h1>
<p>This is another page.</p>
<p>Here are a couple of paragraphs.</p>
</body>
</html>
To add a link to the first page that will load “another_page.html”
when clicked, open your first HTML file in a text editor.
Inside the body tag, add the following code :
<a href=”another_page.html”>Go to the other page</a>
Now, when you open your first HTML file in a web browser, you will
see the text “Go to the other page”. Clicking on this text will load the
“another_page.html” file.
Q. 8 : HTML tags like <a> can have certain
attributes. The href attribute is mandatory in the
<a> tag. Additionally it is possible to use the title
attribute which specifies a text that emerges when
the mouse cursor is moved above a link. This kind
of text is called a tool tip. Modify the link that you
created in the previous exercise so that a tool tip
says “This leads you to another page.” When the
mouse cursor is over the link.
To add a tooltip “This leads you to another page.” To a link, you need
to use the title attribute within the <a> tag. Here’s how:
<a href=”your-link-url” title=”This leads you to another page.”>Your
Link Text</a>
Explanation :
• <a> tag: This tag defines a hyperlink.
• Href: This attribute specifies the URL the link will navigate to.
• Title: This attribute provides additional information about the
element, often displayed as a tooltip when the mouse hovers
over it.
• Your Link Text: This is the visible text that the user will click on.
Q.9 : It is possible to use a picture (image) as a link.
Modify your page so that the picture that is on your
page will also serve as a link that leads to another
page.
To use an image as a clickable link in HTML, you need to wrap the
<img> tag within an <a> tag, which defines the hyperlink. The <a>
tag’s href attribute will specify the destination URL of the link.
<a href=”destination_page.html”>
<img src=”image.jpg” alt=”Clickable Image” />
</a>
Explanation :
• <a>: This tag creates the hyperlink.
• Href=”destination_page.html”: This attribute specifies the URL
of the page you want the link to lead to (replace
destination_page.html with the actual path).
• <img>: This tag displays the image.
• Src=”image.jpg”: This attribute specifies the path to your
image file (replace image.jpg with the actual path to your
image).
• Alt=”Clickable Image”: This attribute provides alternative text
for accessibility and SEO. It’s recommended to provide a
description of the image, especially for accessibility.
Q.10 : Design a website for a College. There should be at
least 15 web-pages present in the web-site. There should
be: One Home page that leads to other pages. The Home
page should contain the name of the college as heading
along with the college logo. There should be a tab with
the following links:
• Home
• Academics
• Admission
• Gallery
• There should be an appropriate description of the
college on the home
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport”
Content=”width=device-width, initial-scale=1.0”>
<title>Navigation Bar</title>
<link rel=”stylesheet” href=
https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<header class=”header”>
<a href=”/”>
<img src=https://media.geeksforgeeks.org/gfg-gg-logo.svg
Alt=”Brand logo”>
<span class=”brand-logo-name”>
GFG School
</span>
</a>
<nav class=”navbar”>
<ul class=”navbar-lists” id=”myTopnav”>
<li>
<I class=”fas fa-home”></i>
<a class=”navbar-link home-link” href=”#”>
Home</a>
</li>
<li>
<I class=”fas fa-user”></i>
<a class=”navbar-link about-link”
Href=”#about-us-section”>
About Us
</a>
</li>
<li>
<I class=”fas fa-envelope”></i>
<a class=”navbar-link contact-link”
Href=”#contact-form”>
Contact Us
</a>
</li>
<li>
<I class=”fas fa-bullhorn”></i>
<a class=”navbar-link service-link”
Href=”#notice-bord-sction”>
Notice Board
</a>
</li>
<li><I class=”fas fa-map-marked-alt”></i>
<a class=”navbar-link contact-link”
Href=”#campus-on-map”>
Our Campus
</a>
</li>
</ul>
<a href=”javascript:void(0);”
Class=”icon” onclick=”myFunction()”>
<I class=”fa fa-bars”></i>
</a>
</nav>
</header>
<main>
<div class=”school-img-container”>
<div class=”img-container”>
<img src=
https://coworkingers.com/wp-
content/uploads/2023/08/IMG_20210718_095744_524-min.jpg
alt=”school img” class=”school-img”>
<h1 class=”img-title”>
Welcome to Geeksforgeeks School
</h1>
</div>
</div>
<section id=”vision”>
<h2 class=”vision-heading”>Our Vision</h2>
<p>At gfg, we envision a learning community where every
Student is inspired to reach their full potential. We
Strive to cultivate a nurturing environment that fosters
Curiosity, creativity, and critical thinking skills.
Our aim is to empower students to become lifelong learners,
Compassionate leaders, and responsible global citizens.
Through innovative teaching methods, personalized
support,
And a diverse range of opportunities
</p>
</section>
<div class=”main-notice-section”
Id=”notice-bord-sction”>
<div class=”notice-container”>
<div class=”notice-bord”>
<h2 class=”notice-bord-heading”>
Campus Notice Board
</h2>
<div>
<ul>
<li>
<i>April 1, 2023:</i>
Inauguration ceremony for
The new academic year.
<span class=”new-text”>New</span>
</li>
<li>
<i>April 15, 2023:</i>
Science fair showcasing
Innovative student projects.
<span class=”new-text”>New</span>
</li>
<li>
<i>April 30, 2023:</i>
Cultural extravaganza featuring
Dance, music, and drama performances.
<span class=”new-text”>New</span>
</li>
</ul>
</div>
</div>
<!—Events Section →
<div class=”event-card”>
<h2 class=”event-heading”>Upcoming Events</h2>
<div class=”event-details”>
<div class=”event”>
<h3>Event Name 1</h3>
<p>Date: April 15, 2024</p>
<p>Time: 9:00 AM – 12:00 PM</p>
<p>Location: School Auditorium</p>
<p>
<strong>Description:</strong>
Quiz competition.
</p>
</div>
<div class=”event”>
<h3>Event Name 2</h3>
<p>Date: April 20, 2024</p>
<p>Time: 2:00 PM – 5:00 PM</p>
<p>Location: Sports Ground</p>
<p>
<strong>Description:</strong>
Cricket tournament.
</p>
</div>
</div>
</div>
</div>
</div>
<section id=”about-us-section”>
<div class=”about-us-container”>
<h2 class=”aboutus-heading”>About Us</h2>
<p>
<strong class=”subheading”>
Company Profile and Brand:
</strong>
GeeksforGeeks is a leading platform that
Provides computer science resources and
Coding challenges for programmers and
Technology enthusiasts, along with interview
And exam preparations for upcoming aspirants.
With a strong emphasis on enhancing coding
Skills and knowledge, it has become a trusted
Destination for over 12 million plus registered
Users worldwide.
</p>
</div>
</section>
<section class=”our-school-map” id=”campus-on-map”>
<h2 class=”location-heading”>
Find Our Location On Map
</h2>
<iframe src=
https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d47
169.795533326396!2d77.38522794611738!3d28.51217402233223!
2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce626
851f7009%3A0x621185133cfd1ad1!2sGeeksforGeeks%20%7C%20
Coding%20Classes!5e0!3m2!1sen!2sin!4v1712429105950!5m2!1s
en!2sin
width=”100%” height=”450”
style=”border:0;”
loading=”lazy”
referrerpolicy=”no-referrer-when-downgrade”>
</iframe>
</section>
<section id=”contact-form”>
<h2 class=”contact-form-heading”>
Contact Us Form
</h2>
<div class=”container”>
<form id=”contactForm”>
<div class=”form-group”>
<label for=”fullName”>
Full Name
</label>
<input type=”text” id=”fullName”
Name=”fullName” required>
</div>
<div class=”form-group”>
<label for=”email”>Email</label>
<input type=”email” id=”email”
Name=”email” required>
</div>
<div class=”form-group”>
<label for=”phone”>Phone</label>
<input type=”text” id=”phone”
Name=”phone” required>
</div>
<div class=”form-group”>
<label for=”message”>Message</label>
<textarea id=”message” name=”message”
Required>
</textarea>
</div>
<button type=”submit”>Submit</button>
</form>
</div>
</section>
</main>
<footer>
<p>© 2024 My School. All rights reserved.</p>
</footer>
<script src=”index.js”></script>
</body>
</html>
CSS
• {
Margin: 0;
Padding: 0;
Box-sizing: border-box;
}
Html {
Overflow-x: hidden;
}
:root {
--primary-color: #8490ff;
--secondary-color: #212121;
--bg: #fff;
--text-color: #333;
--bg-gray: #f2f2f2;
--header-green-color: #36ed22;
}
Body {
Font-family: Arial, sans-serif;
Background-color: #fff;
Color: #333;
Line-height: 1.6;
Overflow-x: hidden;
}
.brand-logo-name {
Text-decoration: none;
Color: #fff;
Font-size: 1.75rem;
Padding: 5px;
}
A{
Text-decoration: none;
Color: #8490ff;
Transition: color 0.3s ease;
}
A:hover {
Color: #212121;
}
.header {
Padding: 1.6rem 4.8rem;
Display: flex;
Justify-content: space-between;
Align-items: center;
Background-color: #36ed22;
Box-shadow: 0px 0px 20px 0px rgba(132, 144, 255, 0.2);
Width: 100%;
Height: 10vh;
}
.header img {
Height: 30px;
Padding-top: 8px;
}
.navbar-lists {
List-style-type: none;
Margin: 0;
Padding: 0;
Display: flex;
}
.navbar-lists li {
Margin-right: 20px;
}
.navbar-lists li:last-child {
Margin-right: 0;
}
.navbar-link {
Color: #fff;
Padding: 10px;
Transition: background-color 0.3s;
}
.icon {
Display: none;
}
.navbar-lists li:nth-child(1) I {
Color: rgb(221, 228, 215);
}
.navbar-lists li:nth-child(2) I {
Color: rgb(240, 237, 64);
}
.navbar-lists li:nth-child(3) I {
Color: rgb(11, 12, 11);
}
.navbar-lists li:nth-child(4) I {
Color: orange;
}
.navbar-lists li:nth-child(5) I {
Color: rgb(33, 105, 239);
}
@media screen and (max-width: 768px) {
.icon {
Display: flex;
Position: absolute;
Top: 20px;
Right: 20px;
z-index: 999;
color: #fff;
font-size: 24px;
cursor: pointer;
flex-direction: row-reverse;
}
.navbar-lists {
Display: none;
Position: absolute;
Top: 60px;
Left: 0;
Background-color: #3beb2b;
Width: 100%;
Padding-top: 10px;
z-index: 998;
}
.navbar-lists.responsive {
Display: flex;
Flex-direction: column;
Align-items: center;
}
.navbar-lists.responsive li {
Margin: 10px 0;
}
.navbar-link {
Padding: 10px 20px;
}
.navbar-link I {
Display: none;
}
}
.school-img {
Width: 100%;
Height: 75vh;
Object-fit: cover;
}
.img-container {
Position: relative;
}
.img-title {
Position: absolute;
Top: 50%;
Left: 50%;
Transform: translate(-50%, -50%);
Background: #fff;
Color: #1bf346;
Padding: 1rem 2rem;
Text-align: center;
Border-radius: 0.5rem;
Animation: img-blink 2s infinite alternate;
}
@keyframes img-blink {
From {
Opacity: 1;
}
To {
Opacity: 0.5;
}
}
#vision {
Padding: 4rem 0;
Background-color: rgb(28, 225, 97);
}
#vision h2 {
Text-align: center;
Color: var(--bg);
Font-size: 2.5rem;
Margin-bottom: 2rem;
}
#vision p {
Text-align: center;
Color: var(--secondary-color);
Font-size: 1.125rem;
}
.main-notice-section {
Background-color: var(--bg);
Padding: 4rem 0;
Margin-left: 3rem;
Overflow: auto;
}
.notice-container {
Display: flex;
Flex-wrap: wrap;
Justify-content: space-between;
}
.notice-bord,
.event-card {
Width: 50%;
Margin-bottom: 2rem;
}
.notice-bord {
Background-color: #f5f5f5;
Padding: 20px;
Border-radius: 10px;
Box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.notice-bord h2 {
Color: var(--primary-color);
Margin-bottom: 1.5rem;
Font-size: 1.75rem;
Margin-left: 5rem;
}
.notice-bord li {
Padding: 10px;
Background-color: #fff;
Border-radius: 5px;
Box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
Margin-bottom: 1rem;
List-style: none;
Cursor: pointer;
}
.notice-bord li img {
Width: 20px;
Height: 20px;
Margin-right: 10px;
}
.notice-bord li p {
Margin: 0;
Color: var(--text-color);
}
.event-card {
Background-color: #fff;
Padding: 20px;
Border-radius: 10px;
Box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.event-card .event-heading {
Color: var(--header-green-color);
Margin-bottom: 1.5rem;
Font-size: 1.75rem;
Text-align: center;
}
.event-details {
Display: flex;
Flex-direction: column;
Align-items: center;
}
.event {
Width: 50%;
Background-color: #ffffff;
Padding: 20px;
Border-radius: 10px;
Box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
Margin-bottom: 1rem;
Animation: fadeInUp 1s ease forwards;
Transition: transform 0.3s ease,
Box-shadow 0.3s ease,
Background-color 0.3s ease;
Cursor: pointer;
}
.event:hover {
Transform: translateY(-5px);
Box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
Background-color: #1bf346;
Color: #fff;
}
.event h3 {
Color: var(--secondary-color);
Margin-bottom: 0.5rem;
}
.event p {
Margin-bottom: 0.5rem;
}
@keyframes fadeInUp {
0% {
Opacity: 0;
Transform: translateY(20px);
}
100% {
Opacity: 1;
Transform: translateY(0);
}
}
@media screen and (max-width: 768px) {
.notice-container {
Flex-direction: column;
}
.notice-bord,
.event-card {
Width: calc(100% - 20px);
Margin-left: auto;
Margin-right: auto;
}
.event-card {
Margin-top: 2rem;
}
}
Footer {
Text-align: center;
Padding: 2rem 0;
Background-color: var(--secondary-color);
Color: #fff;
Height: 10vh;
}
.contact-form-heading {
Color: #007bff;
}
#contact-form {
Max-width: 600px;
Margin: 0 auto;
Padding: 30px;
Background-color: #f9f9f9;
Border-radius: 10px;
Box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#contact-form h2 {
Text-align: center;
Margin-bottom: 30px;
}
.form-group {
Margin-bottom: 20px;
}
Label {
Display: block;
Font-weight: bold;
Margin-bottom: 5px;
}
Input[type=”text”],
Input[type=”email”],
Textarea {
Width: 100%;
Padding: 10px;
Border: 1px solid #ccc;
Border-radius: 5px;
}
Textarea {
Height: 100px;
}
Button[type=”submit”] {
Display: block;
Width: 100%;
Padding: 10px;
Background-color: #007bff;
Color: #fff;
Border: none;
Border-radius: 5px;
Cursor: pointer;
Transition: background-color 0.3s ease;
}
Button[type=”submit”]:hover {
Background-color: #0056b3;
}
.aboutus-heading {
Font-size: 2.5rem;
Margin-bottom: 30px;
Color: #fff;
}
.subheading {
Color: #000;
}
#about-us-section {
Background: rgb(28, 225, 97);
Text-align: center;
Width: 90%;
Margin: 0 auto;
Margin-bottom: 3rem;
Padding-bottom: 20px;
Border: 3px solid rgb(28, 225, 97);
Border-radius: 5px;
}
.about-us-container {
Max-width: 800px;
Margin: 0 auto;
Padding: 0 20px;
}
.subheading {
Color: #000;
}
.about-us-container p {
Font-size: 1.125rem;
Line-height: 1.6;
Color: black;
Text-align: left;
}
.about-us-container p:first-of-type {
Margin-top: 0;
}
.about-us-container p:last-of-type {
Margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.aboutus-heading {
Font-size: 2rem;
}
.about-us-container p {
Font-size: 1rem;
}
}
.our-school-map {
Text-align: center;
}
.location-heading {
Font-size: 2.5rem;
Color: var(--primary-color);
Margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
.location-heading {
Font-size: 2rem;
}
.our-school-map iframe {
Width: 90%;
Max-width: 100%;
Height: 300px;
Margin: 0 auto;
}
}
.new-text {
Color: red;
Animation: blink 1s infinite alternate;
}
@keyframes blink {
From {
Opacity: 1;
}
To {
Opacity: 0.5;
}
}
JavaScript
Function myFunction() {
Let x = document.getElementById(“myTopnav”);
If (x.className === “navbar-lists”) {
x.className += “ responsive”;
} else {
x.className = “navbar-lists”;
}
}
Const scrollLinks = document.querySelectorAll(‘
.navbar-link’);
scrollLinks.forEach(link => {
link.addEventListener(‘click’,
function € {
e.preventDefault();
const targetId = this.getAttribute(‘href’);
if (targetId) {
const targetElement =
document.getElementById(targetId
.substring(1));
If (targetElement) {
Const offsetTop = targetElement.offsetTop;
Window.scrollTo({
Top: offsetTop,
Behavior: ‘smooth’
});
} else {
Console.error(`Element with id
‘${targetId.substring(1)}’
Not found.`);
}
} else {
Console.error(‘No href attribute found.’);
}
});
});
