Skip to content

Instantly share code, notes, and snippets.

@ArchieOps
Created September 24, 2021 15:52
<!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>Katalog Barang</title>
<link rel="stylesheet" href="../style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
tr{
line-height: 2;
}
td{
padding-left: 10px;
}
td p {
font-size: 18px;
}
</style>
</head>
<body>
<div class="header">
<header>
<h1 style="font-family: 'Georgia'; text-align: center; font-size:300%;">Fesyenista</h1>
<nav>
<ul>
<li><a href="../index.html"><u>Home</u></a></li>
<li><a href="./about.html"><u>About</u></a></li>
<li ><a href="./contact.html" class="current"><u>Contact</u></a></li>
</ul>
</nav>
</header>
</div>
<section class="content">
<article>
<h2>Contact Us</h2>
<table>
<tr class="phone" style="line-height: 2;">
<td><i class="fa fa-mobile-phone fa-3x" aria-hidden="true" style="margin-left: 30px;"></i></td>
<td style="padding-left: 10px;"><p>Phone</p></td>
<td><p>:</p></td>
<td><p>+6281917677313</p></td>
</tr>
<tr class="whatsapp" style="line-height: 2;">
<td><i class="fa fa-whatsapp fa-2x" aria-hidden="true" style="margin-left: 30px;"></i></td>
<td style="padding-left: 10px;"><p>Whatsapp</p></td>
<td><p>:</p></td>
<td><p><a href="https://wa.me/+6281917677313">+6281917677313</a></p></td>
</tr>
<tr class="email" style="line-height: 2;">
<td><i class="fa fa-envelope-square fa-2x" aria-hidden="true" style="margin-left: 30px;"></i></td>
<td style="padding-left: 10px;"><p>Email</p></td>
<td><p>:</p></td>
<td><p><a href="mailto:jonathanleonardo123@gmail.com?subject=Say hi!">jonathanleonardo123@gmail.com</a></p></td>
</tr>
<tr class="facebook" style="line-height: 2;">
<td><i class="fa fa-facebook fa-2x" aria-hidden="true" style="margin-left: 30px;"></i></td>
<td style="padding-left: 10px;"><p>Facebook</p></td>
<td><p>:</p></td>
<td><p><a href="https://www.facebook.com/jonathan.leonardo.3990" >Jonathan Leonardo</a></p></td>
</tr>
</table>
</article>
<article>
<h2>Come to Our Store</h2>
<figure class="odd">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.8280785784395!2d107.03039165018332!3d-6.286316395427825!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e698e182e94552f%3A0x8309e954a5483380!2sMutiara%20Gading%20Timur!5e0!3m2!1sen!2sid!4v1632481704600!5m2!1sen!2sid" width="400" height="350" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</figure>
<hgroup>
<h4>Alamat Kami :</h4>
</hgroup>
<p class="description">Perumahan Mutiara Gading Timur Blok E2 no.18, Mustika Jaya, Bekasi Timur, 17158</p>
</article>
</section>
<footer>
<div class="footer-content">
<h2 style="font-family: 'Georgia'; text-align: center">Fesyenista</h2>
<p style="text-align: center; font-family: 'Trebuchet MS';">&copy; 2021 All Rights Reserved</p>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment