Skip to content
Snippets Groups Projects
Commit b85077ea authored by joo's avatar joo
Browse files

added/updated html and css

parent c1f40437
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
about.html 0 → 100644
+ 36
− 0
View file @ b85077ea
<!-- contact us -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lettuce Eat</title>
<link rel="stylesheet" href="/style.css" />
<script src="/script.js" defer></script>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a href="/index.html">Lettuce Eat</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/add-restaurant.html">Add Restaurant</a></li>
</ul>
</nav>
</header>
<!-- <div class="navbar">
<a class="nav-home" href="/index.html">Lettuce Eat</a>
<a href="/about.html">About</a>
<a href="/add-restaurant.html">Add Restaurant</a>
</div> -->
<footer class="footer">
<p>
Contact Us
</p>
</footer>
</body>
</html>
add-restaurant.html 0 → 100644
+ 34
− 0
View file @ b85077ea
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lettuce Eat</title>
<link rel="stylesheet" href="/style.css" />
<script src="/script.js" defer></script>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a href="/index.html">Lettuce Eat</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/add-restaurant.html">Add Restaurant</a></li>
</ul>
</nav>
</header>
<!-- <div class="navbar">
<a class="nav-home" href="/index.html">Lettuce Eat</a>
<a href="/about.html">About</a>
<a href="/add-restaurant.html">Add Restaurant</a>
</div> -->
<footer class="footer">
<p>
Contact Us
</p>
</footer>
</body>
</html>
index.html
+ 84
− 4
View file @ b85077ea
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Lettuce Eat</title>
<link rel="stylesheet" href="/style.css" />
<script src="/script.js" defer></script>
</head>
<body>
Hello world
<header>
<nav>
<ul class="nav-links">
<li><a href="/index.html">Lettuce Eat</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/add-restaurant.html">Add Restaurant</a></li>
</ul>
</nav>
</header>
<div class="customize">
<h1 class="build-your-own">
Build Your Own Diet
</h1>
<p>
instruction...
</p>
<!-- accessible checkboxes for restrictions -- vegan, vegetarian, celiac -->
<!-- id and for are to allow users to click on the text (not just the checkbox) to check/undo -->
<!-- resource: https://www.a11ymatters.com/pattern/checkbox/ -->
<fieldset class="checkbox-group">
<legend>Select all your dietary restrictions</legend>
<span class="checkboxes">
<div class="c-group_item">
<input id="c1" type="checkbox">
<label for="c1">vegan</label>
</div>
<div class="c-group_item">
<input id="c2" type="checkbox">
<label for="c2">vegetarian</label>
</div>
<div class="c-group_item">
<input id="c3" type="checkbox">
<label for="c3">celiac</label>
</div>
</span>
</fieldset>
<!-- text box -->
<!-- section -- results ->search bar -->
<div class="restaurants">
<!-- searchbox -->
<!-- resource: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role -->
<form role="search">
<input type="search" role="searchbox" aria-description="search resuls will appear below"
id="search" value="" />
<label for="search">Search Restaurant</label>
<button>Search</button>
</form>
<div aria-live="polite" role="region" aria-atomic="true">
<div class="sr-only">
</div>
</div>
<div id="search-results">
<!-- each entry - name, labels, link to directions, below: information (menu) -->
</div>
</div>
</div>
<footer class="footer">
<p>
Contact Us
</p>
</footer>
</body>
</html>
\ No newline at end of file
style.css
+ 63
− 3
View file @ b85077ea
html {
height: 100%;
width: 100%;
}
height: 100%;
width: 100%;
}
li, a, button {
font-family: "Trebuchet MS", sans-serif;
font-weight: 800;
font-size: 16px;
text-decoration: none;
color: #000000;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #fff9f0;
}
.nav-links {
list-style: none;
/* float: left; */
}
.nav-links li {
float: left;
display: inline-blocks;
padding: 10px 20px;
}
.nav-links li a {
transition: all 0.3s ease-in-out 0s;
}
.nav-links li a:hover {
background-color: #5b7553;
color: white;
}
.customize {
background-color: #afcc72;
text-align: center;
width: 100%;
}
label {
user-select: none; /** for accessibility **/
}
.checkboxes {
/* display: inline-block; */
}
.c-group_item {
display: inline-block;
margin: auto;
}
.restaurants {
background-color: #f2e6df;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment