Scribd
Upload
19 views

Ui Labs

This is a description of some of the basic websites I built during my summer breaks.

Uploaded by

zohaivadnan4
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views

Ui Labs

This is a description of some of the basic websites I built during my summer breaks.

Uploaded by

zohaivadnan4
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

AUDIO VIDEO

HTML CODE

<!DOCTYPE html>
<htm lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="VOD.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!--<iframe width="560" height="315" src="VOD.mp4" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share" allowfullscreen>
</iframe> -->
<audio controls ><source src= "" height="150", width="70", type: mp4><source></audio>
<nav><a href="www.geeksforgeeks.com/Data Structures "> Geeks </a> </nav>
<article><h1><header> Detail of article </h1></header>
<section> Content about article </section>
<footer> type your footer hell </footer></article>
<svg height="80", Width = "90"> <rect = to, y= 12, fill = "yellow"> Rectangle </rect> </svg>
<picture src = "URL", height="120", width="80", alt="Caption"> </picture>
</body>
</html>
Frames and frameset :
HTML AND CSS :
<!DOCTYPE html>
<html>
<head>
<title>Frames Example</title>
<style>
/* Apply basic styling to the frames */
frame {
border: 1px solid #ccc;
}

/* Style the menu */


ul {
list-style: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

a {
text-decoration: none;
color: #333;
}

a:hover {
color: #000;
}
</style>
</head>
<frameset cols="25%, 75%">
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
</frameset>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Content</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}

h1 {
color: #333;
text-align: center;
}

.content-area {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba (0, 0, 0, 0.1);
}
p {
line-height: 1.6;
color: #555;
}
</style>
</head>
<body>
<div class="content-area">
<h1>Welcome to Content Area</h1>
<p>This is the content area where you can display various content without
using frames or framesets.</p>
<p>For example, you could showcase images, paragraphs, lists, or any other
HTML elements here.</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #333;
margin: 0;
padding: 20px;
}

.menu {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}

.menu li {
margin: 10px;
}
.menu a {
text-decoration: none;
color: #fff;
font-size: 18px;
padding: 8px 15px;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.menu a:hover {
background-color: #555;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</body>
</html>

OUTPUT :

BOOK INDEX LIST


HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
<link rel="stylesheet" href="library.css">

</head>
<body>
<div id="content">

<nav id="nav" class="Fchild">


<div class="navChild" id="NC1">
My Library
</div>

<div class="navChild" id="NC2">


<input type="text" id="searchbar" placeholder="search bar">
</div>

<div class="navChild" id="NC3">


<div class="cred" id="login">
Log in
</div>
<div class="cred" id="signup">
Sign up
</div>
</div>
</nav>

<main id="main" class="Fchild">


<div class="Mchild" id="case1">
<h3 class="category">Children</h3>
<div class="case">
<div class="book">
<img src="CandC.jpg" alt="">
<div class="name">Charlie and The chocolate
factory</div>
<a href="">download</a>
</div>
<div class="book">
<img src="child.jpg" alt="child">
<div class="name">Little Women</div>
<a href="">download</a>
</div>
<div class="book">
<img src="child3.jpg" alt="">
<div class="name">The Cat in The Hat</div>
<a href="">download</a>
</div>
</div>
</div>

<div class="Mchild" id="case2">


<h3 class="category">Self-help</h3>
<div class="case">
<div class="book">
<img src="sh1.jpg" alt="">
<div class="name">Atomic Habits</div>
<a href="">download</a>
</div>
<div class="book">
<img src="sh2.jpg" alt="">
<div class="name">IKIGAI</div>
<a href="">download</a>
</div>
<div class="book">
<img src="sh3.jpg" alt="">
<div class="name">Rich Dad,Poor Dad</div>
<a href="">download</a>
</div>
</div>
</div>

<div class="Mchild" id="case3">


<h3 class="category">Fiction</h3>
<div class="case">
<div class="book">
<img src="F1.jpg" alt="">
<div class="name">The Hobbit</div>
<a href="">download</a>
</div>
<div class="book">
<img src="f2.jpg" alt="">
<div class="name">The Great Gatsby</div>
<a href="">download</a>
</div>
<div class="book">
<img src="f3.jpg" alt="">
<div class="name">Harry Potter And The Chamber of
Secrets </div>
<a href="">download</a>
</div>
</div>
</div>
</main>

</body>
</html>

CSS :
*{
margin: 0;
padding: 0;
}

#content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background: linear-gradient(to bottom,white,white, #e8bf9e, rgb(127, 111,
45));
}

