-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (142 loc) · 8.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
<link rel="stylesheet" href="assets/css/Team-Boxed.css">
<link rel="stylesheet" href="assets/css/Team-Clean.css">
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="57">
<nav class="navbar navbar-light navbar-expand-lg fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="#page-top">JOGJACLOUD</a><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive" class="navbar-toggler navbar-toggler-right" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-align-justify"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="text-center text-white d-flex masthead" style="background-image: url('assets/img/header.jpg');">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<h1 class="text-uppercase"><strong>Your Partner to Adopt Cloud Technology<br></strong></h1>
<hr>
</div>
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5">Jogjacloud menawarkan layanan konsultasi dan implementasi teknologi cloud siap pakai dari partner terbaik di dunia. Kebutuhan kolaborasi online, cloud server dan VPN menjadi keunggulan kami</p><a class="btn btn-primary btn-xl" role="button" href="#services">Find Out More</a>
</div>
</div>
</header>
<section id="about" class="bg-primary" style="background: #0d6efd;">
<div class="container">
<div class="row">
<div class="col offset-lg-8 text-center mx-auto">
<h2 class="text-white section-heading">Instant Activation</h2>
<hr class="light my-4">
<p class="text-faded mb-4">Teknologi cloud anda memungkinkan anda menggunakan layanan dalam hitungan menit dan bayar hanya yang anda pakai. Tidak perlu investasi mahal</p><a class="btn btn-light btn-xl" role="button" href="#services">Get Started!</a>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Layanan Kami</h2>
<hr class="my-4">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3 text-center">
<div class="mx-auto service-box mt-5"><i class="fa fa-diamond fa-4x text-primary mb-3 sr-icons" data-aos="zoom-in" data-aos-duration="200" data-aos-once="true"></i>
<h3 class="mb-3">Collaboration Tools</h3>
<p class="text-muted mb-0">Meeting online, email dan sharing data baik internal maupaun external dengan mudah</p>
</div>
</div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mx-auto service-box mt-5"><i class="fa fa-paper-plane fa-4x text-primary mb-3 sr-icons" data-aos="zoom-in" data-aos-duration="200" data-aos-delay="200" data-aos-once="true"></i>
<h3 class="mb-3">Cloud Server</h3>
<p class="text-muted mb-0">Deploy kebutuhan server dalam hitungan menit</p>
</div>
</div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mx-auto service-box mt-5"><i class="fa fa-newspaper-o fa-4x text-primary mb-3 sr-icons" data-aos="zoom-in" data-aos-duration="200" data-aos-delay="400" data-aos-once="true"></i>
<h3 class="mb-3">VPN</h3>
<p class="text-muted mb-0">Mengamankan koneksi karyawan anda ketika bekerja dari rumah</p>
</div>
</div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mx-auto service-box mt-5"><i class="fa fa-heart fa-4x text-primary mb-3 sr-icons" data-aos="fade" data-aos-duration="200" data-aos-delay="600" data-aos-once="true"></i>
<h3 class="mb-3">Consulting</h3>
<p class="text-muted mb-0">Memberikan solusi terbaik untuk services yang susai dengan perusahaan anda</p>
</div>
</div>
</div>
</div>
<section id="contact">
<section class="team-boxed" style="background: rgb(255,255,255);">
<div class="container">
<div class="intro">
<h2 class="text-center">Our Cloud Partner</h2>
<p class="text-center">Kami memberikan pilihan produk dan jasa dari perusahaan cloud terbaik di dunia</p>
</div>
<div class="row people">
<div class="col-md-6 col-lg-4 item">
<div class="box"><img class="rounded-circle" src="assets/img/Google.png">
<h3 class="name">Google Workspace</h3>
</div>
</div>
<div class="col-md-6 col-lg-4 item">
<div class="box"><img class="rounded-circle" src="assets/img/microsoft.jpg">
<h3 class="name">Microsoft</h3>
</div>
</div>
<div class="col-md-6 col-lg-4 item">
<div class="box"><img class="rounded-circle" src="assets/img/AWS-logo-2.jpg">
<h3 class="name">Amazon Web Services</h3>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-lg-8 text-center mx-auto">
<h2 class="section-heading">Hubungi Kami</h2>
<hr class="my-4">
<p class="mb-5">Kami menunggu untuk dapat bekerja sama dengan anda. Silahkan hubungi kami</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 text-center ms-auto"><i class="fa fa-phone fa-3x mb-3 sr-contact" data-aos="zoom-in" data-aos-duration="300" data-aos-once="true"></i>
<p>+628562947398</p>
</div>
<div class="col-lg-4 text-center me-auto"><i class="fa fa-envelope-o fa-3x mb-3 sr-contact" data-aos="zoom-in" data-aos-duration="300" data-aos-delay="300" data-aos-once="true"></i>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
</div>
</section>
</section>
<section id="portfolio" class="p-0"></section>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="assets/js/creative.js"></script>
</body>
</html>