Source Code
.html file
Dynamic Landing Page
Welcome to CodingMadeEasy
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Landing Page</title>
<link rel="stylesheet" href="landing.css">
</head>
<body>
<header>
<h1>Welcome to CodingMadeEasy</h1>
<p>Learn Coding With Easy Explanation.</p>
<button class="action-button">Learn More</button>
</header>
<section class="programmings">
<div class="programming">
<h2>HTML</h2>
<p>Front End of Website.</p>
</div>
<div class="programming">
<h2>Python</h2>
<p>Back Bone of Website.</p>
</div>
<!-- More features -->
</section>
<footer>
<p>© 2023 CodingMadeEasy. All rights reserved.</p>
</footer>
</body>
</html>
.css file
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f8fb;
text-align: center;
}
header {
background-image: url('C:/Users/Swarna%20Khushbu/Desktop/Coding/RurqKDM.jpg'); /* Add a background image */
color: white;
padding: 50px 20px;
background-size: cover;
background-position: center;
}
header h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
header p {
font-size: 1.2rem;
margin-bottom: 30px;
}
.action-button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.action-button:hover {
background-color: #0056b3;
}
.programmings {
display: flex;
justify-content: center;
padding: 20px;
}
.programming {
margin: 10px;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.programming:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
Leave a Reply