TUGAS 1 PEMROGRAMAN WEB (D)

TUGAS 1 PEMROGRAMAN WEB (D) - CV Website

Tugas kali ini adalah membuat website untuk Curriculum Vitae (CV) dan portofolio. Dalam proses pengerjaannya, menggunakan HTML, CSS (Bootstrap), dan JavaScript serta Visual Studio Code sebagai text editor. Laman website-nya dapat diakses pada link berikut. Untuk hosting web sendiri memakai fitur Github Pages yang disediakan oleh Github dengan cara membuat repositori dengan format username.github.io.

Konten dari website:

Homepage/hero section, berisi halaman awal web.
About, berisi identitas diri dan skill yang dimiliki.
Resume, berisi pengalaman organisasi dan jenjang pendidikan.
Portfolio, berisi portofolio/project yang pernah dikerjakan.
Contact, berisi kontak yang bisa dihubungi.

Tampilan Website

Homepage/hero section
About
Resume
Portfolio
Contact

Source Code

index.html

	<!DOCTYPE html>
	<html lang="en">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">

	<title>Thomas Felix</title>
	<link rel="icon" type="image/png" href="assets/img/icon.png">

	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i\|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i\|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

	<!-- Vendor CSS -->
	<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/css/style.css" rel="stylesheet">
	<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
	<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
	<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
	<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
	<link href="assets/vendor/aos/aos.css" rel="stylesheet">
	</head>

	<body>
	<header id="header">

	<!-- Header -->
	<div class="d-flex flex-column">
	<div class="profile">
	<img src="assets/img/profile-img.JPG" alt="profile-pic" class="img-fluid rounded-circle">
	<h1 class="text-light"><a href="#about">Thomas Felix</a></h1>
	<div class="social-links mt-3 text-center">
	<a href="https://twitter.com/ThomFel" class="twitter" target="_blank"><i class="bx bxl-twitter"></i></a>
	<a href="https://github.com/ThomasFel" class="github" target="_blank"><i class="bx bxl-github"></i></a>
	<a href="https://www.linkedin.com/in/thomasfelix10/" class="linkedin" target="_blank"><i class="bx bxl-linkedin"></i></a>
	</div>
	</div>

	<!-- Navbar Menu -->
	<nav class="nav-menu">
	<ul>
	<li><a href="#home"><i class="bx bx-home"></i> <span>Home</span></a></li>
	<li><a href="#about"><i class="bx bx-user"></i> <span>About</span></a></li>
	<li><a href="#resume"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
	<li><a href="#portfolio"><i class="bx bx-book-content"></i>Portfolio</a></li>
	<li><a href="#contact"><i class="bx bx-envelope"></i>Contact</a></li>
	</ul>
	</nav>

	<button type="button" class="mobile-nav-toggle d-xl-none"><i class="icofont-navigation-menu"></i></button>
	</div>
	</header>

	<!-- Home Section -->
	<section id="home" class="d-flex flex-column justify-content-center align-items-center">
	<div class="home-container" data-aos="fade-in">
	<h1>Thomas Felix</h1>
	<p>Welcome to my <span style="font-weight: bold" class="typed" data-typed-items="page., portfolio."></span></p>
	</div>
	</section>

	<main id="main">

	<!-- About Section -->
	<section id="about" class="about">
	<div class="container">
	<div class="section-title">
	<h2>About</h2>
	</div>

	<div class="row">
	<div class="col-lg-4" data-aos="fade-right">
	<img src="assets/img/profile-img 2.jpg" class="img-fluid" alt="profile-pic">
	</div>

	<div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
	<h3>Holla!</h3>
	<h2>You can call me <strong style="color: #149ddd">Felix</strong></h2>
	<p class="font-italic">
	Holla! My name is Thomas Felix. An active undergraduate student from Institut Teknologi Sepuluh Nopember Surabaya majoring in Informatics. I'm interested in programming, focused on web development and data science.
	</p>
	<p>
	I started learning website development since 3<sup>rd</sup> year of high school. However, I had stopped for almost a year while preparing for the final exam and entering college. Then, I just returned around the 2<sup>nd</sup> semester. Now, I have a lot of time to learn website development, especially because of a pandemic like this.
	</p>
	<p>
	I learned a lot through online courses such as Progate, Dicoding, and sometimes took references from Youtube videos.
	</p>
	</div>

	<div class="col-lg-12 pt-4 content" data-aos="fade-left">
	<p>
	With so many things that can be learned, especially in website development, I'm motivated to learn them. I'm' enjoy learning something new and keep improving myself more and more.
	</p>
	<p>
	In this website, I will try to showcase some of the projects I've worked on. Maybe what I share can be of use to you all. Let's learn, work, and collaborate together.
	</p>
	</div>
	</div>
	</div>
	</section>

	<section id="skills" class="skills section-bg">
	<div class="container">
	<div class="section-title">
	<h2>Skills</h2>
	</div>

	<div class="proglang mt-3">
	<span>
	<img src="https://cdn.jsdelivr.net/npm/programming-languages-logos/src/html/html.png" alt="HTML5" />
	<h4>HTML</h4>
	<p>Experienced</p>
	</span>
	<span>
	<img src="https://cdn.jsdelivr.net/npm/programming-languages-logos/src/css/css.png" alt="CSS3" />
	<h4>CSS</h4>
	<p>Experienced</p>
	</span>
	<span>
	<img src="https://cdn.jsdelivr.net/npm/programming-languages-logos/src/javascript/javascript.png" alt="JavaScript" />
	<h4>JavaScript</h4>
	<p>Experienced</p>
	</span>
	<span>
	<img src="https://cdn.jsdelivr.net/npm/programming-languages-logos/src/php/php.png" alt="PHP" />
	<h4>PHP</h4>
	<p>Experienced</p>
	</span>
	<span>
	<img src="https://cdn.jsdelivr.net/npm/programming-languages-logos/src/python/python.png" alt="Python" />
	<h4>Python</h4>
	<p>Familiar</p>
	</span>
	<span>
	<img src="https://cdn.jsdelivr.net/npm/programming-languages-logos/src/java/java.png" alt="Java" />
	<h4>Java</h4>
	<p>Familiar</p>
	</span>
	<span>
	<img src="https://cdn.jsdelivr.net/npm/programming-languages-logos/src/cpp/cpp.png" alt="C++" />
	<h4>C++</h4>
	<p>Familiar</p>
	</span>
	</div>
	</div>
	</section>

	<!-- Resume Section -->
	<section id="resume" class="resume">
	<div class="container">
	<div class="section-title">
	<h2>Resume</h2>
	</div>

	<div class="row">
	<div class="col-lg-6" data-aos="fade-up">
	<h3 class="resume-title">Education</h3>
	<div class="resume-item">
	<h4>Bachelor's Degree of Informatics Engineering</h4>
	<h5>2019 - present</h5>
	<p><em>Institut Teknologi Sepuluh Nopember (ITS) Surabaya</em></p>
	</div>
	<div class="resume-item">
	<h4>High School</h4>
	<h5>2016 - 2019</h5>
	<p><em>SMA Negeri 1 Bojonegoro</em></p>
	</div>
	</div>

	<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
	<h3 class="resume-title">Organization Experience</h3>
	<div class="resume-item">
	<h4>Administrator</h4>
	<h5>2021 - present</h5>
	<p><em>Intelligent Information Management Lab</em></p>
	</div>
	<div class="resume-item">
	<h4>Expert Staff of Schematics NST Event</h4>
	<h5>2021 - present</h5>
	<p><em>Schematics ITS</em></p>
	</div>
	<div class="resume-item">
	<h4>Staff of Media and Information</h4>
	<h5>2021 - present</h5>
	<p><em>ITS Choir</em></p>
	</div>
	<div class="resume-item">
	<h4>Staff of Secretarial Division</h4>
	<h5>2020</h5>
	<p><em>Gerigi ITS 2020</em></p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Portfolio Section -->
	<section id="portfolio" class="portfolio section-bg">
	<div class="container">
	<div class="section-title">
	<h2>Portfolio</h2>
	</div>

	<div class="row" data-aos="fade-up" data-aos-delay="100">
	<div class="col-lg-4 col-md-6 portfolio-item">
	<div class="portfolio-wrap">
	<img src="assets/img/port1 v2.jpg" class="img-fluid" alt="portfolio-1">

	<div class="portfolio-links" title="My CV">
	<a href="assets/img/port1.jpg" data-gall="portfolioGallery" class="venobox" title="My CV"><i class="bx bx-plus"></i></a>
	<a href="https://github.com/ThomasFel/CurriculumVitae" target="_blank" title="Visit My CV"><i class="bx bx-link"></i></a>
	</div>
	</div>
	</div>

	<div class="col-lg-4 col-md-6 portfolio-item">
	<div class="portfolio-wrap">
	<img src="assets/img/port2 v2.png" class="img-fluid" alt="portfolio-2">

	<div class="portfolio-links" title="Enigma Soft">
	<a href="assets/img/port2.png" data-gall="portfolioGallery" class="venobox" title="Enigma Soft"><i class="bx bx-plus"></i></a>
	<a href="https://github.com/ThomasFel/Wordpress" target="_blank" title="Visit Enigma Soft"><i class="bx bx-link"></i></a>
	</div>
	</div>
	</div>

	<div class="col-lg-4 col-md-6 portfolio-item">
	<div class="portfolio-wrap">
	<img src="assets/img/port3 v2.png" class="img-fluid" alt="portfolio-3">

	<div class="portfolio-links" title="My Class DB">
	<a href="assets/img/port3.png" data-gall="portfolioGallery" class="venobox" title="My Class DB"><i class="bx bx-plus"></i></a>
	<a href="https://github.com/ThomasFel/CRUDLogin" target="_blank" title="Visit My Class DB"><i class="bx bx-link"></i></a>
	</div>
	</div>
	</div>

	<div class="col-lg-4 col-md-6 portfolio-item">
	<div class="portfolio-wrap">
	<img src="assets/img/port4 v2.png" class="img-fluid" alt="portfolio-4">

	<div class="portfolio-links" title="Online Discussion Forum">
	<a href="assets/img/port4.png" data-gall="portfolioGallery" class="venobox" title="Online Discussion Forum"><i class="bx bx-plus"></i></a>
	<a href="https://github.com/ThomasFel/Laravel" target="_blank" title="Visit Online Discussion Forum"><i class="bx bx-link"></i></a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact" class="contact">
	<div class="container">
	<div class="section-title">
	<h2>Contact</h2>
	</div>

	<div data-aos="fade-in">
	<iframe width="95%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&height=400&hl=en&q=Bojonegoro,%20East%20Java+(Bojonegoro)&t=&z=14&ie=UTF8&iwloc=B&output=embed"></iframe>
	</div>

	<div class="row" data-aos="fade-in">
	<div class="col-lg-5 d-flex align-items-stretch">
	<div class="info">
	<div class="address">
	<i class="icofont-google-map"></i>
	<h4>Location:</h4>
	<p>Bojonegoro, East Java, Indonesia</p>
	</div>

	<div class="email">
	<i class="icofont-envelope"></i>
	<h4>Email:</h4>
	<p><a href="mailto:thomasfelixbrilliant@gmail.com">thomasfelixbrilliant@gmail.com</a></p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>
	</main>

	<!-- Footer -->
	<footer id="footer">
	<div class="container">
	<div class="copyright">
	© <strong><span>Thomas Felix</span></strong> 2021
	</div>
	</div>
	</footer>

	<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

	<!-- Vendor JS Files -->
	<script data-cfasync="false" src="../../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
	<script src="assets/vendor/jquery/jquery.min.js"></script>
	<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
	<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
	<script src="assets/vendor/counterup/counterup.min.js"></script>
	<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
	<script src="assets/vendor/venobox/venobox.min.js"></script>
	<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
	<script src="assets/vendor/typed.js/typed.min.js"></script>
	<script src="assets/vendor/aos/aos.js"></script>

	<!-- Main JS -->
	<script src="assets/js/main.js"></script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

