WEB-CRAFT BEYOND BORDERS : PORTFOLIO

A INTERNSHIP REPORT
Submitted to

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY ANANTAPUR, ANANTHAPURAMU

In partial fulfilment of the requirements for the award of the degree of
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING
by

GANGADHAR JITHIN MAHADEV

(H.T. No. 20JN1A0540)

Under the Esteemed Guidance

of

Mr.T.RAJA MOHAN REDDY, M. Tech

Assistant Professor, Department of CSE

Department of Computer Science and Engineering

SREE VENKATESWARA COLLEGE OF ENGINEERING
NAAC ‘A’ Grade Accredited Institution, An ISO 9001::2015 Certified Institution
(Approved by AICTE, New Delhi and Affiliated to JNTUA, Ananthapuramu)
NORTHRAJUPALEM(VI), KODAVALURU(M), S.P.S.R NELLORE (DT) – 524 316

2020-2024
 SREE VENKATESWARA COLLEGE OF ENGINEERING
NAAC ‘A’ Grade Accredited Institution, An ISO 9001:: 2015 Certified Institution
(Approved by AICTE, New Delhi and Affiliated to JNTU, Anantapur)

NORTHRAJUPALEM(VI), KODAVALURU(M), S.P.S.R NELLORE (DT) – 524316

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

BONAFIDE CERTIFICATE

This is to certify that the internship report entitled “WEB-CRAFT BEYOND

BORDERS: PORTFOLIO” submitted by GANGADHAR JITHIN MAHADEV
(H.T.No.20JN1A0540) is work done by him and submitted during the academic
year 2023-2024, in partial fulfillment of the requirement for the award of degree of
BACHELOR OF TECHNOLOGY in “COMPUTER SCIENCE AND
ENGINEERING” at IBM ,BANGALORE.

Signature of the Guide Signature of Head of the Dept.

Mr. T.RAJA MOHAN REDDY,M.Tech., Mr. Dr. K. VENKATA NAGENDRA,M.Tech.,Ph.D
Assistant Professor, Associate Professor,
Dept. Of Computer Science and Engg, Head of the Department,
Sree Venkateswara college of Engineering, Dept. Of Computer Science and Engg,

Nellore - 524316 Sree Venkateswara college of Engineering,

Nellore – 524316

Date of VIVA- VOCE

Examiner I Examiner II
 DECLARATION

I hereby declare that the INTERNSHIP report entitled “WEB-CRAFT BEYOND BORDERS
: PORTFOLIO” done by me under the esteemed guidance of, Mr.T.RAJA MOHAN REDDY,
Assistant Professor, Department of Computer Science and Engineering. This internship work has been
submitted to SREE VENKATESWARA COLLEGE OF ENGINEERING in partial fulfillment of the
requirements for theaward of the Bachelors of Technology.

I also declare that this internship report has not been submitted at any time to other Institute or
University for the award of any degree.

Internship Associative

GANGADHAR JITHIN MAHADEV

HT. No. 20JN1A0540
 ACKNOWLEDGEMENT

With immense respect, I express my sincere gratitude to Dr. P. GUNA SHEKAR,

Chairman, who took keen interest and encouraged in every effort throughout this course. I
own my gratitude to Dr. V. ANIL KUMAR, Principal, SREE VENKATESWARA
COLLEGE OF ENGINEERING, NELLORE for giving us the opportunity to fulfill our
aspiration and become engineers.
I would like to extend ardent thanks to Dr. K. VENKATA NAGENDRA M.Tech.
,Ph.D, Associate Professor & Head of the Department, Computer Science and Engineering, for
endowing a practical environment in the institute.

I take this opportunity to express my sincere deep sense of gratitude to my guide Mr.
T.RAJA MOHAN REDDY, M.Tech., Assistant professor, Department of Computer Science
and Engineering, for his significant suggestions and help in every aspect to accomplish the
internship.

I would like to express my gratitude to our trainer VIJAY JAISWAL, IBM, for his
guidance, significant suggestions and help in every aspect to accomplish the internship. His
persisting encouragement, everlasting patience and keen interest in discussions have benefited
me to an extent that cannot be spanned by words. I am thankful to the staff members of my
department for their cooperation over the completion of this internship.

Finally, I thank one and all who directly or indirectly supported me in the completion of this
internship successfully.

Submitted by
GANGADHAR JITHIN MAHADEV
H.T No. 20JN1A0540

I
PARTICIPATION CERTIFICATE

II
INTERNSHIP CERTIFICATE

III
 ABSTRACT

Website Design and learning HTML were the main objectives of this internship. User
Interface (UI) and User Experience (UX) design are integral components of modern web
development. Front-end development, often referred to as the "face" of a website, is where UI/UX
principles come to life. Front-end development bridges the gap between UI/UX design and the
actual implementation of a website. Front-end developers bring the visual concepts and user
experience designs to life by writing HTML, CSS, and JavaScript code. They are responsible for
ensuring that the user interface is responsive and functions correctly across various devices and
browsers. Without skilled front-end development, even the most outstanding UI/UX designs may
not translate into a working and accessible product. The importance of UI/UX in front-end
development is evident in the way it impacts user engagement, satisfaction, and ultimately, the
success of a digital product. A well-thought-out UI/UX design combined with effective front-end
development can lead to increased user retention, reduced bounce rates, and better conversion rates.
It also plays a significant role in a brand's image, as a user's perception of a company can be
influenced by their digital experiences. In a highly competitive digital landscape, where users have
countless options at their fingertips, a seamless, aesthetically pleasing, and user-friendly interface
can be a key differentiator. Therefore, investing in UI/UX design and front-end development is not
just a matter of aesthetics; it's a strategic move to create a lasting and positive impression on users,
leading to business growth and success.

IV
 WEEKLY ANALYSIS OF INTERNSHIP ACTIVITIES

WEEK - 1
DATE DAY NAME OF THE TOPIC/MODULE
COMPLETED

12/06/23 Monday HTML Introduction

13/06/23 Tuesday HTML Attributes

14/06/23 Wednesday HTML Headings

