Putr1diana
/
MIF_E31220480
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MIF_E31220480/resources/views/Users/home.blade.php

206 lines
9.0 KiB
PHP
Raw Blame History

<!-- app/Views/home.php -->
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<!-- FontAwesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tambahkan Swiper.js JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Tambahkan Swiper.js CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="style\styles.css">
</head>
<body>
<!-- Navbar -->
@include('layouts.navbar')
<!-- Section Home -->
<section class="hero" id="home">
<div class="container">
<div class="row">
<!-- Bagian Kiri -->
<div class="col-md-6 hero-content">
<h1>Kamu Butuh Kos?<br>Ayo Kos Di Calista.</h1>
<p>Selamat datang di <strong>Calista</strong>, tempat di mana ketenangan dan kenyamanan bertemu.</p>
</div>
</div>
</div>
<!-- Gambar Kost -->
<img src="style/image/rumah.png" alt="Kost Impian" class="hero-image">
</section>
<!-- Section About Kos Calista -->
<section id="layanan" style="background: #f5f5f5; padding: 60px 0; text-align: center;">
<div class="container">
<h2 style="color: #3294ddcc; font-weight: bold;">Tentang Kos Calista</h2>
<p>Hadir untuk memberikan kenyamanan dan fasilitas lengkap untuk kebutuhan tempat tinggalmu</p>
<div class="row justify-content-center d-flex align-items-stretch mt-4">
<div class="col-md-4 d-flex">
<div class="card custom-card w-100">
<div class="card-body">
<div class="mb-3">
<i class="fas fa-bed fa-3x text-primary"></i>
</div>
<h5 class="card-title">Kamar Nyaman</h5>
<p class="card-text">Kos Calista menyediakan kamar yang bersih, luas, dan nyaman dengan
fasilitas lengkap untuk mendukung aktivitas harianmu.</p>
</div>
</div>
</div>
<div class="col-md-4 d-flex">
<div class="card custom-card w-100">
<div class="card-body">
<div class="mb-3">
<i class="fas fa-concierge-bell fa-3x text-success"></i>
</div>
<h5 class="card-title">Fasilitas Lengkap</h5>
<p class="card-text">Tersedia WiFi, dapur bersama, parkir, dan keamanan 24 jam yang membuat
kamu tinggal dengan tenang.</p>
</div>
</div>
</div>
<div class="col-md-4 d-flex">
<div class="card custom-card w-100">
<div class="card-body">
<div class="mb-3">
<i class="fas fa-map-marker-alt fa-3x text-danger"></i>
</div>
<h5 class="card-title">Lokasi Strategis</h5>
<p class="card-text">Berlokasi dekat kampus, pusat perbelanjaan, dan fasilitas umum lainnya,
memudahkan mobilitasmu setiap hari.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section Search -->
<section id="search-section"
style="background-image: url('style/image/roomtour.jpg'); background-size: cover; background-position: center; padding: 100px 0; text-align: center; color: white;">
<div class="container">
<h1 style="font-size: 32px; font-weight: bold;">Ayo Tinggal di Kos Calista</h1>
<p style="font-size: 16px; margin: 10px 0 30px;">Temukan kenyamanan dan fasilitas lengkap hanya di Kos
Calista. Nikmati tempat tinggal yang nyaman, lokasi strategis, dan harga terjangkau.</p>
</div>
</section>
<!-- Section Galeri Kos Calista -->
<section id="galeri" style="background: #f5f5f5; padding: 60px 0;">
<div class="container">
<div class="header">
<h2 style="color:#3294DDCC; font-size: 28px; font-weight: bold;">Galeri Kos Calista</h2>
<a href="/galeri" class="btn btn-custom1">
Lihat Semua <i class="bi bi-arrow-right"></i>
</a>
</div>
<!-- Galeri Item -->
<div class="row">
<div class="col-md-4">
<div class="image-container">
<img src="style/image/calista10.jpg" alt="Room" class="img-fluid">
<div class="overlay">
<h3>Kamar Tidur</h3>
<p>Modern dan nyaman, cocok untuk semua kebutuhanmu.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="image-container">
<img src="style/image/calista17.jpg" alt="Living Room" class="img-fluid">
<div class="overlay">
<h3>Interior</h3>
<p>Pemanis Ruangan Dalam Kos Calista .</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="image-container">
<img src="style/image/calista18.jpg" alt="Kitchen" class="img-fluid">
<div class="overlay">
<h3>Dapur Bersama</h3>
<p>Dapur lengkap dengan peralatan untuk kebutuhan sehari-hari.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="image-container">
<img src="style/image/calista9.jpg" alt="Bathroom" class="img-fluid">
<div class="overlay">
<h3>Kamar Mandi</h3>
<p>Kamar mandi bersih dengan fasilitas modern.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="image-container">
<img src="style/image/calista7.jpg" alt="Parking" class="img-fluid">
<div class="overlay">
<h3>Parkir</h3>
<p>Tempat parkir luas dan aman untuk kendaraanmu.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="image-container">
<img src="style/image/calista.jpg" alt="Security" class="img-fluid">
<div class="overlay">
<h3>Keamanan 24 Jam</h3>
<p>Keamanan terjamin dengan sistem pengawasan 24 jam.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section Contact Us -->
<section id="contact">
<div class="contact-container">
<div class="contact-info">
<h2>Butuh Konsultasi..?</h2>
<h2>Silahkan kontak kami<br>Kami Siap Membantu</h2>
<!-- Contact Details -->
<div class="contact-details">
<p><i class="fas fa-map-marker-alt fa-fw"></i> Jl. Mastrip Blk. H / Blk. I No.14, Krajan Timur,
Sumbersari, Kec. Sumbersari, Kabupaten Jember, Jawa Timur 68121</p>
<p><i class="fas fa-phone fa-fw"></i> 0857-9043-3661</p>
<p><i class="fas fa-envelope fa-fw"></i> Kostcalista@gmail.com</p>
</div>
<!-- Social Media -->
<div class="social-media">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<span>@Kostcalista</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
@include('layouts.footer')
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink