<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Don't forget to change your title -->
<title>Starter Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Load Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/fontawesome.min.css" integrity="sha512-UuQ/zJlbMVAw/UU8vVBhnI4op+/tFOpQZVT+FormmIEhRSCnJWyHiBbEVgM4Uztsht41f3FzVWgLuwzUqOObKw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Add your content here -->
<header>
<h1>Phoenix Public Library</h1>
<nav>
<ul class="darkblue">
<li><a href="#" title="Account">Account</a></li>
<li><a href="#" title="En Espanol">En Espanol</a></li>
<li><a href="#" title="Translate">Translate</a></li>
</ul>
</nav>
</header>
<section class="lightblue-whole">
<nav>
<ul class="navigation">
<li><a href="#" title="Browse">Browse</a></li>
<li><a href="#" title="Location & Hours">Location & Hours</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</nav>
<form class="search">
<div class="input-group">
<input type="search" placeholder="Search Phoenix Public Library">
<!-- <input type="submit" class="fas fa-search" value=""> -->
<button type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</section>
<div class="event-flyer">
<img src="img/sheplybulfinch.webp" alt="Sheply Bulfinch buildings in Phoenix" width="500" height="333">
<div class="text">
<h3>Preserve Historic Phoenix 2025 Update</h3>
<p>
Burton Barr Central Library<br>
Pullium Auditorium<br>
1221 N Central Ave<br>
Phoenix, AZ 85004 <br>
</p>
<div class="date-QR">
<p>
2pm-4pm<br>
Saturday Feb. 24 2024<br>
</p>
<img src="img/png.png" alt="QR code" width="70" height="70">
</div>
</div>
</div>
<section>
<div class="upcoming-events">
<h3>Upcoming Events</h3>
<p class="black-history">Celebrating Black History Month</p>
<ul class="list-events">
<li>
<a href="#">
<span>Friday March 1st</span>: 6 events
</a>
<p>Burton Barr, Desert Sage Ironwood</p>
</li>
<li>
<a href="#">
<span>Saturday March 2nd</span>: 10 events
</a>
<p>All brances</p>
</li>
<li>
<a href="#">
<span>Sunday March 3rd</span>: 1 event
</a>
<p>Burton Barr</p>
</li>
<li>
<a href="#">
<span>Monday March 4th</span>: 3 events
</a>
<p>Burton Barr, Yucca, Ocotillo</p>
</li>
<li>
<li>
<a href="#">
<span>Tuesday March 5th</span>: 4 events
</a>
<p>Burton Barr, Cesar Chavez, Ocotillo, Agave</p>
</li>
<li>
</ul>
</div>
<section>
<ul class="cards">
<li class="kids"><a href="#" title="Kids">Kids</a></li>
<li class="teen"><a href="#" title="Teens">Teen</a></li>
<li class="programs"><a href="#" title="Programs">Programs</a></li>
<li class="eLibrary"><a href="#" title="eLibrary">eLibrary</a></li>
<li class="culture-pass"><a href="#" title="Culture Pass">Culture Pass</a></li>
<li class="seed-library"><a href="#" title="Seed Library">Seed Library</a></li>
</ul>
</section>
<div class="links">
<section>
<h3>Information</h3>
<nav>
<ul class="info">
<li><a href="#" title="Ask Us">Ask Us</a></li>
<li><a href="#" title="Renew Card">Renew Card</a></li>
<li><a href="#" title="Wifi">Wifi</a></li>
<li><a href="#" title="Mobile Print">Mobile Print</a></li>
<li><a href="#" title="Interlibrary Loan">Interlibrary Loan</a></li>
<li><a href="#" title="Accommodation">Accommodation</a></li>
<li><a href="#" title="Naloxone">Naloxone</a></li>
</ul>
</nav>
</section>
<section>
<h3>Support Us</h3>
<nav>
<ul class="support">
<li><a href="#" title="Phoenix Library Foundation">Phoenix Library Foundation</a></li>
<li><a href="#" title="Friends of Library">Friends of Library</a></li>
</ul>
</nav>
</section>
</div>
<footer>
<h3>Stay Connected</h3>
<nav>
<ul>
<li><a href="#" title="eNewsletters">eNewsletters</a></li>
<li><a href="#" title="Download Mobile App">Download Mobile App</a></li>
</ul>
<img src="img/phxlogo.png" alt="white city of Phoenix logo" width="70" >
</nav>
<p>© 2024, Phoenix Public Library, City of Phoenix.</p>
</footer>
<!-- Load Scripts -->
<script src="js/scripts.js"></script>
</body>
</html>
