Pertemuan 7
Aisyahra Alhanni Satria
5053231010
Membuat CSS Landing Page
<!DOCTYPE html>
<html lang="en">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
/* Header Section */
header {
background-color: #282c34;
color: white;
padding: 20px;
text-align: center;
}
header h1 {
font-size: 3em;
}
header p {
font-size: 1.2em;
margin-top: 10px;
}
nav {
margin-top: 10px;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Main Banner Section */
.banner {
background: url('banner-image.jpg') no-repeat center center/cover;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
color: rgb(0, 0, 0);
text-align: center;
padding: 0 20px;
}
.banner h1 {
font-size: 4em;
margin-bottom: 10px;
}
.banner p {
font-size: 1.5em;
}
.banner a {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #ff6600;
color: white;
text-decoration: none;
font-size: 1.2em;
border-radius: 5px;
}
.banner a:hover {
background-color: #cc5200;
}
/* Courses Section */
.courses {
padding: 50px;
background-color: white;
text-align: center;
}
.courses h2 {
font-size: 2.5em;
margin-bottom: 40px;
color: #333;
}
.course-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.course-item {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
margin: 10px;
padding: 20px;
width: 30%;
box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}
.course-item h3 {
font-size: 1.8em;
margin-bottom: 15px;
}
.course-item p {
font-size: 1em;
margin-bottom: 20px;
}
.course-item a {
display: inline-block;
padding: 10px 15px;
background-color: #282c34;
color: white;
text-decoration: none;
border-radius: 5px;
}
.course-item a:hover {
background-color: #ff6600;
}
/* Footer Section */
footer {
background-color: #282c34;
color: white;
text-align: center;
padding: 30px 0;
}
footer p {
margin: 0;
}
footer a {
color: #ff6600;
text-decoration: none;
font-weight: bold;
}
footer a:hover {
text-decoration: underline;
}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Course Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to Our Courses</h1>
<p>Learn, Grow, and Succeed with Our Expert-Led Courses</p>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main Banner Section -->
<section class="banner">
<div>
<h1>Unlock Your Potential</h1>
<p>Join thousands of students who are advancing their careers.</p>
<a href="#courses">Browse Courses</a>
</div>
</section>
<!-- Courses Section -->
<section id="courses" class="courses">
<h2>Our Popular Courses</h2>
<div class="course-list">
<!-- Course 1 -->
<div class="course-item">
<h3>Web Development</h3>
<p>Learn how to build modern websites using HTML, CSS, and JavaScript.</p>
<a href="#">Learn More</a>
</div>
<!-- Course 2 -->
<div class="course-item">
<h3>Data Science</h3>
<p>Master data analysis, visualization, and machine learning with Python.</p>
<a href="#">Learn More</a>
</div>
<!-- Course 3 -->
<div class="course-item">
<h3>Digital Marketing</h3>
<p>Gain the skills to grow businesses online with SEO, ads, and content strategies.</p>
<a href="#">Learn More</a>
</div>
</div>
</section>
<!-- Footer Section -->
<footer>
<p>© 2024 YourCourse. All rights reserved.</p>
<p><a href="#contact">Contact Us</a> for more information.</p>
</footer>
</body>
</html>
Hasil dari kodingan:
git: git
Comments
Post a Comment