‭ ‬

A
‭INDUSTRIAL TRAINING REPORT‬
‭ON‬
‭MEDICAL SERVICES‬
‭Submitted In Partial Fulfillment‬
‭for the award of the degree of‬
‭Bachelor of Technology‬
‭In‬
‭Computer Science Engineering‬
‭(Bikaner Technical University, Bikaner )‬

‭Session 2023-2024‬

‭ UBMITTED TO:‬
S ‭ UBMITTED BY:‬
S
‭Ms. Bhawana Maurya Priyanka Prajapat‬
‭Assistant Professor Roll No-.20EEMCS076‬
‭(Dept. of Information Technology) VII Sem CSE B‬

‭DEPARTMENT OF COMPUTER ENGINEERING‬

‭MAHILA ENGINEERING COLLEGE‬
‭NASIRABAD ROAD,MAKHUPURA, AJMER‬
‭CERTIFICATE‬

‭i‬
 ‭CANDIDATE DECLARATION‬

‭I‬ ‭hereby‬ ‭declare‬ ‭that‬ ‭the‬ ‭work‬ ‭which‬ ‭is‬ ‭being‬ ‭presented‬ ‭in‬ ‭the‬ ‭Industrial‬ ‭Training‬ ‭report‬ ‭entitled‬
‭MEDICAL‬‭SERVICES‬‭in‬‭partial‬‭fulfillment‬‭for‬‭the‬‭award‬‭of‬‭the‬‭Degree‬‭of‬‭Bachelor‬‭of‬‭Technology‬
‭In‬ ‭Computer‬ ‭Engineering‬ ‭and‬ ‭submitted‬ ‭to‬ ‭the‬ ‭Department‬ ‭of‬ ‭Computer‬ ‭Engineering‬ ‭,Mahila‬
‭Engineering‬‭College‬‭,‬‭Ajmer‬‭is‬‭an‬‭authentic‬‭record‬‭of‬‭my‬‭own‬‭work‬‭carried‬‭out‬‭during‬‭the‬‭session‬
‭2023 - 2024.‬
‭I have not submitted the matter presented in this report anywhere for the award of any other Degree.‬

‭Priyanka Prajapat‬
‭20EEMCS076‬

‭ii‬
 ‭ACKNOWLEDGEMENT‬

‭I‬ ‭take‬ ‭this‬ ‭opportunity‬ ‭to‬ ‭express‬ ‭my‬ ‭gratitude‬ ‭to‬ ‭all‬ ‭those‬ ‭people‬ ‭who‬ ‭have‬ ‭been‬ ‭directly‬ ‭and‬
‭indirectly with me during the competition of this Industrial Training.‬
‭I‬‭pay‬‭thank‬‭to‬‭those‬‭who‬‭have‬‭given‬‭guidance‬‭and‬‭a‬‭light‬‭to‬‭me‬‭during‬‭this‬‭Industrial‬‭Training.‬‭His‬
‭versatile‬‭knowledge‬‭about‬‭“Frontend‬‭Developer”‬‭has‬‭eased‬‭me‬‭in‬‭critical‬‭times‬‭during‬‭the‬‭span‬‭of‬
‭this‬ ‭Industrial‬ ‭Training.‬ ‭Firstly,‬ ‭I‬ ‭am‬ ‭grateful‬ ‭to‬ ‭the‬ ‭principal‬ ‭Dr.‬ ‭JK‬ ‭DEEGWAL‬ ‭and‬ ‭the‬
‭department‬ ‭of‬ ‭computer‬ ‭science‬ ‭&‬ ‭engineering‬ ‭of‬ ‭women‬‭engineering‬‭college‬‭who‬‭gave‬‭us‬‭the‬
‭golden‬ ‭opportunity‬ ‭to‬ ‭do‬ ‭these‬ ‭wonderful‬ ‭projects‬ ‭during‬ ‭the‬ ‭Summer‬ ‭Industrial‬ ‭Training‬
‭program for us.‬
‭Also,‬ ‭I‬ ‭extend‬ ‭my‬ ‭thanks‬ ‭and‬ ‭gratitude‬ ‭to‬ ‭Ms‬ ‭Bhawana‬ ‭Maurya,‬ ‭Govt.‬ ‭Women‬ ‭Engineering‬
‭College,‬ ‭Ajmer,‬ ‭my‬ ‭internship‬ ‭coordinator‬ ‭whose‬ ‭guidance,‬ ‭teaching‬ ‭and‬ ‭certain‬ ‭suggestions‬
‭provide‬ ‭me‬ ‭with‬ ‭timely‬ ‭valuable‬ ‭input‬ ‭which‬ ‭enhanced‬ ‭my‬ ‭knowledge‬ ‭and‬ ‭thus‬ ‭helped‬ ‭in‬
‭development of this training report.‬
‭I‬ ‭acknowledge‬ ‭our‬ ‭debt‬ ‭to‬ ‭those‬ ‭who‬ ‭contributed‬ ‭significantly‬ ‭to‬ ‭one‬ ‭or‬ ‭more‬ ‭steps.‬ ‭I‬ ‭take‬‭full‬
‭responsibility for any remaining sins of omission and commission.‬

‭ ours Sincerely‬
Y
‭Priyanka Prajapat‬
‭20EEMCS07‬

‭iii‬
 ‭ABSTRACT‬

‭This‬ ‭project‬ ‭involves‬ ‭the‬ ‭development‬ ‭of‬ ‭a‬ ‭responsive‬ ‭and‬ ‭visually‬ ‭appealing‬ ‭Medical‬‭Services‬
‭Portfolio‬ ‭using‬ ‭HTML,‬ ‭CSS,‬ ‭and‬ ‭Bootstrap.‬ ‭The‬‭portfolio‬‭will‬‭feature‬‭clear‬‭navigation,‬‭detailed‬
‭descriptions‬‭of‬‭various‬‭medical‬‭services,‬‭and‬‭high-quality‬‭visuals‬‭to‬‭enhance‬‭user‬‭experience.‬‭The‬
‭integration‬ ‭of‬ ‭an‬ ‭appointment‬ ‭booking‬ ‭system‬ ‭aims‬ ‭to‬ ‭streamline‬ ‭patient‬ ‭interaction,‬ ‭while‬ ‭a‬
‭dedicated‬‭section‬‭for‬‭testimonials‬‭and‬‭success‬‭stories‬‭builds‬‭trust‬‭and‬‭credibility.‬‭Adhering‬‭to‬‭web‬
‭standards,‬‭the‬‭portfolio‬‭ensures‬‭compatibility‬‭across‬‭browsers‬‭and‬‭accessibility‬‭standards.‬‭Overall,‬
‭this‬ ‭project‬ ‭aims‬ ‭to‬ ‭provide‬ ‭a‬ ‭comprehensive‬ ‭and‬ ‭user-friendly‬ ‭platform‬ ‭for‬ ‭showcasing‬ ‭the‬
‭healthcare‬ ‭provider's‬ ‭expertise‬ ‭and‬‭services,‬‭fostering‬‭positive‬‭connections‬‭with‬‭both‬‭current‬‭and‬
‭potential patients.‬

‭iv‬
 ‭TABLE OF CONTENTS‬

‭S.NO‬ ‭TOPICS‬ ‭PAGE.NO‬

‭Certificate Of Completion‬ ‭i‬

‭Candidate Declaration‬ ‭ii‬

‭Acknowledgement‬ ‭iii‬

‭Abstract‬ ‭iv‬

‭1.‬ ‭INTRODUCTION OF COMPANY‬ ‭1‬

‭2.‬ ‭INTRODUCTION OF PROJECT‬

‭2-6‬
‭2.1 HTML‬
‭2.1.1 HTML Basics‬ ‭‬
2
‭2.1.2 HTML Headings‬ ‭2‬
‭2.1.3 HTML Formatting Elements‬ ‭2‬
‭2.1.4‬‭HTML Forms‬ ‭3‬
‭3‬
‭2.1.5 Tags and Attributes‬
‭3‬
‭2.1.6 HTML Template‬ ‭4‬
‭2.1.7 Page Structure Elements‬ ‭4‬
‭2.1.8 Key Structure Elements‬ ‭4‬
‭2.1.9 List And Data‬ ‭5‬
‭2.1.10 Standard List Types‬ ‭5‬
‭2.1.11 Links And Images‬ ‭6‬
‭6‬
‭2.2‬‭CSS‬ ‭7-11‬
‭2.2.1 CSS Introduction‬
‭2.2.2 CSS Selectors, Colour, Background‬ ‭‬
7
‭2.2.3 CSS Borders, Margins, Padding‬ ‭7‬
‭2.2.4 CSS Height/Width, Outline‬ ‭8‬
‭2.2.5 CSS Text,Font, icons‬ ‭9‬
‭9‬
‭2.2.6 CSS Links, Lists, Tables‬ ‭10‬
‭2.2.7 CSS Position‬ ‭10‬
‭2.2.8 CSS Display‬ ‭11‬

