Tugas membuat Web event
Nama : Muhammad Tabah Pristiawan
NRP : 5053231019
Kelas : M
Prodi : Rekayasa Perangkat Lunak
GitHub:code
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events and Shows</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #0a0a0a;
color: #fff;
}
.container {
display: flex;
height: 100vh;
}
.left-section {
background-image: url('music.jpg');
background-size: cover;
background-position: center;
flex: 2;
padding: 50px;
}
.left-section h1 {
font-size: 3em;
margin-bottom: 20px;
}
.left-section p {
font-size: 1.2em;
line-height: 1.6em;
max-width: 700px;
}
.right-section {
flex: 1;
background-color: #000000;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('images.jpeg');
}
.event-box {
margin-bottom: 30px;
padding: 20px;
background-color: #222;
border-radius: 10px;
}
.event-box h2 {
margin: 0;
font-size: 1.5em;
}
.event-box p {
margin: 10px 0;
font-size: 1em;
}
.event-box button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.event-box button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<div class="left-section">
<h1>Events and Shows</h1>
<p>With the idea of imparting programming knowledge, Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream,
GeeksforGeeks. Whether programming excites you or you feel stifled, how to ace data structures and algorithms,
GeeksforGeeks is a one-stop solution. With every ticket in, we are adding thousands of new prizes, from articles to premium courses,
placement techniques to programming anomalies. We have been building agile ecosystems that supply clarity to a dream.
</p>
<p>Join us and be a part of the journey of 25 Million+ Geeks around the world.
Our vision is to build a genuine network of geeks and we are only a fraction of the way yet.
</p>
</div>
<div class="right-section">
<div class="event-box">
<h2>15 March</h2>
<p>Where is the event happening? With the idea of imparting programming knowledge,
Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream, GeeksforGeeks. View Details
</p>
<button>View Details</button>
</div>
<div class="event-box">
<h2>27 May</h2>
<p>Where is the event happening? With the idea of imparting programming knowledge,
Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream, GeeksforGeeks. View Details
</p>
<button>View Details</button>
</div>
<div class="event-box">
<h2>12 August</h2>
<p>Where is the event happening? With the idea of imparting programming knowledge,
Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream, GeeksforGeeks. View Details
</p>
<button>View Details</button>
</div>
</div>
</div>
</body>
</html>
Komentar
Posting Komentar