INTERNSHIP REPORT

An Internship training report submitted in partial fulfilment of the requirements for the
degree

of

DIPLOMA IN ENGINEERING
(COMPUTER SCIENCE)

By

Aaditya Anand Jha

22CSE004

Department of Applied Science & Engineering

Usha Martin University, Ranchi
July, 2024
COMPANY CERTIFICATE
 DECALARATION

I do hereby declare that this Internship Report submitted by Aaditya Anand Jha, bearing Roll
No: 22CSE015 in the fulfillment of the requirement for the degree of Bachelor of Diploma
Engineering to Usha Martin University, Ranchi, is my own and it is not submitted to any
other institute.
 Aaditya Anand Jha

Roll no 22CSE015

CERTIFICATE

This is to certify that the Internship Report being submitted by Aaditya Anand Jha, bearing
Roll No- 22CSE015, in the fulfillment of the requirement for the degree of Diploma
Engineering to Usha Martin University, Ranchi, is a bonafide work carried out under our
supervision. The matter embodied in this report is original and has not been submitted for the
award of any other degree.

Dr. Sharmishtha Roy Dr. Ritushree Narayan

HOD, Coordinator, UMU

Department of Computer Science & Engineering

 Table of Contents

SL.NO TOPIC DATE OF VISIT PAGE NO.

.
1. Introduction to HTML, CSS 08/07/2024
2. Introduction to JS, Bootstrap 09/07/2024
3. Use of Yandex,W3School 10/07/2024
4. Introduction to HTML, CSS Tags 11/07/2024
5. Using of links from Bootstrap, 12/07/2024
taking help from W3Schools
6. Animation Using WowSlider 15/07/2024
7. About Format 16/07/2024
8. Download & Installing of VS 18/072024
Code
9. Blueprint of a Webpage & start to 19/07/2024
design
10. Table 22/07/2024
11. Form 23/07/2024
st
12. 1 Page (Index) 24/07/2024 – 25/07/2024
13. 2nd Page (Home) 26/07/2024 – 29/07/2024
14. 3rd page (Services) 30/07/2024 – 31/07/2024
15. 4th Page (Gallery) 01/08/2024 – 02/08/2024
16. 5th page(Contact) 05/08/2024 – 06/08/2024
17. Connecting to Internet using 07/08/2024 – 08/08/2024
W3Schools,Github
 REPORT
Name of the Organization: Brightcode Software Pvt. Ltd.
Event: Internship
Date: 08/07/2024
Venue: 2nd floor, MIMEC IT Park, Lowadih, Ranchi
Resource Person: Mr. Satya Kumar

Faculty In-charge: Miss. Anita Kumari

 Day-Wise report with Pictures

Introduction to HTML, CSS

HTML:- HTML, or HyperText Markup Language, is the standard language used to create
and structure content on the web. It is essential for building websites and web applications,
providing the basic framework that browsers use to display text, images, videos, and other
media. HTML consists of various elements, called tags, which are used to define different
parts of a webpage. For example, the `<h1>` tag is used for main headings, `<p>` for
paragraphs, and `<img>` for images. These tags are usually written in pairs, with an opening
tag and a closing tag. HTML also supports attributes, which provide additional information
about an element, such as the `src` attribute for images or `href` for links. HTML documents
are structured in a hierarchical manner, where elements can be nested inside one another to
create complex layouts and design. To ensure proper display across different browsers,
HTML is often used in combination with CSS (Cascading Style Sheets) for design and
JavaScript for interactivity. Learning HTML is the first step toward web development, and it
forms the foundation for more advanced technologies like CSS, JavaScript, and server-side
programming languages. By mastering HTML, students can build their own websites and
gain a deeper understanding of how the internet functions.
CSS:- CSS (Cascading Style Sheets) is a crucial technology used in web development to
style and format the visual presentation of web pages. While HTML provides the structure
and content of a website, CSS controls the look and feel by defining layout, colors, fonts,
spacing, and positioning. By separating the content from the presentation, CSS allows for
greater flexibility and efficiency in web design, as the same HTML content can be displayed
differently across multiple devices and screen sizes. CSS rules are written as selectors
followed by declarations enclosed in curly braces. Selectors target HTML elements, and the
declarations specify the style properties and their values. For example, a rule might select all
paragraphs (`p`) and set the font color to blue (`color: blue;`). One of the key features of CSS
is its cascading nature, where multiple styles can be applied to an element, and the browser
determines which rule to follow based on priority. This priority is determined by the location
of the CSS (inline, internal, or external), with inline styles having the highest precedence.
Additionally, CSS provides features like media queries, which allow developers to create
responsive designs that adjust based on the user's device, ensuring an optimal viewing
experience across different platforms. Overall, CSS is an essential skill for any web
developer, as it enhances user experience and ensures the aesthetic appeal of websites.
 Fig:- Day.01

Introduction to JS, BOOTSTRAP

JS :- JavaScript (JS) is a programming language that is widely used to make websites

interactive and dynamic. It's often described as the language of the web because it's mainly
used in web development. When you visit a website and interact with elements like buttons,
forms, or even animations, JavaScript is probably the code running behind the scenes to make
it all work. It’s different from HTML and CSS, which are used to structure and style web
pages, because JavaScript adds behavior. For example, when you click a button and
something happens on the page without reloading it, that's JavaScript in action. One cool
thing about JS is that it can run directly in your web browser without needing to install
anything extra. It uses something called the "DOM" (Document Object Model) to interact
with the content on the page, so developers can change things like text, images, and even
content dynamically based on what you do. JavaScript is also used to build apps, games, and
even control robots in some cases. Over time, JavaScript has evolved with new features and
frameworks like React, Angular, and Node.js, which help developers build even more
powerful web applications. Overall, JavaScript is a super useful and fun language to learn,
especially if you're interested in creating things online!
BOOTSTRAP :- Bootstrap is a popular front-end framework that makes it easier to design
and develop responsive websites. In simple terms, it's a tool that helps web developers create
websites that look good on any device, whether it's a computer, tablet, or smartphone.
Bootstrap was created by Twitter to make building web pages faster and more consistent. It
provides ready-to-use components like buttons, navigation bars, forms, and grids, which
means you don’t have to design them from scratch. One of the best things about Bootstrap is
its grid system, which divides the page into rows and columns to help arrange content in a
neat and organized way. This system is flexible, meaning it can adjust depending on the
screen size, so your website will look good no matter what device someone is using.
Additionally, Bootstrap comes with built-in CSS (for styling) and JavaScript components (for
interactive features), saving you time and effort. For example, if you want a pop-up modal or
a carousel to display images, you can easily add those features using Bootstrap's predefined
code. Since it's open-source and widely used, there are lots of resources, tutorials, and
examples to help you get started. Whether you're a beginner or experienced web developer,
Bootstrap is a great tool for quickly building clean and functional websites. Bootstrap 4.6 is a
version of the Bootstrap framework, which is a popular tool for building websites that work
well on all devices like phones, tablets, and desktops. It's a set of ready-made design elements
that make it easier and faster to create professional-looking websites without having to write
everything from scratch.
Bootstrap 4.6 comes with a powerful grid system that lets you organize content into rows
and columns, making your website look neat and responsive. This means that no matter the
screen size, the layout will automatically adjust to fit perfectly, so your website looks good
everywhere. In this version, Bootstrap also uses Flexbox, a modern layout system, which
makes it even easier to align items and create complex layouts. Bootstrap 4.6 has a lot of
built-in components like buttons, navigation menus, forms, and cards, which you can use
right away by simply adding a few lines of code. Another cool feature is the ability to
customize your website’s design easily with its utility classes for things like spacing, text
alignment, and colors. Bootstrap 4.6 also includes responsive features like built-in media
queries, so it automatically adapts to different screen sizes. Plus, it’s lightweight and fast,
meaning your website will load quickly. If you want to add extra features like carousels
(sliders), modals (pop-up windows), or tooltips (small help messages), you can do it easily
using the built-in JavaScript components. Since it's open-source, you can freely use and
modify it for your projects, and because it’s so widely used, you can find plenty of guides and
support online. In short, Bootstrap 4.6 is a great tool for building modern, responsive, and
attractive websites with less effort.
 Fig:- Day.02