#nav{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: em;
background-color: white;
margin-bottom: 20px;
padding: 10px 0px;
}
.navChild{
width: 25%;
}
#NC1{
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
margin-left: 20px;
}
#NC3{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.cred{
font-size: 1.4em;
font-weight: 500;
background: linear-gradient(to bottom, #e8bf9e, rgb(207, 186, 101));
color: white;
padding: 0.4em;
border-radius: 20px;
}

#main{
display: flex;
flex-direction: column;
align-items: center;
justify-content:space-around;
padding: 1em;
background-color: white;
}
.Mchild{
display: flex;
flex-direction: column;
align-items: center;
justify-content:space-around;
margin: 0.5em;
width: 100%;
padding: 15px;
}
.case{
display: flex;
flex-direction: row;
align-items: center;
justify-content:space-around;
width: 100%;
padding: 5px;
}
.book{
display: flex;
flex-direction: column;
align-items: center;
justify-content:space-around;
width: 25%;
padding: 5px;
}
img{
width: 100%;
height: 15em;
}
.name{
font-size: 1.2em;
text-align: center;
font-weight: 700;
padding: 0.2em;
text-decoration: underline;

}
.category{
font-size: 2em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
a{
text-align: center;
text-decoration: none;
background-color: rgb(89, 203, 89);
padding: 5px;
color: white;
border-radius: 10px;
}

OUTPUT :
TIMETABLE
HTML :
<html>
<head>
<title>
Schedule_AIML_3A
</title>
<style>
Body{
Background-color: white;
}
</style>
</head>
<body>
<table border="1" style="width: 100%;height: 100%;">
<tr>
<th rowspan="2">
Days
</th>
<th>I</th>
<th>II</th>
<th>III</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
<th>VII</th>
<th>VIII</th>
<th>IX</th>
</tr>
<tr style="background-color: gray;">

<th>8:00-8:50</th>
<th>8:50-9:40</th>
<th>9:40-10:30</th>
<th>10:30-11:20</th>
<th>11:20-12:10</th>
<th>12:10-1:00</th>
<th>1:00-1:50</th>
<th>1:50-2:40</th>
<th>2:40-3:30</th>
</tr>
<tr>
<th>MONDAY</th>
<th style="background-color:lime;">DBMS</th>
<th style="background-color:palevioletred;">APTITUDE</th>
<th style="background-color:aqua;">SE</th>
<th style="background-color:peachpuff;">LANGUAGE</th>
<th rowspan="5">LUNCH</th>
<th style="background-color:yellow;">OOPS</th>
<th style="background-color:magenta;">SL</th>
<th style="background-color:aqua;">SE</th>
<th style="background-color:darkred;">MENTOR</th>
</tr>
<tr>

<th>TUESDAY</th>
<th style="background-color:aqua;">SE</th>
<th style="background-color:peachpuff;">SPORTS</th>
<th>IC</th>
<th style="background-color:lime;">DBMS</th>
<th style="background-color:palevioletred;">SOFT SKILL</th>
<th style="background-color:magenta;">SL</th>
<th style="background-color:yellow;" colspan="2">OOPS</th>
</tr>
<tr>

<th>WEDNESDAY</th>
<th style="background-color:orange;" colspan="2">UI</th>
<th style="background-color:yellow;">OOPS</th>
<th style="background-color:palevioletred;">SOFT SKILLS </th>
<th style="background-color:palevioletred;">APTITUDE</th>
<th style="background-color:magenta;">SL</th>
<th></th>
<th></th>
</tr>
<tr>

<th>THURSDAY</th>
<th style="background-color:lime;">DBMS</th>
<th style="background-color:yellow;">OOPS</th>
<th style="background-color:peachpuff;">LIBRARY</th>
<th style="background-color:peachpuff;">LANGUAGE</th>
<th style="background-color:lime;" colspan="2">DBMS</th>
<th colspan="2">CLAN</th>

</tr>
<tr>
<th>FRIDAY</th>
<th style="background-color:magenta;" colspan="2">SL LAB</th>
<th style="background-color:aqua;">SE</th>
<th style="background-color:magenta;">SL</th>
<th>ITR</th>
<th style="background-color:peachpuff;">VAC</th>
<th style="background-color:white;" colspan="2"></th>
</tr>
</table>
</body>
</html>

OUTPUT :
CV/RESUME :
HTML :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CV code </title>
<link rel="stylesheet" href="CV.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Croissant+One&family=Mukta&display=swap" rel="stylesheet">
</head>
<body>
<center><div class="cv">
<center><h1>Curriculam Vitae</h1></center>
<img src="kg.jpg">
<hr>
<b><h2>MOHD ADNAN ZOHAIB</h2></b>
<p><h3><u>ADDRESS</u></h3>
H.No 2283 , Street Mir Wali , Asaf ali Road <br>
Turkman-gate <br>
Darya ganj Delhi-110002 <br>
</p>
<P> <h3><u>CONTACT DETAILS </u></h3><br>
Phone :<a href="#">8527296710</a>
<br>
Email: <a href="#">[email protected]</a><br></P>
<h3><u>Qualification</u></h3><br>
<span id="acad">
<table border="2">
<tr>
<th>S.No</th>
<th>QUALIFICATION</th>
<th>ORGANISATION / SCHOOL </th>
<th>PERCENTAGE</th>
<th>YEAR</th>
</tr>
<tr>
<td>1.)</td>
<td>CLASS 10th</td>
<td>J.D.Tytler Public School</td>
<TD>89% aggregate</TD>
<td>2020</td>
</tr>
<tr>
<td>2.)</td>
<td>CLASS 12th</td>
<td>J.D.Tytler Public School</td>
<TD>92% aggregate</TD>
<td>2022</td>
</tr>
<tr>
<td>3.)</td>
<td>BTECH CSE with specializtion AIML</td>
<td>MANAV RACHNA UNIVERSITY </td>
<TD>NA </TD>
<td>2026</td>
</tr>
</table>
</span>

