Tugas 3
Nama : Dentha Jefry Yudhiantara
NRP : 5053231012
Prodi : Rekaya Perangkat Lunak
Kelas : Pemograman Web(M)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale=1.0">
<title> Event And Show</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('left.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;
margin-bottom: 24px;
padding: 12px;
background-color: #00000086;
border-radius: 12px;
}
.right-section{
flex: 1;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('right.jpg');
}
.event-box {
margin-bottom: 30px;
padding: 20px;
background-color: #00000072;
border-radius: 12px;
}
.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: #926129;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.event-box button:hover {
background-color: #5d3c0e;
}
</style>
</head>
<body>
<div class="container">
<div class="left-section">
<h1>Event And Show</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>
</body>
</html>
Komentar
Posting Komentar