Use of Yandex & W3Schools Websites

Yandex:- Yandex is a popular Russian search engine and web service platform, often
compared to Google, but it’s primarily used in Russia and some other countries. Just like
Google, Yandex helps users search for websites, images, news, videos, and more. It’s the
most used search engine in Russia, and it provides many other services beyond just searching.
For example, Yandex offers a map service, which is similar to Google Maps, where you can
get directions, find businesses, and explore different locations. They also have a cloud storage
service called Yandex.Disk, where you can upload and store files online. Another feature is
Yandex.Mail, an email service, and Yandex.Translate, which helps translate text between
different languages. Yandex even has an online shopping platform, a music streaming
service, and a taxi-hailing service called Yandex.Taxi, which is like Uber. One of the cool
things about Yandex is that it provides tailored results for users, especially for those who
speak Russian, because it understands the language better than some other search engines. It
also has a virtual assistant called "Alice" that can help you search for information, set
reminders, or even tell jokes. Yandex has a clean and simple interface, making it easy for
anyone to use. Although it’s not as popular outside Russia as Google, Yandex offers a lot of
useful features, and it’s an important part of the internet experience in Russia and
surrounding regions.
W3Schools:- W3Schools is a popular website that helps people learn web development,
especially for beginners. It’s a great resource for anyone who wants to get started with coding
and understand how websites are built. The website offers free tutorials and guides on many
different topics like HTML, CSS, JavaScript, and even more advanced programming
languages such as SQL and Python. One of the things that makes W3Schools so easy to use is
that it has clear, simple explanations and lots of examples. You can see how different code
works directly on the page, and try it out using their built-in "Try it Yourself" editor, where
you can write and test your own code. Whether you're learning to create a basic webpage or
trying to add complex features, W3Schools walks you through everything step by step. It’s
also great because it provides quizzes and exercises to help you practice what you've learned.
Another cool feature is that it has a reference section, which you can use to look up how to
use different coding commands, attributes, and functions whenever you're stuck. The website
is designed to be beginner-friendly, with explanations that break down complicated concepts
into easy-to-understand chunks. While W3Schools is an excellent starting point, it's also
helpful for experienced developers who need to quickly check how to use something specific.
Overall, W3Schools is a super helpful and free tool for anyone interested in learning web
development or improving their coding skills.
Fig:- Day.03
 Introduction to HTML,CSS Tags

HTML Tags:- HTML tags are the basic building blocks of a webpage. HTML stands for
"Hypertext Markup Language," and it’s used to structure and organize the content you see on
a website. You can think of HTML tags as special instructions for the web browser to know
how to display things like text, images, links, and other elements. HTML tags are usually
written inside angle brackets, like `<tagname>`. For example, the tag `<h1>` is used to create
a main heading, and it tells the browser that this text should stand out as a title. When you’re
done with the heading, you use a closing tag, like `</h1>`, to mark the end of the heading.
Most HTML tags come in pairs: an opening tag and a closing tag. The opening tag tells the
browser where the content starts, and the closing tag tells it where the content ends. For
example, the `<p>` tag is used for paragraphs, so you wrap your text with `<p>` at the
beginning and `</p>` at the end. Other tags, like `<img>`, don’t need a closing tag, because
they just describe an image and don’t have content inside them.
Tags also have attributes that give extra information about an element. For example, if you
use the `<img>` tag to add an image, you can use an attribute like `src="image.jpg"` to tell
the browser where to find the image you want to display. Similarly, the `<a>` tag is used to
create links, and it uses an attribute like `href="https://www.example.com"` to specify the
destination of the link.
By combining different HTML tags, you can create the structure of a webpage, such as
headings, paragraphs, links, images, lists, and more. HTML tags are simple but super
important because they are the foundation of every webpage you visit. Understanding how
they work is the first step to becoming a web developer!
CSS Tags:- CSS, which stands for **Cascading Style Sheets**, is used to style and design a
webpage. While HTML is responsible for the content and structure of a website (like
headings, paragraphs, and images), CSS is used to make that content look good—by adding
colors, fonts, spacing, layouts, and more. In simple terms, CSS tells the browser how to
display the HTML elements on the page.
CSS uses **selectors** and **properties** to apply styles to HTML tags. A **selector** is
the part that defines which HTML element you want to style, and the **property** is what
you want to change about that element. For example, if you want to change the color of a
paragraph, you would use a selector for the paragraph (`<p>`) and set a property like `color:
red;` to change the text color.
Here’s a simple example:
```css
p{
color: red;
font-size: 16px;
}
```
In this code, `p` is the selector, which refers to all the `<p>` (paragraph) tags on the page. The
properties inside the curly brackets `{}` define the style—`color: red;` changes the text color
to red, and `font-size: 16px;` sets the font size to 16 pixels.
CSS can also be used to change things like **background colors**, **margins**,
**padding**, and **borders**. For instance, you can change the background color of a
webpage with:
```css
body {
background-color: lightblue;
}
```
CSS also allows you to control the layout of the page, such as placing elements side by side
or centering them on the screen. You can do this using CSS properties like `display`, `flex`,
`grid`, or `position`.
Another important feature of CSS is that it can be written in three different ways:
1. Inline CSS (written directly in the HTML tags),
2. Internal CSS (written in a `<style>` tag inside the HTML file),
3. External CSS (written in a separate .css file, which is linked to the HTML).
In summary, CSS helps you make your website look beautiful and organized by controlling
things like colors, fonts, spacing, and layout. It’s an essential skill for anyone who wants to
become a web developer and create visually appealing websites!