style.css

	body {
	font-family: "Open Sans", sans-serif;
	color: #272829;
	}

	a {
	color: #149ddd;
	}

	a:hover {
	color: #37b3ed;
	text-decoration: none;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	font-family: "Raleway", sans-serif;
	}

	/*--------------------------------------------------------------
	# Back to top button
	--------------------------------------------------------------*/

	.back-to-top {
	position: fixed;
	display: none;
	width: 40px;
	height: 40px;
	border-radius: 50px;
	right: 15px;
	bottom: 15px;
	background: #37b3ed;
	color: #fff;
	transition: display 0.5s ease-in-out;
	z-index: 99999;
	}

	.back-to-top i {
	font-size: 24px;
	position: absolute;
	top: 7px;
	left: 8px;
	}

	.back-to-top:hover {
	color: #fff;
	background: #143a70;
	transition: background 0.2s ease-in-out;
	}

	/*--------------------------------------------------------------
	# Header
	--------------------------------------------------------------*/

	#header {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 280px;
	transition: all ease-in-out 0.5s;
	z-index: 9997;
	transition: all 0.5s;
	padding: 0 15px;
	background: #143a70;
	overflow-y: auto;
	}

	#header .profile img {
	margin: 15px auto;
	display: block;
	width: 125px;
	border: 7px solid #385782;
	}

	#header .profile h1 {
	font-size: 25px;
	margin: 0;
	padding: 0;
	font-weight: 600;
	-moz-text-align-last: center;
	text-align-last: center;
	font-family: "Poppins", sans-serif;
	}

	#header .profile h1 a,
	#header .profile h1 a:hover {
	color: #fff;
	text-decoration: none;
	}

	#header .profile .social-links a {
	font-size: 18px;
	display: inline-block;
	background: #fff;
	color: #000;
	line-height: 1;
	padding: 8px 0;
	margin-right: 4px;
	border-radius: 50%;
	text-align: center;
	width: 36px;
	height: 36px;
	transition: 0.5s;
	}

	#header .profile .social-links a:hover {
	background: #000;
	color: #fff;
	text-decoration: none;
	}

	#main {
	margin-left: 280px;
	}

	@media (max-width: 1199px) {
	#header {
	left: -280px;
	}
	#main {
	margin-left: 0;
	}
	}


	/*--------------------------------------------------------------
	# Navigation Menu
	--------------------------------------------------------------*/

	.nav-menu {
	padding-top: 15px;
	}

	.nav-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
	}

	.nav-menu>ul>li {
	position: relative;
	white-space: nowrap;
	}

	.nav-menu a {
	display: flex;
	align-items: center;
	color: #f0edeb;
	padding: 12px 15px;
	margin-bottom: 8px;
	transition: 0.5s;
	font-size: 15px;
	}

	.nav-menu a i {
	font-size: 24px;
	padding-right: 8px;
	color: #f0edeb;
	}

	.nav-menu a:hover,
	.nav-menu .active>a,
	.nav-menu li:hover>a {
	text-decoration: none;
	color: #f0edeb;
	}

	.nav-menu a:hover i,
	.nav-menu .active>a i,
	.nav-menu li:hover>a i {
	color: #149ddd;
	}


	/* Mobile Navigation */

	.mobile-nav-toggle {
	position: fixed;
	right: 15px;
	top: 15px;
	z-index: 9998;
	border: 0;
	background: none;
	font-size: 24px;
	transition: all 0.5s;
	outline: none !important;
	line-height: 1;
	cursor: pointer;
	text-align: right;
	}

	.mobile-nav-toggle i {
	color: #fff;
	}

	.mobile-nav-active {
	overflow: hidden;
	}

	.mobile-nav-active #header {
	left: 0;
	}

	.mobile-nav-active .mobile-nav-toggle i {
	color: #fff;
	}


	/*--------------------------------------------------------------
	# Home Section
	--------------------------------------------------------------*/

	#home {
	width: 100%;
	height: 100vh;
	background: url("../img/home-bg.jpg") top center;
	background-size: cover;
	}

	#home:before {
	content: "";
	background: rgba(5, 13, 24, 0.3);
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	}

	#home .home-container {
	position: relative;
	z-index: 2;
	min-width: 300px;
	}

	#home h1 {
	margin: 0 0 10px 0;
	font-size: 64px;
	font-weight: 700;
	line-height: 56px;
	color: #fff;
	}

	#home p {
	color: #fff;
	margin-bottom: 50px;
	font-size: 25px;
	font-family: "Poppins", sans-serif;
	}

	#home p span {
	color: #fff;
	padding-bottom: 4px;
	letter-spacing: 1px;
	border-bottom: 3px solid #385782;
	}

	@media (min-width: 1024px) {
	#home {
	background-attachment: fixed;
	}
	}

	@media (max-width: 768px) {
	#home h1 {
	font-size: 28px;
	line-height: 36px;
	}

	#home h2 {
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 30px;
	}
	}


	/*--------------------------------------------------------------
	# Sections General
	--------------------------------------------------------------*/

	section {
	padding: 60px 0;
	overflow: hidden;
	}

	.section-bg {
	background: #f5f8fd;
	}

	.section-title {
	padding-bottom: 30px;
	}

	.section-title h2 {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 20px;
	padding-bottom: 20px;
	position: relative;
	color: #173b6c;
	}

	.section-title h2::after {
	content: '';
	position: absolute;
	display: block;
	width: 50px;
	height: 3px;
	background: #149ddd;
	bottom: 0;
	left: 0;
	}

	.section-title p {
	margin-bottom: 0;
	}

	/*--------------------------------------------------------------
	# About
	--------------------------------------------------------------*/

	.about .content h3 {
	font-weight: 700;
	font-size: 28px;
	color: #143a70;
	}

	.about .content h2 {
	font-size: 32px;
	font-weight: bold;
	color: #143a70;
	}

	.about .content ul {
	list-style: none;
	padding: 0;
	}

	.about .content ul li {
	padding-bottom: 10px;
	}

	.about .content ul i {
	font-size: 20px;
	padding-right: 2px;
	color: #149ddd;
	}

	.about .content p:last-child {
	margin-bottom: 0;
	}

	/*--------------------------------------------------------------
	# Skills
	--------------------------------------------------------------*/

	.skills .proglang span {
	display: inline-block;
	background: #e4edf9;
	line-height: 1;
	padding: 8px 0;
	margin-right: 30px;
	border-radius: 50%;
	text-align: center;
	width: 85px;
	height: 85px;
	transition: 0.5s;
	}

	.skills .proglang span:hover {
	background: #149ddd;
	color: #000;
	text-decoration: none;
	}

	.skills .proglang img {
	display: block;
	margin: 0 auto;
	padding: 8px 0;
	width: 60%;
	max-width: 200px;
	}

	.skills .proglang h4 {
	padding: 18px 0 0 0;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 5px;
	font-family: "Poppins", sans-serif;
	color: #050d18;
	}

	/*--------------------------------------------------------------
	# Resume
	--------------------------------------------------------------*/

	.resume .resume-title {
	font-size: 26px;
	font-weight: 700;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #050d18;
	}

	.resume .resume-item {
	padding: 0 0 20px 20px;
	margin-top: -2px;
	border-left: 2px solid #1f5297;
	position: relative;
	}

	.resume .resume-item h4 {
	line-height: 18px;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	font-family: "Poppins", sans-serif;
	color: #050d18;
	margin-bottom: 10px;
	}

	.resume .resume-item h5 {
	font-size: 16px;
	background: #e4edf9;
	padding: 5px 15px;
	display: inline-block;
	font-weight: 600;
	margin-bottom: 10px;
	}

	.resume .resume-item ul {
	padding-left: 20px;
	}

	.resume .resume-item ul li {
	padding-bottom: 10px;
	}

	.resume .resume-item:last-child {
	padding-bottom: 0;
	}

	.resume .resume-item::before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50px;
	left: -9px;
	top: 0;
	background: #fff;
	border: 2px solid #1f5297;
	}

	/*--------------------------------------------------------------
	# Portfolio
	--------------------------------------------------------------*/

	.portfolio .portfolio-item {
	margin-bottom: 30px;
	}

	.portfolio #portfolio-flters {
	padding: 0;
	margin: 0 auto 35px auto;
	list-style: none;
	text-align: center;
	background: #fff;
	border-radius: 50px;
	padding: 2px 15px;
	}

	.portfolio #portfolio-flters li {
	cursor: pointer;
	display: inline-block;
	padding: 10px 15px 8px 15px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	color: #272829;
	margin-bottom: 5px;
	transition: all 0.3s ease-in-out;
	}

	.portfolio #portfolio-flters li:hover,
	.portfolio #portfolio-flters li.filter-active {
	color: #149ddd;
	}

	.portfolio #portfolio-flters li:last-child {
	margin-right: 0;
	}

	.portfolio .portfolio-wrap {
	transition: 0.3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
	}

	.portfolio .portfolio-wrap::before {
	content: "";
	background: rgba(255, 255, 255, 0.5);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	transition: all ease-in-out 0.3s;
	z-index: 2;
	opacity: 0;
	}

	.portfolio .portfolio-wrap .portfolio-links {
	opacity: 1;
	left: 0;
	right: 0;
	bottom: -60px;
	z-index: 3;
	position: absolute;
	transition: all ease-in-out 0.3s;
	display: flex;
	justify-content: center;
	}

	.portfolio .portfolio-wrap .portfolio-links a {
	color: #fff;
	font-size: 28px;
	text-align: center;
	background: rgba(20, 157, 221, 0.75);
	transition: 0.3s;
	width: 50%;
	}

	.portfolio .portfolio-wrap .portfolio-links a:hover {
	background: rgba(20, 157, 221, 0.95);
	}

	.portfolio .portfolio-wrap .portfolio-links a+a {
	border-left: 1px solid #37b3ed;
	}

	.portfolio .portfolio-wrap:hover::before {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 1;
	}

	.portfolio .portfolio-wrap:hover .portfolio-links {
	opacity: 1;
	bottom: 0;
	}

	/*--------------------------------------------------------------
	# Contact
	--------------------------------------------------------------*/

	.contact {
	padding-bottom: 130px;
	}

	.contact .info {
	padding: 30px;
	background: #fff;
	width: 100%;
	}

	.contact .info i {
	font-size: 20px;
	color: #149ddd;
	float: left;
	width: 44px;
	height: 44px;
	background: #dff3fc;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	transition: all 0.3s ease-in-out;
	}

	.contact .info h4 {
	padding: 0 0 0 60px;
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 5px;
	color: #050d18;
	}

	.contact .info p {
	padding: 0 0 10px 60px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #173b6c;
	}

	.contact .info .email p {
	padding-top: 5px;
	}

	.contact .info .social-links {
	padding-left: 60px;
	}

	.contact .info .social-links a {
	font-size: 18px;
	display: inline-block;
	background: #333;
	color: #fff;
	line-height: 1;
	padding: 8px 0;
	border-radius: 50%;
	text-align: center;
	width: 36px;
	height: 36px;
	transition: 0.3s;
	margin-right: 10px;
	}

	.contact .info .social-links a:hover {
	background: #149ddd;
	color: #fff;
	}

	.contact .info .email:hover i,
	.contact .info .address:hover i,
	.contact .info .phone:hover i {
	background: #149ddd;
	color: #fff;
	}

	@-webkit-keyframes animate-loading {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
	}

	@keyframes animate-loading {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
	}

	/*--------------------------------------------------------------
	# Footer
	--------------------------------------------------------------*/

	#footer {
	padding: 15px;
	color: #f4f6fd;
	font-size: 14px;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 280px;
	z-index: 9997;
	background: #143a70;
	}

	#footer .copyright {
	margin-right: 20px;
	text-align: center;
	}

	@media (max-width: 1199px) {
	#footer {
	position: static;
	width: auto;
	padding-right: 20px 15px;
	}
	}

