Scribd
Upload
5 views7 pages

CSS Code

Uploaded by

dhrupatel1702
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
5 views7 pages

CSS Code

Uploaded by

dhrupatel1702
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/ 7

IPS-4

CSS code

body {

font-family: 'Georgia', serif;


margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}

header {
background-color: #4caf50; /* Green header */
color: #fff;
text-align: center;
padding: 20px 0;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #2c3e50; /* Dark blue navigation bar */
overflow: hidden;
}

nav ul li {
display: inline;
}

nav ul li a {
color: #ecf0f1; /* Light gray text */
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-weight: bold;
}

nav ul li a:hover {
background-color: #4caf50; /* Green hover effect */
}

main {
padding: 20px;
}

.featured-products, .products-list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.product {
text-align: center;
margin: 10px;
background-color: #fff; /* White product card background */
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product img {
width: 150px;
height: 150px;
border-radius: 10px;
}

.product p {
font-size: 1rem;
color: #555;
}

form {
display: flex;
flex-direction: column;
max-width: 400px;
margin: 20px auto;
background-color: #fff; /* White form background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

form label {
margin: 10px 0 5px;
font-weight: bold;
color: #333;
}

form input, form textarea, form button {


padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

form input:focus, form textarea:focus {


border-color: #4caf50; /* Green focus border */
outline: none;
}

form button {
background-color: #4caf50; /* Green button */
color: white;
border: none;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
}

form button:hover {
background-color: #2c3e50; /* Dark blue hover */
}

HTML Code

<html lang="en">
<head>
<title>Sweet Delights - Home</title>
<link rel="stylesheet" href="C:\Users\scope1\Desktop\New folder\
styles.css">
</head>
<body>
<header>
<h1>Welcome to Sweet Delights</h1>
<p>Your favorite neighborhood bakery, serving fresh and
delightful treats daily!</p>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Featured Products</h2>
<div class="featured-products">
<div class="product">
<img src="C:\Users\scope1\Desktop\New folder\Screenshot
2025-01-09 085500.png" alt="Chocolate Cake">
<p>Chocolate Cake - 500</p>
</div>
<div class="product">
<img src="C:\Users\scope1\Desktop\New folder\Screenshot
2025-01-09 085425.png" alt="Cookies">
<p>Fresh Cookies - 50</p>
</div>
<div class="product">
<img src="C:\Users\scope1\Desktop\New folder\Screenshot
2025-01-09 085530.png" alt="Artisan Bread">
<p>Artisan Bread - 100</p>
</div>
</div>
</main>
</body>
</html>

<html lang="en">
<head>
<title>Sweet Delights - Products</title>
<link rel="stylesheet" href="C:\Users\scope1\Desktop\New folder\
styles.css">
</head>
<body>
<header>
<h1>Our Products</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<div class="products-list">
<div class="product">
<img src="C:\Users\scope1\Desktop\New folder\Screenshot
2025-01-09 085500.png" alt="Chocolate Cake">
<p>Chocolate Cake - 500</p>
</div>
<div class="product">
<img src="C:\Users\scope1\Desktop\New folder\Screenshot
2025-01-09 085425.png" alt="Cookies">
<p>Fresh Cookies - 50</p>
</div>
<div class="product">
<img src="C:\Users\scope1\Desktop\New folder\Screenshot
2025-01-09 085530.png" alt="Artisan Bread">
<p>Artisan Bread - 100</p>
</div>
<div class="product">
<img src="C:\Users\scope1\Desktop\New folder\Screenshot
2025-01-09 085559.png" alt="Blueberry Muffins">
<p>Blueberry Muffins - 75</p>
</div>
<div class="product">
<img src="C:\Users\scope1\Desktop\New folder\Screenshot
2025-01-09 085715.png" alt="Croissant">
<p>Buttery Croissant - 45</p>
</div>
</div>
</main>
</body>
</html>

<html lang="en">
<head>
<title>Sweet Delights - Contact</title>
<link rel="stylesheet" href="C:\Users\scope1\Desktop\New folder\
styles.css">
</head>
<body>
<header>
<h1>Contact Us</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Get in Touch</h2>
<p>Address: Vit Chennai</p>
<p>Phone: oooooooooo</p>
<p>Email: [email protected]</p>
</section>
<section>
<h2>Contact Form</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"
required></textarea>

<button type="submit">Send</button>
</form>
</section>
</main>
</body>
</html>

You might also like