Scribd
Upload
141 views9 pages

Css Assignment (1) 22dce077

The document provides code for two web development assignments - creating a restaurant website homepage using HTML and CSS, and creating a live cricket score website homepage using HTML and CSS. The code includes HTML markup for page structure and navigation, and CSS code for styling elements like headers, sections, and footers. The assignments ask students to build basic responsive websites for displaying food menu and live match scores.

Uploaded by

Patel Kunj bh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
141 views9 pages

Css Assignment (1) 22dce077

The document provides code for two web development assignments - creating a restaurant website homepage using HTML and CSS, and creating a live cricket score website homepage using HTML and CSS. The code includes HTML markup for page structure and navigation, and CSS code for styling elements like headers, sections, and footers. The assignments ask students to build basic responsive websites for displaying food menu and live match scores.

Uploaded by

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

CHAROTAR UNIVERSITY OF SCIENCE & TECHNOLOGY

DEVANG PATEL INSTITUTE OF ADVANCE TECHNOLOGY & RESEARCH

Subject Name: Web Designing &UI/UX Subject Code: IT283


Semester: 3 (University Elective)
h ` Academic Year: 2022-23

ASSIGNMENT
1. Create a restaurant website Home page using HTML and
CSS

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="Assignment3Css.css">
<title>Restaurant Name</title>
</head>
<body>
<header>
<h1>Restaurant Name</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

22DCE077 1
<section class="hero">
<h2>Welcome to our restaurant</h2>
<p>Delicious food awaits you!</p>
</section>
<section class="menu">
<h2>Menu</h2>
<div class="menu-item">
<img
src="https://img.traveltriangle.com/blog/wp-
content/uploads/2022/01/Famous-Food-Of-South-India1.jpg"
alt="Food Item 1" width="500",height=500>
<h3>Food Item 1</h3>
<p>South Indian</p>
</div>
<div class="menu-item">
<img
src="https://static8.depositphotos.com/1093689/842/i/950/de
positphotos_8423510-stock-photo-traditional-indian-lunch-
food-and.jpg" alt="Food Item 2"width="500",height=500>
<h3>Food Item 2</h3>
<p>Gujarati thali</p>
</div>

<div class="menu-item">
<img
src="https://content.jdmagicbox.com/comp/udupi/z1/0820px820.
x820.181012080410.h5z1/catalogue/laziz-pizza-karkala-
karkala-udupi-pizza-outlets-29wrrsz6tj.jpg?clr=#663300
"alt="Food Item 2"width="500",height=500>
<h3>Food Item 3</h3>
<p>Pizza</p>
</div>

22DCE077 2
</section>
<section class="about">
<h2>About Us</h2>
<p>We are a passionate team of chefs...</p>
</section>
<section class="contact">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
<p>Phone: +1 (123) 456-7890</p>
</section>
<footer>
<p>&copy; 2023 Restaurant Name. All rights
reserved.</p>
</footer>
</body>
</html>

CSS code:
/* Reset some default styles */
body, h1, h2, h3, p, ul {
margin: 0;
padding: 0;
}
header,.hero,.menu,.menu-item,.contact,.about{
background-color:#a09d9d;
background-repeat: no-repeat;
}
/* Style the header */
header{
background-color: #333;
color: white;

22DCE077 3
text-align: center;
padding: 20px;
}

nav ul {
list-style-type: none;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav a {
text-decoration: none;
color: rgb(6, 234, 10);
font-weight: bold;
}

/* Style the hero section */


.hero {
background-image: url('restaurant.jpg');
background-size: cover;
text-align: center;
padding: 100px 0;
font-weight: bolder;
font-size: xx-large;
color: rgb(84, 13, 228);
}

/* Style the menu section */


.menu {
text-align: center;
padding: 50px 0;
}

22DCE077 4
.menu-item {
margin-bottom: 30px;
}
.menu-item img {
max-width: 100%;
}

/* Style other sections as needed */

/* Style the footer */


footer {
text-align: center;
background-color: #333;
color: white;
padding: 10px 0;
}

Output:

22DCE077 5
2. Create a live cricket score website Home page using HTML
and CSS

Code:
<!DOCTYPE html>
<html lang="en">
<head>

22DCE077 6
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="Assignment4css.css">
<title>Cricket Score</title>
</head>
<body>
<header>
<h1>Live Cricket Score</h1>
</header>
<section class="score">
<h2>Match: India vs. Australia</h2>
<p>Current Score: <span id="current-score">250/3
(40 overs)</span></p>
<p>Last Wicket: Kohli (120 runs)</p>
</section>
<section class="status">
<h2>Match Status</h2>
<p>India is batting.</p>
<p>Target: 300 runs</p>
</section>
<section clss = imgagex>
<table>
<tr>
<td>
<img src
="https://cdn1.vectorstock.com/i/1000x1000/56/45/cricket-
scoreboard-background-vector-20455645.jpg"width="800"
height="300">
<img src
="https://st4.depositphotos.com/1001941/24679/v/1600/deposi

22DCE077 7
tphotos_246790336-stock-illustration-website-header-banner-
design-cricket.jpg"width="710" height="300">
</td>
</tr>
</table>
</section>
<footer>
<p>&copy; 2023 Cricket Score App</p>
</footer>
</body>
</html>

CSS code:
/* Reset some default styles */
*{
margin: 0;
padding: 0;
}

/* Style the header */


header {
background-color: #333;
color: rgb(14, 17, 237);
text-align: center;
padding: 20px;
}

/* Style the score section */


.score {
background-color: #c9f711;
text-align: center;

22DCE077 8
padding: 50px 0;
}
#current-score {
font-size: 24px;
font-weight: bold;
}

/* Style the status section */


.status {
text-align: center;
padding: 50px 0;
background-color: #df7aba;
/* Style the footer */
footer {
text-align: center;
background-color:#df7aba;
color: rgb(120, 13, 196);
padding: 10px 0;
}
Output:

22DCE077 9

You might also like