TUGAS 1 : MEMBUAT HALAMAN PROFIL

Nama: Andika Nugrahanto
NRP: 05111940000031
Kelas: PWEB-B
Link Website: https://anran31.github.io/CV-Pweb/
Link Source Code: https://github.com/Anran31/CV-Pweb

Pada pertemuan sebelumnya, kami diminta untuk membuat suatu halaman profil untuk diri kita, dan mempublishnya pada suatu domain.

Beberapa tools yang digunakan dalam pembuatan halaman profil ini adalah :
  1. HTML 
  2. CSS 
  3. JS 
  4. Github

Tampilan Website



Source Code

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">
<script src="https://kit.fontawesome.com/005e7fbdf6.js" crossorigin="anonymous"></script>
<title>Andika Nugrahanto</title>
</head>
<body>
<header>
<nav id="nav-bar">
<ul>
<li class="nav-link"><a href="#home">Home</a></li>
<li class="nav-link"><a href="#about">About</a></li>
<li class="nav-link"><a href="#resume">Resume</a></li>
<li class="nav-link"><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="container d-flex flex-column" id="home">
<div class="d-flex flex-column" id="intro-content">
<p>Hello,</p>
<h1>I'm Andika Nugrahanto</h1>
<span>Informatics Engineering Undergraduate</span>
<div id="intro-button">
<a class="button1 stroke" href="#about" title="">More About Me</a>
</div>
</div>
<div id="social">
<ul class="intro-social">
<li><a href="https://www.instagram.com/andikanugrahanto/" target="_blank"><i
class="fa fa-instagram"></i></a></li>
<li><a href="https://www.linkedin.com/in/andika-nugrahanto-2a6191149/" target="_blank"><i
class="fa fa-linkedin"></i></a></li>
<li><a href="https://github.com/Anran31" target="_blank"><i class="fa fa-github"></i></a></li>
</ul>
</div>
</section>
<section class="container bg-primary d-flex flex-column flex-start" id="about">
<div class="section-title" id="about-title">
<h2>About</h2>
<p>Let me introduce myself.</p>
</div>
<div class="d-flex flex-column" id="about-content">
<div class="about-container" id="profile">
<h3>Profile</h3>
<p>
I was born in Surabaya and currently studying as an undergraduate student of Informatics
Engineering. Currently interested in learning about web development and machine learning.
</p>
<ul>
<li>
<strong>Fullname:</strong>
<span>Andika Nugrahanto</span>
</li>
<li>
<strong>Birth Date:</strong>
<span>January 31st, 2002</span>
</li>
<li>
<strong>Student ID:</strong>
<span>05111940000031</span>
</li>
</ul>
</div>
<div class="about-container" id="skills">
<h3>Skills</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Laravel</li>
<li>C/C++</li>
<li>Python</li>
</ul>
</div>
</div>
</section>
<section class="container bg-secondary d-flex flex-column" id="resume">
<div class="section-title" id="resume-title">
<h2>Resume</h2>
<p>More of my credentials.</p>
</div>
<div id="education">
<h3 style="text-align: center;margin-bottom: 1.5rem;">Education</h3>
<div class="timeline">
<ul>
<li>
<div class="content">
<h4>Institut Teknologi Sepuluh Nopember</h4>
<p>Undergraduate Student of Informatics Engineering</p>
</div>
<div class="time">
<h5>2019-Present</h5>
</div>
</li>
<li>
<div class="content">
<h4>SMA Negeri 5 Surabaya</h4>
</div>
<div class="time">
<h5>2016-2019</h5>
</div>
</li>
<li>
<div class="content">
<h4>SMP Negeri 1 Surabaya</h4>
</div>
<div class="time">
<h5>2013-2016</h5>
</div>
</li>
<div style="clear:both;"></div>
</ul>
</div>
</div>
<div id="experience">
<h3 style="text-align: center; margin-bottom: 1.5rem;">Experiences</h3>
<div class="timeline">
<ul>
<li>
<div class="content">
<h4>Schematics NPC Organizing Comitee</h4>
</div>
<div class="time">
<h5>2021</h5>
</div>
</li>
<li>
<div class="content">
<h4>Teaching Assistant of Data Structures</h4>
</div>
<div class="time">
<h5>2021</h5>
</div>
</li>
<li>
<div class="content">
<h4>Informatics 19 First Gathering</h4>
</div>
<div class="time">
<h5>2019</h5>
</div>
</li>
<div style="clear:both;"></div>
</ul>
</div>
</div>
</section>
<section class="container bg-primary d-flex flex-column flex-start" id="contact">
<div class="section-title" id="contact-title">
<h2>Contact</h2>
<p>I'd Love To Hear From You.</p>
</div>
<div id="contact-section">
<div class="contact">
<div class="icon">
<i class="fas fa-map-marked-alt"></i>
</div>
<h5>Where to find me</h5>
<p>Galaxi Bumi Permai i-4/1, Surabaya</p>
</div>
<div class="contact">
<div class="icon">
<i class="far fa-envelope"></i>
</div>
<h5>Email Me At</h5>
<p>andika.nugrahanto2002@gmail.com</p>
</div>
<div class="contact">
<div class="icon">
<i class="fas fa-phone-alt"></i>
</div>
<h5>Call Me At</h5>
<p>(+62)87865425838</p>
</div>
</div>
</section>
</main>
<script src="main.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

