CSS ASSIgnment
1->Design a gallery that adjusts columns based on screen size using
CSS Grid and media queries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo gallery</title>
<style>
body {
margin: 0;
height: 100vh;
background-image: url('/navy-blue-concrete-wall-with-scratches.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: rgb(255, 233, 201);
text-align: center;
padding: 40px 20px;
background-attachment: fixed;
.gallery {
display: grid;
grid-template-columns: repeat(2, minmax(300px, 1fr));
justify-content: center;
justify-items: center; /* Centers each image inside its cell */
gap: 20px;
Chiranth R Rao 1
CSS ASSIgnment
.gallery img {
max-width: 300px;
border: 8px solid rgb(253, 238, 215);
border-radius: 20px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
transition: 0.3s;
@media (max-width: 700px) {
.gallery {
grid-template-columns: 1fr;
</style>
</head>
<body align="center">
<h1>BLUEBERRY</h1>
<div class="gallery" align="center">
<img src="/blueberry1.jpg">
<img src="/bowl-with-fresh-blueberries.jpg">
<img src="/high-angle-blueberry-dessert-with-mint.jpg">
<img src="/mario-mendez-fw7sKxSg5Vs-unsplash.jpg">
</div>
</body>
Chiranth R Rao 2
CSS ASSIgnment
</html>
2->Create a horizontal nav bar with Flexbox that becomes a vertical
stacked menu on small screens (with media queries).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Navigation Bar</title>
<style>
nav { background-color: #333; }
nav ul {
list-style: none;
display: flex;
margin: 0; padding: 0;
nav ul li a {
color: white;
padding: 14px 20px;
Chiranth R Rao 3
CSS ASSIgnment
display: block;
text-decoration: none;
nav ul li a:hover { background-color: #555; }
@media (max-width: 600px) {
nav ul { flex-direction: column; }
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Chiranth R Rao 4
CSS ASSIgnment
3->Style buttons or cards with smooth transitions and hover
effects like scaling, color change, or shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transitions and Hover Effects</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
.card {
display: inline-block;
background-color: #f4f4f4;
padding: 20px;
border-radius: 8px;
margin: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
.card:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
</style>
</head>
<body>
<h2>Hover Over the Cards</h2>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
Chiranth R Rao 5
CSS ASSIgnment
<div class="card">Card 3</div>
</body>
</html>
4->Style the contact form from Day 1 with custom fonts,
colors, padding, borders, and focus effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
body {
font-family: "Segoe UI", Arial, sans-serif;
background: #f7f9fc;
margin: 0;
padding: 20px;
Chiranth R Rao 6
CSS ASSIgnment
h1 {
text-align: center;
color: #1a3e59;
margin-bottom: 25px;
form {
background: #ffffff;
padding: 25px;
border-radius: 12px;
max-width: 420px;
margin: auto;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
label {
font-weight: 600;
display: block;
margin-top: 12px;
color: #1a3e59;
input, textarea, button {
width: 100%;
padding: 10px 12px;
margin-top: 5px;
border: 1px solid #ccd6e0;
border-radius: 8px;
font-size: 14px;
box-sizing: border-box;
transition: all 0.25s ease;
Chiranth R Rao 7
CSS ASSIgnment
input:focus, textarea:focus {
border-color: #3d8bfd;
box-shadow: 0 0 6px rgba(61,139,253,0.3);
outline: none;
small {
font-size: 12px;
color: #555;
button {
background: #3d8bfd;
color: white;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
margin-top: 18px;
padding: 12px;
button:hover {
background: #2f6bd6;
</style>
</head>
<body>
<h1>Contact Us</h1>
Chiranth R Rao 8
CSS ASSIgnment
<form action="#" method="post">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required
minlength="3" maxlength="50">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="example@email.com"
required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]
{3}-[0-9]{3}-[0-9]{4}" required>
<small>Format: 123-456-7890</small>
<label for="date">Preferred Contact Date:</label>
<input type="date" id="date" name="date" min="2025-08-10" max="2025-12-31"
required>
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Type your message here..."
required minlength="10" maxlength="500"></textarea>
<button type="submit">Send Message</button>
</form>
</body>
</html>
Chiranth R Rao 9
CSS ASSIgnment
5->Define CSS variables for primary colors and fonts, then use them
throughout a page to create a consistent theme.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Themed Page</title>
<style>
:root {
--primary: #005b96;
Chiranth R Rao 10
CSS ASSIgnment
--secondary: #03396c;
--accent: #b3cde0;
--bg: #f4f4f4;
--font: 'Segoe UI', sans-serif;
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--secondary);
text-align: center;
padding: 2rem;
header {
background: var(--primary);
color: white;
padding: 1rem;
font-size: 1.5rem;
button {
background: var(--secondary);
color: white;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 6px;
cursor: pointer;
button:hover {
Chiranth R Rao 11
CSS ASSIgnment
background: var(--accent);
color: var(--secondary);
</style>
</head>
<body>
<header>CSS Variables</header>
<p>This site uses CSS variables for consistent theming.</p>
<button>Click Me</button>
</body>
</html>
6->Use relative units (em, rem, vw) for font sizes and implement
media queries to adjust font size for different screen widths. <!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Typography</title>
<style>
body {
margin: 0;
Chiranth R Rao 12
CSS ASSIgnment
font-family: Arial, sans-serif;
background: #eef2f3;
color: #333;
padding: 2rem;
h1 {
font-size: 4vw;
color: #005b96;
p{
font-size: 1.2rem;
max-width: 600px;
@media (max-width: 600px) {
h1 { font-size: 2rem; }
p { font-size: 1rem; }
</style>
</head>
<body>
<h1>Responsive Typography</h1>
<p>Font sizes here adapt to your screen size using relative units like <code>rem</code>,
<code>em</code>, and <code>vw</code>.</p>
</body>
</html>
Chiranth R Rao 13
CSS ASSIgnment
7->Build a card component with an image, title, description,
rounded corners, box shadow, and padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Card Design</title>
<style>
Chiranth R Rao 14
CSS ASSIgnment
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.card {
background: white;
width: 300px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
text-align: center;
.card img {
width: 100%;
display: block;
.card h2 {
color: #03396c;
margin: 1rem 0 0.5rem;
.card p {
color: #666;
padding: 0 1rem 1rem;
Chiranth R Rao 15
CSS ASSIgnment
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<h2>Card Title</h2>
<p>This is a clean, professional card component with rounded corners and a shadow.</p>
</div>
</body>
</html>
8->Create an accordion component using only HTML and CSS, with
checkboxes or radio buttons controlling the open/close state.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Chiranth R Rao 16
CSS ASSIgnment
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-only Accordion</title>
<style>
body {
font-family: Arial, sans-serif;
background: #eef2f3;
padding: 2rem;
.accordion input { display: none; }
.accordion label {
display: block;
background: #005b96;
color: white;
padding: 1rem;
margin-bottom: 0.2rem;
cursor: pointer;
border-radius: 4px;
.accordion div {
max-height: 0;
overflow: hidden;
background: white;
transition: max-height 0.3s ease;
padding: 0 1rem;
.accordion input:checked + label + div {
max-height: 200px;
padding: 1rem;
Chiranth R Rao 17
CSS ASSIgnment
</style>
</head>
<body>
<h1>CSS-only Accordion</h1>
<div class="accordion">
<input type="checkbox" id="q1">
<label for="q1">Section 1</label>
<div><p>Content for section one goes here.</p></div>
<input type="checkbox" id="q2">
<label for="q2">Section 2</label>
<div><p>Content for section two goes here.</p></div>
<input type="checkbox" id="q3">
<label for="q3">Section 3</label>
<div><p>Content for section three goes here.</p></div>
</div>
</body>
</html>
Chiranth R Rao 18
