Question: Make the website fully responsive by editingthe HTML and CSS files.
I coded the website but i cant seem touse media queries correctly so that thewebsite is fully responsive for mobile and otherdevices.
About.html
<HTML>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Farm to Fork ABOUT</title>
<Script Language="JavaScript"></Script>
<Link Rel="stylesheet" Type="text/css"HRef="ExternalStyle2.css">
</head>
<body><EM>
<H1>ABOUT US</H1>
<center><img align="right" src="logo.png" vspace=2hspace=20></center>
<H5>Our Mission Statment: </H5>
<p>
At <b>Farm to Fork</b> we strive to provide a<b>"A Sustainable, Fine Dining Experience"</b> to everypatron
who walks through our doors.
We incorporate multiple methods to sustainabily source thenutrious meals we serve.
This includes parterning with local farmers and communitygardens, and growing our own seasonal vegitables.
We believe in the importance of supporting local food productionto reduce global emmisions.
</p>
<BR><BR>
<BR><BR>
<H5>More About the Movement: </H5>
<img align="bottom" src="vegTable.jpg" hspace=20 width="400"height="300">
<p>
Farm-to-table (or farm-to-fork) is a <ahref="https://en.wikipedia.org/wiki/Farm-to-table"><b>social
movement</b></a>
which promotes serving local food through direct acquisitionfrom the producers.
This can be accomplished through a direct salesrelationship,
a community-supported agriculture arrangement, a farmer'smarket,
a local distributor or by the restaurant raising its ownfood.
Farm-to-table often incorporates a form of food traceabilitywhere the origin of the food is identified to
consumers.
</p>
<p>
The farm-to-table movement has arisen with changes in attitudesabout food safety, food freshness, food
seasonality,
and small-farm economics. Advocates and practitioners of thefarm-to-table model frequently cite the
scarcity of fresh,
local ingredients; the poor flavor of ingredients shipped fromafar; the poor nutritional integrity of
shipped ingredients;
the disappearance of small family farms; the disappearance ofheirloom and open-pollinated fruits and
vegetables;
and the dangers of a highly centralized food growing anddistribution system as motivators for their
decision to adopted
a more locavore approach to the food system.
</p>
<H2>
<ahref="http://stu.cbu.edu/~nmutasa/Project2.html">HOME</a>
</H2>
<H4>A Sustainable, Fine Dining Experience.</H4>
</EM></body>
</HTML>
Contact.html
<HTML>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Farm to Fork CONTACT INFO</title>
<Script Language="JavaScript"></Script>
<Link Rel="stylesheet" Type="text/css"HRef="ExternalStyle2.css">
</head>
<body><EM>
<H1>CONTACT US</H1>
<center><img align="right" src="logo.png" vspace=5hspace=2></center>
<p>Location: 1922 Tuxedo St.</p>
<a name="fav">
<p>Hours of Operation:</p>
<table border width=400>
<tr>
<th width=70%>Days</th>
<th width=30%>Hours</th>
</tr>
<tr>
<td>MON-THUR</td>
<td>12pm - 6pm</td>
</tr>
<tr>
<td>FRI</td>
<td>12pm - 7pm</td>
</tr>
<tr>
<td>SAT</td>
<td>12pm - 9pm</td>
</tr>
<tr>
<td>SUN</td>
<td>Closed</td>
</tr>
</table>
<BR>
<BR>
<p>Email: <ahref="mailto:[email protected]">[email protected]</a></p>
<p>Phone: +1(404)-222-1922</p>
<P>Follow Us on Twitter and Facebook!</p>
<H2>
<ahref="http://stu.cbu.edu/~nmutasa/Project2.html">HOME</a>
</H2>
<H4>A Sustainable, Fine Dining Experience.</H4>
</EM></body>
</HTML>
ExternalStyle2.css
A:link {color: gray}
A:visited, A:active {color: green}
A:hover {text-decoration: overline; color: teal}
Body {
background-color: white;
font-family: cambria;
color: gray
}
H1 {font-size: 50pt; text-align: right}
H2 {font-size: 25pt; text-align: right}
H3 {font-size: 10pt; text-align: center}
H4 {text-align: center}
H5 {font-size: 15pt}
P {font-size: 10pt; font-family: monospace}
Table {
width: 400px;
font-family: monospace;
color: white;
background-color: green;
margin: .8em;
border-color: darkgreen
}
Form {
font-family: monospace;
text-align: center;
color: white;
background-color: green
}
Project2.html
<HTML>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Farm to Fork Homepage</title>
<Script Language="JavaScript"></Script>
<Link Rel="stylesheet" Type="text/css"HRef="ExternalStyle2.css">
</head>
<body><EM>
<H2>
<ahref="http://stu.cbu.edu/~nmutasa/Project2.html">HOME</a>
<a href="#res">RESERVATIONS</a>
<a href="#rev">REVIEWS</a>
<ahref="http://stu.cbu.edu/~nmutasa/About.html">ABOUT</a>
<ahref="http://stu.cbu.edu/~nmutasa/Contact.html">CONTACT</a>
</H2>
<center><img src="logo.png"vspace=5></center>
<H4>A Sustainable, Fine Dining Experience.</H4>
<BR><BR>
<BR><BR>
<BR><BR>
<BR><BR>
<BR><BR>
<a name="res">
<H2>RESERVATIONS</H2>
<H5>Book a Table!</H5>
<Form method="post"action="http://facstaff.cbu.edu/dbrandon/echo.php">
<BR><BR>
First and Last Name: <input type="text" size=40name="Name">
<BR><BR>
Date(ex. 05/25/20): <input type="text" size=20name="Date">
Time(ex. 09:30PM): <input type="text" size=20name="Time">
<BR><BR>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="reset">
<BR><BR>
</Form>
<BR>
<BR>
<BR>
<BR>
<a name="rev">
<H2>REVIEWS</H2>
<H4>"Do what you can to support local farmers!" -Sandy</H4>
<H4>"Learn how empowering it is to know where your foodcomes from!" - Tinashe</H4>
<H4>"Fight global warming, labor exploitation, fooddeserts, and so much more!"- Victor</H4>
<H4>"Buy and eat local!" - Koda</H4>
<BR>
<H5>Share your Farm to Fork Experience!</H5>
<Form method="post"action="http://facstaff.cbu.edu/dbrandon/echo.php">
<BR><BR>
First Name: <input type="text" size=20 name="Name">
Date of Visit: <input type="text" size=20name="Visit">
<BR><BR>
Comments: <input type="text" size=65 name="Review">
<BR><BR>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="reset">
<BR><BR>
</Form>
<H2>
<ahref="http://stu.cbu.edu/~nmutasa/Project2.html">HOME</a>
</H2>
<H4>A Sustainable, Fine Dining Experience.</H4>
</EM></body>
</HTML>
vegTable.jpg
FARM TO FORK
THIS
Question: Make the website fully responsive by editing the HTML and CSS files. I coded the website but i cant seem to us
-
- Site Admin
- Posts: 899603
- Joined: Mon Aug 02, 2021 8:13 am