‭2.3 BOOTSTRAP5‬ ‭12-15‬

‭2.3.1 BOOTSTRAP Introduction‬
‭ 2‬
1
‭2.3.2 Advantages of Bootstrap‬
‭12‬
 2‭ .3.3 Where to Get Bootstrap 5‬ ‭ 2‬
1
‭2.3.4 Bootstrap 5 Containers‬ ‭12‬
‭2.3.5 Bootstrap 5 Grid System‬ ‭13‬
‭13‬
‭2.3.6 Text Colors‬
‭2.3.7 Image Shapes
‭2.3.8 Bootstrap 5 Jumbotron‬
‭2.3.9 Button Groups‬
‭2.3.10 Modals‬

‭3.‬ ‭COMMANDS AND CODES‬ ‭16-29‬

‭4.‬ ‭RESULTS‬ ‭30-33‬

‭5.‬ ‭FUTURE WORK‬ ‭34‬

‭6.‬ ‭CONCLUSION‬ ‭35‬

‭7.‬ ‭REFERENCES‬ ‭36‬

 ‭INTRODUCTION OF COMPANY‬

‭OnEggy‬ ‭Technologies‬ ‭is‬ ‭a‬ ‭leading‬ ‭innovator‬ ‭in‬ ‭the‬ ‭tech‬ ‭industry,‬ ‭dedicated‬ ‭to‬ ‭providing‬
‭top-quality‬‭solutions‬‭that‬‭drive‬‭progress‬‭and‬‭streamline‬‭processes‬‭for‬‭businesses‬‭around‬‭the‬‭world.‬
‭With‬ ‭a‬ ‭team‬ ‭of‬ ‭highly‬ ‭skilled‬ ‭professionals‬ ‭at‬ ‭the‬‭forefront‬‭of‬‭cutting-edge‬‭technology,‬‭OnEggy‬
‭Technologies‬‭is‬‭poised‬‭to‬‭lead‬‭the‬‭charge‬‭in‬‭the‬‭world‬‭of‬‭egg-ceptional‬‭innovation.‬‭From‬‭artificial‬
‭intelligence‬ ‭to‬ ‭cloud‬ ‭computing,‬ ‭we‬ ‭are‬ ‭always‬ ‭pushing‬ ‭the‬ ‭boundaries‬ ‭of‬ ‭what‬ ‭is‬ ‭possible‬‭and‬
‭seeking‬ ‭out‬‭new‬‭and‬‭exciting‬‭opportunities‬‭to‬‭make‬‭a‬‭meaningful‬‭impact.‬‭With‬‭a‬‭commitment‬‭to‬
‭excellence‬ ‭and‬ ‭a‬ ‭passion‬ ‭for‬ ‭all‬ ‭things‬ ‭tech,‬ ‭OnEggy‬ ‭Technologies‬ ‭is‬ ‭the‬ ‭go-to‬ ‭choice‬ ‭for‬
‭companies looking to take their business to the next level‬

‭1‬
 ‭INTRODUCTION OF PROJECT‬

‭2.1 HTML‬
‭ TML‬ ‭is‬ ‭used‬ ‭as‬ ‭the‬ ‭graphical‬ ‭user‬ ‭interface‬ ‭in‬ ‭client-side‬ ‭programs‬ ‭written‬ ‭in‬ ‭JavaScript.‬
H
‭Server-side‬‭languages‬‭like‬‭PHP‬‭and‬‭Java‬‭also‬‭receive‬‭data‬‭from‬‭web‬‭pages‬‭and‬‭use‬‭HTML‬‭as‬‭the‬
‭output‬ ‭mechanism.‬ ‭The‬ ‭emerging‬ ‭Ajax‬ ‭technologies‬ ‭likewise‬ ‭use‬ ‭HTML‬ ‭and‬ ‭XHTML‬ ‭as‬ ‭their‬
‭visual‬ ‭engine.‬ ‭HTML‬ ‭was‬ ‭once‬ ‭a‬ ‭very‬‭loosely-defined‬‭language‬‭with‬‭very‬‭little‬‭standardization,‬
‭but as it has become more important, the need for standards has become more apparent.‬

‭2.1.1 HTML Headings‬

‭ TML‬‭headings‬‭are‬‭defined‬‭with‬‭the‬‭<h1>‬‭to‬‭<h6>‬‭tags.‬‭<h1>‬‭defines‬‭the‬‭most‬‭important‬‭heading.‬
H
‭<h6>‬‭defines the least important heading.‬

‭2.1.2 HTML Formatting Elements‬

‭Formatting elements were designed to display special types of text:‬

‭‬
● ‭ b>‬‭- Bold text‬
<
‭●‬ ‭<strong>‬‭- Important text‬
‭●‬ ‭<i>‬‭- Italic text‬
‭●‬ ‭<em>‬‭- Emphasized text‬
‭●‬ ‭<mark>‬‭- Marked text‬
‭●‬ ‭<small>‬‭- Smaller text‬
‭●‬ ‭<del>‬‭- Deleted text‬
‭●‬ ‭<ins>‬‭- Inserted text‬
‭●‬ ‭<sub>‬‭- Subscript text‬
‭●‬ ‭<sup>‬‭- Superscript tex‬

‭2.1.3 HTML Forms‬

‭ he‬ ‭<form>‬ ‭element‬ ‭is‬ ‭a‬ ‭container‬ ‭for‬ ‭different‬ ‭types‬ ‭of‬ ‭input‬ ‭elements,‬ ‭such‬ ‭as:‬ ‭text‬ ‭fields,‬
T
‭checkboxes, radio buttons, submit buttons, etc.‬
‭The <input> Element‬
‭The HTML‬‭<input>‬‭element is the most used form element.‬

‭An‬‭<input>‬‭element can be displayed in many ways, depending on the‬‭type‬‭attribute.‬

‭Here are some examples‬

‭2‬
 ‭Type‬ ‭Description‬

‭<input type="text">‬ ‭Displays a single-line text input field‬

‭<input type="radio">‬ ‭ isplays‬ ‭a‬ ‭radio‬ ‭button‬ ‭(for‬ ‭selecting‬ ‭one‬ ‭of‬ ‭many‬
D
‭choices)‬

‭<input type="checkbox">‬ ‭ isplays‬ ‭a‬ ‭checkbox‬ ‭(for‬ ‭selecting‬ ‭zero‬ ‭or‬ ‭more‬ ‭of‬
D
‭many choices)‬

‭<input type="submit">‬ ‭Displays a submit button (for submitting the form)‬

‭<input type="button">‬ ‭Displays a clickable button‬

‭2.1.4 Tags and Attributes‬

‭ n‬ ‭HTML‬ ‭document‬ ‭is‬ ‭based‬ ‭on‬ ‭the‬‭notion‬‭of‬‭tags.‬‭A‬‭tag‬‭is‬‭a‬‭piece‬‭of‬‭text‬‭inside‬‭angle‬‭brackets‬
A
‭(<>).‬‭Tags‬‭typically‬‭have‬‭a‬‭beginning‬‭and‬‭an‬‭end,‬‭and‬‭usually‬‭contain‬‭some‬‭sort‬‭of‬‭text‬‭inside‬‭them.‬
‭For example, a paragraph is normally denoted like this:‬

‭<p>This is a simple paragraph</p>‬

‭<img src = "logo.jpg" Alt = "this is the logo" />‬

‭ he‬ ‭src‬ ‭attribute‬ ‭describes‬ ‭where‬ ‭the‬ ‭image‬ ‭file‬ ‭can‬ ‭be‬ ‭found,‬ ‭and‬ ‭the‬ ‭alt‬ ‭attribute‬ ‭describes‬
T
‭alternate text that is displayed if the image is unavailable.‬

‭2.1.5 Nested tags‬

‭ ags‬‭can‬‭be‬‭(and‬‭frequently‬‭are)‬‭nested‬‭inside‬‭each‬‭other.‬‭Tag‬‭cannot‬‭overlap,‬‭so‬‭is‬‭not‬‭legal,‬‭but‬‭is‬
T
‭fine.‬

