arch/bootstrap4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Assingment 4

Browse Source
This commit is contained in:
QkoSad
2022-10-17 19:33:39 +03:00
parent 624751cdb2
commit a8c3c8a705
3 changed files with 104 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+41 -28
View File
@@ -1,54 +1,67 @@
.row-header { .row-header {
margin: 0px auto; margin: 0px auto;
padding: 0px 0px; } padding: 0px 0px;
}
.row-content { .row-content {
margin: 0px auto; margin: 0px auto;
padding: 50px 0px; padding: 50px 0px;
border-bottom: 1px ridge; border-bottom: 1px ridge;
min-height: 400px; } min-height: 400px;
}
.footer { .footer {
background-color: #D1C4E9; background-color: #d1c4e9;
margin: 0px auto; margin: 0px auto;
padding: 20px 0px; } padding: 20px 0px;
}
.jumbotron { .jumbotron {
margin: 0px auto; margin: 0px auto;
padding: 70px 30px; padding: 70px 30px;
background: #9575CD; background: #9575cd;
color: floralwhite; } color: floralwhite;
}
address { address {
font-size: 80%; font-size: 80%;
margin: 0px; margin: 0px;
color: #0f0f0f; } color: #0f0f0f;
}
body { body {
padding: 50px 0px 0px 0px; padding: 50px 0px 0px 0px;
z-index: 0; } z-index: 0;
}
.navbar-dark { .navbar-dark {
background-color: #512DA8; } background-color: #512da8;
}
.tab-content { .tab-content {
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
padding: 10px; } padding: 10px;
}
.carousel { .carousel {
background: #512DA8; } background: #512da8;
.carousel .carousel-item { }
height: 300px; } .carousel .carousel-item {
.carousel .carousel-item img { height: 300px;
position: absolute; }
top: 0; .carousel .carousel-item img {
left: 0; position: absolute;
min-height: 300px; } top: 0;
left: 0;
min-height: 300px;
}
#carouselButton { #carouselButton {
right: 0px; right: 0px;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
z-index: 1; } z-index: 1;
}
.modal .modal-header {
background: #512da8;
color: floralwhite;
}
.modal .modal-body {
background: #d1c4e9;
}
.modal .close {
color: #d1c4e9;
}
css/styles.less
+53 -41
View File
@@ -1,73 +1,85 @@
@lt-gray: #ddd; @lt-gray: #ddd;
@background-dark: #512DA8; @background-dark: #512da8;
@background-light: #9575CD; @background-light: #9575cd;
@background-pale: #D1C4E9; @background-pale: #d1c4e9;
// Height variables // Height variables
@carousel-item-height: 300px; @carousel-item-height: 300px;
.zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) { .zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) {
margin:0px auto; margin: 0px auto;
padding: @pad-up-dn @pad-left-right; padding: @pad-up-dn @pad-left-right;
} }
.row-header{ .row-header {
.zero-margin(); .zero-margin();
} }
.row-content { .row-content {
.zero-margin(50px,0px); .zero-margin(50px,0px);
border-bottom: 1px ridge; border-bottom: 1px ridge;
min-height:400px; min-height: 400px;
} }
.footer{ .footer {
background-color: @background-pale; background-color: @background-pale;
.zero-margin(20px, 0px); .zero-margin(20px, 0px);
} }
.jumbotron { .jumbotron {
.zero-margin(70px,30px); .zero-margin(70px,30px);
background: @background-light ; background: @background-light;
color:floralwhite; color: floralwhite;
} }
address{ address {
font-size:80%; font-size: 80%;
margin:0px; margin: 0px;
color:#0f0f0f; color: #0f0f0f;
} }
body{ body {
padding:50px 0px 0px 0px; padding: 50px 0px 0px 0px;
z-index:0; z-index: 0;
} }
.navbar-dark { .navbar-dark {
background-color: @background-dark; background-color: @background-dark;
} }
.tab-content { .tab-content {
border-left: 1px solid @lt-gray; border-left: 1px solid @lt-gray;
border-right: 1px solid @lt-gray; border-right: 1px solid @lt-gray;
border-bottom: 1px solid @lt-gray; border-bottom: 1px solid @lt-gray;
padding: 10px; padding: 10px;
} }
.carousel { .carousel {
background:@background-dark; background: @background-dark;
.carousel-item { .carousel-item {
height: @carousel-item-height; height: @carousel-item-height;
img { img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
min-height: 300px; min-height: 300px;
}
} }
}
} }
#carouselButton { #carouselButton {
right:0px; right: 0px;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
z-index: 1; z-index: 1;
}
.modal {
.modal-header {
background: @background-dark;
color: floralwhite;
}
.modal-body {
background: @background-pale;
}
.close {
color : @background-pale;
}
} }
index.html
+9 -4
View File
@@ -64,7 +64,7 @@
</li> </li>
</ul> </ul>
<span class="navbar-text"> <span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal"> <a data-toggle="modal" id="loginButton">
<span class="fa fa-sign-in"></span> Login</a <span class="fa fa-sign-in"></span> Login</a
> >
</span> </span>
@@ -234,11 +234,10 @@
</div> </div>
<div class="col-8 col-sm-3 align-self-center"> <div class="col-8 col-sm-3 align-self-center">
<a <a
id="reserveButton"
role="button" role="button"
class="btn btn-block btn-warning" class="btn btn-block btn-warning"
data-toggle="modal" ><span style="color: #ffffa0">Reserve Table</span></a
data-target="#reservationModal"
>Reserve Table</a
> >
</div> </div>
</div> </div>
@@ -493,6 +492,12 @@
$("#carouselButton").children("span").addClass("fa-pause"); $("#carouselButton").children("span").addClass("fa-pause");
} }
}); });
$("#reserveButton").click(function () {
$("#reservationModal").modal("show");
});
$("#loginButton").click(function () {
$("#loginModal").modal("show");
});
</script> </script>
</body> </body>
</html> </html>