Skip to content

Commit ac0c3ea

Browse files
coder12gitcoder12git
authored
Merge pull request #1 from coder12git/OriginBranch
Thanks for contributing
2 parents 36e32d4 + e9c8557 commit ac0c3ea

File tree

2 files changed

+152
-10
lines changed

2 files changed

+152
-10
lines changed

‎public/css/styles.css

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,135 @@
11
body * {
2+
3+
font-family: 'Montserrat', sans-serif;
4+
}
5+
.homeBody {
6+
min-height: 100svh;
7+
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://images.unsplash.com/photo-1573405618462-1a85b3ac7bac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80");
8+
background-repeat: no-repeat;
9+
background-size: cover;
10+
background-position: center 30%;
11+
background-attachment: fixed;
12+
}
13+
h3.homeTitle {
14+
color: white;
15+
font-size: 3rem;
16+
animation: slidein 1.5s;
17+
18+
}
19+
.optionsWrapper {
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: center;
23+
align-items: center;
24+
margin-top: 2em;
25+
gap: 150px;
26+
}
27+
.menuWrapper {
28+
display: flex;
29+
justify-content: space-around;
30+
width: 100%;
31+
gap: 100px;
32+
}
33+
.component {
34+
transition: .2s;
35+
height: 200px;
36+
width: 200px;
37+
border: 5px solid white;
38+
color: white;
39+
display: flex;
40+
align-items: flex-end;
41+
border-radius: 50px;
42+
z-index: 2;
43+
}
44+
.component:hover {
45+
transition: .2s;
46+
transform: scale(1.5);
47+
border-radius: 15px;
48+
.textBackground {
49+
border-bottom-left-radius: 12px;
50+
border-bottom-right-radius: 12px;
51+
}
52+
}
53+
.weeklyMenu {
54+
background-image: url("https://images.unsplash.com/photo-1536236397240-9b229a37a286?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
55+
background-position: center;
56+
background-size: cover;
57+
background-repeat: no-repeat;
58+
animation: weeklyMenuAnimation 1.2s;
59+
}
60+
.inFridge {
61+
background-image: url("https://images.unsplash.com/photo-1643494847705-74808059bf07?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=415&q=80");
62+
background-position: center;
63+
background-size: cover;
64+
background-repeat: no-repeat;
65+
animation: fridge 1.2s;
66+
}
67+
.somethingNew {
68+
background-image: url("https://images.unsplash.com/photo-1599508704512-2f19efd1e35f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80");
69+
background-position: center 80%;
70+
background-size: cover;
71+
background-repeat: no-repeat;
72+
animation: somethingNew 1.2s;
73+
}
74+
.textBackground {
75+
transition: .2s;
76+
background: rgba(0, 0, 0, 0.5);
77+
width: 100%;
78+
height: 50px;
79+
margin: 0;
80+
border-bottom-left-radius: 50px;
81+
border-bottom-right-radius: 50px;
82+
}
83+
.navShadow {
84+
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
85+
animation: moveup .5s;
86+
}
87+
88+
@keyframes moveup {
89+
0% {
90+
transform: translateY(-100px);
91+
}
92+
100% {
93+
transform: translateY(0);
94+
}
95+
96+
}
97+
98+
@keyframes weeklyMenuAnimation {
99+
0% {
100+
transform: translateX(-300px) translateY(500px);
101+
}
102+
100% {
103+
transform: translateX(0);
104+
}
105+
}
106+
@keyframes fridge {
107+
0% {
108+
transform: translateY(500px);
109+
}
110+
100% {
111+
transform: translateX(0);
112+
}
113+
}
114+
@keyframes somethingNew {
115+
0% {
116+
transform: translateX(300px) translateY(500px);
117+
}
118+
100% {
119+
transform: translateX(0);
120+
}
121+
}
122+
123+
@media only screen and (max-width: 450px) {
124+
.menuWrapper {
125+
display: flex;
126+
flex-direction: column;
127+
align-items: center;
128+
}
129+
.component {
130+
height: 300px;
131+
width: 300px;
132+
}
133+
=======
2134
font-family: "Montserrat", sans-serif;
3135
}

‎views/home.ejs

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1111
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
1212
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
13-
<link rel="stylesheet" href="/css/styles.css">
13+
<link rel="stylesheet" href="css\styles.css">
1414
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1515
</head>
16-
<body>
16+
<body class="homeBody">
1717

1818

1919
<!--nav-->
20-
<nav x-data="{show:false}" class="flex items-center justify-between flex-wrap bg-orange-600 p-6">
20+
<nav x-data="{show:false}" class="flex items-center justify-between flex-wrap bg-orange-600 p-6 navShadow">
2121
<div class="flex items-center flex-shrink-0 text-white mr-6">
2222
<span class="font-semibold text-xl tracking-tight">FoodMeets</span>
2323
</div>
@@ -37,6 +37,11 @@
3737
<!-- Row -->
3838
<div class="w-full xl:w-3/4 lg:w-11/12 flex">
3939
<!-- Col -->
40+
41+
<div class="w-full optionsWrapper">
42+
<h3 class="text-center homeTitle">Welcome - Let's plan some meals!</h3>
43+
<form class="menuWrapper">
44+
<a href="/inputWeekPlanMeals" class="weeklyMenu component">
4045
<div
4146
class="w-full h-auto bg-gray-400 hidden lg:block lg:w-5/12 bg-cover rounded-l-lg"
4247
style="background-image: url('/images/food.png')"
@@ -47,17 +52,22 @@
4752
<form class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
4853
<a href="/inputWeekPlanMeals">
4954
<button
50-
class="w-full px-4 py-2 font-bold text-white bg-yellow-500 rounded-full hover:bg-yellow-700 focus:outline-none focus:shadow-outline"
51-
type="button"> Create your weekly menu
55+
class="textBackground"
56+
type="button"> Create your weekly menu
5257
</button>
5358
</a>
54-
<br> <br>
55-
<a href="/inputIngredient">
59+
<a href="/inputIngredient" class="inFridge component">
5660
<button
57-
class="w-full px-4 py-2 font-bold text-white bg-indigo-500 rounded-full hover:bg-indigo-700 focus:outline-none focus:shadow-outline"
58-
type="button">What's in your fridge
61+
class="textBackground"
62+
type="button">What's in your fridge?
5963
</button>
6064
</a>
65+
<a href="/inputRandom" class="somethingNew component">
66+
<button
67+
class="textBackground"
68+
type="button">Try something new today
69+
</button>
70+
</a>
6171
<br> <br>
6272
<a href="/inputRandom">
6373
<button
@@ -81,4 +91,4 @@
8191
</div>
8292
</body>
8393
</body>
84-
</html>
94+
</html>

0 commit comments

Comments
 (0)