Scribd
Upload
12 views2 pages

Mini Project Landing Page

The document outlines a mini project for creating a simple landing page using HTML and CSS. It includes an index.html file with a welcoming message and a button, as well as a style.css file that styles the page with a centered layout, background color, and button effects. The design focuses on a clean and user-friendly interface.

Uploaded by

Akhil Akhil
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
12 views2 pages

Mini Project Landing Page

The document outlines a mini project for creating a simple landing page using HTML and CSS. It includes an index.html file with a welcoming message and a button, as well as a style.css file that styles the page with a centered layout, background color, and button effects. The design focuses on a clean and user-friendly interface.

Uploaded by

Akhil Akhil
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/ 2

Mini Project: Simple Landing Page

1. index.html (HTML Code)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Website</h1>
<p>This is a simple and clean landing page using only HTML & CSS.</p>
<a href="#" class="btn">Get Started</a>
</div>
</body>
</html>

2. style.css (CSS Code)


body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
text-align: center;
}

.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 300px;
}

h1 {
margin: 0;
font-size: 24px;
color: #333;
}

p {
color: gray;
font-size: 16px;
margin: 10px 0;
}
.btn {
display: inline-block;
padding: 10px 20px;
margin-top: 10px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}

.btn:hover {
background: #0056b3;
}

You might also like