Tugas Study Case
nama: Geraldo Benjamin Nainggolan
NRP: 5053231014
Landing Page - Bareksa
Link website: Bareksa Clone
Link Github: Github Bareksa
Bareksa adalah salah satu mitra distribusi yang dipercaya oleh Kementrian Keuangan RI untuk menjual Surat Berharga Negara ritel secara online. Disini saya membuat landing page website nya.
Kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bareksa</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section id="container-1">
<nav>
<div class="web-logo">
<a href="">
<img src="https://images.bareksa.com/logo/BareksaxGrab-header.svg" alt="">
</a>
</div>
<div class="menu">
<ul>
<li><a href="">Produk</a></li>
<li><a href="">Data</a></li>
<li><a href="">Layanan</a></li>
<li><a href="">Berita</a></li>
<li><a href="">Promo</a></li>
<li><a href="">Perusahaan</a></li>
</ul>
</div>
<div class="buttons">
<input type="button" value="Masuk">
<input type="button" value="Daftar">
</div>
</nav>
</section>
<section id="container-2">
<main>
<div class="hero">
<h1>Satu Aplikasi Beragam Investasi #AmanPastiBisa</h1>
<p>Dapatkan Kemudahan mengelola semua aset investasi dalam satu genggaman. Di Bareksa, investasi semudah belanja online!</p>
</div>
<div class="app">
<div>
<img src="https://images.bareksa.com/biome/illustrations/Super%20App%20Mockup.webp" alt="Bareksa Application" loading="eager">
</div>
</div>
</main>
</section>
</body>
</html>
Kode CSS:
body {
margin: 0;
padding: 0;
background-image: url(./assets/05dd6ec4f598845cea361cdf64ecbc9d.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
width: 100vw;
overflow-x: hidden;
}
/* Nav Style */
*{
box-sizing: border-box;
}
#container-1 {
margin: 0 auto;
padding: 20px;
background-color: rgba(128, 128, 128, 0.8);
}
nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: sticky;
height: 56px;
margin: 0 200px;
}
.web-logo {
margin-right: 40px;
}
.web-logo img{
width: 180px;
}
.menu ul {
display: flex;
flex-direction: row;
list-style: none;
gap: 40px;
margin: 0;
padding: 0;
}
.menu ul a {
text-decoration: none;
color: #c5d3e0;
font-size: 16px;
line-height: 20px;
font-style: normal;
font-weight: 700;
}
.menu ul a:hover {
color: #22b252;
}
.buttons {
display: flex;
flex-direction: row;
gap: 10px;
}
.buttons input {
font-style: normal;
font-family: "Nunito Sans", sans-serif;
outline: none;
width: 96px;
height: 40px;
border: none;
cursor: pointer;
padding: 0 20px;
height: 40px;
line-height: 20px;
border-radius: 32px;
text-align: center;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.buttons input[value="Masuk"] {
background-color: #e6f6ea;
color: #22b252;
}
.buttons input[value="Daftar"]{
background-color: #22b252;
color: #fff;
}
.buttons input[value="Masuk"]:hover {
background-color: #8bbe98;
color: #fbfbfb;
}
.buttons input[value="Daftar"]:hover{
background-color: #c1decb;
}
@media (max-width: 768px) {
nav {
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: 0;
padding: 0 20px;
height: auto;
}
.menu ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 20px;
width: 100%;
}
.buttons {
margin-left: 0;
margin-top: 20px;
width: 100%;
justify-content: center;
}
.buttons input {
width: 100%;
max-width: 150px;
}
.web-logo img {
width: 150px;
}
}
/* End Nav Style */
#container-2{
margin-top: 10px;
}
main{
display: flex;
align-items: center;
justify-content: center;
gap: 100px;
}
.hero {
width: 500px;
text-align: left;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 15px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
.hero h1 {
font-family: 'Nunito Sans', sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 64px;
color: #e6f6ea;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.hero p {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.176px;
margin: 16px 0 0;
color: #e6f6ea;
}
.app div{
width: 100%;
padding: 0 50px;
border-radius: 20px;
background-color: #22b252;
position: relative;
overflow: hidden;
height: 700px;
}
.app div img {
width: 371px;
top: 62px;
position: relative;
}
.app div {
width: 100%;
padding: 0 50px;
border-radius: 20px;
background-color: #22b252;
position: relative;
overflow: hidden;
}
.app div::before,
.app div::after {
content: '';
position: absolute;
border-radius: 399px;
opacity: 0.5;
background: hsla(0, 0%, 100%, 0.2);
box-shadow: 2.926px 2.926px 4.6816px 0.5852px rgba(0, 0, 0, 0.02), 2.926px 2.926px 2.3408px 0 rgba(0, 0, 0, 0.02);
z-index: 0;
}
.app div::before {
width: 200px;
height: 200px;
top: -50px;
left: -50px;
}
.app div::after {
width: 300px;
height: 300px;
bottom: -100px;
right: -100px;
}
@media (max-width: 768px) {
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 20px;
box-sizing: border-box;
}
.hero {
width: 100%;
max-width: 500px;
padding: 20px;
}
.hero h1 {
font-size: 6vw;
max-width: 100%;
}
.hero p {
font-size: 4vw;
max-width: 100%;
}
.app div {
width: 100%;
padding: 20px;
}
.app div img {
width: 100%;
max-width: 371px;
height: auto;
}
}
Comments
Post a Comment