Nama : Made Satya Dhananjaya
NRP : 5053231001
Rekayasa Perangkat Lunak
PWeb-M
Link Website : https://madesatya5.github.io/Skill-Hero-LandingPage/
Link Github Code : https://github.com/MadeSatya5/Skill-Hero-LandingPage
Hasil :
Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skill Hero</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="main-container">
<section class="navbar">
<nav>
<h1>Skill<span>Hero</span></h1>
<div class="nav-right">
<h2 class="home">Home</h2>
<h2 class="programs">Programs</h2>
<h2 class="about">About Us</h2>
<h2 class="contact">Contact</h2>
<div class="button-nav">
<button class="login">Login</button>
<button class="join-now">Join-Now</button>
</div>
</div>
</nav>
</section>
<section class="content">
<div class="info-container">
<h1 class="main-text">Upgrade Your Skills Up To <span>Superhero </span>Level</h1>
<h4>Don't let your strenght be defeated,<br> Explore the hidden skill within you!</h4>
<h3>Contact Us!</h3>
<div class="contact-us">
<i class="fab fa-instagram"></i>
<i class="fab fa-line"></i>
<i class="fab fa-facebook"></i>
</div>
</div>
<div class="img-container">
<img src="images/hero.png" alt="hero">
</div>
</section>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
*{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
padding: 0;
}
body{
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f5;
}
.main-container{
width: 80%;
max-width: 1200px;
padding: 10px 50px;
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 30px;
}
h1{
font-weight: 700;
font-size: 25px;
}
h1 span{
color: #CC0B2F;
font-weight: 600;
}
h2{
font-weight: 400;
font-size: 20px;
}
.navbar{
padding: 0px;
margin: 0px;
}
.nav-right{
display: flex;
gap: 50px;
align-items: center;
}
.nav-right h2:hover{
color: #CC0B2F;
border-bottom: 2px solid #CC0B2F;
cursor: pointer;
}
button{
width: 90px;
border-radius: 60px;
padding: 5px;
}
.button-nav{
display: flex;
gap: 20px;
}
.login{
color: #CC0B2F;
border: 2px solid #CC0B2F;
transition: 0.1s ease-in-out;
}
.login:hover{
background-color: #CC0B2F;
color: white;
cursor: pointer;
transform: scale(1.1);
}
.join-now{
color: white;
background-color: #CC0B2F;
border-style: none;
transition: 0.1s ease-in-out;
}
.join-now:hover{
background-color: #081226;
color: white;
cursor: pointer;
transform: scale(1.2);
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 20px;
}
.content{
padding: 5px 20px;
margin-top: 80px;
display: flex;
justify-content: space-between;
}
.info-container{
width: 600px ;
}
h4{
font-size: 18px;
letter-spacing: 1px;
}
h3{
font-size: 30px;
font-weight: 500;
}
.main-text{
font-size: 50px;
}
img{
width: 500px;
}
i{
font-size: 30px;
margin-right: 5px;
}
i:hover{
color: #CC0B2F;
cursor: pointer;
transform: scale(1.1);
transition: 0.1s ease-in-out;
}
@media (max-width: 1024px){
button{
display: none;
}
.content{
margin-top: 40px;
}
img{
max-width: 100%;
min-width: 300px;
}
}
@media(max-width: 825px){
.main-text{
font-size: 30px;
}
}
@media (max-width: 770px){
.content{
margin-top: 0;
}
}
@media(max-width: 700px){
.about, .contact{
display: none;
}
}
@media(max-width: 500px){
.main-text{
font-size: 20px;
}
img{
min-width: 50px;
}
h4{
font-size: 15px;
}
h3{
font-size: 20px;
}
i{
font-size: 20px;
}
}
@media(max-width: 450px){
.nav-right{
display: none;
}
}
Comments
Post a Comment