CSS

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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: inherit;
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;
}
html {
scroll-behavior: smooth;
box-sizing: border-box;
min-width: 360px;
font-size: 10px;
}
main {
width: 100%;
min-height: 100vh;
background-color: pink;
}
body {
font-size: 1.7rem;
line-height: 3rem;
}
#nav-bar {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
height: 4rem;
transition: background-color 1s ease 0s;
display: flex;
flex-direction: row;
justify-content: end;
}
#nav-bar.nav-colored { background-color:#000; }
#nav-bar.nav-transparent { background-color:transparent;}
#nav-bar > ul {
display: flex;
flex-direction: row;
width: 40vw;
justify-content: space-evenly;
align-items: center;
font-size: 1.6rem;
}
a {
text-decoration: none;
color: white;
}
.nav-link a:hover {
color: #FF0077;
text-decoration: 1px solid underline #FF0077;
}
.intro-social {
display: block;
position: absolute;
width: 100%;
left: 0;
bottom: 7.2rem;
font-size: 3.3rem;
margin: 0;
padding: 0;
}
.intro-social li {
display: inline-block;
margin: 0 20px;
padding: 0;
}
.intro-social li a, .intro-social li a:visited {
color: #FFFFFF;
}
.intro-social li a:hover, .intro-social li a:focus {
color: #cc005f;
}
.container {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
display: flex;
justify-content: center;
padding: 4rem;
}
.container#home {
background-image: url('./img/intro-bg.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position: center;
}
.bg-primary {
background-color: #C8BFC7;
}
.bg-secondary {
background-color: #B9AFB2;
}
#home {
color: white;
text-align: center;
}
.button.stroke {
background: transparent !important;
border: 3px solid #313131;
}
#intro-content {
justify-content: center;
width: 100%;
}
#intro-button {
margin-top: 2em;
width: 100%;
}
#intro-content p {
font-size: 2.3rem;
line-height: 1.565;
margin-bottom: 0;
box-sizing: border-box;
text-transform: uppercase;
letter-spacing: .3rem;
}
#intro-content .button {
color: #FFFFFF !important;
border-color: rgba(255, 255, 255, 0.3);
height: 6rem !important;
line-height: 5.4rem !important;
padding: 0 3.5rem 0 3rem !important;
margin-top: .6rem;
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: .25rem;
max-width: 30vw;
}
#intro-content h1 {
color: #FFFFFF;
font-size: 8.4rem;
line-height: 1.071;
max-width: 900px;
margin-top: 0;
margin-bottom: .6rem;
margin-left: auto;
margin-right: auto;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#intro-content span {
font-size: 1.7rem;
line-height: 2.4rem;
text-transform: uppercase;
letter-spacing: .2rem;
color: #FFFFFF;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.timeline{
position:relative;
margin: 0 auto;
margin-top: 0;
padding:0 0;
width:1000px;
box-sizing:border-box;
}
.timeline:before{
content:'';
position:absolute;
left:50%;
width:2px;
height:100%;
background:#c5c5c5;
}
.timeline ul{
padding:0;
margin:0;
}
.timeline ul li{
list-style:none;
position:relative;
width:50%;
padding:20px 40px;
box-sizing:border-box;
}
.timeline ul li:nth-child(odd){
float:left;
text-align:right;
clear:both;
}
.timeline ul li:nth-child(even){
float:right;
text-align:left;
clear:both;
}
.content{
padding-bottom:20px;
}
.timeline ul li:nth-child(odd):before
{
content:'';
position:absolute;
width:10px;
height:10px;
top:24px;
right:-6px;
background:rgba(90,35,40,1);
border-radius:50%;
box-shadow:0 0 0 3px rgba(90,35,40,0.2);
}
.timeline ul li:nth-child(even):before
{
content:'';
position:absolute;
width:10px;
height:10px;
top:24px;
left:-4px;
background:rgba(90,35,40,1);
border-radius:50%;
box-shadow:0 0 0 3px rgba(90,35,40,0.2);
}
.timeline ul li h4{
padding:0;
margin:0;
color:rgba(90,35,40,1);
font-weight:600;
}
.timeline ul li p{
margin:10px 0 0;
padding:0;
}
.timeline ul li .time h5{
margin:0;
padding:0;
font-size:14px;
}
.timeline ul li:nth-child(odd) .time
{
position:absolute;
top:12px;
right:-165px;
margin:0;
padding:8px 16px;
background:rgba(90,35,40,1);
color:#fff;
border-radius:18px;
box-shadow:0 0 0 3px rgba(90,35,40,0.3);
}
.timeline ul li:nth-child(even) .time
{
position:absolute;
top:12px;
left:-165px;
margin:0;
padding:8px 16px;
background:rgba(90,35,40,1);
color:#fff;
border-radius:18px;
box-shadow:0 0 0 3px rgba(90,35,40,0.3);
}
@media(max-width:1000px)
{
.timeline{
width:100%;
}
}
@media(max-width:767px){
.timeline{
width:100%;
padding-bottom:0;
margin-top: 3rem;
}
h1{
/* font-size:40px; */
text-align:center;
}
.timeline:before{
left:20px;
height:100%;
}
.timeline ul li:nth-child(odd),
.timeline ul li:nth-child(even)
{
width:100%;
text-align:left;
padding-left:50px;
padding-bottom:50px;
}
.timeline ul li:nth-child(odd):before,
.timeline ul li:nth-child(even):before
{
top:-18px;
left:16px;
}
.timeline ul li:nth-child(odd) .time,
.timeline ul li:nth-child(even) .time{
top:-30px;
left:50px;
right:inherit;
}
}
#education {
width: 100%;
margin-bottom: 3rem;
}
#experience {
width: 100%;
}
a.button1{
display:inline-block;
padding:0.35em 1.2em;
border:0.1em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
font-weight:300;
color:#FFFFFF;
text-align:center;
transition: all 0.2s;
max-width: 100%;
height: 6rem !important;
line-height: 5.4rem !important;
padding: 0 3.5rem 0 3rem !important;
margin-top: .6rem;
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: .25rem;
}
a.button1:hover{
border: 3px solid #FF0077;
color: #FF0077;
}
.section-title {
width: 100%;
box-sizing: border-box;
}
.flex-start {
justify-content: flex-start;
}
.section-title {
min-height: 10vh;
text-align: center;
margin-top: 3rem;
margin-bottom: 3rem;
}
.section-title h2 {
color: #FF0077;
font-size: 1.6rem;
line-height: 1.875;
margin-bottom: 0.3rem;
letter-spacing: .4rem;
text-transform: uppercase;
font-weight: 700;
}
.section-title p {
font-size: 3.6rem;
color: #313131;
line-height: 1.25;
margin-bottom: 1.2rem;
font-weight: 600;
}
#about-content {
width: 60%;
margin: 0 auto;
}
.about-container {
width: 80%;
padding: 0 5rem;
margin: 0 auto;
}
#profile {
margin-bottom: 3rem;
}
strong {
text-transform: uppercase;
letter-spacing: .2rem;
font-size: 1.5rem;
line-height: 3rem;
font-weight: 700;
}
li strong+span {
display: block;
line-height: 1;
}
.about-container h3 {
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: .25rem;
}
h3, .h03 {
font-size: 2rem;
line-height: 1.5;
font-weight: 700;
}
h3, .h03, h4, .h04 {
margin-bottom: 1.8rem;
}
.icon i {
font-size: 4.2rem;
color: black;
}
#contact-section {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
box-sizing: border-box;
}
#contact-section .contact {
min-width: calc(100%/3);
}
.contact h5 {
color: #FF0077;
}
#contact {
min-height: 50vh;
}
h5, .h05 {
font-size: 1.4rem;
line-height: 1.714;
text-transform: uppercase;
letter-spacing: .15rem;
font-weight: 700;
}
@media only screen and (max-width:1024px) {
.intro-social {
font-size: 3rem;
}
.intro-social li {
margin: 0 15px;
}
#intro-content h1 {
font-size: 7rem;
}
}
@media only screen and (max-width:768px) {
.intro-social {
font-size: 2.5rem;
}
.intro-social li {
margin: 0 10px;
}
#nav-bar > ul {
width: 100vw;
justify-content: space-evenly;
font-size: 1.6rem;
}
#intro-content p {
font-size: 1.8rem;
}
#intro-content h1 {
font-size: 5.2rem;
}
#intro-content span {
font-size: 1.4rem;
}
a.button1{
font-size: 1rem;
}
.timeline ul {
margin-top: 5rem;
}
#contact-section {
flex-direction: column;
}
#about-content {
width: 75%;
margin: 0 auto;
}
}
@media only screen and (max-width:600px) {
.intro-social {
font-size: 2.4rem;
}
#intro-content p {
font-size: 1.5rem;
}
#intro-content h1 {
font-size: 4.6rem;
}
#intro-content span {
font-size: 1.2rem;
}
#about-content {
width: 90%;
margin: 0 auto;
}
.about-container {
width: 80%;
padding: 0 1.5rem;
}
}
view raw style.css hosted with ❤ by GitHub

JS

function vh(v) {
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
return (v * h) / 100;
}
function vw(v) {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
return (v * w) / 100;
}
function vmin(v) {
return Math.min(vh(v), vw(v));
}
function vmax(v) {
return Math.max(vh(v), vw(v));
}
var myNav = document.getElementById('nav-bar');
console.log(myNav);
window.onscroll = function () {
"use strict";
if (document.body.scrollTop >= vh(100) || document.documentElement.scrollTop >= vh(100) ) {
myNav.classList.add("nav-colored");
myNav.classList.remove("nav-transparent");
}
else {
myNav.classList.add("nav-transparent");
myNav.classList.remove("nav-colored");
}
};
view raw main.js hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 MPPL A 2021

Gambar
Nama : Andika Nugrahanto NRP : 05111940000031 Kelas : MPPL A 2021 1. Bergabung ke Situs Freelance Berdasarkan rekomendasi yang saya dapat dari kelas, saya memutuskan untuk mendaftar di salah satu web freelance yaitu  https://projects.co.id/ . Pada web tersebut saya terdaftar dengan username Anran31. 2. Memilih Project Dalam Situs Tersebut Karena saya tertarik pada bidang web development, maka saya menyari project yang berhubungan dengan web development. Setelah mencari, saya menemukan satu project yang sesuai dengan minat saya.  Berdasarkan Skill Requirement diatas, kurang lebih hal yang saya bisa dan tidak bisa adalah sebagai berikut: HTML, CSS, JS (Sedang belajar) PHP & Laravel (Sedang belajar) Codeigniter (Belum bisa) MySQL (Bisa) Github (Bisa) Sekian pemaparan saya untuk tugas kali ini. Terima kasih.
Baca selengkapnya

