Skip to content

Commit b570bb1

Browse files
surhud004surhud004
authored
Merge pull request #24 from Aman-8955/main
add design
2 parents c18f2e4 + 161941d commit b570bb1

File tree

3 files changed

+302
-76
lines changed

3 files changed

+302
-76
lines changed

‎public/styles.css

+196-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,204 @@
1-
img {
2-
max-height: 70vh;
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
:root{
3+
--primary-color: rgb(47, 79, 79);
4+
--secondary-color: rgb(222, 184, 135);
35
}
4-
h1,
5-
li,
6-
span {
6+
* {
7+
margin: 0px;
8+
padding: 0px;
9+
}
10+
html,
11+
body {
12+
overflow-x: hidden;
13+
height: 100%;
14+
}
15+
body div {
716
font-family: 'Lobster', cursive;
817
}
18+
#imagebox {
19+
height: fit-content;
20+
width: fit-content;
21+
border-radius: 20px;
22+
padding: 10px;
23+
box-shadow:
24+
rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
25+
rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
26+
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
27+
background-color: var(--primary-color);
28+
}
29+
#imagebox img {
30+
outline: 2px solid rgba(0, 0, 0, 0.582);
31+
border-radius: 20px;
32+
width: 500px;
33+
height: 500px;
34+
}
35+
#nav {
36+
display: flex;
37+
align-items: center;
38+
justify-content: flex-start;
39+
font-size: 1.5rem;
40+
background-color: var(--primary-color);
41+
color: var(--secondary-color);
42+
padding: 15px 0px;
43+
}
44+
#nav img {
45+
width: 50px;
46+
height: 50px;
47+
border-radius: 50%;
48+
margin: 0px 10px 0px 25px;
49+
}
50+
#subhead {
51+
padding: 15px 0px 15px 30px;
52+
font-size: 1.2rem;
53+
outline: solid 1px white;
54+
box-shadow: inset 0px 3px 7px 1px rgba(0, 0, 0, 0.466);
55+
background-color: var(--secondary-color);
56+
color: var(--primary-color);
57+
}
58+
#mainbox {
59+
margin: 50px 30px 50px 30px;
60+
display: flex;
61+
flex-wrap: wrap;
62+
justify-content: center;
63+
gap: 40px;
64+
}
65+
#linksbox {
66+
font-family: 'Poppins', sans-serif;
67+
font-weight: 300;
68+
font-style: normal;
69+
color: #343a40;
70+
padding: 20px;
71+
box-shadow:
72+
rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
73+
rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
74+
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
75+
border-radius: 8px;
76+
width: 40%;
77+
background-color: var(--secondary-color);
78+
}
79+
#linksbox ul {
80+
list-style-type: none;
81+
display: flex;
82+
flex-wrap: wrap;
83+
justify-content: space-around;
84+
gap: 13px;
85+
margin-bottom: 30px;
86+
}
87+
88+
#linksbox ul li {
89+
background-color: #f1f1f1;
90+
border-radius: 6px;
91+
transition: all 0.3s ease;
92+
width: 40%;
93+
padding: 5px 10px 5px 15px;
94+
}
95+
96+
#linksbox ul li:hover {
97+
background-color: #e9ecef;
98+
}
99+
100+
#linksbox input.form-control {
101+
padding: 10px;
102+
width: 90%;
103+
margin: 10px 0;
104+
border: 2px solid #007bff;
105+
border-radius: 6px;
106+
font-size: 16px;
107+
color: #495057;
108+
overflow-x: scroll;
109+
}
110+
111+
#linksbox input.form-control:focus {
112+
outline: none;
113+
border-color: #0056b3;
114+
}
115+
116+
#linksbox span {
117+
font-size: 0.9rem;
118+
color: #6c757d;
119+
}
120+
121+
#linksbox a {
122+
color: #007bff;
123+
text-decoration: none;
124+
}
125+
126+
#linksbox a:hover {
127+
text-decoration: underline;
128+
}
129+
9130
.footer {
10-
position: relative;
11-
left: 0;
131+
background-color: var(--primary-color);
132+
color: var(--secondary-color);
133+
padding: 20px 0;
134+
text-align: center;
135+
font-family: 'Arial', sans-serif;
136+
position:relative;
12137
bottom: 0;
13138
width: 100%;
139+
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3);
140+
}
141+
142+
.footer p {
143+
margin: 0;
144+
font-size: 1.1rem;
145+
}
146+
147+
.footer a {
148+
color: #1abc9c;
149+
text-decoration: none;
150+
font-weight: bold;
151+
transition: color 0.3s ease;
152+
}
153+
154+
.footer a:hover {
155+
color: #16a085;
156+
}
157+
158+
.footer::before {
159+
content: '';
160+
display: block;
161+
width: 50px;
162+
height: 3px;
163+
background: #1abc9c;
164+
margin: 0 auto 10px;
165+
border-radius: 3px;
166+
}
167+
.errorbox {
168+
align-items: center;
169+
flex-direction: column;
170+
gap:10px !important;
171+
}
172+
.errorbox #linksbox {
173+
width: 90%;
174+
}
175+
h2{
14176
text-align: center;
15177
}
178+
/* media quaries */
179+
@media only screen and (max-width: 1060px) {
180+
#imagebox img {
181+
width: 400px;
182+
height: 400px;
183+
}
184+
}
185+
@media only screen and (max-width: 900px) {
186+
#imagebox img {
187+
width: 300px;
188+
height: 300px;
189+
}
190+
#linksbox ul li {
191+
width: 90%;
192+
}
193+
}
194+
@media only screen and (max-width: 720px) {
195+
#imagebox img {
196+
width: 80vw;
197+
}
198+
#linksbox {
199+
width: 90%;
200+
}
201+
#subhead{
202+
font-size: 1rem;
203+
}
204+
}

‎views/foodish.ejs

+58-41
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,75 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
4-
<title>Foodish</title>
5-
<!-- Logo -->
6-
<link rel="shortcut icon" href="/assets/logo.ico">
7-
<!-- Google Fonts -->
8-
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
9-
<!-- Bootstrap CSS -->
10-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
5+
<title>Foodish</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<!-- Logo -->
8+
<link rel="shortcut icon" href="/assets/logo.ico">
9+
<!-- Google Fonts -->
10+
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
1111
<!-- CSS -->
1212
<link rel="stylesheet" href="/assets/styles.css">
1313
</head>
14+
1415
<body>
15-
<div class="container">
16-
<h1><img src="/assets/logo.png" alt="logo" title="Samosa" height="60"/> Foodish</h1>
17-
<p class="lead">&#x1F372; Random pictures of food dishes. &#x1F35B;</p>
18-
<div class="row align-items-center">
19-
<div class="col">
16+
<div>
17+
<div id="nav">
18+
<img src="/assets/logo.png" alt="logo" title="Samosa" height="60" /> Foodish
19+
<br>
20+
</div>
21+
<p id="subhead">&#x1F372; Random pictures of food dishes. &#x1F35B;</p>
22+
<div id="mainbox">
23+
<div id="imagebox">
2024
<% if (food.image) { %>
21-
<img src="/images/<%= food.image %>" alt="foodish"/>
22-
<% } %>
25+
<img src="/images/<%= food.image %>" alt="foodish" />
26+
<% } %>
2327
</div>
24-
<div class="col">
28+
<div id="linksbox">
2529
<% if (food.foodDB) { %>
2630
<ul>
27-
<% food.foodDB.forEach((dish) => { %>
28-
<% if (dish.title === 'Total Foodishes') { %>
29-
<li><%= dish.title %> : <%= dish.count %></li>
30-
<% } else { %>
31-
<li><a href="https://foodish-api.com/images/<%= dish.title %>/"><%= dish.title %></a> : <%= dish.count %></li>
32-
<% } %>
33-
<% }) %>
31+
<% food.foodDB.forEach((dish)=> { %>
32+
<% if (dish.title==='Total Foodishes' ) { %>
33+
<li>
34+
<%= dish.title %> : <%= dish.count %>
35+
</li>
36+
<% } else { %>
37+
<li><a href="https://foodish-api.com/images/<%= dish.title %>/">
38+
<%= dish.title %>
39+
</a> : <%= dish.count %>
40+
</li>
41+
<% } %>
42+
<% }) %>
3443
</ul>
35-
<% } %>
36-
<% if (food.image) { %>
37-
<span>Share this foodish : </span>
38-
<input type="text" class="form-control" value="https://foodish-api.com/images/<%= food.image %>"/>
39-
<% } %>
40-
<br>
41-
<span>API available at : <a href="https://foodish-api.com/api/">https://foodish-api.com/api/</a></span>
42-
<br>
43-
<span>Read the Documentation at : <a href="https://github.com/surhud004/Foodish#readme">Foodish</a></span>
44-
<br>
45-
<br>
46-
<span>Try a Random Burger : <a href="https://foodish-api.com/images/burger/">https://foodish-api.com/images/burger/</a></span>
47-
<br>
48-
<span>Try an Unknown Foodish : <a href="https://foodish-api.com/images/somefoodish/">https://foodish-api.com/images/somefoodish/</a></span>
49-
</div>
44+
<% } %>
45+
<% if (food.image) { %>
46+
<span>Share this foodish : </span>
47+
<input type="text" class="form-control"
48+
value="https://foodish-api.com/images/<%= food.image %>" />
49+
<% } %>
50+
<br>
51+
<span>API available at : <a
52+
href="https://foodish-api.com/api/">https://foodish-api.com/api/</a></span>
53+
<br>
54+
<span>Read the Documentation at : <a
55+
href="https://github.com/surhud004/Foodish#readme">Foodish</a></span>
56+
<br>
57+
<br>
58+
<span>Try a Random Burger : <a
59+
href="https://foodish-api.com/images/burger/">https://foodish-api.com/images/burger/</a></span>
60+
<br>
61+
<span>Try an Unknown Foodish : <a
62+
href="https://foodish-api.com/images/somefoodish/">https://foodish-api.com/images/somefoodish/</a></span>
5063
</div>
5164
</div>
52-
<footer class="footer">
53-
<p class="lead">Designed and Coded by : <a href="https://github.com/surhud004">surhud004</a> &copy; 2020 - <%= new Date().getFullYear(); %></p>
54-
<!-- Build date : 10th October 2020 -->
55-
</footer>
5665
</div>
66+
</div>
67+
<footer class="footer">
68+
<p class="lead">Designed and Coded by : <a href="https://github.com/surhud004">surhud004</a> &copy; 2020 - <%=
69+
new Date().getFullYear(); %>
70+
</p>
71+
<!-- Build date : 10th October 2020 -->
72+
</footer>
5773
</body>
74+
5875
</html>

0 commit comments

Comments
 (0)