added some images, added banner and featuredproduc
This commit is contained in:
StockiP
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,2 +1,3 @@
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
|
.vscode
|
||||||
node_modules
|
node_modules
|
||||||
95
components/banner.html
Normal file
95
components/banner.html
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<div id="marmeladenLadencarousel" class="carousel slide" data-bs-ride="carousel">
|
||||||
|
<ol class="carousel-indicators">
|
||||||
|
<li data-bs-target="#marmeladenLadencarousel" data-bs-slide-to="0" class="active"></li>
|
||||||
|
<li data-bs-target="#marmeladenLadencarousel" data-bs-slide-to="1"></li>
|
||||||
|
<li data-bs-target="#marmeladenLadencarousel" data-bs-slide-to="2"></li>
|
||||||
|
</ol>
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row p-5">
|
||||||
|
<div class="mx-auto col-md-8 col-lg-6 order-lg-last">
|
||||||
|
<img class="img-fluid rounded-circle shadow" src="../res/img/jam.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mb-0 d-flex align-items-center">
|
||||||
|
<div class="text-align-left align-self-center">
|
||||||
|
<h1 class="h1 text-success">MarmeladenLaden</h1>
|
||||||
|
<h3 class="h2">Aliquip ex ea commodo consequat</h3>
|
||||||
|
<p>
|
||||||
|
Occaecat velit enim pariatur mollit et aliquip in nulla Lorem tempor nisi laboris
|
||||||
|
proident ad id amet tempor sint eu sunt esse duis incididunt exercitation eiusmod veniam
|
||||||
|
fugiat non aliqua ullamco eiusmod eiusmod est adipisicing
|
||||||
|
in est commodo consectetur enim dolore ea non id aliquip aliqua dolore nostrud cillum ea
|
||||||
|
cillum ipsum dolore enim sunt fugiat qui eu sint laborum do veniam nulla et cillum minim
|
||||||
|
consectetur eiusmod et mollit aliquip sit occaecat
|
||||||
|
consectetur duis cillum officia pariatur officia ad pariatur ullamco excepteur cupidatat
|
||||||
|
reprehenderit tempor qui cillum reprehenderit sit qui veniam proident est officia
|
||||||
|
proident aute sunt consectetur ullamco.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row p-5">
|
||||||
|
<div class="mx-auto col-md-8 col-lg-6 order-lg-last">
|
||||||
|
<img class="img-fluid rounded-circle shadow" src="../res/img/berries.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mb-0 d-flex align-items-center">
|
||||||
|
<div class="text-align-left">
|
||||||
|
<h1 class="h1">Proident occaecat</h1>
|
||||||
|
<h3 class="h2">Aliquip ex ea commodo consequat</h3>
|
||||||
|
<p>
|
||||||
|
Occaecat velit enim pariatur mollit et aliquip in nulla Lorem tempor nisi laboris
|
||||||
|
proident ad id amet tempor sint eu sunt esse duis incididunt exercitation eiusmod veniam
|
||||||
|
fugiat non aliqua ullamco eiusmod eiusmod est adipisicing
|
||||||
|
in est commodo consectetur enim dolore ea non id aliquip aliqua dolore nostrud cillum ea
|
||||||
|
cillum ipsum dolore enim sunt fugiat qui eu sint laborum do veniam nulla et cillum minim
|
||||||
|
consectetur eiusmod et mollit aliquip sit occaecat
|
||||||
|
consectetur duis cillum officia pariatur officia ad pariatur ullamco excepteur cupidatat
|
||||||
|
reprehenderit tempor qui cillum reprehenderit sit qui veniam proident est officia
|
||||||
|
proident aute sunt consectetur ullamco.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row p-5">
|
||||||
|
<div class="mx-auto col-md-8 col-lg-6 order-lg-last">
|
||||||
|
<img class="img-fluid rounded-circle shadow" src="../res/img/cottage.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mb-0 d-flex align-items-center">
|
||||||
|
<div class="text-align-left">
|
||||||
|
<h1 class="h1">Repr in voluptate</h1>
|
||||||
|
<h3 class="h2">Ullamco laboris nisi ut </h3>
|
||||||
|
<p>
|
||||||
|
Occaecat velit enim pariatur mollit et aliquip in nulla Lorem tempor nisi laboris
|
||||||
|
proident ad id amet tempor sint eu sunt esse duis incididunt exercitation eiusmod veniam
|
||||||
|
fugiat non aliqua ullamco eiusmod eiusmod est adipisicing
|
||||||
|
in est commodo consectetur enim dolore ea non id aliquip aliqua dolore nostrud cillum ea
|
||||||
|
cillum ipsum dolore enim sunt fugiat qui eu sint laborum do veniam nulla et cillum minim
|
||||||
|
consectetur eiusmod et mollit aliquip sit occaecat
|
||||||
|
consectetur duis cillum officia pariatur officia ad pariatur ullamco excepteur cupidatat
|
||||||
|
reprehenderit tempor qui cillum reprehenderit sit qui veniam proident est officia
|
||||||
|
proident aute sunt consectetur ullamco.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#marmeladenLadencarousel" role="button"
|
||||||
|
data-bs-slide="prev">
|
||||||
|
<i class="fas fa-chevron-left"></i>
|
||||||
|
</a>
|
||||||
|
<a class="carousel-control-next text-decoration-none w-auto pe-3" href="#marmeladenLadencarousel" role="button"
|
||||||
|
data-bs-slide="next">
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
87
components/ftProducts.html
Normal file
87
components/ftProducts.html
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<section class="bg-light">
|
||||||
|
<div class="container py-5">
|
||||||
|
<div class="row text-center py-3">
|
||||||
|
<div class="col-lg-6 m-auto">
|
||||||
|
<h1 class="h1">Featured Product</h1>
|
||||||
|
<p>
|
||||||
|
Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-4 mb-4">
|
||||||
|
<div class="card h-100">
|
||||||
|
<a href="shop-single.html">
|
||||||
|
<img src="./assets/img/feature_prod_01.jpg" class="card-img-top" alt="...">
|
||||||
|
</a>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="list-unstyled d-flex justify-content-between">
|
||||||
|
<li>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-muted fa fa-star"></i>
|
||||||
|
<i class="text-muted fa fa-star"></i>
|
||||||
|
</li>
|
||||||
|
<li class="text-muted text-right">$240.00</li>
|
||||||
|
</ul>
|
||||||
|
<a href="shop-single.html" class="h2 text-decoration-none text-dark">Gym Weight</a>
|
||||||
|
<p class="card-text">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
|
||||||
|
</p>
|
||||||
|
<p class="text-muted">Reviews (24)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-4 mb-4">
|
||||||
|
<div class="card h-100">
|
||||||
|
<a href="shop-single.html">
|
||||||
|
<img src="./assets/img/feature_prod_02.jpg" class="card-img-top" alt="...">
|
||||||
|
</a>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="list-unstyled d-flex justify-content-between">
|
||||||
|
<li>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-muted fa fa-star"></i>
|
||||||
|
<i class="text-muted fa fa-star"></i>
|
||||||
|
</li>
|
||||||
|
<li class="text-muted text-right">$480.00</li>
|
||||||
|
</ul>
|
||||||
|
<a href="shop-single.html" class="h2 text-decoration-none text-dark">Cloud Nike Shoes</a>
|
||||||
|
<p class="card-text">
|
||||||
|
Aenean gravida dignissim finibus. Nullam ipsum diam, posuere vitae pharetra sed, commodo ullamcorper.
|
||||||
|
</p>
|
||||||
|
<p class="text-muted">Reviews (48)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-4 mb-4">
|
||||||
|
<div class="card h-100">
|
||||||
|
<a href="shop-single.html">
|
||||||
|
<img src="./assets/img/feature_prod_03.jpg" class="card-img-top" alt="...">
|
||||||
|
</a>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="list-unstyled d-flex justify-content-between">
|
||||||
|
<li>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
<i class="text-warning fa fa-star"></i>
|
||||||
|
</li>
|
||||||
|
<li class="text-muted text-right">$360.00</li>
|
||||||
|
</ul>
|
||||||
|
<a href="shop-single.html" class="h2 text-decoration-none text-dark">Summer Addides Shoes</a>
|
||||||
|
<p class="card-text">
|
||||||
|
Curabitur ac mi sit amet diam luctus porta. Phasellus pulvinar sagittis diam, et scelerisque ipsum lobortis nec.
|
||||||
|
</p>
|
||||||
|
<p class="text-muted">Reviews (74)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
85
index.html
85
index.html
@@ -2,44 +2,63 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<!-- Start Header-->
|
<!-- Start Header-->
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="description" content="Dieser MarmeladenLaden wird aktuell für die LV WebScripting umgesetzt.">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="author" content="Iris Raab & Philip Stockerer">
|
<meta name="description" content="Dieser MarmeladenLaden wird aktuell für die LV WebScripting umgesetzt.">
|
||||||
<!--Einbinden der genutzten Frameworks-->
|
<meta name="author" content="Iris Raab & Philip Stockerer">
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
<!--Einbinden der genutzten Frameworks-->
|
||||||
<script src="https://kit.fontawesome.com/7321626d2e.js" crossorigin="anonymous"></script>
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
<script src="../js/app.js"></script>
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
|
<link rel="stylesheet" href="../res/css/style.css">
|
||||||
<link rel="stylesheet" href="../res/css/style.css">
|
<title>MarmeladenLaden</title>
|
||||||
<title>MarmeladenLaden</title>
|
</head>
|
||||||
</head>
|
|
||||||
<!-- End Header -->
|
<!-- End Header -->
|
||||||
|
|
||||||
<!-- Start Content-->
|
<!-- Start Content-->
|
||||||
<body>
|
|
||||||
<nav class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block" id="top_nav_bar">
|
|
||||||
<!--load content via js-->
|
|
||||||
</nav>
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light shadow" id="main_nav_bar">
|
|
||||||
<!--load content via js-->
|
|
||||||
</nav>
|
|
||||||
<!-- Modal-->
|
|
||||||
<div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
||||||
|
|
||||||
</div>
|
<body>
|
||||||
<h1>Test</h1>
|
<nav class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block" id="top_nav_bar">
|
||||||
<p>This is a test commit</p>
|
<!--load content via js-->
|
||||||
</body>
|
</nav>
|
||||||
|
<!-- Start Main Navbar-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light shadow" id="main_nav_bar">
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<!-- End Main Navbar-->
|
||||||
|
<!-- Start Modal-->
|
||||||
|
<div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog"
|
||||||
|
aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End Modal-->
|
||||||
|
|
||||||
|
<!-- Start Banner Carousel-->
|
||||||
|
<div id="mmlcarousel">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- End Banner Carousel-->
|
||||||
|
|
||||||
|
<!-- Start Main Content -->
|
||||||
|
<div id="mmlMainContent">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
<!-- End Content -->
|
<!-- End Content -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
|
||||||
|
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://kit.fontawesome.com/7321626d2e.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<script src="../js/app.js"></script>
|
||||||
<!-- Start Footer -->
|
<!-- Start Footer -->
|
||||||
<footer class="bg-dark" id="marmeladenladen_footer">
|
<footer class="bg-dark" id="marmeladenladen_footer">
|
||||||
<!--loading content via js-->
|
<!--load content with javascript-->
|
||||||
</footer>
|
</footer>
|
||||||
<!-- End Footer -->
|
<!-- End Footer -->
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,6 +1,8 @@
|
|||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$('#top_nav_bar').load('../components/top_nav.html');
|
$('#top_nav_bar').load('../components/top_nav.html');
|
||||||
$('#main_nav_bar').load('../components/main_nav.html');
|
$('#main_nav_bar').load('../components/main_nav.html');
|
||||||
|
$('#mmlcarousel').load('../components/banner.html');
|
||||||
|
$('#mmlMainContent').load('../components/ftProducts.html');
|
||||||
$('#marmeladenladen_footer').load('../components/footer.html');
|
$('#marmeladenladen_footer').load('../components/footer.html');
|
||||||
$('#marmeladenladen_search').load('../components/modal.html');
|
$('#marmeladenladen_search').load('../components/modal.html');
|
||||||
});
|
});
|
||||||
@@ -43,6 +43,17 @@
|
|||||||
}
|
}
|
||||||
#marmeladenladen_footer .border-light { border-color: #2d343f !important;}
|
#marmeladenladen_footer .border-light { border-color: #2d343f !important;}
|
||||||
|
|
||||||
|
/* Carousel*/
|
||||||
|
#marmeladenLadencarousel .carousel-indicators li {
|
||||||
|
margin-top: -50px;
|
||||||
|
background-color: #d86f23;
|
||||||
|
}
|
||||||
|
#marmeladenLadencarousel .carousel-control-next i,
|
||||||
|
#marmeladenLadencarousel .carousel-control-prev i {
|
||||||
|
color: #d86f23 !important;
|
||||||
|
font-size: 2.8em !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Medium devices */
|
/* Medium devices */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
#main_nav_bar .navbar-nav {max-width: 450px;}
|
#main_nav_bar .navbar-nav {max-width: 450px;}
|
||||||
|
|||||||
BIN
res/img/berries.jpg
Normal file
BIN
res/img/berries.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
res/img/cottage.jpg
Normal file
BIN
res/img/cottage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
BIN
res/img/jam.jpg
Normal file
BIN
res/img/jam.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Reference in New Issue
Block a user