‭2.1.6 HTML‬‭Template‬
‭The following code can be copied and pasted to form the foundation of a basic web page:‬

‭3‬
‭2.1.7 PAGE STRUCTURE ELEMENTS‬
‭The following elements are part of every web page.‬

‭<html></html>‬ ‭Surrounds the entire page‬

‭<head></head>‬ ‭Contains header information (metadata, CSS styles, JavaScript code)‬

‭Element‬ ‭Description‬

‭<title></title>‬ ‭ olds the page title normally displayed in the title bar and used in‬
H
‭search results‬

‭<body></body>‬ ‭ ontains the main body text. All parts of the page normally visible‬
C
‭are in the body‬

‭2.1.7 KEY STRUCTURAL ELEMENTS‬

‭Most pages contain the following key structural elements:‬

‭Element‬ ‭Name‬ ‭Description‬

‭<h1></h1>‬ ‭Heading 1‬ ‭Reserved fo strongest emphasis‬

‭<h2></h2>‬ ‭Heading 2‬ ‭ econdary level heading. Headings go down to level‬

S
‭6, but<h1> through<h3> are most common‬

‭<p></p>‬ ‭Paragraph‬ ‭ ost of the body of a page should be enclosed in‬

M
‭paragraphs‬

‭<div></div>‬ ‭Division‬ ‭ imilar to a paragraph, but normally marks a section‬

S
‭of a page. Divs usually contain paragraphs‬

‭2.1.8 LISTS AND DATA‬

‭ eb pages frequently incorporate structured data so HTML includes several useful list and table‬
W
‭tag‬

‭4‬
‭Element‬ ‭Name‬ ‭Description‬

‭ ormally these lists feature bullets (but that can‬

N
‭<ul></ul>‬ ‭Unordered list‬ ‭be changed with CSS)‬

‭ hese usually are numbered, but this can be‬

T
‭<ol></ol>‬ ‭Ordered list‬ ‭changed with CSS‬

‭Name‬ ‭Description‬
‭Element‬

‭ sed to describe a list item in an unordered list or‬

U
‭<li></li>‬ ‭List item‬ ‭an ordered list‬

‭Used for lists with name-value pairs‬

‭<dl></dl>‬ ‭Definition list‬

‭ he name in a name-value pair. Used in definition‬

T
‭<dt></dt>‬ ‭Definition term‬ ‭lists‬

‭The value (or definition) of a name, value pair‬

‭<dd></dd>‬ ‭ efinition‬
D
‭description‬

‭5‬
 ‭ efines a table row. A table normally consists of‬
D
‭<tr></tr>‬ ‭Table row‬ ‭several <tr> pairs (one per row)‬

‭<td></td>‬ ‭Table data‬ I‭ ndicates data in a table cell. <td> tags occur‬
‭within <tr> (which occur within‬
‭<table>)‬

‭Table heading‬ I‭ ndicates a table cell to be treated as a heading‬

‭<th></th>‬ ‭with special formatting‬

‭2.1.9 Standard List Types‬

‭HTML‬ ‭supports‬ ‭three‬ ‭primary‬ ‭list‬ ‭types.‬ ‭Ordered‬ ‭lists‬ ‭and‬ ‭unordered‬ ‭lists‬ ‭are‬ ‭the‬ ‭primary‬ ‭list‬
‭types. By default, ordered lists use numeric identifiers, and unordered lists use bullets‬
‭<ol>‬
‭<li> one </li>‬
‭<li> two </li>‬
‭<li>t hree </li>‬
‭</ol>‬
‭Links‬‭and‬‭images‬‭are‬‭both‬‭used‬‭to‬‭incorporate‬‭external‬‭resources‬‭into‬‭a‬‭page.‬‭Both‬‭are‬‭reliant‬‭on‬
‭URIs (Universal Resource Indicators), commonly referred to as URLs or addresses.‬
‭<a> (anchor) The anchor tag is used to provide the basic web link:‬
‭<a href =‬‭"http://www.example.com"‬‭>link to example.com</a‬

‭6‬
‭2.2 CSS‬
‭CSS stands for Cascading Style Sheet‬
‭CSS describes how HTML elements are to be displayed on screen, paper, or in other media‬
‭CSS‬ ‭saves‬ ‭a‬ ‭lot‬ ‭of‬ ‭work.‬ ‭It‬ ‭can‬ ‭control‬ ‭the‬ ‭layout‬ ‭of‬ ‭multiple‬ ‭web‬ ‭pages‬ ‭all‬ ‭at‬ ‭once‬ ‭External‬
‭stylesheets are stored in CSS f‬‭iles‬
‭2.2.1 CSS Syntax‬

‭The selector points to the HTML element you want to style.‬

‭The‬ ‭declaration‬ ‭block‬ ‭contains‬ ‭one‬ ‭or‬ ‭more‬ ‭declarations‬ ‭separated‬ ‭by‬ ‭semicolons.‬ ‭Each‬
‭declaration‬ ‭includes‬ ‭a‬ ‭CSS‬ ‭property‬ ‭name‬ ‭and‬ ‭a‬ ‭value,‬ ‭separated‬ ‭by‬ ‭a‬ ‭colon.‬ ‭Multiple‬ ‭CSS‬
‭declarations are separated with semicolons, and declaration blocks are surrounded by curly braces‬‭.‬
‭Example‬‭-In this example all <p> elements will be center-aligned, with a red text color:‬
‭p‬‭{‬
‭color‬‭: red;‬
‭text-align‬‭: center;‬‭}‬
‭2.2.2 CSS Selectors‬
‭CSS selectors are used to "find" (or select) the HTML elements you want to style.‬
‭We can divide CSS selectors into five categories:‬
‭●‬‭Simple selectors‬‭(select elements based on name, id, class)‬
‭●‬‭Combinator selectors‬‭(select elements based on a specific relationship between them)‬
‭●‬‭Pseudo-class selectors‬‭(select elements based on a certain state)‬
‭●‬‭Pseudo-elements selectors‬‭(select and style a part of an element)‬
‭●‬‭Attribute selectors‬‭(select elements based on an attribute or attribute value)‬

‭2.2.3 CSS Colors‬

‭Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.‬

‭7‬
‭2.2.4 CSS background-color‬
‭The‬‭background-color‬‭property specifies the background color of an element.‬
‭Example-The background color of a page is set like this:‬
‭body‬‭{‬
‭background-color‬‭:‬‭lightblue‬‭; }‬
‭2.2.5 CSS Border Style‬
‭The‬‭border-style‬‭property specifies what kind of border to display.‬
‭The following values are allowed:‬
‭⦁‬ ‭dotted‬‭- Defines a dotted border‬
‭⦁‬ ‭dashed‬‭- Defines a dashed border‬
‭⦁‬ ‭solid‬‭- Defines a solid border‬
‭⦁‬ ‭double‬‭- Defines a double border‬
‭⦁‬ ‭groove‬‭- Defines a 3D grooved border. The effect depends on the border-color value‬
‭⦁‬ ‭ridge‬‭- Defines a 3D ridged border. The effect depends on the border-color value‬
‭⦁‬ ‭inset‬‭- Defines a 3D inset border. The effect depends on the border-color value‬
‭⦁‬ ‭outset‬‭- Defines a 3D outset border. The effect depends on the border-colorvalue‬
‭⦁‬ ‭none‬‭- Defines no border‬
‭⦁‬ ‭hidden‬‭- Defines a hidden border‬
‭The‬ ‭border-style‬ ‭property‬ ‭can‬ ‭have‬ ‭from‬ ‭one‬ ‭to‬ ‭four‬ ‭values‬ ‭(for‬ ‭the‬ ‭top‬ ‭border,‬ ‭right‬ ‭border,‬
‭bottom border, and the left border).‬
‭2.2.6 CSS Margins‬
‭The‬ ‭CSS‬ ‭margin‬ ‭properties‬ ‭are‬ ‭used‬ ‭to‬ ‭create‬ ‭space‬ ‭around‬ ‭elements,‬ ‭outside‬ ‭of‬ ‭any‬ ‭defined‬
‭borders.‬
‭With‬‭CSS,‬‭you‬‭have‬‭full‬‭control‬‭over‬‭the‬‭margins.‬‭There‬‭are‬‭properties‬‭for‬‭setting‬‭the‬‭margin‬‭for‬
‭each side of an element (top, right, bottom, and left).‬
‭Margin - Individual Sides‬
‭CSS has properties for specifying the margin for each side of an element:‬
‭●‬‭margin-top‬
‭●‬‭margin-right‬
‭●‬‭margin-bottom‬
‭●‬‭margin-left‬
‭All the margin properties can have the following values:‬
‭● auto - the browser calculates the margin‬

‭8‬
‭● length - specifies a margin in px, pt, cm, etc.‬
‭● % - specifies a margin in % of the width of the containing element‬
‭● inherit - specifies that the margin should be inherited from the parent element‬
‭2.2.7 CSS Padding‬
‭The‬‭CSS‬‭padding‬‭properties‬‭are‬‭used‬‭to‬‭generate‬‭space‬‭around‬‭an‬‭element's‬‭content,‬‭inside‬‭of‬‭any‬‭defined‬
‭borders.‬‭With‬ ‭CSS,‬ ‭you‬ ‭have‬ ‭full‬ ‭control‬ ‭over‬ ‭the‬ ‭padding.‬ ‭There‬ ‭are‬ ‭properties‬ ‭for‬ ‭setting‬ ‭the‬
‭padding for each side of an element (top, right, bottom, and left).‬
‭Padding - Individual Sides‬
‭CSS has properties for specifying the padding for each side of an element:‬
‭●‬‭padding-top‬
‭●‬‭padding-right‬
‭●‬‭padding-bottom‬
‭●‬‭padding-left‬
‭All the padding properties can have the following values:‬
‭❖ length - specifies a padding in px, pt, cm, etc.‬
‭❖ % - specifies a padding in % of the width of the containing element‬
‭❖ inherit - specifies that the padding should be inherited from the parent element‬
‭2.2.8 CSS Setting height and width‬
‭The‬‭height‬‭and‬‭width‬‭properties‬‭are‬‭used‬‭to‬‭set‬‭the‬‭height‬‭and‬‭width‬‭of‬‭an‬‭element.The‬‭height‬‭and‬
‭width‬ ‭properties‬ ‭do‬ ‭not‬‭include‬‭padding,‬‭borders,‬‭or‬‭margins.‬‭It‬‭sets‬‭the‬‭height/width‬‭of‬‭the‬‭area‬
‭inside the padding, border, and margin of the element.‬
‭2.2.9 CSS height and width Values‬
‭The‬‭height‬‭and‬‭width‬‭properties may have the following values:‬
‭●‬‭auto‬‭- This is default. The browser calculates the height and width‬
‭●‬‭length‬‭- Defines the height/width in px, cm, etc.‬
‭●‬‭%‬‭- Defines the height/width in percent of the containing block‬
‭●‬‭initial‬‭- Sets the height/width to its default value‬
‭●‬‭inherit‬‭- The height/width will be inherited from its parent value‬
‭2.2.10 CSS Outline‬
‭An outline is a line that is drawn around elements, OUTSIDE the‬
‭borders, to make the element "stand out".‬
‭CSS has the following outline properties‬

‭9‬
‭❖‬‭outline-style‬
‭❖‬‭outline-color‬
‭❖‬‭outline-width‬
‭❖‬‭outline-offset‬
‭❖‬‭outline‬
‭2.2.11 Text Color‬
‭The‬‭color‬‭property is used to set the color of the text. The color is specified by:‬
‭● a color name - like "red"‬
‭● a HEX value - like "#ff0000"‬
‭● an RGB value - like "rgb(255,0,0)"‬
‭2.2.12 CSS Fonts‬
‭Choosing the right font has a huge impact on how the readers‬
‭experience a website.‬
‭The right font can create a strong identity for your brand.‬
‭Using‬‭a‬‭font‬‭that‬‭is‬‭easy‬‭to‬‭read‬‭is‬‭important.‬‭The‬‭font‬‭adds‬‭value‬‭to‬‭your‬‭text.‬‭It‬‭is‬‭also‬‭important‬
‭to choose the correct color and text size for the font.‬
‭2.2.13 The display Property‬
‭The‬‭display‬‭property specifies if/how an element is displayed.‬
‭Every HTML element has a default display value depending on‬
‭what type of element it is. The default display value for most‬
‭elements is‬‭block‬‭or‬‭inline‬‭.‬
‭2.2.14 Block-level Elements‬
‭A‬‭block-level‬‭element‬‭always‬‭starts‬‭on‬‭a‬‭new‬‭line‬‭and‬‭takes‬‭up‬‭the‬‭full‬‭width‬‭available‬‭(stretches‬
‭out to the left and right as far as it can).‬
‭The <div> element is a block-level element‬‭.‬
‭Examples of block-level elements:‬
‭● <div>‬
‭● <h1> - <h6>‬
‭● <p>‬
‭● <form>‬
‭● <header>‬
‭● <footer>‬
‭● <section>‬

‭10‬
‭2.2.15 Inline Elements‬
‭An inline element does not start on a new line and only takes up as much width as necessary.‬
‭This is an inline <span> element inside a paragraph.‬
‭Examples of inline elements:‬
‭● <span>‬
‭● <a>‬
‭● <img>‬
‭2.2.16 Display: none;‬
‭display:‬‭none;‬‭is‬‭commonly‬‭used‬‭with‬‭JavaScript‬‭to‬‭hide‬‭and‬‭show‬‭elements‬‭without‬‭deleting‬‭and‬
‭recreating‬‭them.‬‭Take‬‭a‬‭look‬‭at‬‭our‬‭last‬‭example‬‭on‬‭this‬‭page‬‭if‬‭you‬‭want‬‭to‬‭know‬‭how‬‭this‬‭can‬‭be‬
‭achieved.‬
‭The‬‭<script>‬‭element uses‬‭display: none;‬‭as default.‬
‭The position property specifies the type of positioning method used for an element.‬
‭There are five different position values:‬
‭Static‬
‭relative‬
‭fixed‬
‭absolute‬
‭Sticky‬
‭Elements are then positioned using the top, bottom, left, and right‬
‭properties. However, these properties will not work unless the‬
‭position property is set first. They also work differently depending‬
‭on the position value.‬

‭11‬
‭2.3 BOOTSTRAP5‬
‭2.3.1 What is Bootstrap?‬
‭Bootstrap‬‭is‬‭a‬‭free‬‭front-end‬‭framework‬‭for‬‭faster‬‭and‬‭easier‬‭web‬‭development.Bootstrap‬‭includes‬
‭HTML‬ ‭and‬ ‭CSS‬ ‭based‬ ‭design‬ ‭templates‬ ‭for‬ ‭typography,‬ ‭forms,‬ ‭buttons,‬ ‭tables,‬ ‭navigation,‬
‭modals,‬ ‭image‬ ‭carousels‬ ‭and‬ ‭many‬ ‭other,‬ ‭as‬ ‭well‬ ‭as‬ ‭optional‬ ‭JavaScript‬ ‭plugins.Bootstrap‬ ‭also‬
‭gives you the ability to easily create responsive designs‬
‭The‬‭main‬‭differences‬‭between‬‭Bootstrap‬‭5‬‭and‬‭Bootstrap‬‭3‬‭&‬‭4,‬‭is‬‭that‬‭Bootstrap‬‭5‬‭has‬‭switched‬‭to‬
‭JavaScript‬‭instead of‬‭jQuery‬‭.‬
‭2.3.2 Advantages of Bootstrap:‬
‭Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap‬
‭Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops‬
‭Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework‬
‭Browser‬ ‭compatibility:‬ ‭Bootstrap‬ ‭5‬ ‭is‬ ‭compatible‬ ‭with‬ ‭all‬ ‭modern‬ ‭browsers‬ ‭(Chrome,‬ ‭Firefox,‬
‭Edge,‬ ‭Safari,‬ ‭and‬ ‭Opera).‬ ‭Note‬ ‭that‬‭if‬‭you‬‭need‬‭support‬‭for‬‭IE11‬‭and‬‭down,‬‭you‬‭must‬‭use‬‭either‬
‭BS4 or BS3.‬

‭2.3.3 Where to Get Bootstrap 5‬

‭There are two ways to start using Bootstrap 5 on your own web site.‬
‭You can:‬
‭Include Bootstrap 5 from a CDN‬
‭Download Bootstrap 5 from getbootstrap.com‬
‭Bootstrap 5 CDN‬
‭<‬‭link‬ ‭href‬‭="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"‬
‭rel‬‭="stylesheet">‬
‭<!-- Latest compiled JavaScript -->‬
‭<‬‭script‬
‭src‬‭="‬‭https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js‬‭"><‬‭/script‬‭>‬
‭2.3.4 Bootstrap 5 Containers‬
‭The .container class provides a responsive fixed width container.‬
‭The‬ ‭.container-fluid‬ ‭class‬ ‭provides‬ ‭a‬ ‭full‬ ‭width‬ ‭container,‬ ‭spanning‬ ‭the‬ ‭entire‬ ‭width‬ ‭of‬ ‭the‬
‭viewport‬
‭2.3.5 Fixed Container‬
‭Use the‬‭.container‬‭class to create a responsive, fixed-width container.‬
‭Note that its width (‬‭max-width‬‭) will change on different screen sizes:‬