15/06/23 Thursday HTML Paragraphs

16/06/23 Friday HTML Styles

17/06/23 Saturday HTML Links

WEEK - 2
DATE DAY NAME OF THE TOPIC/MODULE
COMPLETED

19/06/23 Monday HTML Images

20/06/23 Tuesday HTML Favicon

21/06/23 Wednesday HTML Page Title

22/06/23 Thursday HTML Tables, Lists, Id, Classes

23/06/23 Friday HTML Media Tags, Forms

24/06/23 Saturday HTML Semantic Tags

V
 WEEK - 3
DATE DAY NAME OF THE TOPIC/MODULE
COMPLETED

26/06/23 Monday CSS Introduction

27/06/23 Tuesday CSS Syntax

28/06/23 Wednesday CSS Selectors

29/06/23 Thursday CSS Colors

30/06/23 Friday CSS Backgrounds

01/07/23 Saturday CSS Border

WEEK - 4
DATE DAY NAME OF THE TOPIC/MODULE
COMPLETED

03/07/23 Monday CSS Margins & Padding

04/07/22 Tuesday CSS Padding

05/07/23 Wednesday CSS Box Model

06/07/23 Thursday CSS Fonts

07/07/23 Friday CSS Icons

08/07/23 Saturday CSS Buttons

VI
 WEEK - 5

DATE DAY NAME OF THE TOPIC/MODULE

COMPLETED

10/07/23 Monday CSS Gradients

11/07/23 Tuesday CSS Shadows

12/0/23 Wednesday CSS Transitions

13/07/23 Thursday CSS Opacity

14/07/23 Friday CSS Flexbox

15/07/23 Saturday CSS Animations

WEEK - 6
DATE DAY NAME OF THE TOPIC/MODULE
COMPLETED

17/07/23 Monday Project session

18/07/23 Tuesday Project coding HTML

19/07/23 Wednesday Project coding CSS

20/07/23 Thursday Project coding JS

21/07/23 Friday Project code verification &

documentation
22/07/23 Saturday Project code verification &
documentation

VII
 CONTENTS

S.NO TOPIC NAME PAGE NO

1. Introduction 1

1.1..Web Technology Definition 1

1.2..Web Technology classification 1

2. Web Development classification 2-3

2.1..Frontend Languages 2

2.2..Backend Languages 3

3. Markup languages and style sheets 4-6

3.1..Markup Languages 4

3.2..Style Sheets 4

3.3..Benefits 4-6

4. Designing a Page 7-24

4.1..HTML5 7-13

4.2..CSS3 14-21

4.3..Javascript 21-24

5. Project code 25-37

6. Output Screenshots 38-42

7. Conclusion 43

8. References 44

VIII
 LIST OF TABLES

TABLE NO TITLE PAGE NO

4.1.2 Removed elements in HTML5 9-10
4.2.1 CSS Measurement Units 17-18

LIST OF FIGURES

FIGURE NO TITLE PAGE NO

4.1.1 HTML4 vs HTML5 9
4.3.1 Types of languages 24
6.1 Main page division block 36
6.2 Introduction division block 36
6.3 Our associatives division block 37
6.4 Services categories division block 37
6.5 Project review division block 38
6.6 Footer division block 38

IX
 B.Tech IV Year -I Sem – Internship 2023

1. INTRODUCTION

1.1 Web Technology:

Web Technology refers to the various tools and techniques that are utilized in the process
of communication between different types of devices over the internet. A web browser is used
to access web pages. Web browsers can be defined as programs that display text, data, pictures,
animation, and video on the Internet. Hyperlinked resources on the World Wide Web can be
accessed using software interfaces provided by Web browsers.

1.2 Web Technology can be classified into the following sections:

World Wide Web (WWW): The World Wide Web is based on several different technologies:
Web browsers, Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP).
Web Browser: The web browser is an application software to explore www (World Wide Web).
It provides an interface between the server and the client and requests to the server for web
documents and services.
Web Server: Web server is a program which processes the network requests of the users and
serves them with files that create web pages. This exchange takes place using Hypertext
Transfer Protocol (HTTP).
Web Pages: A web page is a digital document that is linked to the World Wide Web and
viewable by anyone connected to the internet has a web browser.
Web Development: Web development refers to the building, creating, and maintaining of
websites. It includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the internet i.e.,
websites

Department Of Computer Science and Engineering,SVCN Page | 1

 B.Tech IV Year -I Sem – Internship 2023

2. Web Development Classification

Web Development can be classified into two ways:

• Frontend Development: The part of a website that the user interacts directly is termed
as front end. It is also referred to as the ‘client side’ of the application.

• Backend Development: Backend is the server side of a website. It is the part of the
website that users cannot see and interact. It is the portion of software that does not come
in direct contact with the users. It is used to store and arrange data.

Frontend Languages: The frontend portion is built by using some languages which are
discussed below:

• HTML: HTML stands for Hypertext Markup Language. It is used to design the front-
end portion of web pages using a markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the web pages. The
markup language is used to define the text documentation within the tag which defines
the structure of web pages.

• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. CSS allows you to
apply styles to web pages. More importantly, CSS enables you to do this independent of
the HTML that makes up each web page.

• JavaScript: JavaScript is a famous scripting language used to create magic on the sites
to make the site interactive for the user. It is used to enhancing the functionality of a
website to running cool games and web-based software.

• AJAX: Ajax is an acronym for Asynchronous JavaScript and XML. It is used to

communicate with the server without refreshing the web page and thus increasing the user
experience and better performance.

There are many other languages through which one can do front-end development depending
upon the framework for example Flutter user Dart, React uses JavaScript and Django uses
Python, and much more.

Department Of Computer Science and Engineering,SVCN Page | 2

 B.Tech IV Year -I Sem – Internship 2023
Backend Languages: The back-end portion is built by using some languages which are
discussed below:

• PHP: PHP is a server-side scripting language designed specifically for web

development. Since PHP code executed on the server-side, so it is called a server-side
scripting language.

• Python: Python is a programming language that lets you work quickly and integrate
systems more efficiently.

• Java: Java is one of the most popular and widely used programming languages and
platforms. It is highly scalable. Java components are easily available.

• JavaScript: JavaScript can be used as both (front end and back end) programming.

• C#: C# is a general-purpose, modern and object-oriented programming language

pronounced as “C sharp”.

• DBMS: The software which is used to manage database is called DatabaseManagement

System (DBMS).

Department Of Computer Science and Engineering,SVCN Page | 3

 B.Tech IV Year -I Sem – Internship 2023

3. Markup languages and style sheets

3.1 Markup Languages

Markup languages are computer languages that are used to structure, format, or define
relationships between different parts of text documents with the help of symbols or tags inserted
in the document. These languages are more readable than usual programming languages with
strict syntax. There are several markup languages available but the most popular among them
are as follows.

1. HTML
2. XML
3. XHTML
4. SGML

3.2 Cascading sheets

A web style sheet is a form of separation of content and presentation for web design in which
the markup (i.e., HTML or XHTML) of a webpage contains the page's semantic content and
structure, but does not define its visual layout (style).Instead, the style is defined in an external
style sheet file using a style sheet language such as CSS or XSLT. This design approach is
identified as a "separation" because it largely supersedes the antecedent methodology in which
a page's markup defined both style and structure.

3.3 Benefits
Separation of style and content has advantages, but has only become practical after
improvements in popular web browsers CSS implementations.

Speed

Overall, users experience of a site utilizing style sheets will generally be quicker than sites that
don’t use the technology. ‘Overall’ as the first page will probably load more slowly –

Department Of Computer Science and Engineering,SVCN Page | 4

 B.Tech IV Year -I Sem – Internship 2023
because the style sheet AND the content will need to be transferred. Subsequent pages will load
faster because no style information will need to be downloaded – the CSS file will already be
in the browser’s cache.

Maintainability

Holding all the presentation styles in one file can reduce the maintenance time and reduces the
chance of error, thereby improving presentation consistency. For example, the font color
associated with a type of text element may be specified — and therefore easily modified —
throughout an entire website simply by changing one short string of characters in a single file.
The alternative approach, using styles embedded in each individual page, would require a
cumbersome, time consuming, and error-prone edit of every file.

Accessibility

Sites that use CSS with either XHTML or HTML are easier to tweak so that they appear similar
in different browsers (Chrome, Internet Explorer, Mozilla Firefox, Opera, Safari, etc.).

Sites using CSS "degrade gracefully" in browsers unable to display graphical content, such as
Lynx, or those so very old that they cannot use CSS. Browsers ignore CSS that they do not
understand, such as CSS 3 statements. This enables a wide variety of user agents to be able to
access the content of a site even if they cannot render the style sheet or are not designed with
graphical capability in mind. For example, a browser using a refreshable braille display for
output could disregard layout information entirely, and the user would still have access to all
page content.

Customization

If a page's layout information is stored externally, a user can decide to disable the layout
information entirely, leaving the site's bare content still in a readable form. Site authors may
also offer multiple style sheets, which can be used to completely change the appearance of the
site without altering any of its content.

Most modern web browsers also allow the user to define their own style sheet, which can
include rules that override the author's layout rules. This allows users, for example, to bold

Department Of Computer Science and Engineering,SVCN Page | 5

 B.Tech IV Year -I Sem – Internship 2023
every hyperlink on every page they visit. Browser extensions like Stylish and Stylus have been
created to facilitate management of such user style sheets.

Consistency

Because the semantic file contains only the meanings an author intends to convey, the styling
of the various elements of the document's content is very consistent. For example, headings,
emphasized text, lists and mathematical expressions all receive consistently applied style
properties from the external style sheet. Authors need not concern themselves with the style
properties at the time of composition. These presentational details can be deferred until the
moment of presentation.

Portability

The deferment of presentational details until the time of presentation means that a document
can be easily re-purposed for an entirely different presentation medium with merely the
application of a new style sheet already prepared for the new medium and consistent with
elemental or structural vocabulary of the semantic document. A carefully authored document
for a web page can easily be printed to a hard-bound volume complete with headers and footers,
page numbers and a generated table of contents simply by applying a new style sheet.

Department Of Computer Science and Engineering,SVCN Page | 6

 B.Tech IV Year -I Sem – Internship 2023

4. Designing a Page
4.1 HTML
HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup
language. HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the
link between the web pages. The markup language is used to define the text document within
the tag which defines the structure of web pages. HTML 5 is the fifth and current version of
HTML. It has improved the markup available for documents and has introduced application
programming interfaces (API) and Document Object Model (DOM).

Features:
• It has introduced new multimedia features which support audio and video controls by
using <audio> and <video> tags.

• There are new graphics elements including vector graphics and tags.

• Enrich semantic content by including <header> <footer>, <article>, <section> and

<figure> are added.

• Drag and Drop- The user can grab an object and drag it further dropping it to a new
location.
• Geo-location services- It helps to locate the geographical location of a client.

• Web storage facility which provides web application methods to store data on the web
browser.
• Uses SQL database to store data offline.
• Allows drawing various shapes like triangle, rectangle, circle, etc.
• Capable of handling incorrect syntax.
• Easy DOCTYPE declaration i.e., <!doctype html>
• Easy character encoding i.e., <meta charset=”UTF-8″>

Department Of Computer Science and Engineering,SVCN Page | 7

 B.Tech IV Year -I Sem – Internship 2023

BASIC HTML TAGS

Heading Tags
Any document starts with a heading. You can use different sizes for your headings.
HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one line
after that heading.

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag.

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag
is an example of an empty element, where you do not need opening and closing tags, as there is nothing
to go in between them.

Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.

Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag
creates a line from the current position in the document to the right margin and breaks the line
accordingly.

Again <hr /> tag is an example of the empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you omit
this space, older browsers will have trouble rendering the horizontal line, while if you miss the
forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the
HTML document. In these cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.

Department Of Computer Science and Engineering,SVCN Page | 8

 B.Tech IV Year -I Sem – Internship 2023

