Scribd
Upload
69 views34 pages

B.tech - Project Report of Car Racing

Uploaded by

Tinku Budhwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
69 views34 pages

B.tech - Project Report of Car Racing

Uploaded by

Tinku Budhwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 34

VAISHCOLLEGEOFENGINEERING,

ROHTAK

SYNOPSIS
FOR
PROJECT REPORT OF 3-DC CAR RACING
GAME

Submittedto-Ms.Kavitama’am Submittedby-
AP, CSE BhavyaSinghChauhan
20/CSE/111

BtechCSE6th sem
INTRODUCTION
CreatingacloneprojectofAPJAbdulKalam'sbiographyusingHTMLandCSSisagreatway to practice
your web development skills. Here's a detailed guide to help you get started.
HTML-
HTML stands for HyperText Markup Language. It is used to design web pages using the
markuplanguage.HTMListhecombinationofHypertextandMarkuplanguage.Hypertext
definesthelinkbetweenthewebpagesandmarkuplanguagedefinesthetextdocumentwithin the tag
that define the structure of web pages.

WhatisHTMLusedfor?
HTMLisusedtocreatethestructureofwebpagesthataredisplayedontheWorldWide
Web(www).ItcontainsTagsandAttributesthatareusedtodesignthewebpages.Also, we
can link multiple pages using Hyperlinks.

HTMLCanvas-The HTMLcanvas element provides HTMLa bitmapped surface to work


with. It is used to draw graphics on the web page.

TheHTML5<canvas>tagisusedtodrawgraphicsusingscriptinglanguagelikeJavaScript.

The <canvas> element is only a container for graphics, you must need a scripting language to
draw the graphics. The <canvas> element allows for dynamic and scriptable rendering of 2D
shapes and bitmap images.CSS: Cascading Style Sheets
CascadingStyleSheets(CSS)isastylesheetlanguageusedtodescribethepresentationofa
document written inHTMLorXML(including XMLdialects such as
SVG,MathMLorXHTML).CSS describes how elements should be rendered on screen, on
paper, in speech,or on other media.

1.ContentforEach Section:
• Early Life (early-
life.html):
• IncludedetailsaboutKalam'sbirth,family,andearlyexperiences.
• Education
(education.html):
• DetailKalam'seducationalbackground,degrees,andachievements.
• Career
(career.html):
• OutlineKalam'sprofessionaljourney,includingkeyrolesand
accomplishments.
• Contributions
(contributions.html):
• HighlightKalam'scontributionstoscience,technology,andsociety.
• Legacy
(legacy.html):
• DiscussthelastingimpactandlegacyofAPJAbdulKalam.

2. Images:
• Placerelevantimagesinthe"images"folderandrefertotheminyourHTMLfiles.

3. Testing:
• Testyourprojectindifferentbrowserstoensurecompatibility.
• Makesurethewebsiteisresponsivebycheckingonvariousdevices.

4.AdditionalEnhancements:
• AddCSSstyles,animations,orotherdesignelementstoenhancethevisualappeal.
• ConsidermakingthewebsiteinteractiveusingJavaScriptforamoreengaging
experience.
Thisproject structureandguideshouldhelpyougetstartedoncreating a
comprehensiveHTMLandCSScloneofAPJAbdulKalam'sbiography.Feelfreeto customize
and add more details based on your preferences and the available
content.

INDEX

S. No. TableofContent

1. HTML

2. HTMLCanvas

3. CSS
4 CSSimplemention.

HTML

WhatisHTML?
HTML stands for HyperText Markup Language. It is used to design web pages
using the markup language. HTML is the combination of Hypertext and Markup
language.Hypertextdefinesthelinkbetweenthewebpagesandmarkuplanguage
defines the text document within the tag that define the structure of web pages.

WhatisHTMLusedfor ?

HTMLisusedtocreatethestructureofwebpagesthataredisplayedontheWorld
WideWeb(www).Itcontains Tags andAttributes thatareusedtodesigntheweb
pages. Also, we can link multiple pages using Hyperlinks.

HTMLBasicFormatPageStructure

