64 lines
1.5 KiB
HTML
64 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Page</title>
|
|
</head>
|
|
<style>
|
|
.box{
|
|
border: 3px solid;
|
|
width: 100%;
|
|
height: 125px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<h1 id="my-heading">Food R Us</h1>
|
|
|
|
<div class="fruits">Apple</div>
|
|
<div class="fruits">Banana</div>
|
|
<div class="fruits">Orange</div>
|
|
<div class="fruits">Pineapple</div>
|
|
<div class="fruits">Apple</div>
|
|
<div class="fruits">Banana</div>
|
|
<div class="fruits">Orange</div>
|
|
<div class="fruits">Pineapple</div>
|
|
<div class="fruits">Apple</div>
|
|
<div class="fruits">Banana</div>
|
|
<div class="fruits">Orange</div>
|
|
<div class="fruits">Pineapple</div>
|
|
<br><br><br><br>
|
|
|
|
<div>
|
|
<h4>Root vegetables</h4>
|
|
<ul id="vegetable">
|
|
<li>Beat</li>
|
|
<li>Carrot</li>
|
|
<li>Potato</li>
|
|
</ul>
|
|
|
|
<h4>Non-Root Vegetables</h4>
|
|
<ul>
|
|
<li>Broccoli</li>
|
|
<li>celery</li>
|
|
<li>Onion</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="manipulator">
|
|
<div id="box1" class="box">
|
|
<p>box1</p>
|
|
</div>
|
|
<div id="box2" class="box">
|
|
<p>box2</p>
|
|
</div>
|
|
<div id="box3" class="box">
|
|
<p>box3</p>
|
|
</div>
|
|
<div id="box4" class="box">
|
|
<p>box4</p>
|
|
</div>
|
|
</div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |