Scribd
Upload
13 views8 pages

Web Technology Project .

The document outlines a web technology project by Tamanna Nag, featuring a webpage for a cake shop created using HTML and CSS. The webpage includes a navigation menu, sections for featured cakes, and a footer with copyright information. The provided HTML and CSS code demonstrates the structure and styling of the webpage.

Uploaded by

munjalvivek89
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
13 views8 pages

Web Technology Project .

The document outlines a web technology project by Tamanna Nag, featuring a webpage for a cake shop created using HTML and CSS. The webpage includes a navigation menu, sections for featured cakes, and a footer with copyright information. The provided HTML and CSS code demonstrates the structure and styling of the webpage.

Uploaded by

munjalvivek89
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/ 8

WEB TECHNOLOGY PROJECT .

TAMANNA NAG
SYCS
ROLL NO : 08
PROFFESSOR : VINAY DUBEY

I HAVE CREATED A WEBPAGE ON CAKE SHOP USING HTML AD CSS.

**************************. HTML CODE . ******************************

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link

href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"

rel="stylesheet"

/>

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

<title>Home</title>

</head>

<body>

<nav>

<div class="heading">

<h4>Royal Cake Shop</h4>

</div>

<ul class="nav-links">

<li><a class="active" href="index.html">Home</a></li>

<li><a href="pages/about.html">About</a></li>

<li><a href="pages/contact.html">Owners</a></li>
</ul>

</nav>

<main>
<section class="featured-cakes">
<div class="container">
<h2>Featured Cakes</h2>
<div class="cake">
<img src="chocolate_cake.jpeg" alt="Chocolate Cake">
<h3>Chocolate Cake</h3>
<p>Rich and moist chocolate cake with creamy frosting.</p>
</div>
<div class="cake">
<img src="vanilla_cake.avif" alt="Vanilla Cake">
<h3>Vanilla Cake</h3>
<p>Classic vanilla cake with a hint of almond and vanilla frosting.</p>
</div>
<div class="cake">
<img src="red_velvet_cake.jpeg" alt="Red Velvet Cake">
<h3>Red Velvet Cake</h3>
<p>Delicious red velvet cake with cream cheese frosting.</p>
</div>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2024 Royal Cake Shop. All rights reserved.</p>
</div>
</footer>
</body>

</html>

******************************* CSS CODE *************************************

*{

margin: 0px;

padding: 0px;

box-sizing: border-box;

.body-text {

display: ex;

font-family: "Montserrat", sans-serif;

align-items: center;
fl
justify-content: center;

margin-top: 250px;

nav {

display: ex;

justify-content: space-around;

align-items: center;

min-height: 8vh;

background-color: teal;

font-family: "Montserrat", sans-serif;

.heading {

color: white;

text-transform: uppercase;

letter-spacing: 5px;

font-size: 20px;

.nav-links {

display: ex;

justify-content: space-around;

width: 30%;

.nav-links li {

list-style: none;

.nav-links a {

color: white;

text-decoration: none;

letter-spacing: 3px;

font-weight: bold;
fl
fl
font-size: 14px;

padding: 14px 16px;

.nav-links a:hover:not(.active) {

background-color: lightseagreen;

.nav-links li a.active {

background-color: #4caf50;

about {
display: ex;
align-items: center;
ex-wrap: wrap;
gap: 1.5rem;
}

.about .img {
ex: 1 1 40rem;
}

.about .img img {


width: 38%;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
border: 0.1rem solid rgba(0, 0, 0, 0.7);
}

.about .content {
ex: 1 1 40rem;
}

.about .content span {


color: # f;
font-size: 2.5rem;
}

.about .content h3 {
color: #222;
font-size: 3rem;
padding-top: .5rem;
}

.about .content p {
color: #222;
font-size: 1.4rem;
line-height: 2;
padding: 1rem 0;
}

main {
padding: 2rem 0;
}
fl
fl
fl
ff
fl
.featured-cakes {
text-align: center;
}

.featured-cakes h2 {
margin-bottom: 1.5rem;
}

.cake {
display: inline-block;
width: 30%;
margin: 1rem 0;
vertical-align: top;
}

.cake img {
width: 100%;
height: auto;
border-radius: 8px;
}

.cake h3 {
margin: 0.5rem 0;
}

footer {
background: #333;
color: # f;
padding: 1rem 0;
text-align: center;
}

footer .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}

.column {
oat: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}

.title {
color: grey;
}

.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
fl
ff
cursor: pointer;
width: 100%;
}

.button:hover {
background-color: #555;
}
**************OUTPUT***************

You might also like