ThebasicstructureofanHTMLpageislaidoutbelow.Itcontainstheessential
buildingblock elements (i.e. doctype declaration, HTML, head, title, and body
elements)uponwhichallwebpagesarecreated.
• <DOCTYPE!html>–Adoctypeordocumenttypedeclarationisan
instruction that tells the web browser about the markup language in
which the current page is written. It is not an element or tag. The
doctypedeclarationisnotcase-sensitive.
• <html>–ThistagisusedtodefinetherootelementofHTML
document.ThistagtellsthebrowserthatitisanHTMLdocument.Itis the
second outer container element that contains all other elements
within it.
• <head>–ThistagisusedtodefinetheheadportionoftheHTML
document that contains information related to the document.
Elementswithintheheadtagarenotvisibleonthefront-endofa webpage.
• <body>–Thebodytagisusedtoencloseallthevisiblecontentofa
webpage.
Inotherwords,thebodycontentiswhatthebrowserwillshowonthefrontend.

ApplicationsofHTML
Asmentionedbefore,HTMLisoneofthemostwidelyusedlanguageovertheweb. I'm
going to list few of them here:
• Web pages development - HTML is used to create pages which are
rendered over the web. Almost every page of web is having html tags
in it to render its details in browser.
• Internet Navigation- HTML provides tags whichare usedto navigate
from one page to another and is heavily used in internet navigation.
• Responsive UI - HTML pages now-a-days works well on all platform,
mobile, tabs, desktop or laptops owing to responsive design strategy.

• OfflinesupportHTMLpagesonceloadedcanbemadeavailableofline on
the machine without any need of internet.
• Gamedevelopment-HTML5hasnativesupportforrichexperienceand is
now useful in gaming developent arena as well.

Audience
ThisHTMLtutorialisdesignedfortheaspiringWebDesignersandDeveloperswith
aneedto understandtheHTMLinenoughdetailalongwithitssimpleoverview,and
practical examples. This tutorial willgive you enough ingredients to start with HTML
from where you can take yourself at higher level of expertise. Prerequisites
youshouldhaveabasicworkingknowledgewithWindowsorLinuxoperatingsystem,
additionally you must be familiar with −

• Experience with any text editor like notepad, notepad++, or Edit plus
etc.
• Howtocreatedirectoriesandfilesonyourcomputer.
• Howtonavigatethroughdifferentdirectories.
• How totypecontentinafileandsavethemonacomputer.
UnderstandingaboutimagesindifferentformatslikeJPEG,PNG format.

AnHTMLelementisdefinedbyastartingtag.Iftheelementcontainsothercontent, it ends
with a closingtag, where the element name ispreceded by a forward slash as shown
below with few tags −
StartTag Content EndTag

<p> Thisisparagraphcontent. </p>

<h1> Thisisheadingcontent. </h1>

<div> Thisisdivisioncontent. </div>

<br/>
Sohere<p>....</p>isanHTMLelement,<h1>...</h1>isanotherHTMLelement.
TherearesomeHTMLelementswhichdon'tneedtobeclosed,suchas <img.../>,<hr
/>and<br/>elements.Theseareknownasvoidelements.

HTML documents consists of a tree of these elements and they specify how HTML
documentsshouldbebuilt,andwhatkindofcontentshouldbeplacedinwhatpartofan
HTML document.

HTMLTagvs.Element
AnHTMLelementisdefinedbyastartingtag.Iftheelementcontainsothercontent, it ends
with a closing tag.

Forexample,<p>isstartingtagofaparagraphand</p>isclosingtagofthesame paragraph
but <p>This is paragraph</p>is a paragraph element.

NestedHTMLElements
ItisverymuchallowedtokeeponeHTMLelementinsideanotherHTMLelement

HTMLCanvasTag
TheHTMLcanvaselementprovidesHTMLabitmappedsurfacetoworkwith.Itis used to
draw graphics on the web page.

TheHTML5<canvas>tagisusedtodrawgraphicsusingscriptinglanguagelike JavaScript.

The<canvas>elementisonlyacontainerforgraphics,youmustneedascripting language
to draw the graphics. The <canvas> element allows for dynamic and scriptable
rendering of 2D shapes and bitmap images.

It is a low level, proceduralmodel that updates a bitmap and does not have abuilt-in
scene.Thereareseveralmethodsincanvastodrawpaths,boxes,circles,textandadd
images.

