Skip to content

Commit

Permalink
add: website
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dezkrazzer
Dezkrazzer committed Aug 5, 2023
1 parent a9f1f0f commit b10c4d6
Showing 1 changed file with 249 additions and 0 deletions.
249 changes: 249 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Komunitas XYZ</title>
<!-- Tambahkan tautan CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<style>
/* Reset default margin and padding */
body, h1, h2, p, ul, li {
margin: 0;
padding: 0;
}

/* Set the global font and background color */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

/* Styling for the header */
header {
background-color: #333;
color: #fff;
padding: 1rem 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow effect */
}

.container {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-size: 1.8rem;
font-weight: bold;
}

.menu {
list-style: none;
display: flex;
}

.menu li {
margin-right: 1rem;
}

.menu li:last-child {
margin-right: 0;
}

.menu a {
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background-color 0.3s ease;
}

/* Hover and Active effect for the navbar */
.menu a:hover,
.menu a.active {
background-color: #fff;
color: #333;
}

/* Styling for the hero section */
.hero {
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('background-image.jpg');
background-size: cover;
background-position: center;
position: relative;
}

.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}

.hero p {
font-size: 1.2rem;
max-width: 600px;
}

.hero .cta-btn {
display: inline-block;
padding: 1rem 2rem;
background-color: #fff;
color: #333;
text-decoration: none;
border: none;
border-radius: 5px;
margin-top: 1rem;
font-size: 1.2rem;
cursor: pointer;
transition: transform 0.2s ease;
}

.hero .cta-btn:hover {
transform: scale(1.1);
}

/* Styling for other sections */
.about-section,
.events-section,
.contact-section {
padding: 3rem 0;
}

.about-section h2,
.events-section h2,
.contact-section h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

.events-section ul {
list-style: none;
}

.events-section li {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}

/* Styling for the footer */
footer {
background-color: #333;
color: #fff;
padding: 1rem 0;
}

/* Animation keyframes */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes slideInLeft {
from {
transform: translateX(-50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

/* Animation classes */
.animate-fade-in {
animation: fadeIn 1s ease-in-out;
}

.animate-slide-in-left {
animation: slideInLeft 1s ease-in-out;
}


</style>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">AthX Community</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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="#status">Status</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#discord">Discord</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hastebin">Hastebin</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

<section class="hero bg-primary text-white text-center py-5">
<div class="container">
<h1 class="display-4">AthX</h1>
<p class="lead">An online community that provides various services for you. You can find friends here, play together, ask questions, learn, and have fun for days here!</p>
<a href="#join" class="btn btn-light btn-lg">Join Now</a>
</div>
</section>

<section id="about" class="about-section py-5">
<div class="container">
<h2 class="display-4 text-center mb-4">Tentang Kami</h2>
<p>Komunitas XYZ adalah wadah bagi para pecinta pengetahuan untuk berkumpul dan berbagi ide, pengalaman, serta kreativitas. Dengan berbagai acara dan kegiatan yang menarik, kami bertujuan untuk menjadi rumah bagi semua orang yang ingin belajar dan tumbuh bersama.</p>
</div>
</section>

<section id="events" class="events-section bg-light py-5">
<div class="container">
<h2 class="display-4 text-center mb-4">Kegiatan</h2>
<ul class="list-group">
<li class="list-group-item">Webinar "Belajar CSS untuk Pemula" - 15 Agustus 2023</li>
<li class="list-group-item">Lomba Desain Logo Komunitas - 22 Agustus 2023</li>
<li class="list-group-item">Workshop Fotografi Lanskap - 5 September 2023</li>
</ul>
</div>
</section>

<section id="contact" class="contact-section py-5">
<div class="container">
<h2 class="display-4 text-center mb-4">Kontak Kami</h2>
<p>Jika Anda memiliki pertanyaan atau ingin bergabung dengan kami, jangan ragu untuk menghubungi kami melalui email atau media sosial kami.</p>
<ul>
<li>Email: info@komunitasxyz.com</li>
<li>Instagram: @komunitasxyz</li>
<li>Twitter: @komunitasxyz</li>
</ul>
</div>
</section>

<footer class="text-center py-3">
<p>Hak Cipta &copy; 2023 Komunitas XYZ. All rights reserved.</p>
</footer>

<!-- Tambahkan tautan JavaScript Bootstrap dan JavaScript popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.9/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

0 comments on commit b10c4d6

Please sign in to comment.