‭12‬
‭2.3.6 Fluid Container‬
‭Use‬‭the‬‭.container-fluid‬‭class‬‭to‬‭create‬‭a‬‭full‬‭width‬‭container,‬‭that‬‭will‬‭always‬‭span‬‭the‬‭entire‬‭width‬
‭of the screen (‬‭width‬‭is always‬‭100%‬‭):‬
‭2.3.7 Bootstrap 5 Grid System‬
‭Bootstrap's‬ ‭grid‬‭system‬‭is‬‭built‬‭with‬‭flexbox‬‭and‬‭allows‬‭up‬‭to‬‭12‬‭columns‬‭across‬‭the‬‭page.If‬‭you‬
‭do‬‭not‬‭want‬‭to‬‭use‬‭all‬‭12‬‭columns‬‭individually,‬‭you‬‭can‬‭group‬‭the‬‭columns‬‭together‬‭to‬‭create‬‭wider‬
‭columns:‬
‭2.3.8 Grid Classes‬
‭The Bootstrap 5 grid system has six classes:‬
‭.col-‬‭(extra small devices - screen width less than 576px)‬
‭.col-sm-‬‭(small devices - screen width equal to or greater than 576px)‬
‭.col-md-‬‭(medium devices - screen width equal to or greater than 768px)‬
‭.col-lg-‬‭(large devices - screen width equal to or greater than 992px)‬
‭.col-xl-‬‭(xlarge devices - screen width equal to or greater than 1200px)‬
‭.col-xxl-‬‭(xxlarge devices - screen width equal to or greater than 1400px)‬
‭2.3.9 Text Colors‬
‭Bootstrap‬‭5‬‭has‬‭some‬‭contextual‬‭classes‬‭that‬‭can‬‭be‬‭used‬‭to‬‭provide‬‭"meaning‬‭through‬‭colors".The‬
‭classes‬ ‭for‬ ‭text‬ ‭colors‬ ‭are:‬ ‭.text-muted‬‭,‬ ‭.text-primary‬‭,‬ ‭.text-success‬‭,‬ ‭.text-info‬‭,‬ ‭.text-warning‬‭,‬
‭.text-danger‬‭,‬ ‭.text-secondary‬‭,‬ ‭.text-white‬‭,‬ ‭.text-dark‬‭,‬ ‭.text-body‬ ‭(default‬ ‭body‬ ‭color/often‬ ‭black)‬
‭and‬‭.text-light‬‭:‬
‭2.3.10 Image Shapes‬
‭Rounded Corners-The‬‭.rounded‬‭class adds rounded corners to an image:‬
‭Circle-The‬‭.rounded-circle‬‭class shapes the image to a circle:‬
‭Thumbnail-The‬‭.img-thumbnail‬‭class shapes the image to a thumbnail (bordered):‬
‭Aligning Images-Float an image to the left with the‬‭.float-start‬‭class or to the right with‬‭.float-end‬

‭13‬
‭2.3.11 Bootstrap 5 Jumbotron‬
‭A‬‭jumbotron‬‭was‬‭introduced‬‭in‬‭Bootstrap‬‭3‬‭as‬‭a‬‭big‬‭padded‬‭box‬‭for‬‭calling‬‭extra‬‭attention‬‭to‬‭some‬
‭special‬ ‭content‬‭or‬‭information.Jumbotrons‬‭are‬‭no‬‭longer‬‭supported‬‭in‬‭Bootstrap‬‭5.‬‭However,‬‭you‬
‭can‬‭use‬‭a‬‭<div>‬‭element‬‭and‬‭add‬‭special‬‭helper‬‭classes‬‭together‬‭with‬‭a‬‭color‬‭class‬‭to‬‭achieve‬‭the‬
‭same effect:‬
‭2.3.12 Button Groups‬
‭Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group:‬
‭AppleSamsungSony‬
‭Use a‬‭<div>‬‭element with class‬‭.btn-group‬‭to create a button group:‬
‭2.3.13 Cards‬
‭A‬‭card‬‭in‬‭Bootstrap‬‭5‬‭is‬‭a‬‭bordered‬‭box‬‭with‬‭some‬‭padding‬‭around‬‭its‬‭content.‬‭It‬‭includes‬‭options‬
‭for‬ ‭headers,‬ ‭footers,‬ ‭content,‬ ‭colors,‬ ‭etc.A‬ ‭basic‬ ‭card‬‭is‬‭created‬‭with‬‭the‬‭.card‬‭class,‬‭and‬‭content‬
‭inside the card has a‬‭.card-body‬‭class:‬
‭The‬ ‭.card-header‬ ‭class‬ ‭adds‬ ‭a‬ ‭heading‬ ‭to‬ ‭the‬ ‭card‬ ‭and‬ ‭the‬‭.card-footer‬‭class‬‭adds‬‭a‬‭footer‬‭to‬‭the‬
‭card:‬
‭2.3.13 Basic Dropdown‬
‭A‬ ‭dropdown‬ ‭menu‬ ‭is‬ ‭a‬ ‭toggleable‬ ‭menu‬ ‭that‬ ‭allows‬ ‭the‬ ‭user‬ ‭to‬ ‭choose‬ ‭one‬ ‭value‬ ‭from‬ ‭a‬
‭predefined list‬
‭Dropdown button‬
‭The‬‭.dropdown‬‭class indicates a dropdown menu.‬
‭To‬ ‭open‬ ‭the‬ ‭dropdown‬ ‭menu,‬ ‭use‬ ‭a‬ ‭button‬ ‭or‬ ‭a‬ ‭link‬ ‭with‬ ‭a‬ ‭class‬ ‭of‬ ‭.dropdown-toggle‬ ‭and‬ ‭the‬
‭data-bs-toggle="dropdown"‬‭attribute.‬
‭Add‬‭the‬‭.dropdown-menu‬‭class‬‭to‬‭a‬‭<div>‬‭element‬‭to‬‭actually‬‭build‬‭the‬‭dropdown‬‭menu.‬‭Then‬‭add‬
‭the‬‭.dropdown-item‬‭class to each element (links or buttons) inside the dropdown menu.‬
‭2.3.14 Basic Collapsible‬
‭Collapsibles are useful when you want to hide and show large amount of content:‬
‭Click Me‬
‭The‬ ‭.collapse‬ ‭class‬ ‭indicates‬ ‭a‬ ‭collapsible‬ ‭element‬ ‭(a‬ ‭<div>‬ ‭in‬ ‭our‬ ‭example);‬ ‭this‬‭is‬‭the‬‭content‬
‭that‬ ‭will‬ ‭be‬ ‭shown‬ ‭or‬ ‭hidden‬ ‭with‬ ‭a‬ ‭click‬ ‭of‬ ‭a‬ ‭button.To‬ ‭control‬ ‭(show/hide)‬ ‭the‬ ‭collapsible‬
‭content,‬‭add‬‭the‬‭data-bs-toggle="collapse"‬‭attribute‬‭to‬‭an‬‭<a>‬‭or‬‭a‬‭<button>‬‭element.‬‭Then‬‭add‬‭the‬
‭data-bs-target="#id"‬ ‭attribute‬ ‭to‬ ‭connect‬ ‭the‬ ‭button‬ ‭with‬ ‭the‬ ‭collapsible‬ ‭content‬ ‭(<div‬
‭id="demo">).‬

‭2.3.15 Nav Menus‬