HowtocreateaHTMLcanvas?
AcanvasisarectanglelikeareaonanHTMLpage.Itisspecifiedwithcanvaselement.
Bydefault,the<canvas>elementhasno borderandno content,itislikeacontainer.

1. <canvasid="mycanvas"width="200"height="100"></canvas>

HTML5CanvasTagExample
1. <canvas id="myCanvas1" width="300" height="100" style="border:2px
solid;">
2. YourbrowserdoesnotsupporttheHTML5canvastag.
3. </canvas>

SupportingBrowsers

Element
Chrome IE Firefox Opera Safari

<canvas> Yes Yes Yes Yes Yes

HTMLCanvasTagwithJavaScript
Acanvasisatwodimensionalgrid.

Coordinates(0,0)definestheupperleftcornerofthecanvas.Theparameters
(0,0,200,100)isusedforfillRect()method.Thisparameterwillfilltherectanglestart with
the upper-left corner (0,0) and draw a 200 * 100 rectangle.

Element
Chrome IE Firefox Opera Safari
<canvas> Yes Yes Yes Yes Yes

1. <canvasid="myCanvas"width="250"height="150"style="border:1pxsolid
#c3c3c3
;">

2. YourbrowserdoesnotsupporttheHTML5canvastag.
3. </canvas> 4.<script>
5. varc=document.getElementById("myCanvas");
6. varcctx=c.getContext("2d");
7. ctx.fillStyle="#FF0000";
8. ctx.fillRect(0,0,200,100);
9. </script>

Output:

SupportingBrowsers

HTMLCanvasTagwithJavaScript
Acanvasisatwodimensionalgrid.

Coordinates(0,0)definestheupperleftcornerofthecanvas.Theparameters
(0,0,200,100)isusedforfillRect()method.Thisparameterwillfilltherectanglestart with
the upper-left corner (0,0) and draw a 200 * 100 rectangle.

1. <canvasid="myCanvas"width="250"height="150"style="border:1pxsolid
#c3c3c3
;">

2. YourbrowserdoesnotsupporttheHTML5canvastag.
3. </canvas> 4.<script>

5. varc=document.getElementById("myCanvas");
6. varcctx=c.getContext("2d");
7. ctx.fillStyle="#FF0000";
8. ctx.fillRect(0,0,200,100);
9. </script>

Output:

DrawingLineonCanvas
If you want to draw a straight line on the canvas, you can use the following two

methods.moveTo(x,y):Itisusedtodefinethestartingpointoftheline.lineTo(x,y): It is

used to define the ending point of the line.

Ifyoudrawalinewhichstartingpointis(0,0)andtheendpointis(200,100),usethe stroke
method to draw the line.

1. <canvasid="myCanvasLine"width="200"height="100"style="border:1px solid
#d3 d3d3;">
2. YourbrowserdoesnotsupporttheHTML5canvastag.</canvas>
3. <script>
4. varc=document.getElementById("myCanvasLine");
5. varcctx=c.getContext("2d");
6. ctx.moveTo(0,0);
7. ctx.lineTo(200,100);
8. ctx.stroke();
9. </script>

Output:

DrawingCircleon Canvas
Ifyouwanttodrawacircleonthecanvas,youcanusethearc()method:

1. arc(x,y,r,start,stop)

Drawingtextoncanvas
There are property and methods used for drawing text on the canvas.font

property: It is used to define the font property for the text. fillText(text,x,y)
method: It is used to draw filled text on the canvas. It looks like boldfont.

strokeText(text,x,y)method:Itisalsousedtodrawtextonthecanvas,butthetextis

unfilled.

Let'sseefillText()methodexample.

1. <canvasid="myCanvasText1"width="300"height="100"style="border:1px
solid #d 3d3d3;">
2. Sorry!YourbrowserdoesnotsupporttheHTML5canvastag.</canvas>
3. <script>
4. varc=document.getElementById("myCanvasText1");
5. varcctx=c.getContext("2d");
6. ctx.font="30pxArial";
7. ctx.fillText("HelloJavaTpoint",10,50);
8. </script>

CSS:CascadingStyleSheets
CascadingStyleSheets(CSS)isastylesheetlanguageusedtodescribethe
presentation of a document written in HTMLorXML(including XML dialects such as
SVG,MathMLorXHTML).CSSdescribeshowelementsshouldberenderedonscreen, on
paper, in speech, or on other media.

CSS is among the core languages of the open web and is standardized across Web
browsers according to W3C specifications. Previously, the development of various
partsofCSSspecificationwasdonesynchronously,whichallowedtheversioningof the
latest recommendations. You might have heard about CSS1, CSS2.1, or even
CSS3.TherewillneverbeaCSS3oraCSS4;rather,everythingisnowCSSwithouta version
number.

After CSS2.1,thescopeofthe specification increasedsignificantly andthe progress


ondifferentCSSmodulesstartedtodiffersomuch,thatitbecamemoreeffectiveto
developandreleaserecommendationsseparatelypermodule.Insteadofversioning
theCSSspecification,W3Cnowperiodicallytakesasnapshotofthelateststablestateof the
CSS specificationand individual modules progress. CSS modules now have
versionnumbers,orlevels,suchasCSSColorModuleLevel5
USESOFCSS

• CreateStunningWebsite-CSShandlesthelookandfeelpartofaweb
page.UsingCSS,youcancontrolthecolorofthetext,thestyleoffonts, 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.
• Becomeawebdesigner-Ifyouwanttostartacarrerasaprofessional web
designer, HTML and CSS designing is a must skill.
• Control web - 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.
• Learnotherlanguages-OnceyouunderstandsthebasicofHTMLand
CSSthenotherrelatedtechnologieslikejavascript,php,orangularare
become easier to understand.
ACSScomprisesofstylerulesthatareinterpretedbythebrowserandthenappliedto 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−ApropertyisatypeofattributeofHTMLtag.Putsimply,all the
HTML attributes are converted into CSS properties. They could be
color, border etc.
• Value−Valuesareassignedtoproperties.Forexample,colorproperty can
have value either red or #F1F1F1 etc.

YoucanputCSSStyleRuleSyntaxasfollows−

selector{property:value}

Example−Youcandefineatableborderasfollows−

table{border:1pxsolid#C00;}
Heretableisaselectorandborderisapropertyandgivenvalue1pxsolid#C00isthe value of
that property.
Youcandefineselectorsinvarioussimplewaysbasedonyourcomfort.Letmeput these

selectors one by one. The Type Selectors

Thisisthesameselectorwehaveseenabove.Again,onemoreexampletogivea color to all


level 1 headings −

h1 {
color:#36CFFF;}

TheUniversalSelectors
Ratherthanselectingelementsofaspecifictype,theuniversalselectorquitesimply
matches the name of any element type −

*{
color:#000000;}

Thisrulerendersthecontentofeveryelementinourdocumentinblack.

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

ulem
{
color:
#0000
00;}

TheClass Selectors
Youcandefinestylerulesbasedontheclassattributeoftheelements.Allthe elements
having that class will be formatted according to the defined rule.

.black
{
color: #0000
00;}
This rule rende rsthe conte nt in black for every
eleme nt with class attrib ute
setto black inour docu ment. You can make it a
bit more partic ular. For exam ple −

h1.black{
color:#000000;}

Thisrulerendersthecontentinblackforonly<h1>elementswithclassattributeset to
black.

Youcanapplymorethanoneclassselectorstogivenelement.Considerthefollowing
example
−

<pclass="centerbold">
Thisparawillbestyledbytheclassescenterandbold.</p>
TheID Selectors
Youcandefinestylerulesbasedontheidattributeoftheelements.Alltheelements having
that id will be formatted according to the defined rule.

#blac
k{
color:
#0000
00;}

Thisrulerendersthecontentinblackforeveryelementwithidattributesettoblack
inourdocument.Youcanmakeitabitmoreparticular.Forexample−
h1#
blac
k{
colo
r:
#00
000
0;}

Thisrulerendersthecontentinblackforonly<h1>elementswithidattributesetto
black.

Thetruepowerofidselectorsiswhentheyareusedasthefoundationfor descendant
selectors,For example −
#black h2 {
color:} #000000;

Inthisexamplealllevel2headingswillbedisplayedinblackcolorwhenthose headings will


lie with in tags having id attribute set to black.

TheChildSelectors
Youhaveseenthedescendantselectors.Thereisonemoretypeofselector,whichis very
similar to descendants but have different functionality. Consider the following
example −

body >p{
color:#000000;}

Thisrulewillrenderalltheparagraphsinblackiftheyaredirectchildof<body>
element.Otherparagraphsputinsideotherelementslike<div>or<td>wouldnot have
any effect of this rule.

TheAttributeSelectors
YoucanalsoapplystylestoHTMLelementswithparticularattributes.Thestylerule
belowwillmatchalltheinputelementshavingatypeattributewithavalueoftext−

input[type="text"]{
colo
r:
#00
000
0;}

Theadvantagetothismethodisthatthe<inputtype="submit"/>elementis unaffected,
and the color applied only to the desired text fields.

Therearefollowingrulesappliedtoattributeselector.

• p[lang]−Selectsallparagraphelementswithalangattribute.
• p[lang="fr"] − Selects all paragraphelements whoselang attribute
has a value of exactly "fr".
• p[lang~="fr"] − Selects all paragraph elements whose lang attribute
contains the word "fr".
• p[lang|="en"] − Selects all paragraph elements whose lang attribute
contains values that are exactly "en", or begin with "en-".

MultipleStyleRules
Youmayneedtodefinemultiplestylerulesforasingleelement.Youcandefinethese rules to
combine multiple properties and corresponding values into a single block as defined
in the following example −

h1{color:
#36C;
fontweight:
normal;
letterspacing
:.4em;
marginbotto
m: 1em;
texttransfor
m:
lowercase;}

Hereallthepropertyandvaluepairsareseparatedbyasemicolon(;).Youcankeep
theminasinglelineormultiplelines.Forbetterreadability,wekeeptheminseparate lines.

For a while, don't bother about the propertiesmentioned in the above block. These
propertieswillbeexplainedinthecomingchaptersandyoucanfindcompletedetail about
properties in CSS References

GroupingSelectors
Youcanapplyastyletomanyselectorsifyoulike.Justseparatetheselectorswitha comma,
as given in the following example −

h1,h2,h3 {color:#36C;
font-weight:normal;letter-spacing:
.4em;margin-bottom: 1em; texttransform:lowercase;}This
definestylerulewillbeapplicableto h1, h2 and h3 element as well. The order of the list is irrelevant. All the
elements inthe selectorwillhave the correspondingdeclarationsappliedto them.

Youcancombinethevariousidselectorstogetherasshownbelow−
#content,#footer,#supplement{ p
osition: absolute; left: 510px;
width: 200px;

Overviewoftheproject

css part-CSS stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It provides an
additionalfeaturetoHTML.ItisgenerallyusedwithHTMLtochangethestyleof webpages
anduserinterfaces.ItcanalsobeusedwithanykindofXMLdocumentsincludingplainXML, SVG.

*
{
m
ar
gi
n
:
0
;
p
a
d
d
i
n
g
:
0
;
box-sizing:border-box;
}

.container {
background-
color:#e5e5fd;
min-height:
100vh;border:
10pxsolid
#1d1e4c;
}

.conten
t{
max-
width:
900px;
margin:
0 auto;
}
.top_section{
margin-top:100px;
display: flex;
justify-content:
space-between;
align-items:flex-
end;
}
.top_section
h1 {font-
size: 50px;
font-weight:
bold;
color:
#1d1e4c;
text-transform:
uppercase; }

.top_section
h4 {font-
size: 30px;
text-align:
end;
}

.image_container
{ border-radius:
50%; overflow:
hidden;
}

.image_co
ntainer,
img {
width:
300px;
height:
320px;}
.about_se
ction {
margin-
top:50px;
}
.about_se
ction h2 {
font-size:
70px;
font-
weight:
400;
margin-
bottom:
20px; }
.about_se
ction p {
font-size:
20px;
line-
height:
30px;
letter-
spacing:
1.2px;
text-align:
justify; }
.biograph
y_section
{margin:
50px 0; }
.biograph
y_section
h3{
margin-
bottom:
20px; }
.biograph
y_section
ul {
margin-
left:50px;
}
.biograph
y_section
li {
margin-
bottom:
15px;
}

fo
ot
er
{
ma
rgi
n:
50
px
0;
}
fo
ot
er
p{
tex
t-
ali
gn:
en
d;
INDEX

S. No. TableofContent

1. Phaser framework

2. Css

3. Htmlcode.
FRAMEWORK
Certainly! Creating a clone project of APJ Abdul Kalam's biography using HTML and
CSSisagreatwaytopracticeyourwebdevelopmentskills.Here'sadetailedguideto help you
get started:

1.ProjectStructure:

Createafolderforyourprojectandorganizeitlikethis:

markdownCopycode
- - - - - - - - -

- -

2.HTMLStructure(index .html):

htmlCopycode
html lang"en" charset"UTF- name"viewport"
8"
content"width=device-width,initial-scale=1.0" rel"stylesheet"href="css/styles.css"

href"#early-life"
href"#education"
href="#career"
href="#contributions"
href"#legacy"
id"early-life"
id"education"
id"career"
id"contributions" s

id"legacy"<! </ma -- &copy;


YN</

3.CSSStyles(styles.css):

cssCopycode
bodyfont-family:'Arial',s margin:0;padding:0;}na background-color:#333padding:
10pxlist-style-typen margin0padding0na l{display margin-right:20px
text-decoration color font-weightb}mapadding20px
background-color#333color text-align padding:10pxposition:x bottom0width
100%
4. ContentforEachSection:

• EarlyLife(early-life.html):
IncludedetailsaboutKalam'sbirth,family,andearlyexperiences.
Education(education.html):
DetailKalam'seducational background,degrees,and
achievements.
Career(career.htm l):
• OutlineKalam'sprofessionaljourney,includingkeyrolesand accomplishments.

Contributions(contributions.html):
HighlightKalam'scontributionstoscience,technology,and
society.
Legacy(legacy.html):
DiscussthelastingimpactandlegacyofAPJAbdulKalam.

5. Images:

• Placerelevantimagesinthe"images"folderandrefertotheminyourHTMLfiles.

6. Testing:
• Testyourprojectindifferentbrowserstoensurecompatibility.
• Makesurethewebsiteisresponsivebycheckingonvariousdevices.

7.AdditionalEnhancements:
• AddCSSstyles,animations,orotherdesignelementstoenhancethevisual appeal.

• ConsidermakingthewebsiteinteractiveusingJavaScriptforamoreengaging
experience.
This project structure and guide should help you get started on creating a
comprehensive HTML and CSS clone ofAPJ Abdul Kalam's biography. Feel
freetocustomizeandaddmoredetailsbasedonyourpreferencesandthe
availablecontent.
Yo

css

fre

wo

rks
CSS frameworks are pre-prepared libraries that are meant to be used as a
foundationforfasterandmoreconsistentwebdevelopment.Theyprovide a set
of pre-written, standardized code in HTML, CSS, and sometimes
JavaScript,whichdeveloperscanleveragetostreamlinethedevelopment
process. Here are some popular CSS frameworks:

1. Bootstrap:
• Link:Bootstrap
• Description: Oneofthemostwidelyused frameworks,Bootstrap
offersaresponsivegridsystem,pre-designedcomponents,and a
variety of CSS and JavaScript utilities.
2. Foundation:
• Link:Foundation
• Description:Aresponsivefront-endframeworkthatincludesa
responsivegridsystem,UIcomponents,andJavaScriptplugins. It's
known for its flexibility and customization options.
3. Bulma:
• Link:Bulma
• Description: A modern CSS framework based on Flexbox.
Bulmaislightweightandeasytouse,providingasimpleand
intuitive way to create responsive web interfaces.
4. Semantic UI:
• Link:SemanticUI
• Description:Aframeworkthatuseshuman-friendlyHTMLto
create responsive and visually appealing user interfaces. It
comes with a variety of themes and components.
5. MaterializeCSS:
• Link:Materialize
Description:
Based •on Google's Material Design principles, MaterializeCSSprovidesamodernandres
TailwindCSS:
Link:
Description: A utility-first CSS framework that gives you low- levelutility classes to bu

Theseframeworkscanbebeneficialfordifferentprojectsdependingon
yourrequirements,familiarity,andpreferences.Theyoftencomewithbuilt- in
responsiveness, consistent styling, and can save a significant amount of
time during development. However, keep in mind that using a framework
might add some overhead, and for smaller projects or projects with very
specificdesignrequirements,youmightchoosetobuildyourstylesfrom scratch.

HTML code
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>

<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>

<title>TheTributeWebsite|A.P.JAbdulKalam</title>

<linkrel="stylesheet"href="style.css"/>
</head>
<body>
<divclass="container">
<divclass="content">

<sectionclass="top_section">

<divclass="image_container">

<imgsrc="./images/apj.jpg"alt="tribute"/>
</div>

<div>

<h1>A.P.JAbdulKalam</h1>
<h4>1931-2015</h4>

</div>

</section>

<sectionclass="about_section">
<h2>MissileManofIndia</h2>

<p>
<b>AvulPakirJainulabdeenAbdulKalam</b>15October1931–27July 2015) was an
Indian aerospace scientist who served as the 11th
presidentofIndiafrom2002to2007.Hewasbornandraisedin
Rameswaram, Tamil Nadu and studied physics and aerospace engineering.
He spent the next four decades as a scientist and science
administrator, mainly at the Defence Research and Development
Organisation (DRDO) and Indian Space Research
Organisation(ISRO)andwasintimatelyinvolvedinIndia'scivilian space
programme and military missile development efforts.[1] He thus
came to be known as the Missile Man of India for his work on the
development of ballistic missile and launch vehicle technology.[2][3]
[4] He also played a pivotal organisational,
technical,andpoliticalroleinIndia'sPokhran-IInucleartestsin
1998,thefirstsincetheoriginalnucleartestbyIndiain1974.
</p>
</section>

<sectionclass="biography_section">

<h3>Biographies</h3>

<ul>

<li>

EternalQuest:LifeandTimesofDrKalambySChandra;Pentagon
Publishers, 2002.
</li>

<li>
PresidentAPJAbdulKalambyRKPruthi;AnmolPublications,
2002.
</li>

<li>

APJAbdulKalam:TheVisionaryofIndiabyKBhushan,GKatyal; A P H Pub
Corp, 2002.
</li>

<li>

ALittleDream(documentaryfilm)byP.Dhanapal;MinveliMedia Works
Private Limited, 2008.
</li>

<li>

TheKalamEffect:MyYearswiththePresidentbyPMNair;Harper Collins, 2008.


</li>

<li>

MyDaysWithMahatmaAbdulKalambyFrAKGeorge;Novel Corporation,
2009.
</li>

<li>
A.P.J.AbdulKalam:ALifebyArunTiwari;HaperCollins,2015.
</li>

<li>

ThePeople'sPresident:DrAPJAbdulKalambySMKhan; Bloomsbury
Publishing, 2016.
</li>

</ul>

</section>

<footer>

<p>
ReadmoreaboutA.P.J.AbdulKalamon
<ahref="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam"
>Wikipedia.</a
>
</p>
</footer>

</div>

</div>

</body>

</html>

CSSimplemation

<style>*{
margin:0;
padding:
0;
box-sizing:border-
box;
}

.container {
background-color:
#e5e5fd;
min-height:
100vh;
border:10pxsolid
#1d1e4c;
}

.content{

max-width:900px;
margin: 0
auto;
}
.top_section{

margin-top:100px;
display:
flex;
justify-content:space-
between;
align-items:flex-
end;
}
.top_sectionh1{ f
ont-size:
50px;
font-weight:
bold;
color:
#1d1e4c;
text-transform:
uppercase;
}

.top_sectionh4{ f
ont-size:
30px;
text-align:
end;
}

.image_container{
border-radius:
50%;
overflow:
hidden;
}

.image_container,
img
{
width:
300px;
height:
320px;
}

.about_section{

margin-top:50px;
}
.about_sectionh2{ f
ont-size:
70px;
font-weight:
400;
margin-bottom:
20px;

}
.about_sectionp{
font-size:
20px;
line-height:
30px;
letter-spacing:
1.2px;
text-align:
justify;

}
.biography_section{ margin
: 50px
0;
}
.biography_sectionh3{ m
argin-bottom:
20px;
}
.biography_sectionul{ m
argin-left:
50px;
}
.biography_sectionli{ m
argin-bottom:
15px;
}
footer{
margin:50px
0;
}
footer p {
text-align:
end;

}</style>

Creating a clone website of a public figure like APJ Abdul Kalam without proper authorization is not
It's important to respect intellectual property rights, privacy, and the legacy of individuals,especiallyt
cloning or impersonation can harm the reputation of the person involved and may resultinlegalact

You might also like