PWEB | Portofolio

on

Membuat portofolio diri

Nama    : Bimantara Tito Wahyudi
NRP      : 5025201227
Kelas     : PWEB B

Dalam materi ini, kami belajar tentang cara membuat web menggunakan html dan css. Sebagai tugas, kami diminta untuk membuat web portofolio yang berisi tentang biodata diri. Berikut adalah halaman web yang telah saya buat:


Berikut adalah source codenya:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bimantara Tito Wahyudi</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/jpg" href="images/favicon.jfif"/>
<link rel="stylesheet" href="styles\index.css">
<link rel="stylesheet" href="styles\animation.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<nav class="navbar">
<div class="navbar-content">
<a href="">
<span class="logo">My CV</span>
</a>
<ul>
<li>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="new" class="navbarbtn frntr">
<span>Free Nitro</span>
</a>
</li>
<li>
<a id="navhome" href="" class="navbarbtn currpg">
<span>Home</span>
</a>
</li>
<li>
<a id="navskill" href="#skill" style="display: none;" class="navbarbtn otherpg">
<span>Skills</span>
</a>
</li>
<li>
<a id="navexp" href="#exp" class="navbarbtn otherpg">
<span>Experience</span>
</a>
</li>
<li>
<a id="navedu" href="#edu" class="navbarbtn otherpg">
<span>Education</span>
</a>
</li>
<li>
<a id="navcontact" href="#contact" class="navbarbtn otherpg">
<span>Contact Me</span>
</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="content">
<div id="intro" class="intro">
<div>
<h2>Hi!</h2>
<h1>My Name is <span>Bimantara Tito Wahyudi</span></h1>
<h3>or you just can call me <span>Bima</span></h3>
<p>
I'm an informatics student at Institut Teknologi Sepuluh Nopember, Surabaya. I have various organizational and committee experiences since high school. At this time, I still don't know what my passion is. Therefore, I'm trying all fields including, competitive programming, appdev, webdev,
gamedev, and data mining to find out what fields match my passion.
</p>
</div>
<button id="bncbtn" class="bouncing-arrow">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<div id="skill" class="skills">
<h2>My Skills</h2>
<h4>Hey! You know what? I'm pretty good at these things!</h4>
</div>
<div id="exp" class="exp">
<h2>My Experience</h2>
<h4>Wanna know what I've been doing this whole time?</h4>
<ul>
<li>
<div class="zoom card">
<a href="https://www.its.ac.id" target="new">
<h4>Institut Teknologi Sepuluh Nopember</h4>
</a>
<h5>Scientific Committee Schematics NPC Schematics 2021</h5>
</div>
</li>
<li>
<div class="zoom card">
<a href="https://www.instagram.com/fokusits/" target="new">
<h4>Forum Komunal Mahasiswa Sumenep ITS</h4>
</a>
<h5>Medfo Division (2021 - now)</h5>
<h5>Kominfo Division (2020 - 2021)</h5>
<h5>LO Division Fokus Expo 2021</h5>
</div>
</li>
<li>
<div class="zoom card">
<a href="https://sumenepsmansa.sch.id/" target="new">
<h4>SMA Negeri 1 Sumenep</h4>
</a>
<h5>Juara 3 OSN TIK Sekabupaten 2019</h5>
<h5>SIE Perawatan HITS SMANSA (2018 – 2019)</h5>
</div>
</li>
</ul>
</div>
<div id="edu" class="edu">
<h2>My Education</h2>
<h4>Here is the track record of my search for knowledge</h4>
<ul>
<li>
<a href="https://www.its.ac.id" target="new">
<div class="zoom card">
<h4>Institut Teknologi Sepuluh Nopember</h4>
<h5>2020 - now</h5>
<div class="edu-content">
<img src="images\logo-its.png" alt="Logo Institut Teknologi Sepuluh Nopember" class="image">
<div class="edu-capt">
<p>One of the best university in Indonesia</p>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="https://sumenepsmansa.sch.id/" target="new">
<div class="zoom card">
<h4>SMA Negeri 1 Sumenep</h4>
<h5>2018 - 2020</h5>
<div class="edu-content">
<img src="images\logo-smansa.png" alt="Logo SMA Negeri 1 Sumenep" class="image">
<div class="edu-capt">
<p>The most favorite high school in Sumenep, Jawa Timur. </p>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div id="contact" class="contact">
<h2>Contact Me!</h2>
<h4>Want to know more about me? Don't hesitate to ask ;)</h4>
<div class="wrapper">
<a href="mailto:bimantaratitowahyudi@gmail.com" target="new">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="sosmed bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg>
</a>
<a href="https://github.com/Yerayz" target="new">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="sosmed bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<a href="https://www.linkedin.com/in/bimantara-tito-wahyudi-b051a2205/" target="new">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="sosmed bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footbar">
<span>© Bimantara Tito Wahyudi 2021</span>
</div>
</footer>
<script src="scripts\script.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
/* Fonts */
@font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.woff2') format('woff2'),
url('opensans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-style: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Custom CSS */
body {
background-color: #2E323C;
color: white;
}
.navbar {
background-color: #2B4251!important;
display: flex;
position: sticky;
top: 0;
}
main {
margin: 0 11.7rem;
}
footer {
bottom: 0;
border-top: solid;
border-top-width: 2px;
border-top-color: #2B4251;
}
.logo {
padding: 0 0.5rem;
font-size: 25px;
font-family: cursive;
font-weight: 900;
color: #FF7E5F;
}
.navbar-content {
background-color: #2B4251;
display: flex;
width: 100%;
margin: 0 3rem;
padding-top: .8rem;
padding-bottom: 1rem;
justify-content: space-between;
align-items: center;
}
.navbarbtn {
padding: 0.5rem;
margin-left: 0.5rem;
font-weight: 600;
}
a {
color: white;
text-decoration: none;
}
ul {
display: flex;
}
.content {
/* height: 400px; */
/* background-color: #5B7D87; */
}
.frntr {
display: none;
color: red;
animation: rainbow 1s infinite;
}
.currpg {
color: #3DDAD7;
}
.otherpg:hover {
color: #3DDAD7;
}
h1 {
font-size: 3.5rem;
margin: 1rem 0;
}
h2 {
font-size: 3rem;
margin: 1rem 0;
}
h3 {
font-size: 2rem;
margin: 1rem 0;
}
h4 {
font-size: 1.5rem;
margin: 1rem 0;
}
h5 {
font-size: 1rem;
margin: .5rem 0;
}
p {
font-size: 1.2rem;
text-align: justify;
line-height: 1.5;
}
.intro {
display:flex;
flex-direction: column;
/* margin-top: -4rem; */
min-height: calc(100vh - 60px);
justify-content: center;
margin-bottom: 60px;
}
.intro div {
margin-top: -5rem;
}
.intro h1 span {
color: #91B3BC;
}
.intro h3 span {
color: #91B3BC;
}
.skills {
display:none;
flex-direction: column;
padding-top: 60px;
min-height: calc(100vh - 60px);
justify-content: center;
}
.skills h2{
color: #91B3BC;
}
.exp {
display:flex;
flex-direction: column;
padding-top: 60px;
min-height: calc(100vh - 60px);
justify-content: center;
margin-top: -6rem;
}
.exp ul {
display: flex;
flex-direction: column;
margin-top: 1rem;
align-items: center;
justify-content: center;
}
.exp h2 {
color: #91B3BC;
}
.exp li {
width: 70%;
margin: 1rem 0;
}
.card {
border: solid;
border-color: white;
border-width: 1px;
border-radius: .5rem;
width: 100%;
padding: 1rem;
}
.card h4, .card h5 {
margin-top: 0;
}
.edu {
display:flex;
flex-direction: column;
padding-top: 60px;
min-height: calc(100vh - 60px);
justify-content: center;
margin-top: -6.5rem;
}
.edu h2 {
color: #91B3BC;
}
.edu ul {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 2rem;
}
.edu .card {
width: 85%;
height: 300px;
}
.edu .card h4 {
font-size: 1.4rem;
}
.edu li {
width: 100%;
}
.card h4:hover {
color: #91B3BC;
}
.edu-content {
display: flex;
align-items: center;
height: 230px;
}
.edu-capt {
height: auto;
}
.image {
/* width: 50%; */
height: 50%;
padding-right: 1rem;
}
.contact {
display:flex;
flex-direction: column;
padding-top: 60px;
min-height: calc(100vh - 60px);
justify-content: center;
margin-top: -5rem;
}
.contact h2 {
color: #91B3BC;
}
.wrapper {
margin-top: 1rem;
}
.sosmed {
margin-right: 1rem;
}
.footbar {
display: flex;
height: 4rem;
/* background-color: teal; */
align-items: center;
justify-content: center;
}
.fas {
font-size: 4rem;
display: block;
text-align: center;
color: white;
line-height: 60px;
}
.fas:hover {
color: #3DDAD7;
}
.bouncing-arrow {
display: flex;
cursor: pointer;
border: none;
background-color: transparent;
animation: 2s ease 0s normal none infinite running bounce;
bottom: 50px;
height: 44px;
left: 50%;
position: absolute;
width: 60px;
}
.bounce {
animation-name: bounce;
}
view raw index.css hosted with ❤ by GitHub
@keyframes rainbow {
50% {color: rgb(82, 108, 255);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
*, :after, :before {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-border-opacity: 1;
border-color: rgba(229,231,235,var(--tw-border-opacity));
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59,130,246,0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-blur: var(--tw-empty,/*!*/ /*!*/);
--tw-brightness: var(--tw-empty,/*!*/ /*!*/);
--tw-contrast: var(--tw-empty,/*!*/ /*!*/);
--tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
--tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
--tw-invert: var(--tw-empty,/*!*/ /*!*/);
--tw-saturate: var(--tw-empty,/*!*/ /*!*/);
--tw-sepia: var(--tw-empty,/*!*/ /*!*/);
--tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
/* .animate-fade-in-start {
opacity: 0;
} */
/* .animate-fade-in-start .animate-fade-in-initial {
--tw-translate-y: 0px;
transform: var(--tw-transform);
opacity: 1;
}
.animate-fade-in-initial {
--tw-translate-y: 2.5rem;
transform: var(--tw-transform);
opacity: 0;
transition: .3s ease-out;
transition-property: transform,opacity;
}
.animate-fade-in-start .animate-fade-in-initial.fade-in-1 {
transition-delay: .1s;
}
.animate-fade-in-start .animate-fade-in-initial.fade-in-2 {
transition-delay: .2s;
}
.animate-fade-in-start .animate-fade-in-initial.fade-in-3 {
transition-delay: .3s;
} */
.zoom {
transition: transform .2s;
}
.zoom:hover {
transform: scale(1.1);
}
view raw animation.css hosted with ❤ by GitHub
// alert('test')
function handleClick() {
alert('Test tombol 123')
}
// function navButton(button: HTMLElement) {
// if button.class
// }
const homebtn = document.getElementById('navhome')
const expbtn = document.getElementById('navexp')
const edubtn = document.getElementById('navedu')
const contactbtn = document.getElementById('navcontact')
homebtn.onclick = function() {
homebtn.className = "navbarbtn currpg"
expbtn.className = "navbarbtn otherpg"
edubtn.className = "navbarbtn otherpg"
contactbtn.className = "navbarbtn otherpg"
}
expbtn.onclick = function() {
homebtn.className = "navbarbtn otherpg"
expbtn.className = "navbarbtn currpg"
edubtn.className = "navbarbtn otherpg"
contactbtn.className = "navbarbtn otherpg"
}
edubtn.onclick = function() {
homebtn.className = "navbarbtn otherpg"
expbtn.className = "navbarbtn otherpg"
edubtn.className = "navbarbtn currpg"
contactbtn.className = "navbarbtn otherpg"
}
contactbtn.onclick = function() {
homebtn.className = "navbarbtn otherpg"
expbtn.className = "navbarbtn otherpg"
edubtn.className = "navbarbtn otherpg"
contactbtn.className = "navbarbtn currpg"
}
const button = document.getElementById('bncbtn')
button.onclick = function() {
location.href = "#exp"
}
console.log('sampe sini')
view raw script.js hosted with ❤ by GitHub

Link

Website

Repository

Comments

Post a Comment