Update Landing Page

This commit is contained in:
Ananda Zakia S 2023-12-15 23:07:50 +07:00
parent b34bfeecf0
commit b0cde1ea1c
2 changed files with 334 additions and 282 deletions

View File

@ -92,7 +92,7 @@ .hero_area {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: #7335b7;
background-color: #0a0734;
border-radius: 0 0 350px 0;
}
@ -273,7 +273,7 @@ .slider_section {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 45px 0;
padding: 30px 0;
}
.slider_section .row {
@ -317,12 +317,12 @@ .slider_section .detail-box .btn-box a {
.slider_section .detail-box .btn-box .btn1 {
display: inline-block;
padding: 12px 15px;
background-color: #5a2a8f;
background-color: #0a0734;
color: #ffffff;
border-radius: 5px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border: 1px solid #5a2a8f;
border: 1px solid #0a0734;
}
.slider_section .detail-box .btn-box .btn1:hover {
@ -332,7 +332,7 @@ .slider_section .detail-box .btn-box .btn1:hover {
}
.slider_section .img-box img {
width: 100%;
width: 70%;
}
.slider_section .carousel-indicators {
@ -373,7 +373,7 @@ .service_section .heading_container {
.service_section .box {
margin-top: 25px;
padding: 15px;
padding: 10px;
border-radius: 10px;
-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);
@ -439,7 +439,7 @@ .service_section .box:hover {
.service_section .box:hover::before {
-webkit-transform: scale(5);
transform: scale(5);
background-color: #7335b7;
background-color: #0a0734;
}
.service_section .box:hover img {
@ -460,12 +460,12 @@ .service_section .btn-box {
.service_section .btn-box a {
display: inline-block;
padding: 10px 45px;
background-color: #7335b7;
background-color: #0a0734;
color: #ffffff;
border-radius: 5px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border: 1px solid #7335b7;
border: 1px solid #0a0734;
}
.service_section .btn-box a:hover {
@ -475,7 +475,7 @@ .service_section .btn-box a:hover {
}
.about_section {
background-color: #7335b7;
background-color: #0a0734;
color: #ffffff;
border-radius: 250px 0 250px 0;
}
@ -557,7 +557,7 @@ .case_section .box .detail-box p {
}
.case_section .box .detail-box a {
color: #7335b7;
color: #0a0734;
}
/* Gaya tambahan jika diperlukan */
@ -607,7 +607,7 @@ .client_section .box .client_info .client_name h5 {
.client_section .box .client_info .client_name h6 {
margin-bottom: 0;
color: #7335b7;
color: #0a0734;
font-weight: normal;
font-size: 15px;
text-transform: uppercase;
@ -623,7 +623,7 @@ .client_section .box p {
.client_section .box .detail-box {
background-color: #ffffff;
background-color: #7335b7;
background-color: #0a0734;
color: #ffffff;
border-radius: 15px;
padding: 85px 45px 15px 45px;
@ -641,7 +641,7 @@ .client_section .carousel-indicators {
}
.client_section .carousel-indicators li {
background-color: #7335b7;
background-color: #0a0734;
width: 10px;
height: 10px;
border-radius: 100%;
@ -698,12 +698,12 @@ .contact_section button {
font-family: "Poppins", sans-serif;
display: inline-block;
padding: 10px 65px;
background-color: #7335b7;
background-color:#0a0734;
color: #ffffff;
border-radius: 3px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border: 1px solid #7335b7;
border: 1px solid #0a0734;
color: #fff;
margin-top: 10px;
}
@ -715,7 +715,7 @@ .contact_section button:hover {
}
.contact_section .map_container {
height: 100%;
height: 50%;
min-height: 325px;
overflow: hidden;
margin-left: 45px;
@ -730,9 +730,9 @@ .contact_section .map_container .map #googleMap {
}
.footer_container {
background-color: #7335b7;
background-color: #0a0734;
color: #ffffff;
border-radius: 350px 0 0 0;
border-radius: 100px 0 0 0;
padding-top: 145px;
}
@ -868,12 +868,12 @@ .info_section form button:hover {
/* end info section */
/* footer section*/
.footer_section {
position: relative;
position: center;
text-align: center;
}
.footer_section p {
padding: 25px 0;
padding: 10px 0;
margin: 0;
}

View File

@ -12,7 +12,7 @@
<meta name="description" content="" />
<meta name="author" content="" />
<title>MAN 3 BANYUWANGI</title>
<title>Home | SIPEX</title>
<!-- bootstrap core css -->
@ -39,9 +39,6 @@
<div class="container-fluid">
<nav class="navbar navbar-expand-lg custom_nav-container ">
<a class="navbar-brand" href="home.blade.php">
<span>
MAN 3 BANYUWANGI
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@ -49,30 +46,28 @@
</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="index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html"> About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="service.html">Extracuricular</a>
<a class="nav-link" href="#ekstrakurikuler">Ekstrakurikuler</a>
</li>
</ul>
<div class="quote_btn-container">
<a href="login.blade.php" class="quote_btn">
Get A Quote
<a href="{{ route('login') }}" class="quote_btn">
Login
</a>
</div>
</div>
</nav>
</div>
</header>
<!-- end header section -->
<!-- slider section -->
<section class="slider_section ">
<section id="home" class="slider_section ">
<div id="customCarousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
@ -86,16 +81,11 @@
<div class="col-md-6">
<div class="detail-box">
<h1>
Digital Marketing Experts
Sistem Pendukung Keputusan
</h1>
<p>
Aenean scelerisque felis ut orci condimentum laoreet. Integer nisi nisl, convallis et augue sit amet, lobortis semper quam.
</p>
<div class="btn-box">
<a href="" class="btn1">
Contact Us
</a>
</div>
<h2>
Pemilihan Ekstrakurikuler Siswa MAN 3 Banyuwangi
</h2>
</div>
</div>
</div>
@ -108,29 +98,29 @@
<!-- end slider section -->
</div>
<!-- service section -->
<section class="service_section layout_padding">
<!-- ekstrakurikuler section -->
<section id="ekstrakurikuler" class="service_section layout_padding">
<div class="container">
<div class="heading_container">
<h2>
Category Extracuricular
Ekstrakurikuler
</h2>
<p>
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Kegiatan Ekstrakurikuler Siswa di MAN 3 Banyuwangi
</p>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<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>
Olahraga
Futsal
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
@ -141,17 +131,122 @@
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<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>
</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
Seni Lukis
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
Ekstrakurikuler di bidang seni
</p>
<a href="">
<span>
@ -162,17 +257,17 @@
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s2.png') }}" alt="">
<img src="{{ asset('img/s1.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
KSM
Seni Tari
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
Ekstrakurikuler di bidang seni
</p>
<a href="">
<span>
@ -183,23 +278,63 @@
</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>
</div>
</div>
</div>
</section>
<!-- end service section -->
<!-- case section -->
{{-- <!-- case section -->
<section class="case_section layout_padding">
<div class="container">
<div class="heading_container">
<h2>Studi Kasus Kami</h2>
</div>
<!-- Kontainer Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="row">
<!-- Kolom 1 -->
<div class="col-md-3">
<div class="box">
<div class="img-box">
<img src="img/case-1.jpg" alt="">
@ -209,104 +344,48 @@
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<!-- Kolom 2 -->
<div class="col-md-3">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
<img src="img/case-1.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
<h5>Sit Amet Consectetur Adipisicing Elit</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<!-- Kolom 3 -->
<div class="col-md-3">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
<img src="img/case-1.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
<h5>Sit Amet Consectetur Adipisicing Elit</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<!-- Kolom 4 -->
<div class="col-md-3">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
<img src="img/case-1.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
<h5>Sit Amet Consectetur Adipisicing Elit</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Tambahkan slide lainnya sesuai kebutuhan -->
</div>
<!-- Tombol Navigasi -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</section>
<!-- end case section -->
<!-- end case section --> --}}
<div class="footer_container">
<!-- info section -->
@ -314,93 +393,66 @@
<section class="info_section ">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3 ">
<div class="col-md-4">
<div class="info_detail">
<h4>
Digian
Sistem Pendukung Keputusan Pemilihan Ekstrakurikuler Siswa di MAN 3 Banyuwangi
</h4>
<p>
Necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful
</p>
</div>
</div>
<div class="col-md-6 col-lg-2 mx-auto">
<div class="col-md-4">
<div class="info_link_box">
<h4>
Links
</h4>
<div class="info_links">
<a class="" href="index.html">
<a class="" href="#home">
Home
</a>
<a class="" href="about.html">
About
</a>
<a class="" href="service.html">
Services
</a>
<a class="" href="contact.html">
Contact Us
<a class="" href="#ekstrakurikuler">
Ekstrakurikuler
</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="col-md-4">
<div class="info_contact">
<h4>
Address
</h4>
<div class="contact_link_box">
<a href="">
<a href="https://maps.app.goo.gl/ibCGWyfsxw8pbR6i9">
<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="">
<a href="mailto:man3banyuwangi@gmail.com">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>
demo@gmail.com
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 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>
</div>
</div>
</section>
<!-- end info section -->
<!-- footer section -->
@ -408,7 +460,7 @@
<div class="container">
<p>
&copy; <span id="displayYear"></span> All Rights Reserved By
<a href="https://html.design/">Free Html Templates</a>
<a href="home">SIPEX</a>
</p>
</div>
</footer>