Skip to content

Instantly share code, notes, and snippets.

@Iqbalabdi

Iqbalabdi/cv_index.html

Last active January 1, 2022 03:13
Show Gist options
  • Save Iqbalabdi/169b363b859d0e6efa8840b54df00f69 to your computer and use it in GitHub Desktop.
Save Iqbalabdi/169b363b859d0e6efa8840b54df00f69 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cv_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CV M. Iqbal Abdi</title>
<link rel="stylesheet" href="Assets/libraries/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="Assets/styles/style.css">
</head>
<body style="background-color: #ebfff5;">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark page-navbar gradient">
<div class="container">
<a class="navbar-brand logo" href="#">My CV</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item item">
<li class="nav-item item">
<a class="nav-link" href="#work-experience">Experience</a>
</li>
<li class="nav-item item">
<a class="nav-link" href="#education">Education</a>
</li>
<li class="nav-item item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item item">
<a class="nav-link" href="#hobbies">Hobbies</a>
</li>
</li>
</ul>
</div>
</div>
</nav>
<main class="page cv-page">
<section class="cv-block block-intro border-bottom">
<div class="container">
<div class="avatar">
<img class="img-fluid rounded-circle" src="Assets/image/avatar_2.jpg"/>
</div>
<p>Hello! I am <strong>M. Iqbal Abdi</strong>. Currently being an Informatics student at Institut Teknologi
Sepuluh Nopember. I have passion in Networking, Cyber Security, and Web Development.</p>
</div>
</section>
<section class="cv-block info">
<div class="container">
<div class="work-experience group" id="work-experience">
<h2 class="text-center">Experience</h2>
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Kepala Divisi Publikasi Dokumentasi</h3>
<h4 class="organization">Integrated Roadshow ITS 2021</h4>
</div>
<div class="col-md-6">
<time class="period">10/2013 - 04/2015</time>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Anggota Ikatan Pelajar Mahasiswa Riau</h3>
<h4 class="organization">Forda Riau</h4>
</div>
<div class="col-md-6">
<time class="period">10/2013 - 04/2015</time>
</div>
</div>
</div>
<div class="education group" id="education">
<h2 class="text-center">Education</h2>
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>SMAN 4 Pekanbaru</h3>
<h4 class="organization">High School</h4>
</div>
<div class="col-md-6">
<time class="period">09/2005 - 05/2010</time>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Institut Teknologi Sepuluh Nopember</h3>
<h4 class="organization">Informatics</h4>
</div>
<div class="col-md-6">
<time class="period">09/2010 - 06/2015</time>
</div>
</div>
</div>
</div>
<div class="hobbies group" id="hobbies">
<h2 class="text-center">Hobbies</h2>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla aspernatur ullam fuga. Delectus ratione tempora assumenda atque tempore maiores repellendus voluptatibus cum nihil repudiandae suscipit, et eligendi. Voluptates, eum magni? </p>
<div class="group" id="skills">
<div class="row">
<div class="col-md-6">
<div class="skills info-card">
<h2>Skills</h2>
<h3>HTML</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
<h3>PHP</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:90%">
</div>
</div>
<h3>JavaScript</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:80%">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="contact-info info-card">
<h2>Contact Info</h2>
<div class="row">
<div class="col-1">
<i class="ion-android-calendar icon"></i>
</div>
<div class="col-9">
<span>07/09/2000</span>
</div>
</div>
<div class="row">
<div class="col-1">
<i class="ion-person icon"></i>
</div>
<div class="col-9">
<span>M Iqbal Abdi</span>
</div>
</div>
<div class="row">
<div class="col-1">
<i class="ion-ios-telephone icon"></i>
</div>
<div class="col-9">
<span>+235 3217 424</span>
</div>
</div>
<div class="row">
<div class="col-1">
<i class="ion-at icon"></i>
</div>
<div class="col-9">
<span>iqbalabdi07@email.com</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="page-footer">
<div class="container">
<div class="social-icons">
<a href="#"><i class="bi bi-facebook"></i></a>
<a href="#"><i class="bi bi-instagram"></i></a>
<a href="#"><i class="bi bi-twitter"></i></a>
</div>
</div>
</footer>
</main>
</body>
<script src="Assets/libraries/jquery/jquery-3.6.0.min.js"></script>
<script src="Assets/libraries/bootstrap/js/bootstrap.js"></script>
<script src="Assets/scripts/script.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment