Skip to content

Yana / WTB1920_team1

Go to a project
Commit b96c4c31 by Yana
Options

correct menu

parent 961eb73d
Inline Side-by-side
Showing with 52 additions and 26 deletions
application-bootstrap_lab/css/style.css
...@@ -8973,3 +8973,45 @@ textarea.form-control { ...@@ -8973,3 +8973,45 @@ textarea.form-control {
100% { 100% {
stroke-dasharray: 89, 200; stroke-dasharray: 89, 200;
stroke-dashoffset: -136px; } } stroke-dashoffset: -136px; } }
/*Menu*/
ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
}
ul li a {
position: relative;
display: block;
margin: 0 10px;
padding: 5px 10px;
color: #aaa;
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
overflow: hidden;
}
ul li a::before {
content: '';
position: absolute;
top: calc(50% - 2px);
left: -100%;
width: 100%;
height: 4px;
background: #586878;
transition: 0.4s;
}
ul li a:hover {
color: #CCCCCC;
}
ul li a:hover::before {
animation: animate .5s linear forwards;
}
application-bootstrap_lab/index.html
...@@ -37,15 +37,14 @@ ...@@ -37,15 +37,14 @@
</button> </button>
<div class="collapse navbar-collapse" id="ftco-nav"> <div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="" class="nav-link">About us</a></li> <li class="nav-item"><a href="#about" class="nav-link">About us</a></li>
<li class="nav-item"><a href="" class="nav-link">Log In </a></li> <li class="nav-item"><a href="#contacts" class="nav-link">Contacts</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
<!-- END nav --> <!-- END nav -->
<section class="home-slider owl-carousel img" style="background-image: url(images/bg_1.jpg);"> <section class="home-slider owl-carousel img" style="background-image: url(images/bg_1.jpg);">
<div class="slider-item" style="background-image: url(images/bg_3.jpg);"> <div class="slider-item" style="background-image: url(images/bg_3.jpg);">
<div class="overlay"></div> <div class="overlay"></div>
...@@ -56,7 +55,9 @@ ...@@ -56,7 +55,9 @@
<span class="subheading">Welcome</span> <span class="subheading">Welcome</span>
<h1 class="mb-4">We have many dishes for you.</h1> <h1 class="mb-4">We have many dishes for you.</h1>
<p class="mb-4 mb-md-5">Log in or register to place an order.</p> <p class="mb-4 mb-md-5">Log in or register to place an order.</p>
<p><a href="#" class="btn btn-primary p-3 px-xl-4 py-xl-3">Log in</a> <a href="#" class="btn btn-white btn-outline-white p-3 px-xl-4 py-xl-3">Sign up</a></p> <p><a href="#" class="btn btn-primary p-3 px-xl-4 py-xl-3">Log in</a>
<a href="#" class="btn btn-white btn-outline-white p-3 px-xl-4 py-xl-3">Sign up</a>
</p>
</div> </div>
</div> </div>
...@@ -131,18 +132,12 @@ ...@@ -131,18 +132,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="social d-md-flex pl-md-5 p-4 align-items-center">
<ul class="social-icon">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
</div>
</div> </div>
</div> </div>
</section> </section>
<section class="ftco-about d-md-flex"> <section id="about" class="ftco-about d-md-flex">
<div class="one-half img" style="background-image: url(images/about.jpg);"></div> <div class="one-half img" style="background-image: url(images/about.jpg);"></div>
<div class="one-half ftco-animate"> <div class="one-half ftco-animate">
<div class="heading-section ftco-animate "> <div class="heading-section ftco-animate ">
...@@ -387,18 +382,7 @@ ...@@ -387,18 +382,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-2 col-md-6 mb-5 mb-md-5"> <div id="contacts" class="col-lg-3 col-md-6 mb-5 mb-md-5">
<div class="ftco-footer-widget mb-4 ml-md-4">
<h2 class="ftco-heading-2">Services</h2>
<ul class="list-unstyled">
<li><a href="#" class="py-2 d-block">Cooked</a></li>
<li><a href="#" class="py-2 d-block">Deliver</a></li>
<li><a href="#" class="py-2 d-block">Quality Foods</a></li>
<li><a href="#" class="py-2 d-block">Mixed</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-5 mb-md-5">
<div class="ftco-footer-widget mb-4"> <div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Have a Questions?</h2> <h2 class="ftco-heading-2">Have a Questions?</h2>
<div class="block-23 mb-3"> <div class="block-23 mb-3">
...@@ -415,7 +399,7 @@ ...@@ -415,7 +399,7 @@
<div class="col-md-12 text-center"> <div class="col-md-12 text-center">
<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made by Max Akimov</a> Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made by Max Akimov
</p> </p>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment