Scribd
Upload
4 views9 pages

EXP3

The document outlines the objective to develop a responsive blog website using HTML and CSS. It includes the HTML structure for the blog, featuring a header, main content with blog posts, and a footer, along with corresponding CSS styles for layout and design. The CSS also incorporates responsive design principles to ensure usability on different screen sizes.

Uploaded by

it22223
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
4 views9 pages

EXP3

The document outlines the objective to develop a responsive blog website using HTML and CSS. It includes the HTML structure for the blog, featuring a header, main content with blog posts, and a footer, along with corresponding CSS styles for layout and design. The CSS also incorporates responsive design principles to ensure usability on different screen sizes.

Uploaded by

it22223
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

EXPERIMENT -3

Objective- Develop a responsive website (blog) using HTML and CSS.

HTML code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Blog</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">My Blog</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section class="hero">
<h1>Welcome to My Blog</h1>
<p>Sharing insights, tips, and stories.</p>
</section>

<section class="blog-posts">
<article class="post">
<h2>Science</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a
nisi lorem. Sed ut velit non arcu tempus fermentum.</p>
<a href="#" class="read-more">Read more</a>
</article>

<article class="post">
<h2>Environment</h2>
<p>Ut venenatis et justo vel convallis. Morbi in nisi ex. In nec lacus
venenatis, finibus nisi non, scelerisque augue.</p>
<a href="#" class="read-more">Read more</a>
</article>

<article class="post">
<h2>Technology</h2>
<p>Suspendisse lacinia, elit nec convallis dictum, urna ipsum
fermentum ligula, id suscipit libero lorem a nisi.</p>
<a href="#" class="read-more">Read more</a>
</article>
</section>
</main>
<footer>
<p>&copy; 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>

CSS code-

/* General Styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}

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

header .logo {
font-size: 1.8rem;
font-weight: bold;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
margin-top: 10px;
}

nav ul li {
margin: 0 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
}

nav ul li a:hover {
color: #ff6347;
}
/* Hero Section */
.hero {
background-color: #4CAF50;
color: #fff;
padding: 50px 20px;
text-align: center;
}

.hero h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}

.hero p {
font-size: 1.2rem;
}

/* Blog Posts */
.blog-posts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 40px;
background-color: #fff;
}
.post {
background-color: #eaeaea;
padding: 20px;
border-radius: 8px;
transition: transform 0.2s;
}

.post:hover {
transform: scale(1.05);
}

.post h2 {
font-size: 1.8rem;
color: #333;
}

.post p {
margin: 10px 0;
}

.read-more {
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s;
}

.read-more:hover {
background-color: #ff6347;
}

/* Footer */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
margin-top: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
}

You might also like