‭14‬
‭If‬‭you‬‭want‬‭to‬‭create‬‭a‬‭simple‬‭horizontal‬‭menu,‬‭add‬‭the‬‭.nav‬‭class‬‭to‬‭a‬‭<ul>‬‭element,‬‭followed‬‭by‬
‭.nav-item‬‭for each‬‭<li>‬‭and add the‬‭.nav-link‬‭class to their links:‬
‭2.3.16 Navigation Bars‬
‭A‬ ‭navigation‬ ‭bar‬ ‭is‬ ‭a‬ ‭navigation‬ ‭header‬ ‭that‬ ‭is‬ ‭placed‬ ‭at‬ ‭the‬ ‭top‬ ‭of‬ ‭the‬ ‭page:With‬ ‭Bootstrap,‬ ‭a‬
‭navigation‬ ‭bar‬ ‭can‬ ‭extend‬‭or‬‭collapse,‬‭depending‬‭on‬‭the‬‭screen‬‭size.A‬‭standard‬‭navigation‬‭bar‬‭is‬
‭created‬ ‭with‬ ‭the‬ ‭.navbar‬ ‭class,‬ ‭followed‬ ‭by‬ ‭a‬ ‭responsive‬ ‭collapsing‬ ‭class:‬
‭.navbar-expand-xxl|xl|lg|md|sm‬ ‭(stacks‬ ‭the‬ ‭navbar‬ ‭vertically‬ ‭on‬ ‭xxlarge,‬ ‭extra‬ ‭large,‬ ‭large,‬
‭medium or small screens).‬
‭To‬ ‭add‬‭links‬‭inside‬‭the‬‭navbar,‬‭use‬‭either‬‭an‬‭<ul>‬‭element‬‭(or‬‭a‬‭<div>‬‭)‬‭with‬‭class="navbar-nav"‬‭.‬
‭Then add‬‭<li>‬‭elements with a‬‭.nav-item‬‭class followed by an‬‭<a>‬‭element with a‬‭.nav-link‬‭class:‬

‭2.3.17 Modals‬
‭The Modal component is a dialog box/popup window that is displayed on top of the current page:‬
‭2.3.18 Tooltips‬
‭The‬‭Tooltip‬‭component‬‭is‬‭small‬‭pop-up‬‭box‬‭that‬‭appears‬‭when‬‭the‬‭user‬‭moves‬‭the‬‭mouse‬‭pointer‬
‭over an element:‬
‭To‬‭create‬‭a‬‭tooltip,‬‭add‬‭the‬‭data-bs-toggle="tooltip"‬‭attribute‬‭to‬‭an‬‭element.Use‬‭the‬‭title‬‭attribute‬‭to‬
‭specify the text that should be displayed inside the tooltip‬

‭15‬
 ‭COMMANDS AND CODES‬

‭<!DOCTYPE html>‬
‭<html lang="en">‬
‭<head>‬
‭<meta charset="UTF-8">‬
‭<meta name="viewport" content="width=device-width, initial-scale=1.0">‬
‭<title>Medical</title>‬
‭<link rel="icon" type="image/x-icon" href="./images/logo-image.png">‬
‭<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"‬
‭rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js‬
‭"></script>‬
‭<script src="https://kit.fontawesome.com/babc3a2b5a.js" crossorigin="anonymous"></script>‬
‭<link rel="stylesheet" href="./css/style.css">‬
‭</head><body>‬
‭<section id="home">‬
‭<div class="header">‬
‭<div class="container">‬
‭<div class="row head-style py-2">‬
‭<div class="col-sm-6 head-links ">‬
‭<span><a href="#" class="ms-0">FAQS</a></span>‬
‭<span><a href="#">About</a></span>‬
‭<span><a href="#">Contact</a></span>‬
‭</div>‬
‭<div class="col-sm-6 head-icons ">‬
‭<a href="#"><i class="fa-brands fa-twitter"></i></a>‬
‭<a href="#"><i class="fa-brands fa-facebook-f"></i></a>‬
‭<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>‬
‭<a href=""><i class="fa-brands fa-google"></i></a>‬
‭<a href="#"><i class="fa fa-skype" aria-hidden="true"></i>‬
‭</a>‬
‭</div> </div></div>‬
‭<hr>‬
‭<nav class="navbar navbar-expand-md navbar-white p-0">‬

‭16‬
 ‭<div class="container">‬
‭<a class="navbar-brand" href="#"><img src="./images/logo-image.png" alt=""‬
‭class="rounded-pill navbar-image mr-12"> MEDICAL</a>‬
‭<button class="navbar-toggler" type="button" data-bs-toggle="collapse"‬
‭data-bs-target="#collapsibleNavbar">‬
‭<span class="navbar-toggler-icon"></span>‬
‭</button>‬
‭<div class="collapse navbar-collapse " id="collapsibleNavbar">‬
‭<ul class="navbar-nav navbar-underline">‬
‭<li class="nav-item navbar-border-line"><a href="#" class="nav-link">HOME</a></li>‬
‭<li class="nav-item navbar-border-line"><a href="#" class="nav-link">Departments</a></li>‬
‭<li class="nav-item navbar-border-line"><a href="#" class="nav-link">Timetable</a></li>‬
‭<li class="nav-item navbar-border-line"><a href="#" class="nav-link">Features</a></li>‬
‭<li class="nav-item navbar-border-line"><a href="#" class="nav-link">Shortcodes</a></li>‬
‭<li class="nav-item navbar-border-line"><a href="#" class="nav-link">News</a></li>‬
‭<li class="nav-item"><a href="#" class="nav-link"><i‬
‭class="fa fa-search text-color-style search-bar-style" aria-hidden="true" data-bs-toggle="modal"‬
‭data-bs-target="#myModal"></i></a></li>‬
‭</ul>‬
‭</div>‬
‭</div>‬
‭</nav>‬
‭</div>‬
‭<div class="modal fade " id="myModal">‬
‭<div class="modal-dialog mt-10">‬
‭<div class="modal-content">‬
‭<div class="modal-header">‬
‭<h4 class="modal-title">Modal Heading</h4‬

‭16‬
‭<button type="button" class="btn-close" data-bs-dismiss="modal"></button>‬
‭</div>‬
‭<div class="modal-body">‬
‭<input type="text" name="" id="modal-search" placeholder="Search" class="modal-input">‬
‭</div>‬
‭<div class="modal-footer">‬
‭<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭<!-- carousel-->‬
‭<div class="carousel-section">‬
‭<div id="demo" class="carousel slide" data-bs-ride="carousel">‬
‭<!-- The slideshow/carousel -->‬
‭<div class="carousel-inner">‬
‭<div class="carousel-item active">‬
‭<img src="./images/home-image2.jpg" alt="" class="w-100">‬
‭<div class="carousel-caption">‬
‭<div class="container">‬
‭<h1 class="font-size-header">Welcome To Medical<br>‬
‭Services You Can Trust‬
‭</h1>‬
‭<div class="mt-4 media-flex-style">‬
‭<button class="button-style">MAKE AN APPOINTMENT</button>‬
‭<button class="button-style">DOCTORS TIMETABLE</button>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭<div class="carousel-item‬

‭17‬
‭<img src="./images/home-image.jpg" alt="" class="w-100">‬
‭<div class="carousel-caption">‬
‭<div class="container">‬
‭<h1 class="font-size-header">Welcome To Medical<br>‬
‭Services You Can Trust‬
‭</h1>‬
‭<div class="mt-4 media-flex-style">‬
‭<button class="button-style">MAKE AN APPOINTMENT</button>‬
‭<button class="button-style">DOCTORS TIMETABLE</button>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭<div class="carousel-item">‬
‭<img src="./images/home-image1.jpg" alt="" class="w-100">‬
‭<div class="carousel-caption">‬
‭<div class=" container">‬
‭<h1 class="font-size-header">Welcome To Medical<br>‬
‭Services You Can Trust‬
‭</h1>‬
‭<div class="mt-4 media-flex-style">‬
‭<button class="button-style">MAKE AN APPOINTMENT</button>‬
‭<button class="button-style">DOCTORS TIMETABLE</button>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭<!-- Left and right controls/icons -->‬
‭<button class="carousel-control-prev home-carousel-icon-style" type="button"‬
‭data-bs-target="#demo‬

‭18‬
‭data-bs-slide="prev"> <span class="home-carousel-icon"><i class="fa-solid‬
‭fa-chevron-left"></i></span> </button>‬
‭<button class="carousel-control-next home-carousel-icon-style" type="button"‬
‭data-bs-target="#demo"‬
‭data-bs-slide="next">‬
‭<span class="home-carousel-icon"><i class="fa-solid fa-chevron-right"></i></span>‬
‭</button>‬
‭</div>‬
‭</div>‬
‭</section>‬
‭<section id="card-section">‬
‭<div class="container media-card-width">‬
‭<div class="row conditions">‬
‭<div class="col-md-4 column-style condition1">‬
‭<h3>EMERGENCY CASE</h3>‬
‭<P class="py-3">If an urgent problem arises or you need a doctor urgently outside of medicenter‬
‭opening hours,‬
‭carousel-control-next‬
‭emergrncy appointment number for emergency service.</P>‬
‭<h5>+86-123-456-789</h5>‬
‭<button> READ MORE</button>‬
‭</div>‬
‭<div class="col-md-4 column-style condition2">‬
‭<h3>DOCTORS TIMETABLE</h3>‬
‭<P class="py-3">This timetable may change from time to time. so should be used as a guide‬
‭onlyClick read more below to see services and current timetable for our doctors to help you planyour‬
‭appointment with a preferred docto </P>‬
‭<button>READ MORE</button>‬
‭</div>‬
‭<div class="col-md-4 column-style condition3">‬
‭<h3>OPENING HOURS</h3‬

