TUGAS 2 PWEB - Landing Page
TUGAS 2 PWEB - Landing Page
Muhammad Raihan Athallah
5025201206
Kelas PWEB B
Pada tugas kedua ini saya membuat sebuah landing page
screenshoot tampilan
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>WONDERFUL INDONESiA</title>
</head>
<body>
<div class="jumbotron">
<div class="jumbotron-body">
<h1 class="jumbo-text">WONDERFUL INDONESIA</h1>
<p class="jumbo-text-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et rhoncus metus. Sed venenatis augue et est cursus, vel sollicitudin velit efficitur. Duis tempor, nisl id pharetra laoreet, ex leo dignissim diam, ac rutrum
nisl ex vitae eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<button class="button-explore"><h2>EXPLORE</h2></button>
</div>
</div>
<div class="content">
<div class="left-content">
<img src="img/candi.jpg" width="30%" alt="" />
<div class="text-box">
<h2>Candi</h2>
<br />
<p>
In the heat of equatorial Indonesia, deep within lush landscapes, hides some of the most impressive ancient structures in the world. The Hindu and Buddhist temples of this island nation were painstakingly crafted with stone so
they would stand forever. Now they wait for you to find them. Put on a ceremonial sarong, quiet your mind and enjoy spirituality etched in stone that has been handed down through the ages.
</p>
<div class="examples-text">
<h3>Examples</h3>
<br />
<p>Candi Borobudur and Candi Prambanan</p>
</div>
</div>
</div>
<br />
<div class="right-content">
<div class="text-box">
<h2>BEACH</h2>
<br />
<p>
Indonesia regularly tops the travel bucket lists of beach aficionados, not only because of the amount of coastline, but also the quality and diversity of the seashore escapes. Looking for a wild pebble beach with surf-ready
swells on a secluded island? Or a palm-fringed white-sand beach near world-class resorts? How about something a little different, like a pink-sand beach with epic snorkeling close to the shoreline filled with big lizards? No
matter your definition of paradise, you can find a beach in Indonesia that meets it.
</p>
<div class="examples-text">
<h3>Examples</h3>
<br />
<p>Pink Beach, Kuta Beach, and Seminyak Beach</p>
</div>
</div>
<img src="img/laut.jpg" width="30%" alt="" />
</div>
<div class="left-content">
<img src="img/gunung.jpg" width="30%" alt="" />
<div class="text-box">
<h2>MOUNTAIN</h2>
<br />
<p>
If you’ve always wanted to hike up a volcano, there is no better place to go than Indonesia. Because of the country’s location at the meeting point of three tectonic plates—the Australian, Eurasian and Pacific plates—, it’s home
to numerous volcanoes.
</p>
<div class="examples-text">
<h3>Examples</h3>
<br />
<p>Mount Bromo, Mount Rinjani, and Mount Ijen</p>
</div>
</div>
</div>
<div class="right-content">
<div class="text-box">
<h2>SAVANNA</h2>
<br />
<p>
Have you ever seen a beautiful large green grass or barren grass that already dried In Indonesia? It is known as savanna. Savanna is generally located in the tropics and subtropics area. Africa and Australia are very famous for
their savanna.Moreover, you can see beautiful savanna in several cities in Indonesia as it become the tourist attraction.
</p>
<div class="examples-text">
<h3>Examples</h3>
<br />
<p>Sembalun Savanna, Bromo Savanna, and Baluran National Park</p>
</div>
</div>
<img src="img/savana.jpg" width="30%" alt="" />
</div>
</div>
</body>
<footer>
<p class="footer-text">Made By Raihan</p>
</footer>
</html>
style.css
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
}
p {
letter-spacing: 2px;
}
body {
height: 100vh;
/* background: rgb(10, 10, 10);
background: linear-gradient(3deg, rgba(10, 10, 10, 1) 42%, rgba(42, 22, 23, 1) 75%); */
}
.jumbotron {
height: 75vh;
width: 100vw;
align-items: center;
background-image: url("img/jumbo.jpg");
background-size: 100vw 75vh;
background-repeat: no-repeat;
}
.name {
padding: 1em;
}
.jumbotron-body {
margin: auto;
width: 75vw;
padding: 30px 0 0 0;
text-align: center;
}
.jumbo-text {
padding-top: 2.2em;
font-size: 5vw;
}
.jumbo-text-p {
font-weight: bold;
}
.button-explore {
width: 8em;
height: 3em;
margin-top: 3em;
background-color: transparent;
border: 2px solid #ffffff;
border-radius: 4px;
}
.content {
padding-top: 3em;
background-color: rgba(42, 22, 23, 1);
}
.left-content {
width: fit-content;
padding: 10em 0;
display: flex;
justify-content: center;
/* border: 2px solid #ffffff; */
}
.right-content {
width: fit-content;
padding: 10em 0;
display: flex;
justify-content: center;
/* border: 2px solid #ffffff; */
}
.left-content .text-box {
margin-left: 7em;
width: 30%;
}
.right-content .text-box {
margin-right: 7em;
width: 30%;
}
.text-box {
display: flex;
flex-direction: column;
/* border: 2px solid #ffffff; */
}
.text-box h2 {
font-size: 3vw;
}
img {
border-radius: 12px;
}
.examples-text {
vertical-align: baseline;
margin-top: 4em;
}
footer {
height: 5vh;
background-color: rgba(42, 22, 23, 1);
}
.footer-text {
/* color: black; */
padding-top: 10px;
text-align: center;
}
Komentar
Posting Komentar