Tugas 1- Membuat Portofolio Website
Membuat Situs Pribadi dengan HTML dan CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Ini Aku</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- 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 Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header">
<div class="container">
<h1><a href="index.html">Agnesfia Anggraeni</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="mr-auto">
<img src="assets/img/logo.png" alt="" class="img-fluid"></a> -->
<h2>Undergraduate Student of <span>INFORMATICS ENGINEERING</span>
Sepuluh Nopember Institute of Technology </h2>
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link active" href="#header">Home</a></li>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
<div class="social-links">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</header><!-- End Header -->
<!-- ======= About Section ======= -->
<section id="about" class="about">
<!-- ======= About Me ======= -->
<div class="about-me container">
<div class="section-title">
<h2>About</h2>
<p>Learn more about me</p>
<h5><em> Hello!!! friends call me Rani.
I'm a third year informatics engineering student at Sepuluh Nopember
Institute of Technology.This year I am 20 years old. I like listening
to songs and podcasts.I like challenging new things.I'm not good at
programming but I'll still try my best to catch up.I easily adapt to
a new environment.Lately I'm interested in UI/UX and Network
Architecture,so I will focus on learning with passion.</em></h5>
</div>
<div class="row">
<div class="col-lg-4" data-aos="fade-right">
<img src="assets/Picture/saya.png" class="img-fluid" alt="">
</div>
</div><!-- End About Me -->
<h3 class="resume-title">Education</h3>
<div class="resume-item">
<h4> Informatics Engineering</h4>
<h5>2020 - Current</h5>
<p><em>Sepuluh Nopember Institute of Technology, Surabaya </em></p>
</div>
</div>
</section><!-- End Resume Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>Contact Me</p>
</div>
<div class="row mt-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-map"></i>
<h3>My Address</h3>
<p>Asrama ITS Blok I</p>
<p>Jl. Teknik Elektro, Keputih, Sukolilo, Surabaya, Jawa Timur 60111</p>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-share-alt"></i>
<h3>Social Profiles</h3>
<div class="social-links">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="google-plus"><i class="bi bi-skype"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-envelope"></i>
<h3>Email Me</h3>
<p>agnesfia312@gmail.com</p>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-phone-call"></i>
<h3>Call Me</h3>
<p>+6285 8196 xxxx</p>
</div>
</div>
</div>
<form action="forms/contact.php" method="post" role="form" class="php-email-form mt-4">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name"
placeholder="Your Name" required>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" id="email"
placeholder="Your Email" required>
</div>
</div>
<div class="form-group mt-3">
<input type="text" class="form-control" name="subject" id="subject"
placeholder="Subject" required>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" rows="5"
placeholder="Message" required></textarea>
</div>
<div class="my-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</section><!-- End Contact Section -->
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form:
https://bootstrapmade.com/personal-free-resume-bootstrap-template/ -->
Designed by <a href="https://bootstrapmade.com/">Ranidesign</a>
</div>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
Komentar
Posting Komentar