Skip to content

Commit

Permalink
fix links
Browse files Browse the repository at this point in the history
  • Loading branch information
@revovich
revovich committed Feb 8, 2020
1 parent f88c1be commit be03be3
Show file tree
Hide file tree
Showing 3 changed files with 770 additions and 288 deletions.
134 changes: 129 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,19 @@
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Menu</a>
<a href="#menu" class="nav-link">Menu</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Reservation</a>
<a href="#reserve" class="nav-link">Reservation</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">News</a>
<a href="#news" class="nav-link">News</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Shop</a>
<a href="#shop" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</nav>
Expand Down Expand Up @@ -87,6 +87,130 @@ <h1 class="headline headline-dark">Our Story</h1>
</div>
</section>
<!-- Diccover our story ends -->
<section class="tasteful-recipes between">
<div class="container">
<div class="global-headline">
<div class="animate-top">
<h2 class="sub-headline">
<span class="first-letter">T</span>asteful
</h2>
</div>
<div class="animate-bottom">
<h1 class="headline">Recipes</h1>
</div>
</div>
</div>
</section>
<!-- tasteful recipes ends -->
<section class="discover-our-menu" id="menu">
<div class="container">
<div class="restaurant-info">
<div class="image-group padding-right animate-left">
<img src="images/menu-group-1.jpg" alt="">
<img src="images/menu-group-2.jpg" alt="">
<img src="images/menu-group-3.jpg" alt="">
<img src="images/menu-group-4.jpg" alt="">
</div>
<div class="restaurant-description animate-right">
<div class="global-headline">
<h2 class="sub-headline">
<span class="first-letter">D</span>iscover
</h2>
<h1 class="headline headline-dark">Menu</h1>
<div class="asterisk"><i class="fas fa-asterisk"></i></div>
</div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum explicabo dolorum quia, illo et consequatur iusto nisi quisquam aliquam? Rerum velit doloremque cumque numquam odit deserunt totam unde nihil quibusdam?
</p>
<a href="#" class="btn body-btn">View the full menu</a>
</div>
</div>
</div>
</section>
<!-- Discover menu ends -->
<section class="perfect-blend between">
<div class="container">
<div class="global-headline">
<div class="animate-top">
<h2 class="sub-headline">
<span class="first-letter">T</span>he perfect
</h2>
</div>
<div class="animate-bottom">
<h1 class="headline">Blend</h1>
</div>
</div>
</div>
</section>
<!-- Perfect blend ends -->
<section class="culinary-delight">
<div class="container">
<div class="restaurant-info">
<div class="restaurant-description padding-right animate-left">
<div class="global-headline">
<h2 class="sub-headline">
<span class="first-letter">C</span>ulinary
</h2>
<h1 class="headline headline-dark">Delight</h1>
<div class="asterisk"><i class="fas fa-asterisk"></i></div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis atque vitae quod doloribus repellat minus consectetur officia incidunt assumenda itaque asperiores, a dolores consequuntur at distinctio obcaecati dolore praesentium repudiandae?</p>
<a href="#" class="btn body-btn">Make a reservation</a>
</div>
<div class="image-group">
<img class="animate-top" src="images/delight-group-1.jpg" alt="">
<img class="animate-bottom" src="images/delight-group-2.jpg" alt="">
</div>
</div>
</div>
</section>
<!-- Culinary delight ends -->
<footer>
<div class="container">
<div class="back-to-top">
<a href="#hero"><i class="fas fa-chevron-up"></i></a>
</div>
<div class="footer-content">
<div class="footer-content-about animate-top">
<h4>About Rosa</h4>
<div class="asterisk"><i class="fas fa-asterisk"></i></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad cum delectus aperiam fugit nobis est fuga? Porro in dicta repellendus, laborum, quasi quas cumque facilis illo maiores accusantium corporis harum.
</p>
</div>
<div class="footer-content-divider animate-bottom">
<div class="social-media">
<h4>Follow along</h4>
<ul class="social-icons">
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-facebook-square"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-pinterest"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-tripadvisor"></i></a>
</li>
</ul>
</div>
<div class="newsletter-container">
<h4>Newsletter</h4>
<form action="" class="newsletter-form">
<input type="text" class="newletter-input" placeholder="Your email address...">
<button class="newsletter-btn" type="submit">
<i class="fas fa-envelope"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</footer>
<script src="main.js"></script>
</body>

Expand Down
31 changes: 31 additions & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,35 @@ let body = selectElement('body');

menuToggler.addEventListener('click', function() {
body.classList.toggle('open');
});

//Scroll reveal
window.sr = ScrollReveal();

sr.reveal('.animate-left', {
origin: 'left',
duration: 1000,
distance: '25rem',
delay: 300
});

sr.reveal('.animate-right', {
origin: 'right',
duration: 1000,
distance: '25rem',
delay: 600
});

sr.reveal('.animate-top', {
origin: 'top',
duration: 1000,
distance: '25rem',
delay: 600
});

sr.reveal('.animate-bottom', {
origin: 'bottom',
duration: 1000,
distance: '25rem',
delay: 600
});
Loading

0 comments on commit be03be3

Please sign in to comment.