diff --git a/src/main/webapp/pages/index.jsp b/src/main/webapp/pages/index.jsp
index 2e3bb8b73ddee2a3f59ff208c7f0368309ef02cb..ac9743f88db35fbeb3fb939dfa2ecf899c6ce785 100644
--- a/src/main/webapp/pages/index.jsp
+++ b/src/main/webapp/pages/index.jsp
@@ -18,7 +18,8 @@
<%@include file='templates/header.jsp' %>
<!-- Header -->
-<header class="masthead" style="background-image: url('${pageContext.request.contextPath}/static/images/landing.jpg')">
+<header class="masthead"
+ style="background: url('${pageContext.request.contextPath}/static/images/landing.jpg')">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase white">Cinemas</h1>
@@ -45,20 +46,20 @@
</section>
<!-- Projects Section -->
-<section id="projects" class="projects-section bg-light">
+<section id="projects" class="projects-section pt-3 pb-3">
<div class="container">
<!-- Featured Project Row -->
- <div class="row align-items-center no-gutters mb-4 mb-lg-5">
+ <div class="row align-items-center no-gutters mb-4 mb-lg-5 landing-info-row">
<div class="col-xl-8 col-lg-7">
- <img class="img-fluid mb-3 mb-lg-0" src="img/bg-masthead.jpg" alt="">
+ <img class="img-fluid mb-3 mb-lg-0 landing-info-image pr-3"
+ src="${pageContext.request.contextPath}/static/images/landing_tickets.jpg" alt="">
</div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
- <h4>Shoreline</h4>
- <p class="text-black-50 mb-0">Grayscale is open source and MIT licensed. This means you can use it
- for any project - even commercial projects! Download it, customize it, and publish your
- website!</p>
+ <h4 class="text-white">Tickets management</h4>
+ <p class="text-white-50 mb-0">Manage your tickets with our self-hosted solution and make your
+ business profitable.</p>
</div>
</div>
</div>
@@ -66,16 +67,15 @@
<!-- Project One Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6">
- <img class="img-fluid" src="img/demo-image-01.jpg" alt="">
+ <img class="img-fluid landing-info-image pr-3"
+ src="${pageContext.request.contextPath}/static/images/landing_cinemas.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
- <h4 class="text-white">Misty</h4>
- <p class="mb-0 text-white-50">An example of where you can put an image of a project, or
- anything else, along with a description.</p>
- <hr class="d-none d-lg-block mb-0 ml-0">
+ <h4 class="text-white">Cinemas management</h4>
+ <p class="mb-0 text-white-50">Manage your remotely</p>
</div>
</div>
</div>
@@ -83,17 +83,18 @@
</div>
<!-- Project Two Row -->
- <div class="row justify-content-center no-gutters">
+ <div class="row justify-content-center hide-y no-gutters">
<div class="col-lg-6">
- <img class="img-fluid" src="img/demo-image-02.jpg" alt="">
+ <img class="pl-3 img-fluid landing-info-image"
+ src="${pageContext.request.contextPath}/static/images/landing_users.jpg" alt="">
</div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
- <h4 class="text-white">Mountains</h4>
- <p class="mb-0 text-white-50">Another example of a project with its respective description.
- These sections work well responsively as well, try this theme on a small screen!</p>
+ <h4 class="text-white">User management</h4>
+ <p class="mb-0 text-white-50">Another example of a project usage its user management. Our
+ tool provides you the best interface to add and delete and edit your customers.</p>
<hr class="d-none d-lg-block mb-0 mr-0">
</div>
</div>
@@ -104,28 +105,8 @@
</div>
</section>
-<!-- Signup Section -->
-<section id="signup" class="signup-section">
- <div class="container">
- <div class="row">
- <div class="col-md-10 col-lg-8 mx-auto text-center">
-
- <i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
- <h2 class="text-white mb-5">Subscribe to receive updates!</h2>
-
- <form class="form-inline d-flex">
- <input type="email" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputEmail"
- placeholder="Enter email address...">
- <button type="submit" class="btn btn-primary mx-auto">Subscribe</button>
- </form>
-
- </div>
- </div>
- </div>
-</section>
-
<!-- Contact Section -->
-<section class="contact-section bg-black">
+<section class="contact-section mt-3 bg-black">
<div class="container">
<div class="row">
@@ -136,7 +117,7 @@
<i class="fas fa-map-marked-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Address</h4>
<hr class="my-4">
- <div class="small text-black-50">4923 Market Street, Orlando FL</div>
+ <div class="small text-black-50">SSAU, Samara</div>
</div>
</div>
</div>
@@ -145,10 +126,11 @@
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-envelope text-primary mb-2"></i>
- <h4 class="text-uppercase m-0">Email</h4>
+ <h4 class="text-uppercase m-0">Emails</h4>
<hr class="my-4">
- <div class="small text-black-50">
- <a href="#">hello@yourdomain.com</a>
+ <div class="small text-black-50 d-flex flex-column">
+ <a href="mailto:groundhog448@gmail.com">groundhog448@gmail.com</a>
+ <a href="mailto:win10@list.ru">win10@list.ru</a>
</div>
</div>
</div>
@@ -158,23 +140,26 @@
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-mobile-alt text-primary mb-2"></i>
- <h4 class="text-uppercase m-0">Phone</h4>
+ <h4 class="text-uppercase m-0">Phones</h4>
<hr class="my-4">
- <div class="small text-black-50">+1 (555) 902-8832</div>
+ <div class="small text-black-50 d-flex flex-column">
+ <div class="small text-black-50">+7 (963) 914-52-75</div>
+ <div class="small text-black-50">+7 (999) 171-60-67</div>
+ </div>
</div>
</div>
</div>
</div>
- <div class="social d-flex justify-content-center">
- <a href="#" class="mx-2">
- <i class="fab fa-twitter"></i>
+ <div class="social d-flex mt-3 justify-content-center">
+ <a href="https://github.com/wierd-stuff-inc/" class="mx-2">
+ <i class="fab fa-github"></i>
</a>
<a href="#" class="mx-2">
- <i class="fab fa-facebook-f"></i>
+ <i class="fab fa-vk"></i>
</a>
- <a href="#" class="mx-2">
- <i class="fab fa-github"></i>
+ <a href="https://gitlab.le-memese.com/s3rius/corporative_systems" class="mx-2">
+ <i class="fab fa-gitlab"></i>
</a>
</div>
@@ -182,9 +167,9 @@
</section>
<!-- Footer -->
-<footer class="bg-black small text-center text-white-50">
+<footer class="bg-black small text-center text-black-50">
<div class="container">
- Copyright © Your Website 2019
+ Copyright © le-memese 2019
</div>
</footer>
</body>
diff --git a/src/main/webapp/static/css/index.css b/src/main/webapp/static/css/index.css
index 8aa8d976beb64b07acd9d52b9331169223ccb526..0d8791aa278c2eebbf7a3f654016ea9d3fecbd08 100644
--- a/src/main/webapp/static/css/index.css
+++ b/src/main/webapp/static/css/index.css
@@ -1 +1 @@
-.masthead{object-fit:cover;text-align:center;background-repeat:no-repeat;background-attachment:fixed;background-position:center}.masthead .white{color:#fff}.about-section{background:#000;background:-webkit-linear-gradient(to right, #434343, #000000);background:linear-gradient(to right, #434343, #000000)}/*# sourceMappingURL=index.css.map */
+.projects-section{padding:10rem 0;background:linear-gradient(to top, #161616 0%, rgba(22, 22, 22, 0.9) 75%, rgba(22, 22, 22, 0.8) 100%)}.projects-section .featured-text{padding:2rem}@media(min-width: 992px){.projects-section .featured-text{padding:0 0 0 2rem;border-left:.5rem solid #64a19d}}.projects-section .project-text{padding:3rem;font-size:90%}@media(min-width: 992px){.projects-section .project-text{padding:5rem}.projects-section .project-text hr{border-color:#64a19d;border-width:.25rem;width:30%}}.masthead{object-fit:cover !important;text-align:center !important;background-repeat:no-repeat !important;background-attachment:fixed !important;background-position:center !important}.masthead .white{color:#fff}.hide-y{overflow-y:hidden}.landing-info-row{height:100px}.landing-info-row .landing-info-image{height:100px;object-fit:cover;width:100%;text-align:center;background-repeat:no-repeat;background-attachment:fixed;background-position:center}.masthead{position:relative;width:100%;height:auto;min-height:35rem;padding:15rem 0;background-position:center;background-repeat:no-repeat;background-attachment:scroll;background-size:cover}.masthead h1{font-family:"Varela Round";font-size:2.5rem;line-height:2.5rem;letter-spacing:.8rem;background:-webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.masthead h2{max-width:20rem;font-size:1rem}@media(min-width: 768px){.masthead h1{font-size:4rem;line-height:4rem}}@media(min-width: 992px){.masthead{height:100vh;padding:0}.masthead h1{font-size:6.5rem;line-height:6.5rem;letter-spacing:.8rem}.masthead h2{max-width:30rem;font-size:1.25rem}}.contact-section{padding:5rem 0 0}.contact-section .card{border:0;border-bottom:.25rem solid #64a19d}.contact-section .card h4{font-size:.8rem;font-family:"Varela Round";text-transform:uppercase;letter-spacing:.15rem}.contact-section .card hr{border-color:#64a19d;border-width:.25rem;width:3rem}.contact-section .social{margin-top:5rem}.contact-section .social a{text-align:center;height:3rem;width:3rem;background:rgba(255,255,255,.1);border-radius:100%;line-height:3rem;color:rgba(255,255,255,.3)}.contact-section .social a:hover{color:rgba(255,255,255,.5)}.contact-section .social a:active{color:#fff}.btn{box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,.1) !important;padding:1.25rem 2rem;font-family:"Varela Round";font-size:80%;text-transform:uppercase;letter-spacing:.15rem;border:0}.btn-primary{background-color:#64a19d}.btn-primary:hover{background-color:#4f837f}.btn-primary:focus{background-color:#4f837f;color:#fff}.btn-primary:active{background-color:#467370 !important}.about-section{padding-top:10rem;background:linear-gradient(to bottom, #161616 0%, rgba(22, 22, 22, 0.9) 75%, rgba(22, 22, 22, 0.8) 100%)}.about-section p{margin-bottom:5rem}/*# sourceMappingURL=index.css.map */
diff --git a/src/main/webapp/static/css/index.css.map b/src/main/webapp/static/css/index.css.map
index 686c1b87784726d2f5a03f21cca00c2c481fab06..f94fd252f1eb925e65c4561e0e865d903de7cdd3 100644
--- a/src/main/webapp/static/css/index.css.map
+++ b/src/main/webapp/static/css/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/index.scss"],"names":[],"mappings":"AAAA,UACE,iBACA,kBACA,4BACA,4BACA,2BAEA,iBACE,WAIJ,eACE,gBACA,+DACA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/index.scss","../scss/_variables.scss"],"names":[],"mappings":"AAEA,kBACE,gBACA,sGAEA,iCACE,aACA,yBAFF,iCAGI,mBACA,iCAIJ,gCACE,aACA,cACA,yBAHF,gCAII,aACA,mCACE,aCRE,QDSF,oBACA,WAOR,UACE,4BACA,6BACA,uCACA,uCACA,sCAEA,iBACE,WAKJ,QACE,kBAGF,kBACE,aAEA,sCACE,aACA,iBACA,WACA,kBACA,4BACA,4BACA,2BAIJ,UACE,kBACA,WACA,YACA,iBACA,gBACA,2BACA,4BACA,6BACA,sBAEA,aACE,2BACA,iBACA,mBACA,qBACA,qFACA,oCACA,6BAGF,aACE,gBACA,eAGF,yBACE,aACE,eACA,kBAGJ,yBAhCF,UAiCI,aACA,UACA,aACE,iBACA,mBACA,qBAEF,aACE,gBACA,mBAKN,iBACE,iBAEA,uBACE,SACA,mCAEA,0BACE,gBACA,2BACA,yBACA,sBAGF,0BACE,aC9GI,QD+GJ,oBACA,WAIJ,yBACE,gBAEA,2BACE,kBACA,YACA,WACA,gCACA,mBACA,iBACA,2BAEA,iCACE,2BAGF,kCACE,MCjJA,KDuJR,KACE,2DACA,qBACA,2BACA,cACA,yBACA,sBACA,SAGF,aACE,iBCtJQ,QDwJR,mBACE,yBAGF,mBACE,yBACA,WAGF,oBACE,oCAIJ,eACE,kBACA,yGAEA,iBACE","file":"index.css"}
\ No newline at end of file
diff --git a/src/main/webapp/static/css/project.css.map b/src/main/webapp/static/css/project.css.map
index ab20d84c4469553a38897f41885772114768bf8d..b4665442b20afdd832dd89f69900cc05752c4555 100644
--- a/src/main/webapp/static/css/project.css.map
+++ b/src/main/webapp/static/css/project.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/project.scss"],"names":[],"mappings":"AAAA,sBACE,2BAEA,oCAME,WALA,0CACE,0BACA,WAOF,2CACE,yBAIJ,6BACE,WAIF,gCAME,sBALA,sCACE,0BACA,WAON,iBACE,mBACA,+DACA,uDAGF,OACE,eACA,WACA,YACA,YACA,WACA,sBACA,WACA,mBACA,kBACA,4BAEA,iBACE","file":"project.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/project.scss"],"names":[],"mappings":"AAEA,sBACE,2BAEA,oCAME,WALA,0CACE,0BACA,WAOF,2CACE,yBAIJ,6BACE,WAIF,gCAME,sBALA,sCACE,0BACA,WAON,iBACE,mBACA,+DACA,uDAGF,OACE,eACA,WACA,YACA,YACA,WACA,sBACA,WACA,mBACA,kBACA,4BAEA,iBACE","file":"project.css"}
\ No newline at end of file
diff --git a/src/main/webapp/static/images/landing_cinemas.jpg b/src/main/webapp/static/images/landing_cinemas.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..da4931c88e9792fa6b2578eabd81e668d425ab77
Binary files /dev/null and b/src/main/webapp/static/images/landing_cinemas.jpg differ
diff --git a/src/main/webapp/static/images/landing_tickets.jpg b/src/main/webapp/static/images/landing_tickets.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..de1f96657576288503118fe1b131053fe1e82ac8
Binary files /dev/null and b/src/main/webapp/static/images/landing_tickets.jpg differ
diff --git a/src/main/webapp/static/images/landing_users.jpg b/src/main/webapp/static/images/landing_users.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..41965daeb623f199954ca0f3cff199f149683bd8
Binary files /dev/null and b/src/main/webapp/static/images/landing_users.jpg differ
diff --git a/src/main/webapp/static/scss/_variables.scss b/src/main/webapp/static/scss/_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6ee072fff0e16e9d3a06b9467f57128e57feb51b
--- /dev/null
+++ b/src/main/webapp/static/scss/_variables.scss
@@ -0,0 +1,13 @@
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #161616 !default;
+
+$primary: #64a19d !default;
diff --git a/src/main/webapp/static/scss/index.scss b/src/main/webapp/static/scss/index.scss
index 4cf7e53b16592b386e1f3c69dc7b9b56b72d7f23..3e5d20116f7c568be6ec380feb282823fbf17cc8 100644
--- a/src/main/webapp/static/scss/index.scss
+++ b/src/main/webapp/static/scss/index.scss
@@ -1,17 +1,186 @@
+@import "variables";
+
+.projects-section {
+ padding: 10rem 0;
+ background: linear-gradient(to top, $black 0%, #{fade-out($black, .1)} 75%, #{fade-out($black, .2)} 100%);
+
+ .featured-text {
+ padding: 2rem;
+ @media (min-width: 992px) {
+ padding: 0 0 0 2rem;
+ border-left: 0.5rem solid $primary;
+ }
+ }
+
+ .project-text {
+ padding: 3rem;
+ font-size: 90%;
+ @media (min-width: 992px) {
+ padding: 5rem;
+ hr {
+ border-color: $primary;
+ border-width: .25rem;
+ width: 30%;
+ }
+ }
+ }
+}
+
+
.masthead {
- object-fit: cover;
- text-align: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
+ object-fit: cover !important;
+ text-align: center !important;
+ background-repeat: no-repeat !important;
+ background-attachment: fixed !important;
+ background-position: center !important;
+
+ .white {
+ color: white;
+ }
+}
+
+
+.hide-y {
+ overflow-y: hidden;
+}
+
+.landing-info-row {
+ height: 100px;
+
+ .landing-info-image {
+ height: 100px;
+ object-fit: cover;
+ width: 100%;
+ text-align: center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-position: center;
+ }
+}
+
+.masthead {
+ position: relative;
+ width: 100%;
+ height: auto;
+ min-height: 35rem;
+ padding: 15rem 0;
background-position: center;
+ background-repeat: no-repeat;
+ background-attachment: scroll;
+ background-size: cover;
+
+ h1 {
+ font-family: 'Varela Round';
+ font-size: 2.5rem;
+ line-height: 2.5rem;
+ letter-spacing: 0.8rem;
+ background: -webkit-linear-gradient(fade-out(white, 0.1), fade-out(white, 1));
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ }
+
+ h2 {
+ max-width: 20rem;
+ font-size: 1rem;
+ }
+
+ @media(min-width: 768px) {
+ h1 {
+ font-size: 4rem;
+ line-height: 4rem;
+ }
+ }
+ @media(min-width: 992px) {
+ height: 100vh;
+ padding: 0;
+ h1 {
+ font-size: 6.5rem;
+ line-height: 6.5rem;
+ letter-spacing: 0.8rem;
+ }
+ h2 {
+ max-width: 30rem;
+ font-size: 1.25rem;
+ }
+ }
+}
+
+.contact-section {
+ padding: 5rem 0 0;
+
+ .card {
+ border: 0;
+ border-bottom: 0.25rem solid $primary;
+
+ h4 {
+ font-size: 0.8rem;
+ font-family: 'Varela Round';
+ text-transform: uppercase;
+ letter-spacing: 0.15rem;
+ }
+
+ hr {
+ border-color: $primary;
+ border-width: 0.25rem;
+ width: 3rem;
+ }
+ }
+
+ .social {
+ margin-top: 5rem;
+
+ a {
+ text-align: center;
+ height: 3rem;
+ width: 3rem;
+ background: fade-out($white, 0.9);
+ border-radius: 100%;
+ line-height: 3rem;
+ color: fade-out($white, 0.7);
+
+ &:hover {
+ color: fade-out($white, 0.5);
+ }
- .white{
+ &:active {
+ color: $white;
+ }
+ }
+ }
+}
+
+.btn {
+ box-shadow: 0 .1875rem .1875rem 0 rgba(0, 0, 0, .1) !important;
+ padding: 1.25rem 2rem;
+ font-family: 'Varela Round';
+ font-size: 80%;
+ text-transform: uppercase;
+ letter-spacing: .15rem;
+ border: 0;
+}
+
+.btn-primary {
+ background-color: $primary;
+
+ &:hover {
+ background-color: darken($primary, 10%);
+ }
+
+ &:focus {
+ background-color: darken($primary, 10%);
color: white;
}
+
+ &:active {
+ background-color: darken($primary, 15%) !important;
+ }
}
-.about-section{
- background: #000000; /* fallback for old browsers */
- background: -webkit-linear-gradient(to right, #434343, #000000); /* Chrome 10-25, Safari 5.1-6 */
- background: linear-gradient(to right, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-}
\ No newline at end of file
+.about-section {
+ padding-top: 10rem;
+ background: linear-gradient(to bottom, $black 0%, #{fade-out($black, .1)} 75%, #{fade-out($black, .2)} 100%);
+
+ p {
+ margin-bottom: 5rem;
+ }
+}
diff --git a/src/main/webapp/static/scss/project.scss b/src/main/webapp/static/scss/project.scss
index ebd8940edbf30f0ac52074062a1cbd7eb7a8f39a..bfef83b382253a298478dc343c386360fa85d62f 100644
--- a/src/main/webapp/static/scss/project.scss
+++ b/src/main/webapp/static/scss/project.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
.mainNavigationHeader {
background-color: #5a5a5a95;
@@ -11,7 +13,7 @@
}
.dropdown-item {
- &:hover{
+ &:hover {
background-color: #b7c1cc;
}
}