HTML4 vs HTML5

Fig 4.1.1: HTML4 vs HTML5

Removed elements from HTML 5: There are many elements which are depreciated from
HTML 5 are listed below:

Removed Elements Use Instead Elements

<acronym> <abbr>

<applet> <object>

<basefont> CSS

<big> CSS

<center> CSS

<dir> <ul>

Department Of Computer Science and Engineering,SVCN Page | 9

 B.Tech IV Year -I Sem – Internship 2023

<font> CSS

<frame>

<frameset>

<noframes>

<isindex>

<strike> CSS, <s> or <del>

<tt> CSS

Fig 4.1.2: Removed Elements in HTML5

New Added Elements in HTML 5:

• <aside>: The <aside> tag is used to describe the main object of the web page in a shorter
way like a highlighter. It basically identifies the content that is related to the primary content
of the web page but does not constitute the main intent of the primary page. The <aside> tag
contains mainly author information, links, related content and so on.

• <article>: The <article> tag is used to represent an article. More specifically, the content within
the <article> tag is independent from the other content of the site (even though it can be related).

• <fig caption>: The <fig caption> tag in HTML is used to set a caption to the figure
element in a document.

• <figure>: The <figure> tag in HTML is used to add self-contained content like
illustrations, diagrams, photos or codes listing in a document. It is related to main flow but
it can be used in any position of a document and the figure goes with the flow of the
document and if remove it then it should not affect the flow of the document.

Department Of Computer Science and Engineering,SVCN Page | 10

 B.Tech IV Year -I Sem – Internship 2023
• <header>: It contains the section heading as well as other content, such as a navigation
links, table of contents, etc.

• <footer>: The <footer> tag in HTML is used to define a footer of HTML document.
This section contains the footer information (author information, copyright information,
carriers etc.). The footer tag are used within body tag. The <footer> tag is new in the HTML
5. The footer elements require a start tag as well as an end tag.

• <main>: Delineates the main content of the body of a document or web app.

• <mark>: The <mark> tag in HTML is used to define the marked text. It is used to
highlight the part of the text in the paragraph.

• <nav>: The <nav> tag is used to declaring the navigational section in HTML
documents. Websites typically have sections dedicated to navigational links, which enables
user to navigate the site. These links can be placed inside a nav tag.

• <section>: It demarcates a thematic grouping of content.

• <details>: The <details> tag is used for the content/information which is initially hidden
but could be displayed if the user wishes to see it. This tag is used to create interactive
widget which user can open or close it. The content of details tag is visible when open the
set attributes.
• <summary>: The <summary> tag in HTML is used to define a summary for the

<details> element. The <summary> element is used along with the <details> element and
provides a summary visible to the user. When the summary is clicked by the user, the content
placed inside the <details> element becomes visible which was previously hidden. The
<summary> tag was added in HTML 5. The <summary> tag requires both starting and
ending tag.

• <time>: The <time> tag is used to display the human-readable data/time. It can also be
used to encode dates and times in a machine-readable form. The main advantage for users
is that they can offer to add birthday reminders or scheduled events in their calendars and
search engines can produce smarter search results.

• <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiates a text from
other text that may be formatted in different direction. This tag is used when a user generated
text with an unknown direction.

Department Of Computer Science and Engineering,SVCN Page | 11

 B.Tech IV Year -I Sem – Internship 2023
• <wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to
define the position within the text which is treated as a line break by the browser. It is mostly
used when the used word is too long and there are chances that the browser may break lines
at the wrong place for fitting the text.

• <datalist>: The <datalist> tag is used to provide autocomplete feature in the HTML
files. It can be used with input tag, so that users can easily fill the data in the forms using
select the data.

• <keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field in
a form. The purpose of <keygen> element is to provide a secure way to authenticate users.
When a from is submitted then two keys are generated, the private key and public key. The
private key is stored locally, and the public key is sent to the server. The public key is used
to generate a client certificate to authenticate users for future.

• <output>: The <output> tag in HTML is used to represent the result of a calculation
performed by the client-side script such as JavaScript.

• <progress>: It is used to represent the progress of a task. It also defines how much work
is done and how much is left to download a things. It is not used to represent the disk space
or relevant query.

• <svg>: It is the Scalable Vector Graphics.

• <canvas>: The <canvas> tag in HTML is used to draw graphics on web page using
JavaScript. It can be used to draw paths, boxes, texts, gradients and add images. By default,
it does not contain border and text.

• <audio>: It defines the music or audio content.

• <embed>: Defines containers for external applications (usually a video player).

• <source>: It defines the sources for <video> and <audio>.

• <track>: It defines the tracks for <video> and <audio>.

• <video>: It defines the video content.

Advantages:

• All browsers are supported.

• More device friendly.

Department Of Computer Science and Engineering,SVCN Page | 12

 B.Tech IV Year -I Sem – Internship 2023

• Easy to use and implement.

• HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful websites.

Disadvantages:

• Long codes have to be written which is time-consuming.

• Only modern browsers support it.

Supported Browsers: It is supported by all modern browsers.

Below examples illustrate the HTML 5 content.

EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<title>HTML 5</title>

<style>

