<!DOCTYPE html><html><head><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.google.com/specimen/Josefin+Sans" rel="stylesheet"><title>RMD YEARBOOK HTML</title><style>* {margin: 0;padding: 0;}
body {background-image: url(brown.jpg);background-position: center;background-size: cover;}
.div2 {background-color: #e0bf9d;height: 30px;width: 100%;position: absolute;bottom: 0; }
.hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center;}
.hero::before { content: ""; background-image: url('brown.jpg'); background-size: cover; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.75;}
h1 { position: relative; color: #ffffff; font-size: 14rem; line-height: 0.9; text-align: center;}
h2 {height: fit-content;width: 700px;color: white;font-size: 15px;}
img {height: 230px;width: 230px;}
video {margin-bottom: 50px;}
.overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s;}
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}
.overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s;}
.overlay a:hover, .overlay a:focus { color: #f1f1f1;}
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px;}
@media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; }}.dropbtn { text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s;}
.dropdown { position: relative; display: inline-block;}
.dropdown-content { display: none; position: absolute; background-color: floralwhite; min-width: 160px; z-index: 1;}
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; transition: 0.3s;}span { padding : 0px; color : white; font-size : 36px; cursor : pointer; display: block;}
span::after { float: right; right: 10%; content: "+";}
.slide { clear:both; width:100%; height:0px; overflow: hidden; text-align: center; transition: height .4s ease;}
.slide li {padding : 30px;}
#touch {position: absolute; opacity: 0; height: 0px;}
#touch:checked + .slide {height: 300px;}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ddd;}</style></head><body>
<div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <a href="rmdyearbook.html">Yearbook</a> <div class="dropdown">
<label for="touch"><span>Students & Teachers</span></label> <input type="checkbox" id="touch"> <ul class="slide"> <a href="students.html">Grade 11</a> <a href="teachers.html">Teachers</a> </ul></div> <a href="funmemo.png">Photos</a> <a href="video.html">Videos</a> </div></div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Menu</span>
<br><br><br><br><br><br><center><img src="rmd-logo.png" alt="richmindale logo"><h1>School Yearbook</h1><h2>Juliana Manzo</h2></center><br><br><br><br><br><br><br><br><br><br><br><br>
<script>function openNav() { document.getElementById("myNav").style.width = "100%";}
function closeNav() { document.getElementById("myNav").style.width = "0%";}
</script> </body></html> </html>