Formulir pendaftaran
Siswa baru
Dengan menggunakan html dan CSS
Nama : Rizky prayoga
Absen : 28
SMKN 1 kebonsari
1.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCO
mLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="app.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/
all.min.css" integrity="sha512-
z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXF
EbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>My project 2 minggu</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Web</a>
<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" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#BIODATA">Biodata</a>
<li class="nav-item">
<a class="nav-link" href="#ACHIEVEMENT">Achievement</a>
<li class="nav-item">
<a class="nav-link" href="#CONTACT">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<section>
<div class="container">
<div class="profile">
<img class="rounded-circle profileimage" src="profil.jpg" alt="" />
<h2>Rizky Prayoga</h2>
<h4>Content Creator</h4>
</div>
</div>
</section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-
opacity="1"
d="M0,0L60,21.3C120,43,240,85,360,138.7C480,192,600,256,720,234.7C840,213,960,107,
1080,80C1200,53,1320,107,1380,133.3L1440,160L1440,320L1380,320C1320,320,1200,320,
1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,
320Z"></path></svg>
<section id="BIODATA" class="biodata">
<h1 class="text-center">BIODATA</h1>
<div class="container text-center">
<div class="row">
<div class="col-sm">yo halo semuanya perkenalkan nama saya Rizky prayoga,saya
adalah siswa jurusan TKJ dari SMKN 1 KEBONSARI,Saya juga memiliki channel youtube
bernama Usaeda Gaming.</div>
<div class="col-sm">
<!-- Button trigger modal -->
<p class="teks text-center">Started on</p>
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-
target="#exampleModal">
PENDIDIKAN
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">SDN - SMKN</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
1.SDN GLONGGONG 3 <br />2.MTSN 1 MADIUN <br /> 3.SMKN 1 KEBONSARI
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p class="text-center">finished on</p>
</div>
<div class="center col-sm">
<!-- Button trigger modal -->
<button type="button" class="game btn btn-info" data-bs-toggle="modal" data-bs-
target="#exampleModall">
GAME
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModall" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">GAME FAVORIT</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-bodyy">
1.GENSHIN IMPACT <br />2.HONKAI STAR RAIL <br /> 3.MOBILE LEGEND <br />4.FREE
FIRE <br />5.GTA V <br />6.NARUTO ULTIMATE NINJA STORM REVOLUTION
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">saya adalah pemilik dari channel gaming usaeda gaming,saya juga
seorang gamer yang lumayan aktif.</div>
</div>
</div>
</section>
<section id="ACHIEVEMENT" class="achievement">
<div class="container">
<h1 style="color:white" class="text-center">ACHIEVEMENT</h1>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="card mx-auto" style="width; 17rem">
<div class="card-body">
<h5 class="card-title">Content creator</h5>
<h6 class="card-subtitle mb-2 text-muted">youtube</h6>
<p class="card-text">Saya mulai masuk dunia content creator sejak kls 6 sd,dimana
waktu itu masih pakai device pas pasan,channel youtube saya sendiri usaeda gaming.</p>
<a href="https://www.youtube.com/Usaedagaming">Link yt</a>
<a href="https://www.tiktok.com/@usaedayt">Link tiktok</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card mx-auto" style="width; 17rem">
<div class="card-body">
<h5 class="card-title">Gamer</h5>
<h6 class="card-subtitle mb-2 text-muted">Game</h6>
<p class="card-text">Saya sejak kecil sudah sangat suka dg game,jadi sampai sekarang
game sudah hampir menjadi bagian dari saya,dimana dg game itulah saya mendapat
berbagai konten.</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card mx-auto" style="width; 17rem">
<div class="card-body">
<h5 class="card-title">Student</h5>
<h6 class="card-subtitle mb-2 text-muted">anggota osis</h6>
<p class="card-text">Saya adalah murid kls 10 JURUSAN TKJ,dari SMKN 1
KEBONSARI.kenapa saya memilih Jurusan TKJ,alasannya karena saya suka dengan sesuatu
yang berhubungan dg teknologi,karena saya sendiri juga gamer.</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card mx-auto" style="width; 17rem">
<div class="card-body">
<h5 class="card-title">Editing</h5>
<h6 class="card-subtitle mb-2 text-muted">Editing Foto & Video</h6>
<p class="card-text">Saya memiliki kemampuan editing yg lumayan dalam beberapa
bidang,dan skill ini biasa saya pakai buat membantu saya dalam membuat konten</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path
fill="#ffffff" fill-opacity="1"
d="M0,96L48,90.7C96,85,192,75,288,90.7C384,107,480,149,576,160C672,171,768,149,864
,128C960,107,1056,85,1152,80C1248,75,1344,85,1392,90.7L1440,96L1440,320L1392,320C
1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,3
20,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
<section id="CONTACT" class="footer">
<h1 class="text-center">CONTACT</h1>
<div class="container text-center contact">
<a href="https://www.youtube.com/Usaedagaming"><i class="fa-brands
fa-youtube"></i></a>
<a href="https://instagram.com/ryzzajh?igshid=NzZlODBkYWE4Ng=="><i class="fa-
brands fa-instagram"></i></a>
<a href="https://www.tiktok.com/@usaedayt"><i class="fa-brands fa-tiktok"></i></a>
<a href="https://wa.me/+6282228489963"><i class="fa-brands fa-whatsapp"></i></a>
</div>
<p class="copy"> @copyright 2023 by Usaeda Gaming</p>
</section>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-
IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0Ec
QF" crossorigin="anonymous"></script>
-->
</body>
</html>
2.CSS
body{
background: linear-gradient(#9a08dd 0%, #58daf4 40%, #d445f3 100%);
.profile{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 100px;
.profileimage{
width: 200px;
.profile h2{
color: white;
.profile{
color: white;
transform:translateY(-10px);
.biodata{
background: linear-gradient(#ffffff 0%, #ffffffd0 40%, #ffffff4b 100%);
padding-bottom: 300px;
padding-top: 55px;
.row{
padding: 0px 10px;
.achievement{
padding-top: 55px;
.teks{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: -1px;
.footer{
background-color: white;
padding-bottom: 20px;
.copy{
color: #010101eb;
text-align: center;
font-size: 12px;
padding-top: 30px;
.contact a{
color: black;
font-size: 25px;
3.hasil project