Tugas 3 Rekayasa Kebutuhan D

MCAS(Maneuvering Characteristics Augmentation System) Posisi dan ukuran mesin yang lebih besar pada Boeing 737 MAX dibanding Boeing 737 NG maka peletakan mesin ini terletak lebih maju dan sedikit naik daripada seri sebelumnya, sehingga menyebabkan cenderungnya mendorong hidung pesawat ke atas pada manuver tertentu. Keputusan desain ini mengakibatkan munculnya kemungkinan stalling pada pesawat ini. MCAS ini membuat sistem otomatis yang mengkompensasi gerakan pitch (dongakan hidung pesawat), agar dapat membantu pilot menurunkan hidung pesawat, apabila angle of attack terlalu besar saat terbang manual. Angle of attack yang terlalu besar inilah yang berisiko membuat pesawat stall. Fitur otomatis ini (MCAS), tetap aktif meski pesawat terbang dalam kondisi manual (Autopilot Off). Sistem MCAS akan menurunkan hidung pesawat dengan cara mengatur roda penyesuaian (trim) agar horizontal stabilizer (sayap kecil di ekor pesawat) berputar, membuat hidung pesawat turun. MCAS akan menggerakkan horizon...
Baca selengkapnya

Tugas 2 Rekayasa Kebutuhan D

Gambar
 Nama   : Andika Nugrahanto NRP         : 05111940000031 Kelas      : RK - D SKPL yang akan saya analisis untuk tugas ini adalah SKPL pembuatan perangkat lunak untuk Mizan Store. Perangkat lunak tersebut dibuat dengan tujuan untuk mempermudah melakukan pencarian dan pembelian buku secara online. Berikut adalah SKPL yang akan saya analisis untuk tugas kali ini: Berdasarakan gambar di atas, input yang dibutuhkan untuk proses rekayasa kebutuhan ada 5, yaitu sebagai berikut: 1. Existing Systems Information Mizan store merupakan salah satu toko buku dan perangkat lunak yang dikembangkan bertujuan untuk mempermudah pembeli dalam melakukan pencarian dan pembelian buku secara online. Pembeli sekarang tidak perlu pergi ke Mizan store dan mencari buku yang diinginkan secara manual, tetapi hanya perlu pergi ke web Mizan Store, lalu memilih buku yang ingin dibeli, kemudian pembeli dapat melakukan pembayaran melalui berbagai macam cara seperti o...
Baca selengkapnya