h1 {

font-size:50px;

</style>

</head>

<body>

<h1>THIS IS A SIMPLE HTML CODE</h1>

</body>

</html>

Department Of Computer Science and Engineering,SVCN Page | 13

 B.Tech IV Year -I Sem – Internship 2023

4.2 CSS3
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language. CSS3 is the latest standard of CSS
earlier versions (CSS2).

CSS3 modules

CSS3 is collaboration of CSS2 specifications and new specifications, we can call this
collaboration a module. Some of the modules are shown below −

• Selectors
• Box Model
• Backgrounds
• Image Values and Replaced Content
• Text Effects
• 2D Transformations
• 3D Transformations
• Animations
• Multiple Column Layout
• User Interface

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs, variations in display for different
devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.

Department Of Computer Science and Engineering,SVCN Page | 14

 B.Tech IV Year -I Sem – Internship 2023

Advantages of CSS
⚫ CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
⚫ Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So, less code means faster download times.
Easy maintenance − To make a global change, simply change the style, and all elements in all
the web pages will be updated automatically.

⚫ Superior styles to HTML − CSS have a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
⚫ Multiple Device Compatibility − Style sheets allow content to be optimized for more than
one type of device. By using the same HTML document, different versions of a website
can be presented for handheld devices such as PDAs and cell phones or for printing.
⚫ Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.

CSS-Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied
to the corresponding elements in your document. A style rule is made of three parts −

⚫ Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
⚫ Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
⚫ Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

selector {property: value}

Department Of Computer Science and Engineering,SVCN Page | 15

 B.Tech IV Year -I Sem – Internship 2023

You can define selectors in various simple ways based on your comfort. Let me put these
selectors one by one.

The Type Selectors

This Type Selector is to give a color to all level 1 headings −

Example

h1 {
color: #36CFFF; }

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type −

Example

*{
color: #000000; }

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside
a particular element. As given in the following example, style rule will apply to <em> element
only when it lies inside <ul> tag.

Example

ul em {
color: #000000; }

The Class Selectors

You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.

Example

.black {
color: #000000; }

Department Of Computer Science and Engineering,SVCN Page | 16

 B.Tech IV Year -I Sem – Internship 2023

This rule renders the content in black for every element with class attribute set to black in our
document. You can make it a bit more particular.

Example

h1.black {
color: #000000; }

This rule renders the content in black for only <h1> elements with class attribute set to black.

The ID Selectors

You can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.

Example

#black {
color: #000000; }

This rule renders the content in black for every element with id attribute set to black in our
document

CSS-Measurement units

CSS supports a number of measurements including absolute units such as inches,

centimeters, points, and so on, as well as relative measures such as percentages and em units.
You need these values while specifying various measurements in your Style rules e.g., border
= "1px solid red".

We have listed out all the CSS Measurement Units along with proper Examples −

Unit Description Example

% Defines a measurement as a percentage relative p {font-size: 16pt; line-height: 125%;}

to another value, typically an enclosing
element.

cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}

Department Of Computer Science and Engineering,SVCN Page | 17

 B.Tech IV Year -I Sem – Internship 2023

em A relative measurement for the height of a font

in em spaces. Because an em unit is equivalent
to the size of a given font, if you assign a font p {letter-spacing: 7em;}
to 12pt, each "em" unit would be 12pt; thus,
2em would be 24pt.

ex This value defines a measurement relative to a

font's x-height. The x-height is determined by p {font-size: 24pt; line-height: 3ex;}
the height of the font's lowercase letter x.

in Defines a measurement in inches. p {word-spacing: .15in;}

mm Defines a measurement in millimeters. p {word-spacing: 15mm;}

pc Defines a measurement in picas. A pica is

equivalent to 12 points; thus, there are 6 picas p {font-size: 20pc;}
per inch.

pt Defines a measurement in points. A point is body {font-size: 18pt;}

defined as 1/72nd of an inch.

Defines a measurement in screen pixels. p {padding: 25px;}

Fig 4.2.1: CSS Measurement Units

CSS-Background

You can set the following background properties of an element −

• The background-color property is used to set the background color of an element.

• The background-image property is used to set the background image of an element.
• The background-repeat property is used to control the repetition of an image in
the background.
• The background-position property is used to control the position of an image in the
background.
• The background property is used as a shorthand to specify a number of other
background properties.

Department Of Computer Science and Engineering,SVCN Page | 18

 B.Tech IV Year -I Sem – Internship 2023

CSS-Fonts
You can set following font properties of an element −

• The font-family property is used to change the face of a font.

• The font-style property is used to make a font italic or oblique.
• The font-variant property is used to create a small-caps effect.
• The font-weight property is used to increase or decrease how bold or light a font
appears.
• The font-size property is used to increase or decrease the size of a font.
• The font property is used as shorthand to specify a number of other font properties

CSS-Text Properties

This chapter teaches you how to manipulate text using CSS properties. You can set following
text properties of an element −

• The color property is used to set the color of a text.

• The direction property is used to set the text direction.
• The letter-spacing property is used to add or subtract space between the letters that
makeup a word.
• The word-spacing property is used to add or subtract space between the words
of a sentence.
• The text-indent property is used to indent the text of a paragraph.
• The text-align property is used to align the text of a document.
• The text-decoration property is used to underline, overline, and strikethrough text.
• The text-transform property is used to capitalize text or convert text to uppercase or
lowercase letters.
• The white-space property is used to control the flow and formatting of text.
• The text-shadow property is used to set the text shadow around a text.

CSS-Border

Images play an important role in any web page. Though it is not recommended to
include a lot of images, but it is still important to use good images wherever required.

CSS plays a good role to control image display. You can set the following image properties
using CSS.

Department Of Computer Science and Engineering,SVCN Page | 19

 B.Tech IV Year -I Sem – Internship 2023

• The border property is used to set the width of an image border.

• The height property is used to set the height of an image.
• The width property is used to set the width of an image.
• The -moz-opacity property is used to set the opacity of an image.

The Image Border Property

The border property of an image is used to set the width of an image border. This
property can have a value in length or in %.

CSS-Link

You can set following properties of a hyper link −

We will revisit the same properties when we will discuss Pseudo-Classes of CSS.

• The: link signifies unvisited hyperlinks.

• The: visited signifies visited hyperlinks.
• The: hover signifies an element that currently has the user's mouse pointer hovering
over it.
• The: active signifies an element on which the user is currently clicking.

CSS-Border

The border properties allow you to specify how the border of the box representing an
element should look. There are three properties of a border you can change −

• The border-color specifies the color of a border.

• The border-style specifies whether a border should be solid, dashed line, double
line,or one of the other possible values.
• The border-width specifies the width of a border.

Department Of Computer Science and Engineering,SVCN Page | 20

 B.Tech IV Year -I Sem – Internship 2023

CSS-Margins

The margin property defines the space around an HTML element. It is possible to use
negative values to overlap content.

The values of the margin property are not inherited by the child elements. Remember that the
adjacent vertical margins (top and bottom margins) will collapse into each other so that the
distance between the blocks is not the sum of the margins, but only the greater of the two
margins or the same size as one margin if both are equal.

We have the following properties to set an element margin.

• The margin-bottom specifies the bottom margin of an element.

• The margin specifies a shorthand property for setting the margin properties in one
declaration.
• The margin-top specifies the top margin of an element.
• The margin-left specifies the left margin of an element.
• The margin-right specifies the right margin of an element.

CSS-Padding

The padding property allows you to specify how much space should appear between the
content of an element and its border −

The value of this attribute should be either a length, a percentage, or the word inherit. If
the value is inherit, it will have the same padding as its parent element. If a percentage is used,
the percentage is of the containing box.

The following CSS properties can be used to control lists. You can also set different
values for the padding on each side of the box using the following properties −

• The padding-bottom specifies the bottom padding of an element.

• The padding-top specifies the top padding of an element.
• The padding-left specifies the left padding of an element.
• The padding-right specifies the right padding of an element.
• The padding serves as shorthand for the preceding properties.

Department Of Computer Science and Engineering,SVCN Page | 21

 B.Tech IV Year -I Sem – Internship 2023

4.3 JAVASCRIPT
◆ JavaScript to program the behavior of web pages

◆ The HTML <script> tag is used to define a client-side script (JavaScript).

◆ The <script> element either contains script statements, or it points to an external script
file through the src attribute.

◆ Common uses for JavaScript are image manipulation, form validation, and dynamic
changes of content.

◆ To select an HTML element, JavaScript most often uses

the document.getElementById() method.

Ways to include JavaScript in html

There are 3 ways to include JavaScript in HTML:

1. External JavaScript, load a JavaScript file-<script src="FILE.JS"></script>

2. Internal JavaScript, add a block of code in the HTML document itself-<script>DO
SOMETHING</script>
3. Inline JavaScript, directly add JavaScript to an HTML element - <input
type="button" value="Test" onclick="FUNCTION()"/>

Programming languages vs scripting languages vs markup languages

When it comes to making a website or app coding involves basically three types of
languages i.e., the programming language, Scripting Language and MarkupLanguage.
There are a lot of people who consider coding as just developing or making a website but
they need to understand every single language fits into a particular category and we need to
know which category that language fits into. We will discuss in detail about the difference
between these three main categories or pillars of a website or an app i.e., Programming language,
Scripting Language and Markup Language.

Department Of Computer Science and Engineering,SVCN Page | 22

 B.Tech IV Year -I Sem – Internship 2023
Programming language:
In simple terms, programming languages are set of instructions or code which tells a
computer what it needs to do. So basically, we provide a logic orinstruction to the computer to
perform some tasks to get the desired output from it. Programming languages are high-level
languages that need to be converted into machine level language because a computer can only
understand machine level language or binary language (0 and 1). So we write the instructions
in human-readable form and then we hit the compile button to convert this into machine level
language which a computer can understand and then the computer performs the task. Examples
are Java, C, C++, C#. Programming languages are most widely used to make software or
drivers.

Scripting Language:

As the name suggest, it’s all about giving the script to perform some certain tasks.
Scripting languages are basically the subcategory of programming languages which is used to
give guidance to another program or we can say to control another program, soit also involves
instructions. It basically connects one language to one another languages and doesn’t work
standalone. JavaScript, PHP, Perl, Python, VBScript these all are the examples of scripting
language. Scripting languages need to be interpreted (Scanning the code line by line, not like
compiler in one go) instead of compiled. There is no scope of compiler in scripting languages.
Scripting languages are most widely used to create a website.

Markup Languages:

Markup languages are completely different from programming languages and scripting
languages. Markup languages prepare a structure for the data or prepare the look or design of a
page. These are presentational languages and it doesn’t include any kind of logic or algorithm,
for example, HTML. HTML is not asking any kindof question to the computer or it’s not
comparing things and it’s not asking any logical question. It’s just used to represent a view inside
a web browser. It tells the browser how to structure data for a specific page, layout, headings,
title, table and all or styling a page in a particular way. So basically, it involves formatting data
or it controls the presentation of data. Examples of Markup languages are HTML, CSS or XML.
These languages are most widely used to design a website.

Department Of Computer Science and Engineering,SVCN Page | 23

 B. Tech IV Year -I Sem – Internship 2023

Fig 4.3.1: Types of languages

Example: To show date and time

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date and Time example</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

Department Of Computer Science and Engineering, SVCN Page | 24

 B. Tech IV Year -I Sem – Internship 2023

5. PROJECT CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Portfolio Website</title>

<link rel="stylesheet" href="./css/bootstrap.min.css" />

<link rel="stylesheet" href="./css/all.min.css" />

<link
rel="stylesheet"
href="./vendor/Magnific-Popup/dist/magnific-popup.css"
/>

<link
rel="stylesheet"
href="./vendor/owl-carousel/css/owl.carousel.min.css"
/>
<link
rel="stylesheet"
href="./vendor/owl-carousel/css/owl.theme.default.min.css"
/>

<link rel="stylesheet" href="./css/style.css" />

<link rel="stylesheet" href="./css/responsive.css" />

</head>

<body>
<header class="header_area">
<div class="main-menu">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"
><img src="./img/logo2.png" alt="logo" width="180"
/></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>
Department Of Computer Science and Engineering, SVCN Page | 25
 B. Tech IV Year -I Sem – Internship 2023
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mr-auto"></div>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
</ul>
</div>
</nav>
</div>
</header>

<main class="site-main">
<section class="site-banner">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12 site-title">
<h3 class="title-text">Hey</h3>
<h1 class="title-text text-uppercase">I am Jithin Dev</h1>
<h4 class="title-text text-uppercase">
Front End Developer
</h4>
<div class="site-buttons">
<div class="d-flex flex-row flex-wrap">
<button
type="button"
class="btn button primary-button mr-4 text-uppercase"
>
hire me
</button>
<button
type="button"
class="btn button secondary-button text-uppercase"
>
Get cv
</button>
</div>
</div>
Department Of Computer Science and Engineering, SVCN Page | 26
 B. Tech IV Year -I Sem – Internship 2023
</div>
<div class="col-lg-6 col-md-12 banner-image">
<img
src="./img/banner/banner-image1.jpg"
alt="banner-img"
class="img-fluid"
width="10"
height="10"
/>
</div>
</div>
</div>
</section>

<section class="about-area">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="about-image">
<img
src="./img/about-us.png"
alt="About us"
class="img-fluid"
/>
</div>
</div>
<div class="col-lg-6 col-md-12 about-title">
<h2 class="text-uppercase pt-5">
<span>Let me</span>
<span>introduce</span>
<span>myself</span>
</h2>
<div class="paragraph py-4 w-75">
<p class="para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
rerum iure obcaecati vel possimus officia maiores perferendis
ut! Quos, perspiciatis.
</p>
<p class="para">
It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content
here, content here
</p>
</div>
<button
type="button"
class="btn button primary-button text-uppercase"
>
Download cv
</button>
</div>
Department Of Computer Science and Engineering, SVCN Page | 27
 B. Tech IV Year -I Sem – Internship 2023
</div>
</div>
</section>

<section class="brand-area">
<div class="container-fluid">
<div class="row">
<div class="col-xl-6 col-lg-12 col-md-12">
<div class="first-row row">
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-brand">
<img src="./img/brands/logo1.png" alt="Brand-1 " />
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-brand">
<img src="./img/brands/logo2.png" alt="Brand-2 " />
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-brand">
<img src="./img/brands/logo3.png" alt="Brand-3 " />
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-brand">
<img src="./img/brands/logo4.png" alt="Brand-4" />
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-brand">
<img src="./img/brands/logo5.png" alt="Brand-5 " />
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-brand">
<img src="./img/brands/logo6.png" alt="Brand-6" />
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-brand">
<img src="./img/brands/logo7.png" alt="Brand-7 " />
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-brand">
<img src="./img/brands/logo8.png" alt="Brand-8 " />
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-brand">
<img src="./img/brands/logo9.png" alt="Brand-9" />
</div>
Department Of Computer Science and Engineering, SVCN Page | 28
 B. Tech IV Year -I Sem – Internship 2023
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 col-md-12">
<div class="experience-area">
<div class="d-flex flex-row years-area">
<h2 class="p-3 years">5</h2>
<h2>
<span>Years</span>
<span>Experience</span>
<span>Working</span>
</h2>
</div>
<div class="d-flex flex-row flex-wrap call-area">
<span><i class="fas fa-phone-alt fa-3x px-3"></i></span>
<div class="call-now">
<a href="#" class="text-uppercase h4 font-roboto"
>Call Now</a
>
<span class="font-roboto py-2">(+91)-837-410-5508</span>
</div>
</div>
<div class="bg-panel"></div>
</div>
</div>
</div>
</div>
</section>

<section class="services-area">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center services-title">
<h1 class="text-uppercase title-text">Services Offers</h1>
<p class="para">
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by
injected humour
</p>
</div>
</div>
<div class="container services-list">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="services">
<div class="sevices-img text-center py-4">
<img src="./img/services/s1.png" alt="Services-1" />
</div>
<div class="card-body text-center">
<h5 class="card-title text-uppercase font-roboto">
Wp developer
</h5>
<p class="card-text text-secondary">
Department Of Computer Science and Engineering, SVCN Page | 29
 B. Tech IV Year -I Sem – Internship 2023
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="services">
<div class="sevices-img text-center py-4">
<img src="./img/services/s2.png" alt="Services-2" />
</div>
<div class="card-body text-center">
<h5 class="card-title text-uppercase font-roboto">
ux/ui desing
</h5>
<p class="card-text text-secondary">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="services">
<div class="sevices-img text-center py-4">
<img src="./img/services/s3.png" alt="Services-3" />
</div>
<div class="card-body text-center">
<h5 class="card-title text-uppercase font-roboto">
web design
</h5>
<p class="card-text text-secondary">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="services">
<div class="sevices-img text-center py-4">
<img src="./img/services/s4.png" alt="Services-4" />
</div>
<div class="card-body text-center">
<h5 class="card-title text-uppercase font-roboto">
seo optimize
</h5>
<p class="card-text text-secondary">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
</div>
</div>
Department Of Computer Science and Engineering, SVCN Page | 30
 B. Tech IV Year -I Sem – Internship 2023
</div>
</div>
</div>
</div>
</section>

<section class="project-area">
<div class="container">
<div class="button-group">
<button type="button" class="active" id="btn1" data-filter="*">
All
</button>
<button type="button" data-filter=".popular">Popular</button>
<button type="button" data-filter=".latest">Latest</button>
<button type="button" data-filter=".following">Following</button>
<button type="button" data-filter=".upcoming">Upcoming</button>
</div>

<div class="row grid">

<div class="col-lg-4 col-md-6 col-sm-12 element-item latest">
<div class="our-project">
<div class="img">
<a class="test-popup-link" href="./img/portfolio/p1.jpg">
<img
src="./img/portfolio/p1.jpg"
alt="portfolio-1"
class="img-fluid"
/>
</a>
</div>
<div class="title py-4">
<h4 class="text-uppercase">Minimul Desing</h4>
<span class="text-secondary">Latest, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<a class="test-popup-link" href="./img/portfolio/p2.jpg">
<img
src="./img/portfolio/p2.jpg"
alt="portfolio-2"
class="img-fluid"
/>
</a>
</div>
<div class="title py-4">
<h4 class="text-uppercase">Paint Wall</h4>
<span class="text-secondary">Popular, Portfolio</span>
</div>
</div>
</div>
Department Of Computer Science and Engineering, SVCN Page | 31
 B. Tech IV Year -I Sem – Internship 2023
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<a class="test-popup-link" href="./img/portfolio/p3.jpg">
<img
src="./img/portfolio/p3.jpg"
alt="portfolio-3"
class="img-fluid"
/>
</a>
</div>
<div class="title py-4">
<h4 class="text-uppercase">Female light</h4>
<span class="text-secondary">Popular, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item upcoming">
<div class="our-project">
<div class="img">
<a class="test-popup-link" href="./img/portfolio/p4.jpg">
<img
src="./img/portfolio/p4.jpg"
alt="portfolio-4"
class="img-fluid"
/>
</a>
</div>
<div class="title py-4">
<h4 class="text-uppercase">Fourth Air</h4>
<span class="text-secondary">Upcoming, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item upcoming">
<div class="our-project">
<div class="img">
<a class="test-popup-link" href="./img/portfolio/p5.jpg">
<img
src="./img/portfolio/p5.jpg"
alt="portfolio-5"
class="img-fluid"
/>
</a>
</div>
<div class="title py-4">
<h4 class="text-uppercase">Muliple fown</h4>
<span class="text-secondary">Upcoming, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item following">
<div class="our-project">
Department Of Computer Science and Engineering, SVCN Page | 32
 B. Tech IV Year -I Sem – Internship 2023
<div class="img">
<a class="test-popup-link" href="./img/portfolio/p6.jpg">
<img
src="./img/portfolio/p6.jpg"
alt="portfolio-6"
class="img-fluid"
/>
</a>
</div>
<div class="title py-4">
<h4 class="text-uppercase">Together sign</h4>
<span class="text-secondary">Following, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item following">
<div class="our-project">
<div class="img">
<a class="test-popup-link" href="./img/portfolio/p7.jpg">
<img
src="./img/portfolio/p7.jpg"
alt="portfolio-7"
class="img-fluid"
/>
</a>
</div>
<div class="title py-4">
<h4 class="text-uppercase">Green Heaven</h4>
<span class="text-secondary">Following, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item following">
<div class="our-project">
<div class="img">
<a class="test-popup-link" href="./img/portfolio/p8.jpg">
<img
src="./img/portfolio/p8.jpg"
alt="portfolio-8"
class="img-fluid"
/>
</a>
</div>
<div class="title py-4">
<h4 class="text-uppercase">Fly Male</h4>
<span class="text-secondary">Following, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item upcoming">
<div class="our-project">
<div class="img">
<a class="test-popup-link" href="./img/portfolio/p9.jpg">
Department Of Computer Science and Engineering, SVCN Page | 33
 B. Tech IV Year -I Sem – Internship 2023
<img
src="./img/portfolio/p9.jpg"
alt="portfolio-9"
class="img-fluid"
/>
</a>
</div>
<div class="title py-4">
<h4 class="text-uppercase">Camera Lens</h4>
<span class="text-secondary">Upcoming, Portfolio</span>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="about-area">
<div class="container">
<div class="row text-center">
<div class="col-12">
<div class="about-title">
<h1 class="text-uppercase title-h1">Client Say about me</h1>
<p class="para">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Repellendus, deleniti recusandae. Esse incidunt rem
repellendus ab voluptates maxime? Nemo, numquam!
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer-area">
<div class="container">
<div class="">
<div class="site-logo text-center py-4">
<a href="#"><img src="./img/logo2.png" alt="logo" /></a>
</div>
<div class="social text-center">
<h5 class="text-uppercase">Follow me</h5>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com/_its_jithin_/" target="_blank"
><i class="fab fa-instagram"></i
></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
<div class="copyrights text-center">
<p class="para">
Copyright ©2023 All rights reserved | This template is made for
<a href="#"
Department Of Computer Science and Engineering, SVCN Page | 34
 B. Tech IV Year -I Sem – Internship 2023
><span style="color: var(--primary-color)"
>IBM SKILLBUILD DEVOLOPMENT</span
></a
>
</p>
</div>
</div>
</div>
</footer>

<script src="./js/jquery.3.4.1.js"></script>

<script src="./js/bootstrap.min.js"></script>

<script src="./vendor/isotope/isotope.min.js"></script>

<script src="./vendor/Magnific-Popup/dist/jquery.magnific-popup.min.js"></script>

<script src="./vendor/owl-carousel/js/owl.carousel.min.js"></script>

<script src="./js/main.js"></script>
</body>
</html>

Department Of Computer Science and Engineering, SVCN Page | 35

 B. Tech IV Year -I Sem – Internship 2023

6. OUTPUT SCREEN SHOTS

Fig 6.1: Main page division block

Fig 6.2: Introduction division block

Department Of Computer Science and Engineering, SVCN Page | 36

 B. Tech IV Year -I Sem – Internship 2023

Fig 6.3: Our Associtates division block

Fig 6.4: Services categories division block

Department Of Computer Science and Engineering, SVCN Page | 37

 B. Tech IV Year -I Sem – Internship 2023

Fig 6.5:Projects review division block

Fig 6.6: Footer division block

Department Of Computer Science and Engineering, SVCN Page | 38

 B. Tech IV Year -I Sem – Internship 2023

7. CONCLUSION
The end of this module brought with it new techniques and tools for;

• organizing websites
• identifying & grouping specific elements within websites
• including & embedding multi-media content
• adding metadata to further define our webpages

At this point, you should be feeling comfortable with HTML and the ways that this markup
language allows developers and content creators to build and create webpages.

This not only includes your own writing of webpages with HTML, but the necessary step of
reading other’s HTML to understand how they use the language to present content and solve
problems. This latter task is greatly facilitated by the open nature of the Internet, and the fact
that all content is sent as documents to your web browser, allowing you to view others source
code.

This is quite exciting, as it will allow you to transform your “plain” looking pages. This work
will build directly off of your knowledge and understanding of HTML. Therefore, if you are
still struggling with any topics or concepts, please leverage your resources (i.e., the instructors,
class issues forum, and google) and take the time this week to bring everything taught so far
in this semester together.

Department Of Computer Science and Engineering, SVCN Page | 39

 B. Tech IV Year -I Sem – Internship 2023

8. REFERENCES

I. www.javatpoint.com

II. www.w3schools.com

III. www.geeksforgeeks.org

IV. www.freecodecamp.org

Department Of Computer Science and Engineering, SVCN Page | 40