‭19‬
‭<div class="py-15 pb-1"><span>Monday - Friday</span> <span class="right-align">08:00 -‬
‭17:00</span></div> <hr>‬
‭<div class="py-1"><span>Saturday</span> <span class="right-align">09:00 -‬
‭14:00</span></div><hr>‬
‭<div class="py-1"><span>Sunday</span> <span class="right-align">08:00 - 10:00</span></div>‬
‭<hr>‬
‭<div class="py-1"><span>Public Holidays</span> <span‬
‭class="right-align">Closed</span></div>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</section>‬
‭<section id="welcome-section" class="pb-100">‬
‭<div class="container text-center">‬
‭<div class="row">‬
‭<div class="col-sm-12 mb-4 media-mt-4">‬
‭<h3>Wellcome to Medical</h3>‬
‭<p class="text-gray-color">Our medical specialists care about you & your family's health </p>‬
‭</div>‬
‭<div class="col-md-4 media-mt-15">‬
‭<div class="card box-shadow py-4">‬
‭<div class="card-header">‬
‭<div class="image-border"><img src="./images/first-aid-kit.png" alt=""></div>‬
‭</div>‬
‭<div class="card-body">‬
‭<h4>Medical Excellence</h4>‬
‭<p class="text-gray-color">Lorem ipsum dolor sit amet consectetur adipisicing elit.‬
‭Sed aspernatur recusandae quo, culpa architecto iure.‬
‭</p>‬
‭</div‬

‭20‬
‭</div>‬
‭</div>‬
‭<div class="col-md-4 media-mt-15">‬
‭<div class="card box-shadow py-4">‬
‭<div class="card-header">‬
‭<div class="image-border"><img src="./images/lungs.png" alt=""></div>‬
‭</div>‬
‭<div class="card-body">‬
‭<h4>Healthcare Professionals</h4>‬
‭<p class="text-gray-color">Lorem ipsum dolor sit amet consectetur adipisicing elit.‬
‭Sed aspernatur recusandae quo, culpa architecto iure.‬
‭</p><div>‬
‭<p class="gray-color "><i class="fa fa-angle-double-right" aria-hidden="true"></i>‬
‭Why Choose Us</p>‬
‭<p class="gray-color "><i class="fa fa-angle-double-right" aria-hidden="true"></i>‬
‭Physiotherapists</p>‬
‭<p class="gray-color "><i class="fa fa-angle-double-right" aria-hidden="true"></i>‬
‭Find a Doctor</p>‬
‭<p class="gray-color "><i class="fa fa-angle-double-right" aria-hidden="true"></i>‬
‭Volunteer roles</p>‬
‭<p class="gray-color "><i class="fa fa-angle-double-right" aria-hidden="true"></i>‬
‭Health Topics</p>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭<div class="col-lg-4 media-mt-15 col-md-12">‬
‭<h5 class="mb-5 ">POPULAR POSTS</h5>‬
‭<div class="footer-image-style d-flex">‬
‭<img src="./images/footer-image1.jpg" alt="" class="post-image">‬
‭<p class="gray-color ">Why I finally tried therapy and how it changed my life <br><small>28‬
‭March, 2018</small></p>‬

‭21‬
‭</div> <hr>‬
‭<div class="footer-image-style d-flex"><img src="./images/footer-image1.jpg" alt=""‬
‭class="post-image">‬
‭<p class="gray-color ">Patient Forum - 'The Joint School Patient Experience <br><small>28‬
‭March, 2018</small></p>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</section>‬
‭<section class="last-header back-ground-color py-4">‬
‭<div class="container footer-text-algin">‬
‭<div class="row ">‬
‭<div class="col-sm-6 text-align-center text-color">&copy; 2018 Medicalhealth, All rights‬
‭reserved</div>‬
‭<div class=" col-sm-6 footer-link-style">‬
‭<span class="mx-3 "><a href="#" class="text-color">Home</a></span>‬
‭<span class="mx-3 "><a href="#" class="text-color">About</a></span>‬
‭<span class="mx-3 "><a href="#" class="text-color">Contact</a></span>‬
‭</div>‬
‭</div>‬
‭</div>‬
‭</section>‬
‭</body>‬
‭</html>‬

‭Css‬
‭* {‬
‭padding: 0;‬
‭margin: 0;‬
‭box-sizing: border-box‬

‭22‬
‭}.mt-10{‬
‭margin-top: 10%;}‬
‭.py-15{‬
‭padding-top: 15px;‬
‭}‬
‭.navbar-toggler {‬
‭border: 1px solid transparent;‬
‭}‬
‭.navbar-toggler:focus {‬
‭box-shadow: unset;‬
‭}.box-shadow {‬
‭box-shadow: 0px 0px 10px 1px rgba(0 0 0/0.3);‬
‭}‬
‭.py-35 {‬
‭padding-top: 35px;‬
‭padding-bottom: 35px;‬
‭}‬
‭.card {‬
‭border: none;‬
‭border-radius: 0;}‬
‭.font-size-header {‬
‭font-size: 50px;}‬
‭.card-img-top {‬
‭border-radius: 0;‬
‭}‬
‭.card-text {‬
‭color: gray;}‬
‭.mx-01 {‬
‭margin-left: 0.1rem;‬
‭margin-right: 0.1rem;}‬
‭.text-gray-color {‬
‭color: gray;‬
‭}‬

‭23‬
‭.section-color {‬
‭background-color: rgb(239, 238, 238);‬
‭}a {‬
‭text-decoration: none;}‬
‭.py-100 {‬
‭padding: 100px 0;‬
‭}.pb-100 {‬
‭padding-bottom: 100px;‬
‭}‬
‭:root {‬
‭--blue: #0d6efd;}‬
‭.mr-12 {‬
‭margin-right: 12px;‬
‭}.navbar-image {‬
‭width: 40px;‬
‭height: 40px !important;‬
‭}#home hr {‬
‭border-color: white;‬
‭opacity: 1;‬
‭margin: 0;}‬
‭#home .head-style {‬
‭display: flex;‬
‭justify-content: center;‬
‭text-align: center;‬
‭align-items: center;}‬
‭#home .icons-style {‬
‭justify-content: space-between;‬
‭}‬
‭#home {‬
‭position: relative;}‬
‭#home .header {‬
‭position: absolute;‬
‭z-index: 12;‬
‭width: 100%‬

‭24‬
‭background: rgba(35, 32, 32, 0.1);}‬
‭#home .carousel-caption {‬
‭position: absolute;‬
‭right: unset;‬
‭bottom: unset;‬
‭top: 50%;‬
‭width: 100%;‬
‭transform: translate(0, -50%);‬
‭left: 0;‬
‭padding-top: 0;‬
‭padding-bottom: 0;‬
‭color: #fff;‬
‭text-align: unset;}‬
‭.head-icons a i {‬
‭margin: 0 12px;}‬
‭#home .head-icons {‬
‭display: flex;‬
‭justify-content: end;}‬
‭#home .head-links a {‬
‭margin: 0 14px;‬
‭text-decoration: none;}‬
‭#home .head-links {‬
‭display: flex;‬
‭justify-content: start;}‬
‭#home a {‬
‭color: white;}‬
‭#home .medical-icon {‬
‭color: var(--blue);‬
‭font-size: 36px;‬
‭padding-right: 15px;}‬
‭#home .button-style {‬
‭padding: 10px;‬
‭background-color: white;‬
‭border: none‬