view raw style.css hosted with ❤ by GitHub

main.js

	/**
	* Template Name: iPortfolio - v1.2.1
	* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
	* Author: BootstrapMade.com
	* License: https://bootstrapmade.com/license/
	*/
	!(function($) {
	"use strict";

	// Hero typed
	if ($('.typed').length) {
	var typed_strings = $(".typed").data('typed-items');
	typed_strings = typed_strings.split(',')
	new Typed('.typed', {
	strings: typed_strings,
	loop: true,
	typeSpeed: 100,
	backSpeed: 50,
	backDelay: 2000
	});
	}

	// Smooth scroll for the navigation menu and links with .scrollto classes
	$(document).on('click', '.nav-menu a, .scrollto', function(e) {
	if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
	e.preventDefault();
	var target = $(this.hash);
	if (target.length) {

	var scrollto = target.offset().top;

	$('html, body').animate({
	scrollTop: scrollto
	}, 1500, 'easeInOutExpo');

	if ($(this).parents('.nav-menu, .mobile-nav').length) {
	$('.nav-menu .active, .mobile-nav .active').removeClass('active');
	$(this).closest('li').addClass('active');
	}

	if ($('body').hasClass('mobile-nav-active')) {
	$('body').removeClass('mobile-nav-active');
	$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
	}
	return false;
	}
	}
	});

	$(document).on('click', '.mobile-nav-toggle', function(e) {
	$('body').toggleClass('mobile-nav-active');
	$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
	});

	$(document).click(function(e) {
	var container = $(".mobile-nav-toggle");
	if (!container.is(e.target) && container.has(e.target).length === 0) {
	if ($('body').hasClass('mobile-nav-active')) {
	$('body').removeClass('mobile-nav-active');
	$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
	}
	}
	});

	// Navigation active state on scroll
	var nav_sections = $('section');
	var main_nav = $('.nav-menu, #mobile-nav');

	$(window).on('scroll', function() {
	var cur_pos = $(this).scrollTop() + 10;

	nav_sections.each(function() {
	var top = $(this).offset().top,
	bottom = top + $(this).outerHeight();

	if (cur_pos >= top && cur_pos <= bottom) {
	if (cur_pos <= bottom) {
	main_nav.find('li').removeClass('active');
	}
	main_nav.find('a[href="#' + $(this).attr('id') + '"]').parent('li').addClass('active');
	}
	if (cur_pos < 200) {
	$(".nav-menu ul:first li:first").addClass('active');
	}
	});
	});

	// Back to top button
	$(window).scroll(function() {
	if ($(this).scrollTop() > 100) {
	$('.back-to-top').fadeIn('slow');
	} else {
	$('.back-to-top').fadeOut('slow');
	}
	});

	$('.back-to-top').click(function() {
	$('html, body').animate({
	scrollTop: 0
	}, 1500, 'easeInOutExpo');
	return false;
	});

	// jQuery counterUp
	$('[data-toggle="counter-up"]').counterUp({
	delay: 10,
	time: 1000
	});

	// Skills section
	$('.skills-content').waypoint(function() {
	$('.progress .progress-bar').each(function() {
	$(this).css("width", $(this).attr("aria-valuenow") + '%');
	});
	}, {
	offset: '80%'
	});

	// Porfolio isotope and filter
	$(window).on('load', function() {
	var portfolioIsotope = $('.portfolio-container').isotope({
	itemSelector: '.portfolio-item',
	layoutMode: 'fitRows'
	});

	$('#portfolio-flters li').on('click', function() {
	$("#portfolio-flters li").removeClass('filter-active');
	$(this).addClass('filter-active');

	portfolioIsotope.isotope({
	filter: $(this).data('filter')
	});
	});

	// Initiate venobox (lightbox feature used in portofilo)
	$(document).ready(function() {
	$('.venobox').venobox();
	});
	});

	// Testimonials carousel (uses the Owl Carousel library)
	$(".testimonials-carousel").owlCarousel({
	autoplay: true,
	dots: true,
	loop: true,
	responsive: {
	0: {
	items: 1
	},
	768: {
	items: 2
	},
	900: {
	items: 3
	}
	}
	});

	// Portfolio details carousel
	$(".portfolio-details-carousel").owlCarousel({
	autoplay: true,
	dots: true,
	loop: true,
	items: 1
	});

	// Initi AOS
	AOS.init({
	duration: 1000,
	easing: "ease-in-out-back"
	});

	})(jQuery);

view raw main.js hosted with ❤ by GitHub

WOTS BLOG

Cari Blog Ini

TUGAS 1 PEMROGRAMAN WEB (D) - CV Website

Tampilan Website

Source Code

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 3 PEMROGRAMAN WEB (D) - Warung Tegal

ETS PEMROGRAMAN BERORIENTASI OBJEK (B) - Mesin ATM

TUGAS 3 REKAYASA KEBUTUHAN (A) - Elisitasi Kebutuhan SI Evaluasi Kegiatan Sekretariat ITS