Portal Berita
Tugas PWEB Pada tugas kali ini diminta untuk membuat porta berita dengan penertapan bootsrap dengan halaman utama home, halaman contact us dan pop up login, file-file yang ada pada tugas ini berupa file html, css dan js
Dibawah ini adalah hasil dokumentasi dari webiste yang telah dibuat
Dibawah ini adalah Dokumentasi dari coding-coding
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">
<title>Portal Berita</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<header>
<div class="twp-site-branding data-bg ">
<div class="container twp-no-space">
<div class="twp-wrapper">
<div class="twp-logo">
<img src="https://news.sky.com/resources/sky-news-logo.svg?v=1?bypass-service-worker" alt="Logo">
</div>
</div>
</div>
</div>
</header>
<nav>
<div class="twp-nav-menu">
<div class="container nav">
<div class="left-content">
<ul class="nav-button" style="padding-left: 0px; margin-bottom: 0px;">
<li class="nav-button 1">
<a href="#" class="home-button">Home</a>
</li>
<li class="nav-button 2">
<a href="#" class="trending-button">Trending</a>
</li>
<li class="nav-button 3">
<a href="#" class="headlines-button">Headlines</a>
</li>
<li class="nav-button4">
<a href="contact-us.html" class="contact-button">Contact us</a>
</li>
</ul>
</div>
<div class="right-content">
<li class="search-bar">
<form action="#">
<input type="text" id="fname" name="fname" placeholder="Search"><br>
</form>
</li>
<li class="search-bar">
<button type="button" class="btn btn-primary login" data-toggle="modal" data-target="#myModal">
Login
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<article class="card-body">
<a href="" class="float-right btn btn-outline-primary">Sign up</a>
<h4 class="card-title mb-4 mt-1">Sign in</h4>
<form>
<div class="form-group">
<label>Your email</label>
<input name="" class="form-control" placeholder="Email" type="email">
</div> <!-- form-group// -->
<div class="form-group">
<a class="float-right" href="#">Forgot?</a>
<label>Your password</label>
<input class="form-control" placeholder="******" type="password">
</div> <!-- form-group// -->
<div class="form-group">
<div class="checkbox">
<label> <input type="checkbox"> Save password </label>
</div> <!-- checkbox .// -->
</div> <!-- form-group// -->
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Login </button>
</div> <!-- form-group// -->
</form>
</article>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
</nav>
<body>
<div class="container body">
<div class="upper-container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<a class="carousel-item active" href="#">
<img class="d-block w-100" src="https://media.istockphoto.com/photos/passenger-airplane-taking-of-at-sunrise-picture-id1225840727?b=1&k=20&m=1225840727&s=170667a&w=0&h=dj8ErCdeGS_OG83VzmFZyulXwO62t1HdTYgSrkdbfGI=" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h2>Taiwan Murka, China Kembali Kirim Pesawat Tempur dan Pembom ke Zona Pertahanan </h2>
</div>
</a>
<a class="carousel-item" href="#">
<img class="d-block w-100" src="https://media.istockphoto.com/photos/front-view-exactly-of-a-widebody-aircraft-sunset-at-the-airport-picture-id1270650301?b=1&k=20&m=1270650301&s=170667a&w=0&h=ffzNiuHPSd9RZC1dOv_o3VOF3JXkrjq5orJgQhysSNI=" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h2>Pemkab Intan Jaya Tegaskan Pesawat Rimbun Air Jatuh Bukan karena Diserang OPM</h2>
</div>
</a>
<a class="carousel-item" href="#">
<img class="d-block w-100" src="https://media.istockphoto.com/photos/commercial-jet-flying-over-clouds-picture-id155380716?b=1&k=20&m=155380716&s=170667a&w=0&h=LjalFiyrKtBye-26dufNMHkbU_k_KrJ1-UYnbTpaxtM=" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h2>Viral Foto 640 Warga Afghanistan Berdesakan Dalam Pesawat Kargo Militer AS </h2>
</div>
</a>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="upper-right content">
<div class="mostpopular">
<div class="ur-title">
<h2>Most Popular</h2>
<div class="list-content">
<div class="media">
<div class="media-text">
<div class="media-list">
<div class="media-title">
<span class="text-list__data ">#1</span>
<h5>
<a href="" class="">Bayi 7 Bulan Boleh Naik Pesawat, Ini Penjelasan Zaskia Sungkar</a>
</h5>
</div>
</div>
<div class="media-list">
<div class="media-title">
<span class="text-list__data ">#2</span>
<h5>
<a href="" class="">Buntut Jatuhnya Lion Air, Eks Pilot Boeing Dituntut 100 Tahun Penjara</a>
</h5>
</div>
</div>
<div class="media-list">
<div class="media-title">
<span class="text-list__data ">#3</span>
<h5>
<a href="" class="">Tarif Tes PCR Lion Group Terbaru: Rp 250 Ribu</a>
</h5>
</div>
</div>
<div class="media-list">
<div class="media-title">
<span class="text-list__data ">#4</span>
<h5>
<a href="" class="">Penumpang Mabuk Bikin Pesawat Selandia Baru Putar Balik</a>
</h5>
</div>
</div>
<div class="media-list">
<div class="media-title">
<span class="text-list__data ">#5</span>
<h5>
<a href="" class="">Kisah Penerbangan 'Neraka': 3 Kali Gagal Mendarat, Terlambat 22 Jam</a>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lower-container">
<div class="album py-5 ">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://media.istockphoto.com/photos/aerial-view-of-airplane-at-airport-picture-id1277565427?b=1&k=20&m=1277565427&s=170667a&w=0&h=fC1RdwwVgU8fd6k5Nc4_ReMZSkHFufbfYR3jmwWCeoA=" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17c92535762%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17c92535762%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<a class="card-body" href="#">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">9 mins</small>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://media.istockphoto.com/photos/passenger-airplane-flying-above-clouds-during-sunset-picture-id155439315?b=1&k=20&m=155439315&s=170667a&w=0&h=N2BzlH2GYabhWN0LXZTqTkVODuTb8qDAESQYCPzIig8=" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17c92535767%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17c92535767%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<a class="card-body" href="#">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">9 mins</small>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://media.istockphoto.com/photos/airplane-flying-under-blue-sky-8-picture-id1012638806?b=1&k=20&m=1012638806&s=170667a&w=0&h=Xs-TTp_Gnym_0kF1mRATmQSdHq3pE4UQTveCyjEg7To=" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17c9253576c%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17c9253576c%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<a class="card-body" href="#">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">9 mins</small>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.unsplash.com/photo-1483375801503-374c5f660610?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmVzfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17c9253576e%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17c9253576e%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<a class="card-body" href="#">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">9 mins</small>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.unsplash.com/photo-1585484930098-0c978ecd8a68?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YWlyY3JhZnR8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17c9253576f%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17c9253576f%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<a class="card-body" href="#">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">9 mins</small>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.unsplash.com/photo-1579884716401-65baa9ac9c5d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGFpcmNyYWZ0fGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17c92535771%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17c92535771%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<a class="card-body" href="#">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">9 mins</small>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
<footer class="w-100 py-4 flex-shrink-0">
<div class="container py-4">
<div class="row gy-4 gx-5">
<div class="col-lg-4 col-md-6">
<h5 class="h1 text-white">FB.</h5>
<p class="small text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<p class="small text-muted mb-0">© Copyrights. All rights reserved. <a class="text-primary" href="#">Bootstrapious.com</a></p>
</div>
<div class="col-lg-2 col-md-6">
<h5 class="text-white mb-2">Quick links</h5>
<ul class="list-unstyled text-muted">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Get started</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-6">
<h5 class="text-white mb-3">Newsletter</h5>
<p class="small text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<form action="#">
<div class="input-group mb-3">
<input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-primary" id="button-addon2" type="button"><i class="fas fa-paper-plane"></i></button>
</div>
</form>
</div>
</div>
</div>
</footer>
</html>
style.css
.twp-site-branding
.twp-wrapper
{
padding: 30px 7.5px;
}
.nav-button{
list-style-type: none;
display: flex;
}
li{
padding: 5px 5px 5px 5px;
}
.container{
padding-left: 0px;
padding-right: 0px;
}
.right-content {
margin-left: auto;
margin-right: 0px;
border-radius: 25px;
display: flex;
}
.login{
border-radius: 25px;
width: 100px;
padding: 2px;
}
.login {
color: white;
font-weight: 700;
}
form{
border-radius: 25px;
}
.login:hover {
background: #ff9800;
color: white;
}
.card-body {
color: black;
font-weight: 500;
}
.container.nav{
padding: 5px 7.5px;
background-image: linear-gradient(to right, #9a2121 50%, #bd0000 100%);
border-radius: 4px;
font-weight: 800;
color: white;
}
body{
margin-top: 20px;
}
.carousel{
padding-left: 0px;
width: 80%;
margin-left: 0px;
}
.upper-container{
padding-top: 30px;
display: flex;
margin-left: 0px;
margin-right: auto;
padding-bottom: 40px;
border-bottom: 4px solid;
}
.ur-title h2{
padding-bottom: 10px;
}
.upper-right.content {
width: 30%;
padding: 10px;
margin-left: 10px;
}
.media-title{
border: 2px solid;
margin-bottom: 5px;
display: flex;
}
.media-title h5{
padding-left: 5px;
}
.media-title span{
padding-left: 5px;
}
h5{
text-align: left;
}
.row{
padding: 15px;
}
.text-small {
font-size: 0.9rem;
}
a {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a:hover, a:focus {
text-decoration: none;
}
footer {
background: #212529;
}
.list-unstyled.text-muted{
display: normal;
}
.album{
background-color: white;
}
Contact us.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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="contact-us.css">
<title>Document</title>
</head>
<body>
<div class="container1">
<h1>Contact us</h1>
<p>Hubungi Kami melalui e-mail melalui formulir berikut</p>
<div class="messages">
<form action="#">
<label for="messages" style="font-weight: 700;"></label>
<input type="text" id="messages" placeholder="Isi pesan kamu disini....." style="width: 100%; height: 200px;">
</form>
</div>
<div class="contact-us-form">
<div class="contact-us-name">
<form action="#">
<label for="nama" style="font-weight: 700;">Nama</label><br>
<input type="text" id="nama" placeholder="Joko Widodo">
</form>
</div>
<div class="contact-us-email">
<form action="#">
<label for="nama" style="font-weight: 700;">Email</label><br>
<input type="text" id="nama" placeholder="jokowidodo@corporate.id">
</form>
</div>
</div>
<div class="submit">
<form action="#">
<input type="submit" value="Submit" style="width: 100%;">
</form>
</div>
</div>
</body>
</html>
Contact-us.css
body{
max-width: 500px;
margin: auto;
margin-top: 10%;
background: white;
padding: 10px;
background-color: azure;
}
.container1{
background-color: #c5cbd1;
padding: 30px;
border-radius: 20px;
box-shadow: 5px 5px 3px 3px;
}
.contact-us-form{
align-items: center;
display: flex;
padding-top: 30px;
}
.contact-us-email{
width: 50%;
padding: 0 10px;
}
.contact-us-name{
width: 50%;
padding: 0 10px;
}
.submit{
width: 100%;
padding: 15px;
padding-top: 50px;
}
main.js
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
Sekian terimakasih
Gian Egaa 