Fig:- Day.04
Using of links from Bootstrap, taking help from W3Schools

Using of links from Bootstrap:- Using useful links from Bootstrap to make a webpage is a
quick and efficient way to create a responsive, well-designed site without having to write a
lot of custom code. Bootstrap provides pre-made CSS and JavaScript components that you
can easily integrate into your webpage. To get started, you simply need to link to Bootstrap's
CSS and JavaScript files in your HTML document.
Here's how you can use Bootstrap links to make a webpage:

1. Include Bootstrap CSS:

 The first step is to include the Bootstrap CSS link in the `<head>` section of your HTML
document. This gives your page access to Bootstrap's default styles, such as layout,
typography, and basic components. You can include the Bootstrap CSS file using a CDN
(Content Delivery Network), which means you don’t need to download the file to your
computer.
Example of linking to Bootstrap CSS:
```html
<head>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css">
</head>
```
2. Include Bootstrap JavaScript:
After linking the CSS, you’ll also need to link the Bootstrap JavaScript files before the
closing `</body>` tag. These scripts allow you to use interactive components like modals,
carousels, and drop-down menus. Bootstrap requires **jQuery** and **Popper.js** for
certain interactive features, so make sure you include those as well.
Example of linking to Bootstrap JavaScript:
```html
<body>
<!-- Your webpage content goes here --><!---->
<!-- jQuery and Popper.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<!-- Bootstrap JS -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js"></
script>
</body>
```
3. Using Bootstrap Components:
Once you’ve included the Bootstrap links in your HTML, you can start using its pre-
designed components to quickly build your webpage. Bootstrap has a wide range of
components like navigation bars, buttons, forms, and grids. For example:
- Navigation Bar:
A navigation bar is an essential part of most websites. Bootstrap provides a simple way to
create a responsive navigation bar that adjusts based on the screen size.
```html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
```
- Buttons:
Bootstrap provides pre-styled buttons that you can use in your webpage.
```html
<button class="btn btn-primary">Click Me!</button>
```
- Forms:
- Forms:
Bootstrap makes creating forms easy by providing predefined form styles and layouts.
```html
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
```
4. Responsive Grid System:
One of Bootstrap's most useful features is its grid system. It allows you to create responsive
layouts that automatically adjust based on the screen size (desktop, tablet, mobile). You can
create rows and columns using classes like `row` and `col`, and specify how many columns
an element should span.
Example of a responsive layout:
```html
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="image.jpg" class="card-img-top" alt="Image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
 <a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Another card or content here -->
</div>
<div class="col-md-4">
<!-- Another card or content here -->
</div>
</div>
</div>
```
5. Customization:
Bootstrap is flexible, and you can easily customize the default look to match your website's
design. You can modify the colors, fonts, and other styles by overriding Bootstrap’s default
classes with your own custom CSS.
Summary:
By linking to the Bootstrap CDN, you gain access to a wide variety of pre-made components
and features that help you build a modern, responsive webpage quickly. The grid system
helps with layout, while the ready-made buttons, forms, and navigation bars save time. You
can also customize your site further with your own CSS. Overall, Bootstrap makes web
development easier and faster by providing a clean, responsive, and consistent design across
all devices.
Taking help from W3Schools:- Using W3Schools to help you make a webpage can be a
great way to learn and implement web development techniques. W3Schools provides
tutorials, examples, and references that make it easier to understand various web
technologies. Here's how you can use W3Schools to help build your webpage:
1. Start with HTML Basics
- What is HTML?: HTML (HyperText Markup Language) is the basic structure of a
webpage. It defines elements like headings, paragraphs, links, images, and more.
- Learning from W3Schools: Go through their [HTML
Tutorial](https://www.w3schools.com/html/) to learn about the different HTML tags like
`<h1>`, `<p>`, `<a>`, and `<img>`. Each topic is accompanied by examples that you can try
in an online editor.
 - Practice: Use W3Schools' "Try it Yourself" feature to practice writing HTML code and
see the live result directly in the browser.
2. Styling with CSS
- What is CSS?: CSS (Cascading Style Sheets) is used to control the layout and appearance
of your HTML content, such as colors, fonts, spacing, and positioning.
- Learning from W3Schools: Explore the [CSS Tutorial](https://www.w3schools.com/css/)
for comprehensive guides on properties like `background-color`, `font-size`, `margin`,
`padding`, and more. You can try out these styles in their interactive editor.
- Experiment: W3Schools allows you to experiment with CSS directly on their platform.
Modify styles and see how they affect the webpage in real-time.
3. Interactive Features with JavaScript
- What is JavaScript?: JavaScript is a programming language that allows you to add
interactivity to your webpage, such as forms that validate input, buttons that trigger actions,
or animations.
- Learning from W3Schools: Dive into their [JavaScript
Tutorial](https://www.w3schools.com/js/) to understand the basics of scripting, variables,
functions, loops, and event handling.
- Test JavaScript: Use the "Try it Yourself" feature for JavaScript examples. You can also
test your own JavaScript code and see how it changes the behavior of the webpage in real-
time.
4. Responsive Web Design with CSS
- What is Responsive Design?: Responsive design ensures that your webpage looks good on
all screen sizes, from phones to desktops. You can use CSS media queries to adjust the layout
based on the screen size.
- Learning from W3Schools: W3Schools offers a section on [Responsive Web Design]
(https://www.w3schools.com/css/css_rwd_intro.asp), where you can learn how to create
flexible layouts using grid and flexbox, as well as implement media queries.
- Practice: Create a webpage that adjusts to different screen sizes by trying out the examples
provided in their tutorials.
5. Using W3Schools References
- Quick Reference: W3Schools has a detailed [HTML
reference](https://www.w3schools.com/tags/default.asp), [CSS
reference](https://www.w3schools.com/cssref/), and [JavaScript
reference](https://www.w3schools.com/jsref/). These references list all the tags, properties,
and methods you’ll need to build and style your webpage.
- Consult Documentation: If you're unsure about a specific tag or property, W3Schools
provides clear documentation with syntax, examples, and explanations, which can be very
helpful for beginners.
6. Building Forms and Adding Features
- Forms: Learn how to create interactive forms to collect user input using HTML and
validate it with JavaScript. W3Schools has a detailed guide on [HTML
Forms](https://www.w3schools.com/html/html_forms.asp).
-Tables, Lists, and Links: W3Schools also covers HTML elements like tables, lists, and
links in depth, so you can create complex layouts.
7. Testing and Debugging
- Code Validation: After writing your webpage, it's important to validate your code.
W3Schools has an integrated code validator tool to check for errors or inconsistencies in your
HTML, CSS, or JavaScript.
- Browser Compatibility: W3Schools provides examples of how different browsers render
the code, ensuring that your webpage will display correctly across all platforms.
8. Practice and Learn from Examples
- Code Examples: Each tutorial page on W3Schools includes working code examples that
you can copy, modify, and test. This helps you understand how to implement certain features
by seeing the code in action.
-W3Schools Certifications: If you feel confident in your skills, W3Schools offers
certifications for HTML, CSS, and JavaScript. This can be useful if you want to showcase
your knowledge in web development.
9. Web Hosting and Publishing
- Once you've built your webpage, W3Schools provides tips on how to publish your site
online. You can learn about file transfer, domain hosting, and using FTP (File Transfer
Protocol) to upload your files to a web server.
Example Workflow to Build a Webpage:
1. Structure the Page: Use HTML to create the basic structure of your webpage, including
headings, paragraphs, images, and links.
2. Style the Page: Use CSS to style the elements, such as setting the background color, fonts,
and layout.
3. Add Interactivity: Use JavaScript to add interactive elements like buttons, forms, and
animations.
4. Test Responsiveness: Ensure the webpage looks good on all devices by using CSS media
queries for a responsive design.
5. Debug and Validate: Check your code for errors and fix them using the W3Schools
validation tools.
6. Publish Your Site: Once your page is ready, learn how to publish it online with
W3Schools' guides on hosting.
Fig:- Day.05
 Animation Using WowSlider

WowSlider is a popular jQuery plugin for creating visually appealing sliders and animations
on websites. If you're looking to create an animation using WowSlider, follow these steps:
Step-by-Step Guide to Animation Using WowSlider:
1. Download and Install WowSlider
- Download: Go to the [WowSlider website](https://wowslider.com/) and download the
latest version of the plugin.
- Extract: Once the ZIP file is downloaded, extract it to a folder.
- Add Files to Your Website: Upload the extracted files (including HTML, CSS, JS, and
image folders) to your web server, or keep them in your local project folder.
2. Include WowSlider Files in Your HTML
Add the necessary CSS and JS files to your HTML document’s `<head>` and just before
the closing `</body>` tag.
```html
<head>
<!-- WowSlider CSS -->
<link rel="stylesheet" type="text/css" href="path/to/engine1/style.css">
</head>
<body>
<!-- Your slider HTML code goes here -->
<!-- WowSlider JS -->
<script type="text/javascript" src="path/to/engine1/wowslider.js"></script>
<script type="text/javascript" src="path/to/engine1/script.js"></script>
</body>
```
Note: Replace `"path/to/engine1/"` with the actual path to your WowSlider files.
3. Create the HTML Structure for the Slider
Create the slider’s HTML structure within your webpage. Here’s an example of a simple
WowSlider slider:
```html
<div id="wowslider-container1">
 <div class="ws_images">
<ul>
<li><img src="images/image1.jpg" alt="Image 1" title="Image 1" /></li>
<li><img src="images/image2.jpg" alt="Image 2" title="Image 2" /></li>
<li><img src="images/image3.jpg" alt="Image 3" title="Image 3" /></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="Image 1"><span>1</span></a>
<a href="#" title="Image 2"><span>2</span></a>
<a href="#" title="Image 3"><span>3</span></a>
</div>
</div>
</div>
```
- ws_images: This contains the images that will be part of the slider.
- ws_bullets: This section is for creating navigation bullets (optional).
4. Customize the Slider Settings
You can customize the behavior of the slider by adjusting the settings in the `script.js` file
or directly in your HTML. Some of the customization options include:
- Animation Speed: Set the duration for each slide transition.
- Effect: Choose between different animation effects (e.g., Fade, Slide, etc.).
- Navigation: Enable/disable arrows, dots, or auto-play.
Example of setting options in the `script.js`:
```javascript
wowslider_init({
effect: "fade", // Transition effect
duration: 800, // Duration of each slide transition (in ms)
delay: 3000, // Time between slides (in ms)
width: 600, // Slider width
 height: 400, // Slider height
auto_play: true // Enable auto-play
});
```
5. Set the Animation Effects
WowSlider offers multiple animation effects like fade, slide, and others. To specify an
animation effect, you can add a class or modify the settings file to customize how each slide
transition happens.
In the script, you can specify the effect type like this:
```javascript
wowslider_init({
effect: "slide", // or "fade", "flip", "kenburns"
});
```
6. Preview and Adjust
After adding the necessary HTML, CSS, and JS files, preview your website to check the
slider in action. You can make further adjustments to speed, animation, layout, etc., until
you’re satisfied with the look and functionality.
7. Responsive Design (Optional)
WowSlider automatically supports responsive layouts, meaning it will adjust to various
screen sizes (desktop, tablet, mobile). However, you can fine-tune this behavior by adding
custom media queries to the CSS.
Example of adding responsive behavior:
```css
@media (max-width: 768px) {
#wowslider-container1 {
width: 100%;
height: auto;
}
}
```
8. Add Additional Features
 You can further enhance your slider by adding:
- Thumbnails for navigation.
- Text captions or descriptions for each slide.
- Custom navigation arrows or buttons.
Example of adding text captions:
```html
<div class="ws_images">
<ul>
<li><img src="images/image1.jpg" alt="Image 1" title="Caption for Image 1" /></li>
<li><img src="images/image2.jpg" alt="Image 2" title="Caption for Image 2" /></li>
</ul>
</div>
```
9. Publish Your Website
Once you're satisfied with the slider’s appearance and behavior, you can upload the changes
to your live website or publish the project locally for further testing.
 Fig:- Day.06

About Format (Discussion)

Creating a normal webpage involves combining HTML for structure, CSS for styling, and
optionally JavaScript for interactivity. Below is a detailed breakdown of the HTML and CSS
formats required to make a basic webpage.
1. Basic Structure of an HTML Document
The basic structure of an HTML document includes the DOCTYPE declaration, <html>,
<head>, and <body> tags. The <head> contains meta-information like the title, linked CSS
files, and scripts, while the <body> contains the content that users see on the webpage.
Key Components of HTML Structure:
1. <!DOCTYPE html>: This declaration tells the browser that the page is an HTML5
document.
2. <html>: The root element that wraps all content on the webpage.
3. <head>: Contains meta-information about the page, such as character set, title, and
linked resources like CSS and JavaScript files.
4. <body>: Contains the content visible to users, including text, images, and navigation
links.
5. <header>: Typically contains a logo, navigation links, or introductory content.
6. <main>: Contains the main content of the webpage. Typically divided into sections
like Home, About, Contact, etc.
7. <footer>: Contains footer information, often copyright notices or contact information.

2. Basic CSS Structure for Styling

CSS (Cascading Style Sheets) defines how HTML elements should be styled. You can
include CSS either directly in the <head> of your HTML document using <style> tags or by
linking to an external stylesheet.
External CSS File:
To use an external CSS file, you include it in the <head> tag of the HTML document, like
this:
<link rel="stylesheet" href="styles.css">
The external file (styles.css) would contain all the styling rules for the webpage.
Key Components of CSS:
1. body: Applies styles to the entire webpage, including font, line spacing, margins, and
background color.
2. header: Styles the header section, including the background color, text color, and
padding.
3. nav: The navigation menu is styled with a list of links that are displayed in a row.
4. section: Styles for each content section (e.g., Home, About, Contact) include padding,
background color, and box shadow.
5. footer: The footer section is styled with background color, text color, and centered
text.

Responsive Design (Optional but Recommended)

To ensure your webpage looks good on various screen sizes, you can use media queries.
Media queries allow you to apply different styles based on the device's screen size or other
characteristics (e.g., orientation).

Key Concepts in Responsive Design:

-@media: A CSS rule that applies styles based on conditions like screen size.

- max-width: Targets devices with a maximum screen width, typically used for smaller
screens (e.g., mobile devices).

- Responsive Layouts: Ensures the layout adapts to the screen size by changing fonts,
stacking content, and adjusting paddings.

Conclusion: Putting It All Together

To create a normal webpage, you need both HTML for structure and CSS for styling. Here's
how the two fit together:

1. HTML provides the content (text, images, links, etc.) and organizes it into sections.
2. CSS defines the appearance of that content, such as colors, fonts, layout, and
responsiveness.
 Fig:- Day.07
Download & Installing of VS Code
How to Download and Install Visual Studio Code (VS Code) on Windows

Visual Studio Code (VS Code) is a free, powerful, and popular code editor from Microsoft that works
well on Windows and other platforms. It’s widely used for writing and editing code, debugging, and
much more.

Here’s a step-by-step guide to download and install VS Code on Windows:

Step 1: Download VS Code for Windows

1. Go to the Official VS Code Website:
- Open your web browser and navigate to the [official Visual Studio Code
website](https://code.visualstudio.com/).

2. Download the Installer:

- On the homepage, you will see a **Download** button that is automatically adjusted for your
operating system.
- Since you're on Windows, the website will suggest the appropriate version for you, which is the
Windows Installer (`.exe` file). Click on **Download for Windows**.

The file will begin downloading. The file name will typically be something like `VSCodeSetup-x64-
x.x.x.exe`, where `x.x.x` is the version number.

Step 2: Install VS Code on Windows

1. Run the Installer:

- Once the `.exe` file has finished downloading, navigate to your **Downloads** folder (or
wherever you saved the file).
- Double-click the installer (`VSCodeSetup-x64-x.x.x.exe`) to start the installation process.

2. Choose Installation Options:

- A setup window will appear. You will be prompted to select installation options. You can accept
the default options, but here are some key choices you might want to consider:

- Add to PATH: This option allows you to run Visual Studio Code directly from the command line
by typing `code`. It’s recommended to check this option.

- Create a desktop icon: This option will create a shortcut on your desktop for easy access to VS
Code.

- Register Code as an editor for supported file types: This option automatically associates file types
like `.html`, `.css`, `.js`, `.json`, etc., with VS Code.

- Add Open with Code to the context menu: This allows you to right-click a folder or file and open
it directly in VS Code.

Once you've selected your preferred options, click **Next**.

3. Choose Install Location:

- You will be asked where you want to install Visual Studio Code. The default location is fine for
most users, but you can select a different location if needed.
- Click **Install** once you're ready.

4. Complete the Installation**:

- The installation process will begin. Once it's finished, click **Finish** to exit the setup wizard.
- If you chose the option to **Launch Visual Studio Code**, the application will automatically
open. Otherwise, you can launch it later from the Start menu or your desktop shortcut.

Step 3: Launching VS Code

1. Open Visual Studio Code:

- **Start Menu**: Open the Start menu by clicking the Windows icon in the lower-left corner of
your screen, then type **Visual Studio Code** or **VS Code**. Click the application when it
appears.
 - **Desktop Shortcut**: If you selected the option to create a desktop icon, you can double-click
the **Visual Studio Code** shortcut on your desktop to open the editor.

Step 4: Set Up VS Code (Optional)

After installation, you might want to personalize your Visual Studio Code setup. Some common steps
include:

1. Install Extensions:
- Visual Studio Code has a rich ecosystem of extensions that enhance its functionality. You can
install extensions for various programming languages, debuggers, themes, and tools.
- To access extensions, click on the **Extensions icon** (a square icon) in the sidebar, or press
`Ctrl + Shift + X`.
- Some useful extensions include:
- Prettier (code formatter)
- Live Server (for real-time HTML preview)
- GitLens (Git integration)
- Python (for Python development)

2. Select a Theme:
- You can choose a **light** or **dark** theme based on your preference. To change the theme, go
to **File > Preferences > Color Theme** or press `Ctrl + K` followed by `Ctrl + T`.

3. Configure Settings:
- You can access the settings by going to **File > Preferences > Settings** or pressing `Ctrl + ,`.
- Customize editor behaviors, font size, tab preferences, etc., according to your needs.

Step 5: Start Coding!

 Fig:- Day.08
Blueprint of a Webpage & start to design!

We had to design 5 pages in it.

1. Home
2. About
3. Service
4. Gallery
5. Contact

1. Home:- In the first page, we have to put the logo at the top and then after that we have to
add navbar to it. After this, section have to be created and data has to be inserted. Now we
have to apply testinomials and for this we have to create a separate section. After that, at the
end there will be a footer area in which you have to add links to other pages, and insert a map
on it.

2. About:- In the second page, we have to put the logos at the top and then after that we had
to make sections and after that, at last Put footer area on this page.

3. Service:- Header contains logos, Middle section contains pictures of services (use col-md)
and at last footer section contains Links of other pages and map.

4. Gallery:- Header contains logos, middle section contains pictures of products and at last
footer section contains Links of other pages and map.

5. Contact:- Header section contains Logos, Middle section contains Addresses, forms, etc.
and footer section contains maps and links of other pages.
 Fig:- Day.09

Table

HTML:- <table border="2"> Output:-

<tr>
<th>ID</th>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>100</td>
<td>ABC</td>
<td>Java</td>
</tr>
<tr>
<td>200</td>
<td>DEF</td>
<td>Python</td>
</tr>
<tr>
<td>300</td>
<td>GHI</td>
<td>C++</td>
</tr>
<tr>
<td colspan="3" >5000</td>
</tr>
</table>
 Fig:- Day.10

Form

HTML:- <form> Output:-

Mail:-<input type="email">
<br>
Your Name:-<input type="text">
<br>
Gender:-<input type="radio" name="gen">Male
<input type="radio" name="gen">Female
<br>
<input type="checkbox">English
 <input type="checkbox">Hindi

<select>

<h4>Select a language</h4>
<option selected>select one</option>
<option>C</option>
<option>C++</option>
</select>
</form>
 Fig:-Day.11

1st page (Home)

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-
SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV
7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
</head>
<body>
<section class="a">
<div class="container">
<div class="row">
<div class="col-md-4">
 <a href="tel:09876543210">
<p> <i class="fa-solid fa-phone"></i> : +91-9876543210</p>
</a>
</div>
<div class="col-md-4">
<a href="mailto:[email protected]">
<p> <i class="fa-solid fa-envelope"></i> : [email protected]</p>
</a>
</div>
<div class="col-md-4">
<p>

<a href="https://www.instagram.com/bugatti?igsh=amYwOTlyMHBseHlq"><i
class="fa-brands fa-instagram"></i></a>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>

</p>
</div>
</div>
</div>
</section>

<section>

<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:
#ffff;">
<a class="navbar-brand" href="#"><img src="img/logonew.jpg"
width="100%"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
 <li class="nav-item">
<a class="nav-link" href="Services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>

</div>
</nav>
</div>
</div>
</div>

</section>
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/bg.jpg" alt="a11" title="a11" id="wows1_0"/></li>
<li><a href="http://wowslider.net"><img src="data1/images/bg.jpg" alt="html5
slider" title="BG" id="wows1_1"/></a></li>
<li><img src="data1/images/bg.jpg" alt="a1" title="a1" id="wows1_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="a11"><span><img src="data1/tooltips/a11.jpg"
alt="a11"/>1</span></a>
<a href="#" title="BG"><span><img src="data1/tooltips/bg.jpg"
alt="BG"/>2</span></a>
<a href="#" title="a1"><span><img src="data1/tooltips/a1.jpg"
alt="a1"/>3</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a
href="http://wowslider.net">jquery slideshow</a> by WOWSlider.com v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/BG.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/BG2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/BG3.jpg" class="d-block w-100" alt="...">
</div>
 </div>
<button class="carousel-control-prev" type="button" data-
target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-
target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div> -->
<br>

<section class="qw">
<div class="container">
<div class="row">
<div class="col-md-6" >
<h2>About Bugatti Cars</h2>
<p>Cars are a tool, yes, but they are so much more as well. They can be your
partner on vacations
and business. They can be the one respite from your busy schedule, a way to
race away from your
life's troubles. They can even be something you love to look at – something
you enjoy thinking
about. Automobiles Ettore Bugatti was a German then French manufacturer of
high-performance
automobiles. The company was founded in 1909 in the then-German city of
Molsheim, Alsace, by the
Italian-born industrial designer Ettore Bugatti. The cars were known for their
design beauty and
numerous race victories. Famous Bugatti automobiles include the Type 35
Grand Prix cars, the
Type 41 "Royale", the Type 57 "Atlantic" and the Type 55 sports car.</p>
<button type="button" class="btn btn-none btn-outline-dark" >
<a href="about.html">View More</a>
</button>
</div>
<div class="col-md-6">
<video width="320" height="240" controls autoplay muted>
<source src="vid/vid01.mp4" type="video/mp4">
<source src="vid/vid01.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

</div>
</div>
</div>
</section>
 <section class="qaz">
<div class="container">
<!-- <center><h1>Our Services</h1></center> -->
<!-- <h1 class="text-right">Our Services</h1> -->
<h1 style="text-align: center;">Our Services</h1>
<div class="row justify-content-center">
<div class="col-md-3 mt-4">
<div class="card">
<img src="img/painting.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Painting</h5>

<a href="#" class="btn btn-primary" data-toggle="modal" data-

target="#exampleModal">Book
Now</a>
</div>
</div>
</div>
<div class="col-md-3 mt-4">
<div class="card">
<img src="img/servicing.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Servicing</h5>

<a href="#" class="btn btn-primary" data-toggle="modal" data-

target="#exampleModal">Book
Now</a>
</div>
</div>
</div>
<div class="col-md-3 mt-4">
<div class="card">
<img src="img/booking.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Booking</h5>

<a href="#" class="btn btn-primary" data-toggle="modal" data-

target="#exampleModal">Book
Now</a>
</div>
</div>
</div>
<div class="col-md-3 mt-4">
<div class="card">
<img src="img/insurance.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Insurance</h5>

<a href="#" class="btn btn-primary" data-toggle="modal" data-

target="#exampleModal">Book
 Now</a>
</div>
</div>
</div>

<div class="col-md-3 mt-4 hidd">

<div class="card">
<img src="img/spare.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Spare parts</h5>

<a href="#" class="btn btn-primary" data-toggle="modal" data-

target="#exampleModal">Book
Now</a>
</div>
</div>
</div>
<div class="col-md-3 mt-4 hidd">
<div class="card">
<img src="img/exc.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Exchange</h5>

<a href="#" class="btn btn-primary" data-toggle="modal" data-

target="#exampleModal">Book
Now</a>
</div>
</div>
</div>
<!-- <div class="col-md-3 mt-4 hidd">
<div class="card">
<img src="img/painting.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Insurance</h5>

<a href="#" class="btn btn-primary" data-toggle="modal" data-

target="#exampleModal">Book
Now</a>
</div>
</div>
</div>
<div class="col-md-3 mt-4 hidd">
<div class="card">
<img src="img/.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Insurance</h5>

<a href="#" class="btn btn-primary" data-toggle="modal" data-

target="#exampleModal">Book
 Now</a>
</div>
</div>
</div> -->

<div class="col-md-2">
<span class="viewall btn btn-success btn-block">View All</span>
</div>
</div>
</div>
</section>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Book Now Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<input class="form-control mt-2 mb-2" type="text" placeholder="Your
Name">
<input class="form-control mt-2 mb-2" type="email" placeholder="Your
Email">
<input class="form-control mt-2 mb-2" type="number" placeholder="Your
Mobile Number">
<input class="form-control mt-2 mb-2" type="text" placeholder="Your
Address">
<p class="btn btn-danger btn-block btn-sm">Submit</p>
</form>
</div>

</div>
</div>
</div>

<section style="background: rgb(203, 185, 185);padding: 50px 0px;">

<div class="container">
<h1 style="text-align: center;">Our Products</h1>
<div class="row">
<div class="col-md-12">
<div id="carouselExampleControlsasai" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
 <center>
<img src="img/BG.jpg" width="20%">
<h2>Chiron</h2>
<p>Cars are a tool, yes, but they are so much more as well. They can
be your partner on vacations and business. They can be the one respite from your busy
schedule, a way to race away from your life's troubles. They can even be something you love
to look at – something you enjoy thinking about.</p>
</center>
</div>
<div class="carousel-item">
<center>
<img src="img/BG2.jpg" width="20%">
<h2>Voiture Noire</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum
itaque facilis voluptate dignissimos explicabo numquam esse repellat, suscipit mollitia
excepturi totam? Et molestias porro repellendus sint, neque dicta accusantium hic.</p>
</center>
</div>
</div>
<button class="carousel-control-prev" type="button" data-
target="#carouselExampleControlsasai" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-
target="#carouselExampleControlsasai" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3 col-12">
<h2>About Us</h2>
<p>Cars are a tool, yes, but they are so much more as well. They can be your
partner on vacations
and business. They can be the one respite from your busy schedule, a way to
race away from your
life's troubles. They can even be something you love to look at – something
you enjoy thinking
about.</p>
</div>
<div class="col-md-3 col-12">
<h2>Quick Links</h2>
<ul>
 <a href="index.html">
<li>Home</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="Services.html">
<li>Services</li>
</a>
<a href="gallery.html">
<li>Gallery</li>
</a>
<a href="contact.html">
<li>Contact</li>
</a>
</ul>
</div>
<div class="col-md-3 col-12">
<h2>Address</h2>
<p><i class="fa-solid fa-map-location-dot"></i> : Ranchi, Jharkhand.</p>
<p>Email : [email protected]</p>
<p>Phone : +91-9876543210</p>
<p>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
</p>
</div>
<div class="col-md-3 col-12">
<h2>We Are Here</h2>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!
1d3662.6302493969615!2d85.3405407!3d23.3654067!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x39f4e1773e5b1a9d%3A0xf9a196328eb207b6!2sAudi%20Ranchi!5e0!3m2!1sen!2sin!
4v1721239835393!5m2!1sen!2sin"
width="100%" height="170" style="border:0;" allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</footer>

<section class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
 <p>All Rights Reserved. Abc School Copyrights 2024.</p>
</div>
<div class="col-md-6">
<p>Designed By : Ak & SK </p>
</div>
</div>
</div>
</section>

<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
Fy6S3B9q64WdZWQUiU+q42Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous">
</script>
<script>

$(document).ready(function () {
$(".viewall").click(function () {
$(".hidd").toggle();
});
});
</script>
https://codepen.io/ecemgo/full/rNbLodN
</body>
</html>
Fig:- Day.12
Fig:- Day.13

Fig:- 1.1

Fig:- 1.2
 Fig:- 1.3

Fig:- 1.4
2nd Page (About)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-
SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV
7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<section class="a">
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="tel:09876543210">
<p> <i class="fa-solid fa-phone"></i> : +91-9876543210</p>
</a>
</div>
<div class="col-md-4">
<a href="mailto:[email protected]">
<p> <i class="fa-solid fa-envelope"></i> : [email protected]</p>
</a>
</div>
<div class="col-md-4">
<p>
 <i class="iconss fa-solid fa-car"></i>
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:
#ffff;">
<a class="navbar-brand" href="#"><img src="img/logonew.jpg"
width="100%"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</section>
<center><img src="img/BG.jpg" width="70%"></center>
<button class="carousel-control-prev" type="button" data-
target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
 </button>
<button class="carousel-control-next" type="button" data-
target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
<br><br><br>
<section class="qw">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Bugatti</h2>
<p>Automobiles Ettore Bugatti was a German then French manufacturer of
high-performance automobiles. The company was founded in 1909 in the then-German city
of Molsheim, Alsace, by the Italian-born industrial designer Ettore Bugatti. The cars were
known for their design beauty and numerous race victories.</p>
</div>
<br>
<div class="col-md-6">
<a href="img/bg4.jpg">
<img src="img/BG4.jpg" width="50%">
</a>
</div>
</div>
</div>
</section>
<br><br><br>
<section class="qw">
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-6">
<a href="img/BG3.jpg">
<img src="img/BG3.jpg" width="50%">
</a>
</div>
<div class="col-md-6">
<h2>Veyron</h2>
<p>Automobiles Ettore Bugatti was a German then French manufacturer of
high-performance automobiles. The company was founded in 1909 in the then-German city
of Molsheim, Alsace, by the Italian-born industrial designer Ettore Bugatti. The cars were
known for their design beauty and numerous race victories.</p>
</div>
</div>
</div>
</section>
<br><br><br>
<section class="qw">
<div class="container">
 <div class="row">
<div class="col-md-6">
<h2>Mission</h2>
<p>Automobiles Ettore Bugatti was a German then French manufacturer of
high-performance automobiles. The company was founded in 1909 in the then-German city
of Molsheim, Alsace, by the Italian-born industrial designer Ettore Bugatti. The cars were
known for their design beauty and numerous race victories.</p>
</div>
<div class="col-md-6">
<a href="img/BG2.jpg">
<img src="img/BG2.jpg" width="50%">
</a>
</div>
</div>
</div>
</div>
</section>
<br><br><br>
<section class="qw">
<div class="container">
<div class="row">
<div class="col-md-6">
<video width="320" height="240" controls autoplay muted>
<source src="vid/vid02.mp4" type="video/mp4">
<source src="vid/vid02.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="col-md-6">
<br><br><br>
<h2>Vision</h2>
<p>Automobiles Ettore Bugatti was a German then French manufacturer of high-
performance automobiles. The company was founded in 1909 in the then-German city of
Molsheim, Alsace, by the Italian-born industrial designer Ettore Bugatti. The cars were
known for their design beauty and numerous race victories.
</div>
</div>
</div>
</section>
<br><br><br>
<section class="qaz">
<div class="container">
<!-- <center><h1>Our Services</h1></center> -->
<!-- <h1 class="text-right">Our Services</h1> -->
<h1 style="text-align: center;">Our Heads</h1>
<div class="row">
<div class="col-md-6">
<div class="card">
<img src="img/chairman.jpeg.jpg" class="card-img-top" alt="...">
<div class="card-body">
 <h5 class="card-title">Chairman</h5><P>Stephan Winkelmann</P>

</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<img src="img/director.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Director</h5><p>Frank Heyl</p>

</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3 col-12">
<h2>About Us</h2>
<p>Cars are a tool, yes, but they are so much more as well. They can be your
partner on vacations and business. They can be the one respite from your busy schedule, a
way to race away from your life's troubles. They can even be something you love to look at –
something you enjoy thinking about.</p>
</div>
<div class="col-md-3 col-12">
<h2>Quick Links</h2>
<ul>
<a href="index.html">
<li>Home</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="product.html">
<li>Product</li>
</a>
<a href="gallery.html">
<li>Gallery</li>
</a>
<a href="contact.html">
<li>Contact</li>
</a>
</ul>
</div>
<div class="col-md-3 col-12">
<h2>Address</h2>
<p><i class="fa-solid fa-map-location-dot"></i> : Ranchi, Jharkhand</p>
 <p>Email : [email protected]</p>
<p>Phone : +91-9876543210</p>
<p>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
</p>
</div>
<div class="col-md-3 col-12">
<h2>We Are Here</h2>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!
1d3662.6302493969615!2d85.3405407!3d23.3654067!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x39f4e1773e5b1a9d%3A0xf9a196328eb207b6!2sAudi%20Ranchi!5e0!3m2!1sen!2sin!
4v1721239835393!5m2!1sen!2sin"

width="100%" height="170" style="border:0;" allowfullscreen=""

loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</footer>
<section class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>All Rights Reserved. Abc School Copyrights 2024.</p>
</div>
<div class="col-md-6">
<p>Designed By : ABC luxurious Cars</p>
</div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
</body>
</html>
 Fig:- Day.14 Fig:- Day.15

Fig:- 2.1

Fig:-2.2
 Fig:-2.3

Fig:-2.4

3rd Page (Service)

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-
SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV
7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

<section class="a">
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="tel:09876543210">
<p> <i class="fa-solid fa-phone"></i> : +91-9876543210</p>
</a>
</div>
<div class="col-md-4">
<a href="mailto:[email protected]">
 <p> <i class="fa-solid fa-envelope"></i> : [email protected]</p>
</a>
</div>
<div class="col-md-4">
<p>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
</p>
</div>
</div>
</div>
</section>

<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:
#fff;">
<a class="navbar-brand" href="#"><img src="img/logonew.jpg"
width="100%"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>

<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
 </li>
</ul>

</div>
</nav>
</div>
</div>
</div>
</section>

<div class="h1">
<center><img src="img/BG4.jpg" width="70%"></center>
<center>
<marquee behavior="alternate" scrollamount="20%">
<h1>
<u>
<b>!!Our Services!!</b>
</u>
</h1>
</marquee>
</center>

</div>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- <a href="img/a1.jpg">
<img src="img/a1.jpg" width="50%">
</a>
</div>
-->
<div class="col-md-6">
<!-- <a href="img/menu2.jpg">
<img src="img/menu2.jpg" width="50%">
</a>
</div> -->
<div class="col-md-6">
<!-- <a href="img/menu3.jpg">
<img src="img/menu3.jpg" width="50%">
</a> -->
</div>
<div class="col-md-6">
<!-- <a href="img/menu4.jpg">
<img src="img/menu4.jpg" width="50%">
</a> -->
</div>
</div>
</div>
 </section>

<section class="qw">
<div class="container">
<div class="row">
<div class="col-md-6 mt-5">
<div class="card">
<img src="img/insurance.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title">Insurance</h1>

<a href="#" class="btn btn-primary"data-toggle="modal" data-

target="#exampleModal">Book Now</a>
</div>
</div>
</div>
<div class="col-md-6 mt-5">
<div class="card">
<img src="img/painting.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title">Painting</h1>

<a href="#" class="btn btn-primary"data-toggle="modal" data-

target="#exampleModal">Book Now</a>
</div>
</div>
</div>
<div class="col-md-6 mt-5">
<div class="card">
<img src="img/servicing.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title">Servicing</h1>

<a href="#" class="btn btn-primary"data-toggle="modal" data-

target="#exampleModal">Book Now</a>
</div>
</div>
</div>
<div class="col-md-6 mt-5">
<div class="card">
<img src="img/booking.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title">Booking</h1>

<a href="#" class="btn btn-primary"data-toggle="modal" data-

target="#exampleModal">Book Now</a>
</div>
</div>
</div>
 <div class="col-md-6 mt-5">
<div class="card">
<img src="img/spare.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title">Spare Items</h1>

<a href="#" class="btn btn-primary"data-toggle="modal" data-

target="#exampleModal">Book Now</a>
</div>
</div>
</div>
<div class="col-md-6 mt-5">
<div class="card">
<img src="img/exc.png" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title">Exchange with the other one</h1>

<a href="#" class="btn btn-primary"data-toggle="modal" data-

target="#exampleModal">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<br>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-

labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Book Now Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<input class="form-control mt-2 mb-2" type="text" placeholder=" Name">
<input class="form-control mt-2 mb-2" type="email" placeholder=" Email">
<input class="form-control mt-2 mb-2" type="number" placeholder=" Mobile
Number">
<input class="form-control mt-2 mb-2" type="text" placeholder=" Address">
<p class="btn btn-success btn-block btn-sm">Submit</p>
</form>
 </div>

</div>
</div>
</div>

<section style="background: rgb(203, 185, 185);padding: 50px 0px;">

<div class="container">
<h1 style="text-align: center;">Our Products</h1>
<div class="row">
<div class="col-md-12">
<div id="carouselExampleControlsasai" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">

</div>
</div>
<center>
<img src="img/BG4.jpg" width="20%">
<h2>Bugatti Divo</h2>
<p>Cars are a tool, yes, but they are so much more as well. They can be
your partner on vacations and business. They can be the one respite from your busy schedule,
a way to race away from your life's troubles. They can even be something you love to look at
– something you enjoy thinking about.</p>
</center>
</div>
</div>
</div>
</div>
</section>

<footer>
<div class="container">
<div class="row">
<div class="col-md-3 col-12">
<h2>About Us</h2>
<p>Cars are a tool, yes, but they are so much more as well. They can be your
partner on vacations and business. They can be the one respite from your busy schedule, a
way to race away from your life's troubles. They can even be something you love to look at –
something you enjoy thinking about.
</p>
</div>
<div class="col-md-3 col-12">
<h2>Quick Links</h2>
 <ul>
<a href="index.html">
<li>Home</li>
</a>
<a href="about.html">
<li>About Us</li>
</a>
<a href="Services.html">
<li>Services</li>
</a>
<a href="gallery.html">
<li>Gallery</li>
</a>
<a href="contact.html">
<li>Contact</li>
</a>
</ul>
</div>
<div class="col-md-3 col-12">
<h2>Address</h2>
<p><i class="fa-solid fa-map-location-dot"></i> : Ranchi, Jharkhand.</p>
<p>Email : [email protected]</p>
<p>Phone : +91-9876543210</p>
<p>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>
<i class="iconss fa-solid fa-car"></i>

</p>
</div>
<div class="col-md-3 col-12">
<h2>We Are Here</h2>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!
1d3662.6302493969615!2d85.3405407!3d23.3654067!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x39f4e1773e5b1a9d%3A0xf9a196328eb207b6!2sAudi%20Ranchi!5e0!3m2!1sen!2sin!
4v1721239835393!5m2!1sen!2sin"

width="100%" height="170" style="border:0;" allowfullscreen=""

loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</footer>

<section class="copyright">
<div class="container">
<div class="row">
 <div class="col-md-6">
<p>All Rights Reserved. Abc School Copyrights 2024.</p>
</div>
<div class="col-md-6">
<p>Designed By : ABC luxurious Cars</p>
</div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
</body>
</html>