Tugas

[rafli290600]

<title>Usaha Maju - Bisnis Profesional Anda</title> <style> :root { --primary-color: #007bff; --secondary-color: #6c757d; --background-color: #f8f9fa; --text-color: #343a40; --accent-color: #28a745; --light-color: #ffffff; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-family);
  line-height: 1.6;
  scroll-behavior: smooth;
}

header {
  background-color: var(--primary-color);
  color: var(--light-color);
  padding: 20px 30px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

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

nav a.logo {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--light-color);
  text-decoration: none;
  letter-spacing: 2px;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin-left: 25px;
}

nav ul li a {
  color: var(--light-color);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: var(--accent-color);
}

main {
  padding-top: 80px;
}

.hero {
  background: linear-gradient(rgba(0,123,255,0.8), rgba(0,123,255,0.8)), url('https://images.unsplash.com/photo-1507209696991-9cc112c21126?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') center/cover no-repeat;
  color: var(--light-color);
  text-align: center;
  padding: 120px 20px 80px;
  border-radius: 0 0 40px 40px;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.25);
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

.hero p {
  font-size: 1.25rem;
  max-width: 700px;
  margin: 0 auto 30px;
}

.btn-primary {
  background-color: var(--accent-color);
  color: var(--light-color);
  padding: 15px 30px;
  text-decoration: none;
  font-size: 1.1rem;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgb(40 167 69 / 0.4);
  transition: background-color 0.3s ease;
  display: inline-block;
}

.btn-primary:hover {
  background-color: #1e7e34;
}

section {
  padding: 60px 20px;
  background-color: var(--light-color);
  border-radius: 15px;
  margin: 40px auto;
  max-width: 1100px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
}

section h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5rem;
  color: var(--primary-color);
  letter-spacing: 1.5px;
}

.about p {
  max-width: 850px;
  margin: 0 auto;
  font-size: 1.15rem;
  text-align: center;
  color: var(--secondary-color);
}

.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.service-card {
  background: var(--background-color);
  border-radius: 15px;
  box-shadow: 0 1px 10px rgb(0 0 0 / 0.05);
  width: 280px;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
}

.service-icon {
  font-size: 50px;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.service-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--text-color);
}

.service-desc {
  font-size: 1rem;
  color: var(--secondary-color);
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-color);
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  font-family: var(--font-family);
  resize: vertical;
  transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--primary-color);
  outline: none;
}

textarea {
  min-height: 120px;
}

button[type="submit"] {
  background: var(--primary-color);
  color: var(--light-color);
  border: none;
  padding: 14px 25px;
  font-size: 1.1rem;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 4px 10px rgb(0 123 255 / 0.4);
  transition: background-color 0.3s ease;
  width: 100%;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}

footer {
  margin: 40px 0 20px;
  text-align: center;
  color: var(--secondary-color);
  font-size: 0.9rem;
}

.social-links {
  margin-top: 15px;
}

.social-links a {
  margin: 0 12px;
  display: inline-block;
  color: var(--secondary-color);
  font-size: 1.5rem;
  transition: color 0.3s ease;
  text-decoration: none;
}

.social-links a:hover {
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .services {
    flex-direction: column;
    align-items: center;
  }

  nav ul {
    display: none;
  }

  nav .menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 1.5rem;
  }
}

</style>

Usaha Maju

• Tentang
• Layanan
• Kontak

Selamat Datang di Usaha Maju

Mendukung pertumbuhan bisnis Anda dengan solusi profesional dan terpercaya.

Hubungi Kami

<section id="about" class="about" aria-labelledby="about-heading">
  <h2 id="about-heading">Tentang Kami</h2>
  <p>Usaha Maju adalah perusahaan yang berfokus pada pengembangan solusi bisnis inovatif. Kami berdedikasi membantu usaha kecil dan menengah mencapai potensi maksimal mereka dengan layanan konsultasi, pemasaran digital, dan solusi teknologi terkini.</p>
</section>

<section id="services" aria-labelledby="services-heading">
  <h2 id="services-heading">Layanan Kami</h2>
  <div class="services">
    <article class="service-card" role="article" aria-label="Konsultasi Bisnis">
      <div class="service-icon" aria-hidden="true">📈</div>
      <h3 class="service-title">Konsultasi Bisnis</h3>
      <p class="service-desc">Analisis dan strategi bisnis untuk membantu usaha Anda tumbuh dan beradaptasi di pasar yang kompetitif.</p>
    </article>
    <article class="service-card" role="article" aria-label="Pemasaran Digital">
      <div class="service-icon" aria-hidden="true">💡</div>
      <h3 class="service-title">Pemasaran Digital</h3>
      <p class="service-desc">Meningkatkan visibilitas usaha Anda melalui kampanye online efektif dan strategi media sosial.</p>
    </article>
    <article class="service-card" role="article" aria-label="Solusi Teknologi">
      <div class="service-icon" aria-hidden="true">🖥️</div>
      <h3 class="service-title">Solusi Teknologi</h3>
      <p class="service-desc">Pengembangan aplikasi dan sistem custom yang sesuai dengan kebutuhan bisnis Anda.</p>
    </article>
  </div>
</section>

<section id="contact" aria-labelledby="contact-heading">
  <h2 id="contact-heading">Kontak Kami</h2>
  <form class="contact-form" onsubmit="return handleSubmit(event)" aria-label="Form Kontak">
    <div class="form-group">
      <label for="name">Nama Lengkap</label>
      <input type="text" id="name" name="name" placeholder="Masukkan nama lengkap Anda" required aria-required="true" />
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="email@domain.com" required aria-required="true" />
    </div>
    <div class="form-group">
      <label for="message">Pesan</label>
      <textarea id="message" name="message" placeholder="Tulis pesan Anda di sini..." required aria-required="true"></textarea>
    </div>
    <button type="submit">Kirim Pesan</button>
  </form>
</section>

© 2024 Usaha Maju. Semua hak cipta dilindungi.

📘 🐦 📸

<script> function handleSubmit(event) { event.preventDefault(); const name = event.target.name.value.trim(); const email = event.target.email.value.trim(); const message = event.target.message.value.trim(); if (!name || !email || !message) { alert("Mohon lengkapi semua kolom."); return false; } if (!validateEmail(email)) { alert("Mohon masukkan alamat email yang valid."); return false; } alert("Terima kasih, " + name + "! Pesan Anda telah terkirim."); event.target.reset(); return false; } function validateEmail(email) { const re = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/; return re.test(email.toLowerCase()); } </script>