<!
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">
<title>Company Profiles</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-
AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- navigasi -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">DolanTech_</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarText">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#Layanan">Layanan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Portofolio">Portofolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Portofolio">Tentang</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Staff">Staff</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Kontak">Kontak Kami</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- banner -->
<div class="container-fluid banner">
<div class="container text-center">
<h4 class="display-6">SELAMAT DATANG DI WEBSITE KAMI</h4>
<h3 class="display-1">DolanTech_</h3>
<a href="#layanan">
<button type="button" class="btn btn-danger">Cek Layanan</button>
</a>
</div>
</div>
<!-- layanan -->
<div class="container-fluid layanan pt-5 pb-5">
<div class="container text-center">
<h2 class="display-3" id="layanan">Layanan</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta,
consequuntur.
</p>
<div class="row pt-4">
<div class="col-md-4">
<span class="lingkaran"><i class="fas fa-laptop fa-5x"></i></span>
<h3 class="mt-3">Programming</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur, officiis.</p>
</div>
<div class="col-md-4">
<span class="lingkaran"><i class="fas fa-palette fa-5x"></i></span>
<h3 class="mt-3">Design</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur, officiis.</p>
</div>
<div class="col-md-4">
<span class="lingkaran"><i class="fas fa-network-wired fa-
5x"></i></span>
<h3 class="mt-3">Networking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur, officiis.</p>
</div>
</div>
</div>
</div>
<!-- portofolio -->
<div class="container-fluid pt-5 pb-5 bg-light">
<div class="container text-center">
<h2 class=:"display-3" id="portofolio">Portofolio</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam
quod unde possimus quae quasi architecto magni dignissimos corrupti vero!
Architecto.
</p>
<div class="row pt-4 gx-4 gy-4">
<div class="col-md-4">
<div class="card crop-img">
<img src="https://image.freepik.com/free-photo/flat-lay-
business-concept_53876-24738.jpg" class="card-img-top"
width="200"
height="200">
<div class="card-body">
<h5 class="card-title">Lorem, ipsum.</h5>
<p class="card-text">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ducimus iusto, ipsum enim mollitia distinctio cumque?
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card crop-img">
<img
src="https://www.elsevier.com/__data/assets/image/0004/823261/information-system-
supporting-science.jpg"
class="card-img-top"
width="200"
height="200">
<div class="card-body">
<h5 class="card-title">Lorem, ipsum.</h5>
<p class="card-text">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ducimus iusto, ipsum enim mollitia distinctio cumque?
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card crop-img">
<img src="https://image.freepik.com/free-vector/digital-
transformation-network-background_53876-117191.jpg" class="card-img-top"
width="200"
height="200">
<div class="card-body">
<h5 class="card-title">Lorem, ipsum.</h5>
<p class="card-text">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ducimus iusto, ipsum enim mollitia distinctio cumque?
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card crop-img">
<img src="https://trinetprimasolusi.net/wp-
content/uploads/2019/11/Management-Information-System.jpg" class="card-img-top"
width="200"
height="200">
<div class="card-body">
<h5 class="card-title">Lorem, ipsum.</h5>
<p class="card-text">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ducimus iusto, ipsum enim mollitia distinctio cumque?
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card crop-img">
<img
src="https://accounting.binus.ac.id/files/2019/07/KSInformationSystem-
1515206840.jpg" class="card-img-top"
width="200"
height="200">
<div class="card-body">
<h5 class="card-title">Lorem, ipsum.</h5>
<p class="card-text">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ducimus iusto, ipsum enim mollitia distinctio cumque?
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card crop-img">
<img
src="https://i0.wp.com/quipperhome.wpcomstaging.com/wp-
content/uploads/2019/04/45a18-template-image-blog-white-4.png?resize=800%2C533"
class="card-img-top"
width="200"
height="200">
<div class="card-body">
<h5 class="card-title">Lorem, ipsum.</h5>
<p class="card-text">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ducimus iusto, ipsum enim mollitia distinctio cumque?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tentang -->
<div class="container-flid pt-5 pb-5">
<div class="container"><h2 class="display-3 text-center"
id="tentang">Tentang</h2>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Fugit, itaque?
</p>
<div class="clearfix pt-5">
<img
src="https://img.freepik.com/free-vector/about-us-website-banner-
concept-with-thin-line-flat-design_56103-96.jpg?size=626&ext=jpg"
class="col-md-6 float-md-end mb-3 crop-img"
width="300"
height="300"
/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum qui
quos voluptatibus recusandae quis velit.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum qui
quos voluptatibus recusandae quis velit.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum qui
quos voluptatibus recusandae quis velit.
</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi
beatae, deleniti fugit optio nihil repudiandae cum provident perspiciatis
exercitationem quia?</p>
</div>
</div>
<!-- tim -->
<div class="countainer-fluid pt-5 pb-5 bg-light">
<div class="countainer text-center">
<h2 class="display-3" id="staff">Tim Kami</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi
ducimus ea architecto amet accusamus deleniti blanditiis, itaque labore ipsam
laboriosam!
</p>
<div class="row pt-4 gx-4 gy-4">
<div class="col-md-4 text-center tim">
<img src="https://s3.amazonaws.com/cms-
assets.tutsplus.com/uploads/users/810/profiles/19338/profileImage/profile-square-
extra-small.png"
class="rounded-circle mb-3"
/>
<h4>Abdul</h4>
<p>Web Designer</p>
<p>
<a href="" class="social"><i class="fab fa-twitter"></i></a>
<a href="" class="social"><i class="fab fa-instagram"></i></a>
<a href="" class="social"><i class="fab fa-whatsapp"></i></a>
</p>
</div>
<div class="col-md-4 text-center tim">
<img src="http://gokubi.com/wp-content/uploads/2013/10/Steve-
Andersen-Headshot-square1.jpeg"
class="rounded-circle mb-3"
/>
<h4>Samsi</h4>
<p>Network Engineer</p>
<p>
<a href="" class="social"><i class="fab fa-twitter"></i></a>
<a href="" class="social"><i class="fab fa-instagram"></i></a>
<a href="" class="social"><i class="fab fa-whatsapp"></i></a>
</p>
</div>
<div class="col-md-4 text-center tim">
<img src="https://www.kingrosales.com/wp-
content/uploads/2018/05/king-rosales-profile-photo-square.jpg"
class="rounded-circle mb-3"
/>
<h4>Tamli</h4>
<p>Data Scientist</p>
<p>
<a href="" class="social"><i class="fab fa-twitter"></i></a>
<a href="" class="social"><i class="fab fa-instagram"></i></a>
<a href="" class="social"><i class="fab fa-whatsapp"></i></a>
</p>
</div>
</div>
</div>
</div>
<!-- Client -->
<div class="countainer-fluid client pt-5 pb-5">
<div class="countainer text-center">
<div class="row pt-4 gx-4 gy-4">
<div class="col">
<img
src="https://pngimg.com/uploads/microsoft/small/microsoft_PNG18.png"/>
</div>
<div class="col">
<img
src="https://pngimg.com/uploads/facebook_logos/small/facebook_logos_PNG19750.png"/>
</div>
<div class="col">
<img
src="https://pngimg.com/uploads/linkedIn/small/linkedIn_PNG2.png"/>
</div>
<div class="col">
<img
src="https://pngimg.com/uploads/google/small/google_PNG19630.png"/>
</div>
<div class="col">
<img
src="https://pngimg.com/uploads/ibm/small/ibm_PNG19647.png"/>
</div>
</div>
</div>
</div>
<!-- kontak -->
<div class="container-fluid pt-5 pb-5 kontak">
<div class="container">
<h2 class="display-3 text-center" id="kontak">Kontak Kami</h2>
<p class="text-center">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Itaque, aut!
</p>
<div class="row pb-3">
<div class="col-md-6">
<input class="form-control form-control-lg mb-3"
type="text"
placeholder="Nama"
/>
<input class="form-control form-control-lg mb-3"
type="text"
placeholder="Email"
/>
<input class="form-control form-control-lg"
type="text"
placeholder="No. Phone"
/>
</div>
<div class="col-md-6">
<textarea class="form-control form-control-lg"
rows="5"></textarea>
</div>
</div>
<div class="col-md-3 mx-auto text-center">
<button type="button" class="btn-dark btn-lg">Kirim
Pesan</button>
</div>
</div>
</div>
<div class="container text-center pt-5 pb-5">
All Right Reserved © 2021 (Hillan Muhammad Fajri)
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
