Membuat tampilan web menggunakan html & css
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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="download.png" alt="">
Capcut</a>
<div>
<p class="p-navbar">
Log in
</p>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Download</a>
</li>
</div>
</div>
</nav>
<!-- Navbar content -->
</nav>
<nav>
<div class="pc-main-feature-wrapper">
<div class="container">
<center>
<h1 class="title">
<span>Spark Your Creativity</span>
</h1>
<h2 class="subtitle">A free all-in-one video editing solution for everyone, everywhere</h2>
<button class="arco-btn arco-btn-primary arco-btn-size-default arco-btn-shape-square btn" type="button">
<span>Get started for free</span>
</button>
</center>
</div>
</div>
</html>
CSS
* {
box-sizing: border-box;
}
element.style {
z-index: 3;
left: 0px;
}
.Lv_pc_Header-wrapper
align-items: center;
background-color: white;
display: flex;
flex-shrink: 0;
height: 64px;
min-width: 920px;
padding: 16px 28px;
transition: background-color,transform .3s ease-in-out;
}
.pc-main-feature-wrappe
background-color: #00c1cd;
display: flex;r {
height: 100vh;
position: relative;
}
.Lv_pc_Header-wrapper.fixed {
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}
div {
display: block;
}
.pc-main-feature-wrapper .container {
align-items: center;
background-image: url(background.webp);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
padding-top: 64px;
width: 100%;
z-index: 2;
}
.pc-main-feature-wrapper .container .title {
color: white;
font-size: 86px;
font-weight: 700;
line-height: 103px;
margin: 0 0 10px;
position: relative;
text-align: center;
text-shadow: 0 8.05px 11.5px rgb(82 104 220 / 25%);
}
.pc-main-feature-wrapper .container .subtitle {
color: hsla(0,0%,100%,.8);
font-size: 24px;
font-weight: 400;
line-height: 29px;
margin: 0;
text-align: center;
text-shadow: 0 2.3px 11.5px rgb(82 104 220 / 35%);
}
.pc-main-feature-wrapper .container .btn.arco-btn, .pc-main-feature-wrapper .container .btn.arco-btn {
background: black;
border-radius: 8px;
font-size: 24px;
font-weight: 590;
height: auto;
line-height: 29px;
padding: 20px 28px;
}
.pc-main-feature-wrapper .container .btn.arco-btn {
border-radius: 12px;
margin-top: 40px;
}
.arco-btn-primary:not(.arco-btn-disabled) {
background-color: rgb(var(--primary-6));
border: 1px solid transparent;
color: #fff;
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
}
.arco-btn {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-weight: 400;
line-height: 1.5715;
outline: none;
position: relative;
transition: all .1s linear;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
button, select {
text-transform: none;
}
button, input {
overflow: visible;
}
button, input, optgroup, select, textarea {
margin: 0;
}
button {
writing-mode: horizontal-tb !important;
text-rendering: auto;
color: buttontext;
letter-spacing: normal;
word-spacing: normal;
text-indent: 0px;
text-shadow: none;
text-align: center;
align-items: flex-start;
}
.pc_platform_container {
min-width: 920px;
overflow: hidden;
position: relative;
}
body, html {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
margin: 0;
padding: 0;
}
nav img {
height: 600px;
width: 100%;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
color: white;
}
a img {
height: 24px;
width: 30px;
}
.container {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
.p-navbar {
color: white;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px "SF Pro";
border: 2px solid;
border-radius: 5%;
margin: 1rem;
padding: 5px 22px;
}
h2.subtitle {
}
Komentar
Posting Komentar