Skip to content

Commit

Permalink
done
Browse files Browse the repository at this point in the history
  • Loading branch information
@laurenma24-meet
laurenma24-meet committed Aug 2, 2023
1 parent 8773dea commit 2fcd5e6
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 12 deletions.
61 changes: 60 additions & 1 deletion case-study-skeleton/static/css/recipe.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,4 +98,63 @@ h1 {

.like-button.liked {
color: #ff0000;
}
}

/* Custom Navbar Styles */
.navbar {
display: flex; /* Display the navbar items in a row */
justify-content: space-between; /* Align the items at the ends of the navbar */
align-items: center; /* Vertically center the items in the navbar */
background-color: #edd328;
font-family: "Roboto-thin", sans-serif;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
padding: 10px 20px; /* Add some padding to the navbar */
}

.navbar-brand {
color: #000000;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}

.navbar-brand:hover {
color: #A0A0A0;
}

/* Style the navigation links */
.navbar-nav {
display: flex; /* Display the links in a row */
list-style: none;
margin: 0;
padding: 0;
}

.nav-item {
margin-left: 20px; /* Add some space between the links */
}

.nav-link {
color: #000000;
font-size: 16px;
text-decoration: none;
}

.nav-link:hover {
color: #A0A0A0;
}

/* Style the active link */
.nav-item.active .nav-link {
color: #A0A0A0;
}

#arrow-button {
position: fixed;
top: 20px;
right: 20px;
font-size: 24px;
cursor: pointer;
font-color: black;
}
2 changes: 2 additions & 0 deletions case-study-skeleton/templates/favorites.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
</script>
</head>
<body>
<a href="/search" id="arrow-button"><i class="fas fa-arrow-circle-right">Back </i></a>

<h1>Favorite recipes</h1>
{% if favorite_recipe is not none %}
<div class="recipe-container">
Expand Down
7 changes: 4 additions & 3 deletions case-study-skeleton/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,6 @@
margin-top: 10px;
}

/* Additional styles for the Explanation Section */
#explanation-section {
padding: 50px 0;
}
Expand All @@ -153,10 +152,10 @@
color: #A0A0A0;
}

/* Adjust the font color of the explanations */
#explanation-section p {
color: #000;
}




Expand Down Expand Up @@ -246,7 +245,8 @@ <h3>Our proccess</h3>
</div>
</div>
</section>

<hr>
<br><br>

<!-- Contact Us Section -->
<section id="contact-form-section">
Expand All @@ -260,6 +260,7 @@ <h3>Contact Us</h3>
</form>
</div>
</section>
<br><br><br>

<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
Expand Down
11 changes: 3 additions & 8 deletions case-study-skeleton/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@


}


.navbar-brand, .navbar-nav .nav-link {
color: #000000;
Expand Down Expand Up @@ -256,7 +257,7 @@ <h4>Ella</h4>
});
}

// Initial update
// Initial update important
updateSectionVisibility();
updateTeamVisibility();

Expand All @@ -265,13 +266,7 @@ <h4>Ella</h4>
updateSectionVisibility();
updateTeamVisibility();

// Animate the navbar on scroll
var scrolled = $(window).scrollTop();
if (scrolled > 50) {
$('.navbar').addClass('scrolled');
} else {
$('.navbar').removeClass('scrolled');
}

});
});
</script>
Expand Down
54 changes: 54 additions & 0 deletions case-study-skeleton/templates/recipe.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
<html>
<head>
<title>Recipes</title>

<link rel="stylesheet" type="text/css" href="../static/css/recipe.css">
<style type="text/css" >

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css');
</style>
<script type="text/javascript">
Expand All @@ -12,9 +14,57 @@
var form = icon.closest("form");
form.submit();
}

</script>
<style>
.navbar {
background-color: #edd328;
font-family: "Roboto-thin", sans-serif;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);


}


.navbar-brand, .navbar-nav .nav-link {
color: #000000;
}

.navbar-brand:hover, .navbar-nav .nav-link:hover {
color: #A0A0A0;
}

</style>
</head>
<body>

<!-- Bootstrap Navbar -->
<!-- <nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="/">
<img src="static/css/logo111.png" alt="Ukko/Celiac Logo" class="navbar-logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/home" data-scroll="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/chat" data-scroll="true">Chat Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/questions" data-scroll="true">Questions Page</a>
</li>
</ul>
</div>
</nav> -->
<a href="/home" id="arrow-button"><i class="fas fa-arrow-circle-right">Home </i></a>
<a href="/favorites">Favorites</a>
<h1>Recipes</h1>
{% if recipes is not none %}
<div class="recipe-container">
Expand Down Expand Up @@ -59,4 +109,8 @@ <h3>{{ recipe['label'] }}</h3>
<p>No recipes found for '{{ query }}'.</p>
{% endif %}
</body>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</html>

0 comments on commit 2fcd5e6

Please sign in to comment.