Kuis 1 HTML & CSS
Nama: Fauzan Dzikri Rabbani
NRP: 5025221311
Kelas: Pemrograman Web (A)
Kuis 1
Tampilan Laman Web
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<title>My Company</title>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0px;
height: 100%;
background-color: #ebedf0;
}
footer {
background-color: black;
color: #fff;
text-align: center;
padding: 20px 0;
font-size: 20px;
}
.content{
padding-top: 0px;
padding-bottom: 40px;
max-width: 100%;
margin-top: 0px;
margin-right: 8%;
margin-left: 8%;
padding-right:8%;
padding-left: 8%;
background-color: whitesmoke;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.header{
background-color: black;
padding: 0px;
margin: 0px;
}
.parallax-image{
background-image: url("main_menu.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.row {
margin: 0px -18px;
padding: 8px;
}
.row > .column {
padding: 6px;=
}
.column {
float: left;
width: 25%;
min-height: 2000px;
}
.row:after {
content: "";
display: flex;
clear: both;
}
p{
font-family: 'roboto', sans-serif;
font-size: 16px;
text-align: justify;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
padding: 15px;
width: 100%;
height: 40px;
background-color: black;
padding-bottom: 30px;
}
.navigation {
display: flex;
justify-content: center;
align-items: center;
padding-left: 0px;
font-family: 'arial', sans-serif;
}
.brand {
font-size: 30px;
color: white;
}
.navigation > li {
align-self: center;
list-style: none ;
padding: 15px;
}
.navigation > li > a {
color: white;
font-size: 20px;
text-decoration: none;
}
.head-container{
align-items: center;
align-content: center;
}
li:hover {
color: yellow;
}
.content-flex{
display: inline;
}
</style>
</head>
<body>
<div class="header">
<h1 style="color: whitesmoke; font-family: 'arial', sans-serif; margin: 0px; padding: 20px; text-align: center;">AIFOGEX ©</h1>
</div>
<div class="head-container">
<nav class="wrapper">
<ul class="navigation">
<li><a href="">Join Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Services</a></li>
</ul>
</nav>
</div>
<div class="parallax-image">
</div>
<div class="content">
<div>
<h1 style="color: black; font-family: 'Arial', sans-serif; margin: 0px; padding: 20px;padding-top: 40px; font-weight: 750; text-align: center;">
About Us
</h1>
<p style="text-align: justify;">
At AIFOGEX, we embarked on a transformative journey in pursuit of redefining the landscape of oil and gas exploration. Founded with a passion for innovation and a commitment to advancing the industry, we recognized the tremendous potential of AI to revolutionize the way seismic scanning is conducted.
</p>
<p style="text-align: justify;">
Our mission is clear: to harness the power of artificial intelligence to make the process of oil and gas exploration more efficient, sustainable, and ultimately, more fruitful. We envision a future where cutting-edge technology not only uncovers valuable resources beneath the Earth's surface but does so while minimizing environmental impact and maximizing profitability
</p>
<h1 style="color: black; font-family: 'Arial', sans-serif; margin: 0px; padding: 20px;padding-top: 40px; font-weight: 750; text-align: center;">
Our Exploits
</h1>
<p><strong>United Nations Award for Technology 2023 -</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum, nisl ac suscipit viverra, orci tortor ultrices urna, sit amet congue orci felis sit amet elit. Donec ultrices blandit nisi nec commodo. Praesent imperdiet porta nulla quis dignissim. Duis sagit
</p>
<p><strong>MIT Award of Innovation 2019 -</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum, nisl ac suscipit viverra, orci tortor ultrices urna, sit amet congue orci felis sit amet elit. Donec ultrices blandit nisi nec commodo. Praesent imperdiet porta nulla quis dignissim. Duis sagit
</p>
<p><strong>Pertamina Award for Energy Efficient Technology 2032 -</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum, nisl ac suscipit viverra, orci tortor ultrices urna, sit amet congue orci felis sit amet elit. Donec ultrices blandit nisi nec commodo. Praesent imperdiet porta nulla quis dignissim. Duis sagit
</p>
<h1 style="color: black; font-family: 'Arial', sans-serif; margin: 0px; padding: 20px;padding-top: 40px; font-weight: 750; text-align: center;">
Why Artificial Intelligence?
</h1>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum, nisl ac suscipit viverra, orci tortor ultrices urna, sit amet congue orci felis sit amet elit. Donec ultrices blandit nisi nec commodo. Praesent imperdiet porta nulla quis dignissim. Duis sagittis, ipsum et ullamcorper consequat, augue lorem dignissim erat, at lacinia diam tellus varius augue. Sed pulvinar pharetra dolor id pulvinar. Vivamus mattis dui id diam
</p>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum, nisl ac suscipit viverra, orci tortor ultrices urna, sit amet congue orci felis sit amet elit. Donec ultrices blandit nisi nec commodo. Praesent imperdiet porta nulla quis dignissim. Duis sagittis, ipsum et ullamcorper consequat, augue lorem dignissim erat, at lacinia diam tellus varius augue. Sed pulvinar pharetra dolor id pulvinar. Vivamus mattis dui id diam
</p>
</div>
</div>
<footer>
© 2042 AIFOGEX LTD
</footer>
</body>
Comments
Post a Comment