<ul type="circle" id="interest">


<h3><u> INTRESTS</u> </h3>
<li>Sketching</li>
<li>Dancing</li>
<li>Sports</li>
</ul>
<OL type="I" id="soft">
<h3><u>SOFT SKILLS</u> </h3>
<li>Building</li>
<li>Motivational and Influencing capabilities</li>
<li>Decision making,etc</li></OL>
<div id="stw">
<h3><u>STRENGTHS & WEAKNESSES</u> </h3>
Emotionally unstable,
Anger Issues,
Ambivert,etc </div>

<h3><u> OBJECTIVES</u></h3><br>
<p id="aim">I seek challenging opportunities where I can fully use my
skills for the success of the organization .</p>
<br><br>
<footer>
Connect with me on my socials :
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0
448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Commercial License) Copyright 2023
Fonticons, Inc. --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9
114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-
74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-
194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12
26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-
2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1
147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1
184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8
0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7
2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-
132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1
9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9
132.1z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0
512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Commercial License) Copyright 2023
Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78
90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48
27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41
38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0
448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Commercial License) Copyright 2023
Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3
480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4
416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2
96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-
24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-
16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0
512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Commercial License) Copyright 2023
Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0
138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106
8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-
46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421
0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969
7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-
19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-
1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934
30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798
24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292
20.791-32.161 39.308-52.628 54.253z"/></svg>
</footer>
</div></center>
</body></html>

CSS:
img{
width:21%;
height:35%;
}
a{
text-decoration:none;
}
#acad{
margin-right: 70%;
width:30%;
}
#interest{
width:20%;
margin-right: -60%;
}
#aim{
font-size: 20px;
}
#interest li{
font-size: 18px;
font-family: 'Croissant One', cursive;
}
#soft{
display: block;
width:25%;
margin-left: -60%;
text-align: center;
}
#soft li{
font-size:18px;
font-family: 'Dela Gothic One', cursive;
font-weight: BOLD;
}
#stw{
font-family: 'Skranji', cursive;
font-size: 18px;
}
footer{
background-color: lightgray;
font-size: 20px;
border: 2px solid black;
}
body{
background-color: lightblue;
}
.cv{
border: 2px solid blue;
padding: 20px;
margin: 25px;
width: 70%;
background-color: white;
}

OUTPUT :
CSS TUTORIALS :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tutorial</title>
<link rel="stylesheet" href="CSS.css">
</head>
<body>
<header>
<h1>Inline, Internal, External CSS</h1>
</header>
<nav>
<a href="#inline">Inline</a>
<a href="#internal">Internal</a>
<a href="#external">External</a>
</nav>
<div class="container" id="inline">
<p>

</p>
</div>
<div class="container" id="internal">
<p>
hi
</p>
</div>
<div class="container" id="external">
<p>

</p>
</div>
</body>
</html>

CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #007acc;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
nav a {
color: #fff;
text-decoration: none;
margin: 10px;
}
nav a:hover {
text-decoration: underline;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}

OUTPUT :
CSS SELECTORS :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo-selectors Assignment</title>
<link rel="stylesheet" href="SELECT.CSS">
</head>
<body>
<header>
<h1>Welcome to Pseudo-selectors</h1>
</header>

<main>
<section>
<h2>Element Type Selector</h2>
<p>This is a paragraph.</p>
<span>This is a span.</span>
</section>
<section>
<h2>Class Selector</h2>
<p class="example-class">This paragraph has a class.</p>
<p>This one doesn't.</p>
</section>

<section>
<h2>ID Selector</h2>
<p id="unique-id">This paragraph has a unique ID.</p>
</section>

<section>
<h2>Descendant Selector</h2>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</section>

<section>
<h2>Child Selector</h2>
<div>
<p>This is a direct child of a div.</p>
<span>This is not a direct child.instead its wrapped around another
span.</span>
</div>
</section>

<section>
<h2>Adjacent Sibling Selector</h2>
<h2>Heading 2</h2>
<p>This paragraph is directly after an h2.</p>
</section>

<section>
<h2>Attribute Selector</h2>
<h3>Write a Comment here : </h3>
<input type="text" placeholder="Text Input">
<input type="checkbox" id="checkbox">
<label for="checkbox">Check</label>
</section>

<section>
<h2>First-child Selector</h2>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Last item</li>
</ul>
</section>

<section>
<h2>Last-child Selector</h2>
<ul class="last-child-demo">
<li>Item 1</li>
<li>Item 2</li>
<li>Last item</li>
</ul>
</section>

<section>
<h2>Nth-child Selector</h2>
<ul class="nth-child-demo">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</section>
</main>

<footer>
<p>End of the assignment</p>
</footer>
</body>
</html>

CSS:
/* Pseudo-selectors used: element type selector */
p {
font-style: italic;
font-weight: bold;
}
span {
font-weight: bold;
color: maroon;
border: 2px solid goldenrod;
padding: 8px;
}

h3{
color: blueviolet;
background-color: lightpink;
}

/* Pseudo-selectors used: class selector */


.example-class {
color: blue;
background-color: lightblue;
}

/* Pseudo-selectors used: id selector */


#unique-id {
background-color: lightgray;
font-size: 18px;
}

/* Pseudo-selectors used: descendant selector */


nav ul {
list-style: none;
text-align: center;
}
footer p{
background-color: black;
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
}
/* Pseudo-selectors used: child selector */
div > p {
border: 1px solid black;
font-family: 'Courier New', Courier, monospace;
}
/* Pseudo-selectors used: adjacent sibling selector */
h2 + p {
margin-top: 0;
padding: 10px;
border-radius: 15px;
}

/* Pseudo-selectors used: attribute selector */


input[type="text"] {
width: 300px;
height: 100px;
}

/* Pseudo-selectors used: first-child selector */


ul li:first-child {
color: green;
font-size: 20px;
text-transform: uppercase;
}

/* Pseudo-selectors used: last-child selector */


.last-child-demo li:last-child {
text-decoration: underline;
text-shadow: 2px 2px grey;
font-weight: bolder;
font-size: 22px;
}

/* Pseudo-selectors used: nth-child selector */


.nth-child-demo li:nth-child(odd) {
background-color: rgb(124, 222, 222);
}

OUTPUT:
PROJECT :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale=1.0">
<title>myWebsite</title>
<link rel="stylesheet" href="website.css">
</head>
<body>
<div class="contain">
<h1 id="heading">ZERO HUNGER</h1><br>
<img class="icon" src="zero-hunger.jpg" alt="zero hunger" height="100px"
width="100px">
</div>
<ul type="none" id="navigate" >
<li><a href="#">HOME </a> </li>
<li><a href="more.html">MORE INFO</a></li>
<li><a href="CONTACT.HTML">CONTACT US </a></li>
<li>ABOUT </li>
</ul>
<button id="btn"><a href="#btn">INTRODUCTION</a></button>
<p id="intro">Goal 2 is about creating a world free of hunger by 2030.The
global issue of hunger and food insecurity has shown an alarming increase since
2015, a trend exacerbated by a combination of factors including the pandemic,
conflict, climate change, and deepening inequalities.
Shockingly, the world is back at hunger levels not seen since 2005, and
food prices remain higher in more countries than in the period 2015–2019. Along
with conflict, climate shocks, and rising cost of living, civil insecurity and
declining food production have all contributed to food scarcity and high food
prices.

Investment in the agriculture sector is critical for reducing hunger and poverty,
improving food security, creating employment and building resilience to disasters
and shocks.
It is projected that more than 600 million people worldwide will be facing hunger
in 2030, highlighting the immense challenge of achieving the zero hunger target.
</p>
</body>
</html>

CSS :
#heading{
Text-align: center;
Color: darkblue;
Display: inline;
Font-size: 40px;

}
.contain{
Border: 2px double black;
Align-content: center;
Text-align: center;
Box-sizing: border-box;
Background-color: lightblue;
}
.icon{
Padding-left: 10px;
}
#init{
Font-size: 32px;
}
A{
Text-decoration: none;
}
#navigate li{
Font-size: large;
Display: inline ;
Text-align: center;
Padding-left: 100px;
Padding-right: 100px ;
Border: 2px solid blueviolet;
Background-color: whitesmoke;
}
#aim{
Color: darkred;
Font-weight: bolder;
Font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
Font-size: 30px;
}
Body{
Opacity: 90%;
Background: url("food.jpg");
Background-repeat: no-repeat;
Background-attachment: fixed;
background-size: cover;
}
#intro{
Font-size : 20px;
Width : 70%;
}
#btn a {
Font-size: 20px;
Color: white ;
Font-weight: bold;
}
#btn{
Border: 2px solid black;
Border-radius: 20px;
Padding: 10px 50px ;
Background-color:goldenrod;

OUTPUT :

You might also like