anandazakias
/
MIF_E31210529
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update landingpage

This commit is contained in:
zakiaass 2023-12-17 04:23:45 +07:00
parent 0e504061c4
commit 18e65e1790
5 changed files with 313 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/bootstrap.css vendored
View File

@ -4581,7 +4581,6 @@ .card > .list-group:last-child .list-group-item:last-child {
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
.card-title {

52
public/css/style.css
View File

@ -93,7 +93,7 @@ .hero_area {
-ms-flex-direction: column;
flex-direction: column;
background-color: #0a0734;
border-radius: 0 0 350px 0;
border-radius: 50px 0 250px 0;
}
.sub_page .hero_area {
@ -103,6 +103,8 @@ .sub_page .hero_area {
.header_section {
padding: 15px 0;
background-color: #0a0734;
border-radius: 50px 0 50px 0;
}
.header_section .container-fluid {
@ -129,7 +131,7 @@ .custom_nav-container .navbar-nav .nav-item .nav-link {
color: #ffffff;
text-align: center;
text-transform: uppercase;
border-radius: 5px;
border-radius: 15px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@ -374,13 +376,8 @@ .service_section .heading_container {
.service_section .box {
margin-top: 25px;
<<<<<<< Updated upstream
padding: 10px;
border-radius: 10px;
=======
padding: 15px;
border-radius: 20px;
>>>>>>> Stashed changes
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
position: relative;
@ -448,11 +445,6 @@ .service_section .box:hover::before {
background-color: #0a0734;
}
.service_section .box:hover img {
-webkit-filter: invert(1);
filter: invert(1);
}
.service_section .btn-box {
display: -webkit-box;
display: -ms-flexbox;
@ -480,6 +472,32 @@ .service_section .btn-box a:hover {
transform: translateY(-3px);
}
.carousel-indicators {
font-size: 1rem; /* Ukuran font indikator */
text-align: center; /* Memusatkan indikator */
}
.carousel-indicators span {
width: 12px; /* Lebar dan tinggi yang sama agar berbentuk bulat */
height: 12px;
margin: 0 5px; /* Jarak antara nomor pada indikator */
cursor: pointer; /* Menjadikan pointer saat di hover */
background-color: rgba(28, 8, 91, 0.5); /* Warna latar belakang nomor dengan alpha 0.5 (transparan) */
color: #fff; /* Warna teks nomor */
border-radius: 50%; /* Agar bentuknya menjadi bulat */
padding: 8px; /* Padding untuk ruang antara nomor dan latar belakang */
display: inline-block; /* Agar indikator muncul dalam satu baris */
}
.carousel-indicators .active {
background-color: #0a0734; /* Warna latar belakang nomor saat aktif tanpa transparansi */
}
.carousel-indicators span::before {
content: none;
}
.about_section {
background-color: #0a0734;
color: #ffffff;
@ -577,7 +595,6 @@ .swiper-slide {
box-sizing: border-box;
}
<<<<<<< Updated upstream
.client_section .box {
display: -webkit-box;
display: -ms-flexbox;
@ -735,19 +752,12 @@ .contact_section .map_container .map {
.contact_section .map_container .map #googleMap {
height: 100%;
}
=======
/* Footer */
>>>>>>> Stashed changes
.footer_container {
background-color: #0a0734;
color: #ffffff;
<<<<<<< Updated upstream
border-radius: 100px 0 0 0;
padding-top: 145px;
=======
padding-top: 100px;
>>>>>>> Stashed changes
padding-top: 50px;
}
/* info section */

225
resources/views/ekstrakurikuler.blade.php Normal file
View File

@ -0,0 +1,225 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Site Metas -->
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Home | SIPEX</title>
<!-- bootstrap core css -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.css') }}" />
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- font awesome style -->
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet" />
<!-- responsive style -->
<link href="{{ asset('css/responsive.css') }}" rel="stylesheet" />
</head>
<body>
<!-- header section strats -->
<header class="header_section">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg custom_nav-container ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class=""> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="{{ route('home') }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('ekstrakurikuler') }}">Ekstrakurikuler</a>
</li>
</ul>
</ul>
<div class="quote_btn-container">
<a href="{{ route('login') }}" class="quote_btn">
Login
</a>
</div>
</div>
</nav>
</div>
</header>
<!-- end header section -->
<!-- ekstrakurikuler section -->
<section id="ekstrakurikuler" class="service_section layout_padding">
<div class="container">
<div class="heading_container">
<h2>
Ekstrakurikuler
</h2>
<p>
Kegiatan Ekstrakurikuler Siswa di MAN 3 Banyuwangi
</p>
</div>
<div id="ekstrakurikulerCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@php
$totalCards = 12;
$images = ['img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg',
'img/login.jpeg', 'img/login.jpeg','img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg',
'img/login.jpeg', 'img/login.jpeg','img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg',
'img/login.jpeg', 'img/login.jpeg','img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg',
'img/login.jpeg', 'img/login.jpeg','img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg',
'img/login.jpeg', 'img/login.jpeg','img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg',
'img/login.jpeg', 'img/login.jpeg', /* add more image paths here */];
@endphp
@for ($i = 0; $i < count($images); $i += $totalCards)
<div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
<div class="row">
@for ($j = $i; $j < $i + $totalCards && $j < count($images); $j++)
<div class="col-md-6 col-lg-3">
<div class="box" style="width: 17rem;">
<img src="{{ asset($images[$j]) }}" class="card-img-top" alt="...">
<div class="card-body">
<div class="detail-box">
<h5>
Futsal
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
</div>
</div>
</div>
</div>
@endfor
</div>
</div>
@endfor
</div>
<div class="carousel-indicators mt-2">
@for ($i = 0; $i < ceil(count($images) / $totalCards); $i++)
<span data-target="#ekstrakurikulerCarousel" data-slide-to="{{ $i }}" class="{{ $i === 0 ? 'active' : '' }}" onclick="goToSlide({{ $i }})"></span>
@endfor
</div>
<script>
function goToSlide(index) {
$('#ekstrakurikulerCarousel').carousel(index);
}
</script>
</div>
</div>
</section>
<div class="footer_container">
<!-- info section -->
<section class="info_section ">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="info_detail">
<h4>
Sistem Pendukung Keputusan Pemilihan Ekstrakurikuler Siswa di MAN 3 Banyuwangi
</h4>
</div>
</div>
<div class="col-md-4">
<div class="info_link_box">
<h4>
Links
</h4>
<div class="info_links">
<a class="" href="#home">
Home
</a>
<a class="" href="#ekstrakurikuler">
Ekstrakurikuler
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="info_contact">
<h4>
Address
</h4>
<div class="contact_link_box">
<a href="https://maps.app.goo.gl/ibCGWyfsxw8pbR6i9">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span>
Location
</span>
</a>
<a href="mailto:man3banyuwangi@gmail.com">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>
Email
</span>
</a>
<a href="tel:+62333397173">
<i class="fa fa-phone" aria-hidden="true"></i>
<span>
Telepon
</span>
</a>
<a href="https://www.instagram.com/osimman3banyuwangi" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
<span>
Instagram
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- end info section -->
<!-- footer section -->
<footer class="footer_section">
<div class="container">
<p>
&copy; <span id="displayYear"></span> All Rights Reserved By
<a href="home">SIPEX</a>
</p>
</div>
</footer>
<!-- footer section -->
</div>
<!-- jQery -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- popper js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<!-- bootstrap js -->
<script src="js/bootstrap.js"></script>
<script src="js/custom.js"></script>
<!-- Google Map -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script>
<!-- End Google Map -->
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>

311
resources/views/home.blade.php
View File

@ -48,12 +48,13 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="{{ route('home') }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ekstrakurikuler">Ekstrakurikuler</a>
<a class="nav-link" href="{{ route('ekstrakurikuler') }}">Ekstrakurikuler</a>
</li>
</ul>
<div class="quote_btn-container">
<a href="{{ route('login') }}" class="quote_btn">
Login
@ -109,12 +110,23 @@
Kegiatan Ekstrakurikuler Siswa di MAN 3 Banyuwangi
</p>
</div>
<div id="ekstrakurikulerCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@php
$totalCards = 12;
$images = ['img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg',
'img/login.jpeg', 'img/login.jpeg','img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg', 'img/login.jpeg',
'img/login.jpeg', 'img/login.jpeg', /* add more image paths here */];
@endphp
@for ($i = 0; $i < count($images); $i += $totalCards)
<div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
<div class="row">
@for ($j = $i; $j < $i + $totalCards && $j < count($images); $j++)
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="box" style="width: 17rem;">
<img src="{{ asset($images[$j]) }}" class="card-img-top" alt="...">
<div class="card-body">
<div class="detail-box">
<h5>
Futsal
@ -122,206 +134,19 @@
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Tenis Meja
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
@endfor
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Silat
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Badminton
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Catur
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Taekwondo
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s1.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Seni Lukis
</h5>
<p>
Ekstrakurikuler di bidang seni
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s1.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Seni Tari
</h5>
<p>
Ekstrakurikuler di bidang seni
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s1.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Teater
</h5>
<p>
Ekstrakurikuler di bidang seni
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s1.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Jurnalis
</h5>
<p>
Ekstrakurikuler di bidang seni
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
@endfor
</div>
</div>
</div>
</section>
<!-- end service section -->
{{-- <!-- case section -->
@ -381,11 +206,6 @@
</div>
</div>
</div>
<<<<<<< Updated upstream
=======
</div>
<!-- Tambahkan slide lainnya sesuai kebutuhan -->
>>>>>>> Stashed changes
</div>
</section>
@ -454,80 +274,6 @@
</div>
</div>
</div>
<<<<<<< Updated upstream
=======
</div>
<div class="col-md-6 col-lg-2 mx-auto">
<div class="info_link_box">
<h4>
Links
</h4>
<div class="info_links">
<a class="" href="index.html">
Home
</a>
<a class="" href="about.html">
About
</a>
<a class="" href="service.html">
Extracuricular
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 ">
<h4>
Subscribe
</h4>
<form action="#">
<input type="text" placeholder="Enter email" />
<button type="submit">
Subscribe
</button>
</form>
</div>
<div class="col-md-6 col-lg-3 mb-0 ml-auto">
<div class="info_contact">
<h4>
Address
</h4>
<div class="contact_link_box">
<a href="">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span>
Location
</span>
</a>
<a href="">
<i class="fa fa-phone" aria-hidden="true"></i>
<span>
Call +01 1234567890
</span>
</a>
<a href="">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>
demo@gmail.com
</span>
</a>
</div>
</div>
<div class="info_social">
<a href="">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</div>
</div>
>>>>>>> Stashed changes
</div>
</section>
@ -539,11 +285,7 @@
<div class="container">
<p>
&copy; <span id="displayYear"></span> All Rights Reserved By
<<<<<<< Updated upstream
<a href="home">SIPEX</a>
=======
<a href="">Free Html Templates</a>
>>>>>>> Stashed changes
</p>
</div>
</footer>
@ -563,17 +305,6 @@
<!-- End Google Map -->
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
// Inisialisasi Swiper
var swiper = new Swiper('.swiper-container', {
slidesPerView: 6, // Set jumlah slide yang terlihat
spaceBetween: 10, // Set ruang antara slide
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>

8
routes/web.php
View File

@ -20,6 +20,14 @@
return view('home');
});
Route::get('/home', function () {
return view('home'); // Ganti 'welcome' dengan nama file blade yang sesuai
})->name('home');
Route::get('/ekstrakurikuler', function () {
return view('ekstrakurikuler'); // Ganti 'ekstrakurikuler' dengan nama file blade yang sesuai
})->name('ekstrakurikuler');
Route::get('/login', [AuthController::class, 'showLoginForm'])->name('login');