‭25‬
‭border-radius: 3px;‬
‭margin: 4px 6px;}‬
‭#home .button-style:hover {‬
‭background-color: var(--blue);‬
‭color: white;}‬
‭#home img {‬
‭height: 100vh;‬
‭object-fit: fill;}‬
‭#home .navbar-expand-md .navbar-collapse {‬
‭justify-content: end;}‬
‭.modal-input {‬
‭width: 100%;‬
‭padding: 8px 18px;}‬
‭#home .navbar-underline li a {‬
‭padding: 15px 0;‬
‭margin: 0 10px;‬
‭border-bottom: 2px solid transparent;}‬
‭#home .navbar-underline .navbar-border-line a:hover {‬
‭border-bottom-color: white;‬
‭display: inline-block;}‬
‭#home .navbar-brand {‬
‭padding-top: 10px;‬
‭padding-bottom: 10px;‬
‭}#home .home-carousel-icon-style {‬
‭top: 50%;‬
‭bottom: auto;‬
‭width: auto;‬
‭background-color: black;‬
‭transform: translate(0, -50%);}‬
‭#home .home-carousel-icon {‬
‭padding: 10px 12px;}‬
‭#home .home-carousel-icon-style:hover {‬
‭background-color: #0d59df;‬

‭26‬
‭#card-section .conditions {‬
‭box-shadow: 0 0 12px 8px rgba(0 0 0/0.2);‬
‭position: relative;‬
‭margin: auto;‬
‭top: 0;‬
‭transform: translate(0, -50%);}‬
‭#card-section .column-style {‬
‭color: white;‬
‭padding: 35px 12px;}‬
‭#card-section .conditions .condition1 {‬
‭background-color: cornflowerblue;}‬
‭#card-section .conditions .condition2 {‬
‭background: #3174ed;}‬
‭#card-section .conditions .condition3 {‬
‭background: #0d59df;}‬
‭#card-section button {‬
‭border: 1px solid white;‬
‭padding: 6px 16px;‬
‭border-radius: 4px;‬
‭margin-top: 16px;‬
‭background: none;‬
‭color: white;‬
‭text-decoration: none;}‬
‭#card-section button:hover {‬
‭border-color: black;‬
‭color: black;}‬
‭#card-section hr {‬
‭opacity: 1;‬
‭margin: 10px 0;}‬
‭#card-section .right-align {‬
‭float: right;}‬
‭#card-section .card {‬
‭padding: 30px 0;‬
‭border: none‬

‭27‬
‭box-shadow: 0px -1px 3px rgb(0 0 0/0.5);}‬
‭.card-header {‬
‭background-color: white;‬
‭border-bottom: none;}‬
‭.card .card-header img {‬
‭width: 40px;‬
‭filter: invert(32%) sepia(68%) saturate(5506%) hue-rotate(211deg) brightness(105%) contrast(96%);}‬
‭.card .image-border {‬
‭height: 75px;‬
‭width: 75px;‬
‭border: 1px solid #ede5e5;‬
‭border-radius: 50%;‬
‭margin: auto;‬
‭align-items: center;‬
‭text-align: center;‬
‭display: flex;‬
‭justify-content: center;}‬
‭#presence-section .card-img-top {‬
‭height: 235px;‬
‭object-fit: fill;}‬
‭#presence-section .card {‬
‭padding: 0;}‬
‭#presence-section .card button {‬
‭border: 1px solid var(--blue);‬
‭padding: 6px 16px;‬
‭border-radius: 4px;‬
‭background: none;‬
‭color: var(--blue);}‬
‭#presence-section .card button:hover {‬
‭background-color: var(--blue);‬
‭color: white;‬
‭box-shadow: 0 0 8px 3px rgba(0, 0, 0, .30);}‬
‭@media screen and (max-width: 576px) {‬
‭#home .head-links {‬

‭28‬
‭justify-content: center;‬
‭margin-bottom: 5px; }‬
‭#home .head-icons {‬
‭justify-content: center;}‬
‭#home .button-style {‬
‭padding: 13px 5px;‬
‭font-size: 11px; }}‬
‭@media screen and (max-width: 425px) {‬
‭#servises .card-img-top {‬
‭height: 200px;}‬
‭.font-size-header {‬
‭font-size: 26px; }}‬
‭@media screen and (max-width: 370px) {‬
‭#home .home-carousel-icon-style {‬
‭background-color: transparent; }‬
‭#home .home-carousel-icon-style:hover {‬
‭background-color: transparent;}‬

‭29‬
‭RESULTS‬

‭30‬
‭31‬
‭32‬
‭33‬
 ‭FUTURE WORK‬

‭Along‬ ‭with‬ ‭the‬ ‭advancements‬ ‭of‬ ‭technology,‬ ‭the‬ ‭future‬ ‭of‬ ‭web‬ ‭development‬ ‭tends‬ ‭to‬ ‭change‬
‭every‬‭single‬‭year.‬‭It‬‭is‬‭presented‬‭when‬‭the‬‭number‬‭of‬‭websites‬‭all‬‭over‬‭the‬‭world‬‭has‬‭increased‬
‭dramatically.‬ ‭In‬ ‭addition,‬ ‭businesses‬ ‭nowadays‬ ‭depend‬ ‭more‬ ‭on‬ ‭online‬ ‭purchases‬ ‭via‬ ‭apps‬ ‭or‬
‭websites‬ ‭rather‬‭than‬‭conventional‬‭stores.‬‭Therefore,‬‭to‬‭compete‬‭with‬‭such‬‭a‬‭competitive‬‭digital‬
‭market,‬ ‭your‬ ‭website‬ ‭must‬ ‭become‬ ‭more‬ ‭potent.‬ ‭To‬ ‭do‬ ‭this,‬ ‭you‬ ‭must‬ ‭create‬‭innovative‬‭ideas‬
‭and‬‭identify‬‭the‬‭newest‬‭web‬‭development‬‭trends.‬‭There‬‭will‬‭be‬‭a‬‭demand‬‭for‬‭this‬‭type‬‭of‬‭work.‬
‭However, the demand for PSD to XHTML/CSS Conversion Services will‬‭gradually decrease.‬

‭Javascript‬
‭Javascript‬ ‭is‬ ‭used‬ ‭for‬ ‭developing‬ ‭Android‬ ‭mobile‬ ‭apps‬ ‭and‬ ‭dynamic‬ ‭website‬
‭applications.‬ ‭It‬ ‭has‬ ‭remained‬ ‭one‬ ‭of‬ ‭the‬ ‭most‬ ‭popular‬ ‭website‬ ‭development‬ ‭trends‬ ‭in‬
‭2024.‬ ‭It‬ ‭is‬ ‭to‬ ‭strengthen‬ ‭with‬ ‭the‬ ‭advent‬ ‭of‬ ‭new‬ ‭frameworks‬ ‭and‬ ‭plentiful‬ ‭libraries.‬
‭Javascript’s‬‭higher‬‭adaptability‬‭for‬‭giving‬‭customized‬‭functions‬‭and‬‭ease‬‭to‬‭use‬‭has‬‭made‬
‭JavaScript‬ ‭frameworks‬ ‭become‬ ‭a‬ ‭preferred‬ ‭selection‬ ‭for‬ ‭web‬ ‭developers‬ ‭all‬ ‭over‬ ‭the‬
‭world‬‭.‬

‭34‬
 ‭Conclusion‬

‭My‬‭objective‬‭was‬‭to‬‭manufacture‬‭the‬‭frontend‬‭of‬‭the‬‭site‬‭venture‬‭given‬‭by‬‭Nano‬‭IT.‬‭I‬‭have‬‭taken‬
‭every‬ ‭necessary‬ ‭step‬ ‭utilizing‬ ‭HTML,‬ ‭CSS‬ ‭and‬ ‭BOOTSTRAP‬ ‭and‬ ‭adapted‬ ‭well‬ ‭about‬ ‭these‬
‭subjects.‬‭The‬‭coursework‬‭appropriately‬‭set‬‭me‬‭up‬‭for‬‭the‬‭expert‬‭substance‬‭of‬‭the‬‭temporary‬‭job.‬
‭I‬‭confronted‬‭a‬‭few‬‭difficulties‬‭while‬‭doing‬‭the‬‭CSS‬‭cushioning‬‭and‬‭situating‬‭the‬‭site‬‭substance.‬
‭After work, I've figured out how to work in an expert way‬

‭35‬
 ‭REFERENCES‬

‭BOOKS‬
‭1.First HTML and CSS by Elisabeth Robson and Eric FreemanHead‬
‭2.HTML5 in easy steps by Mike McGrath‬
‭3.HTML and CSS: Design and Build Websites by Jon Duckett‬

‭LINKS‬
‭1.Geeks for Geeks-‬‭https://www.geeksforgeeks.org/‬
‭2.Javatpoint-‬‭https://www.javatpoint.com/‬

‭3.W3 School-‬‭https://www.W3school.com/‬

‭36‬