Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <!-- a site about the best of Long Beach, CA -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Best of LBC!</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap" rel="stylesheet" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet" />
	<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
	<link rel="stylesheet" href="mystyles.css" />
	<script src="https://kit.fontawesome.com/41c8573884.js" crossorigin="anonymous"></script>
</head>
<!-- body -->

<body>
	<!-- fixed navigation bar -->
	<nav class="navmenu" id="myNavMenu">
		<!-- logo -->
		<div class="lab-activity">
			<a href="https://www.longbeach.gov/" target="_blank">The LBC!</a>
		</div>
		<!-- nav links -->
		<ol class="navbar-links">
			<li><a href="#home" class="navlink">Home</a></li>
			<li><a href="#things-to-do" class="navlink">Things to do</a></li>
			<li><a href="#restaurants" class="navlink">Restaurants</a></li>
			<li><a href="#lodging" class="navlink">Lodging</a></li>
			<li><a href="#credits" class="navlink">Credits</a></li>
		</ol>
		<!-- hamburger menu -->
		<div class="hamburger">
			<span class="bar"></span>
			<span class="bar"></span>
			<span class="bar"></span>
		</div>
	</nav>
	<!-- the main part -->
	<main>
		<!-- 	Home	 -->
		<section class="home page" id="home">
			<div class="text">
				<p class="best">Best of</p>
				<h1>Long Beach, California</h1>
				<p class="home-desc">
					This coastal charter city on the southern part of Los Angeles
					County, and formerly known as Wilmore City whose growing
					population voted, in 1897, to incorporate and rename it City
					of Long Beach sits on top of Long Beach Oil Field. Waterfront
					attractions are the RMS Queen Mary (retired 1967), a British
					ocean liner built in Scotland, and The Aquarium of the
					Pacific, a public aquarium that spotlights organisms and
					seascapes of the Pacific.
				</p>
			</div>
			<div class="image"></div>
		</section>
		<!-- 	things to do	 -->
		<section class="things-to-do part" id="things-to-do">
			<h2>Things to do</h2>
			<p class="part-desc">
				Purchase general admission tickets to the Aquarium of the
				Pacific. Enjoy the Long Beach view from the sky in a private
				helicopter tour. Round-trip travel to Catalina Island on Catalina
				Express ferry service. Rent a Swan Boat at Rainbow Lagoon.
				Experience a full day tour sightseeing major sights from Long
				Beach to Los Angeles without driving. Join a regular meet up for
				free and ride your own bike in a Long Beach Fitness Tour. Ride in
				a Wheel Fun Rental at the Shoreline Village. Walk an app-led
				self-guided tour and scavenger hunt to the best Long Beach
				landmarks. Click on any of the 6 top Long Beach attractions
				presented below.
			</p>
			<!-- cards -->
			<div class="card-container">
				<article>
					<img src="https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/aquarium-of-the-pacific-long-beach-ca-thomas-woolworth.jpg" alt="aquarium-of-the-pacific" />
					<h3 class="card-link">
						<a href="https://www.aquariumofpacific.org/" target="_blank">Aquarium of the Pacific</a>
					</h3>
					<p>
						See frogs, the Ray Touchpool, seals, sea lions, the
						Lorikeet Forest, penguins, sea otters, sharks, jellies,
						Pacific Visions, and coral reefs. See exhibits and habitats
						such as the Harbor Terrace, the Ocean Science Center, the
						Southern California/Baja Gallery, the Northern Pacific
						Gallery, and the Tropical Pacific Gallery.
					</p>
				</article>
				<article>
					<img src="https://www.catalinaexpress.com/sites/default/files/2018-09/catalina-express-travel.jpg" alt="catalina-express" />
					<h3 class="card-link">
						<a href="https://www.catalinaexpress.com/" target="_blank">Catalina Express</a>
					</h3>
					<p>
						Escape to Catalina Island that’s about an hour away from
						Long Beach. Catalina Express offers daily round trip ferry
						rides. On Catalina see Avalon town, Two Harbors village,
						and beaches. Stay overnight if you decide to.
					</p>
				</article>
				<article>
					<img src="https://media.gettyimages.com/photos/canals-around-naples-in-long-beach-california-picture-id476925775" alt="naples-canals" />
					<h3 class="card-link">
						<a href="https://www.californiabeaches.com/naples-california/" target="_blank">Naples Canals</a>
					</h3>
					<p>
						Italian-inspired community, rent kayaks, learn how to
						kayak, ride a gondola, hang out on a beach across from
						Naples, take a stroll down canal walkways, view beautiful
						houses, shop, and eat on 2nd Street.
					</p>
				</article>
				<article>
					<img src="https://www.planetware.com/wpimages/2019/05/california-long-beach-top-rated-attractions-things-to-do-downtown-waterfront.jpg" alt="lb-waterfront" />
					<h3 class="card-link">
						<a href="https://www.visitlongbeach.com/neighborhoods/downtown-waterfront/" target="_blank">Long Beach Waterfront</a>
					</h3>
					<p>
						Restaurant Row on Pine Avenue in Downtown Long Beach, dusk
						is lively with colorful lights that illuminate historic
						buildings, and music and entertainment. Restored buildings,
						shops, galleries at the East Village Arts District. Sea
						vessels at The Rainbow Harbor Esplanade. Stroll The Pike
						Outlets, and Shoreline Village.
					</p>
				</article>
				<article>
					<img src="https://media.gettyimages.com/photos/queen-mary-2-picture-id1076851012" alt="the-queen-mary" />
					<h3 class="card-link">
						<a href="https://www.visitlongbeach.com/directory/the-queen-mary-temporarily-closed/" target="_blank">The Queen Mary</a>
					</h3>
					<p>
						Legendary ocean liner, 1936 art deco, former WW2 troopship,
						retired in 1967, tours, restaurant, and hotel. Temporarily
						closed.
					</p>
				</article>
				<article>
					<img src="https://static.neighborhoods.com/blog/media/2-025b9774cbf967b38e8fc7d25d72d429.jpg" alt="shoreline-village" />
					<h3 class="card-link">
						<a href="https://shorelinevillage.com/" target="_blank">Shoreline Village</a>
					</h3>
					<p>
						Explore things to do at Long Beach Parasail, Marina
						Sailing, Pelican Pier Pavilion, Spirit Cruises, Wheel Fun
						Rentals, and Smile for the Birdie. Shop and dine.
					</p>
				</article>
			</div>
		</section>
		<!-- 	restaurants	 -->
		<section class="restaurants part" id="restaurants">
			<h2>Restaurants</h2>
			<p class="part-desc">
				I discovered a website,
				<a href="https://la.eater.com/" target="_blank">EATER Los Angeles</a>, which presented an article titled, “<em>16 Essential Restaurants in Long Beach’s Diverse Dining
					Scene</em>”. The authors spotlight eating places, their descriptions,
				photos, Google map locations, website links, addresses, and phone
				numbers. In the article, as you scroll the list, Google map
				pinpoints the restaurant’s map location. Click on any of the 6
				restaurants presented below.
			</p>
			<!-- cards -->
			<div class="card-container">
				<article>
					<img src="https://cdn.usarestaurants.info/assets/uploads/fe2a9aac21060dce52794c7c7341f087_-united-states-california-los-angeles-county-long-beach-459619-ednas-filipino-cuisinehtm.jpg" alt="ednas-filipino-cuisine" />
					<h3 class="card-link">
						<a href="https://www.instagram.com/ednasflipcuisine/" target="_blank">Edna's Filipino Cuisine</a>
					</h3>
					<p>
						Established 1991, catering, dine-in, takeout, open Monday
						through Saturday and Sunday. Menu includes tasty Ginataan
						na Langka (young jackfruit with coconut milk), Pancit,
						Chicharon (pork cracklins), Lumpia, eggrolls, fried rice,
						and more.
					</p>
				</article>
				<article>
					<img src="https://longbeach-nightlife.com/wp-content/uploads/2018/08/The-Ordinarie-Long-Beach-CA3.jpg" alt="the-ordinarie" />
					<h3 class="card-link">
						<a href="https://www.theordinarie.com/" target="_blank">The Ordinarie</a>
					</h3>
					<p>
						An American tavern, 2-hour free parking on Third Street and
						Promenade Street. Cocktails, Saturday and Sunday brunch,
						lunch, dinner. Make reservations, delivery, and takeout.
					</p>
				</article>
				<article>
					<img src="https://lh3.googleusercontent.com/dkrsFw5lgG9hWKOlJuKvtOjP_6izQpctkuecWJN-LuU6KqCUwswE0LdKr7ofXTHGv14fXXLI=w1080-h608-p-no-v0" alt="ammatoli-mediterranean-bites" />
					<h3 class="card-link">
						<a href="https://www.ammatoli.com/" target="_blank">Ammatoli Mediterranean Bites</a>
					</h3>
					<p>
						At Downtown Long Beach, modern Levantine cuisine, cultural,
						ambitious menu, fresh quality ingredients, online ordering,
						reserve a table, dinner, lunch, brunch, catering, and happy
						hour.
					</p>
				</article>
				<article>
					<img src="https://img.cdn4dd.com/cdn-cgi/image/fit=cover,width=600,height=400,format=jpeg,quality=50/https://doordash-static.s3.amazonaws.com/media/store/header/2b82fc83-6706-4d73-a149-b975a9b7e50a.320" alt="sura-korean-bbq-&-tofu-house" />
					<h3 class="card-link">
						<a href="https://www.surakbbq.com/" target="_blank">Sura Korean BBQ & Tofu House</a>
					</h3>
					<p>
						Authentic Korean barbecue, soft tofu soup, Bibimbap, piping
						hot, order online, vegetarian, vegan, local craft beer on
						tap, and online reservations.
					</p>
				</article>
				<article>
					<img src="https://vkind.com/wp-content/uploads/2020/11/seabirds.jpg" alt="seabirds-kitchen" />
					<h3 class="card-link">
						<a href="https://www.seabirdskitchen.com/" target="_blank">Seabirds Kitchen</a>
					</h3>
					<p>
						Since 2010, really good plant-based, organic food. Long
						Beach and Costa Mesa locations. Order online, small plates,
						salads, tacos, entrees, kids’ menu, desserts, cocktails,
						catering trays, indoor and patio dining, takeout, and
						delivery.
					</p>
				</article>
				<article>
					<img src="https://1.bp.blogspot.com/-Ei7WdNI3dI0/YGFNdVZIORI/AAAAAAACJIc/_MYNmVZbYm0TTc-uhUjO6aa6AsvZh4hdACLcBGAsYHQ/s500/PXL_20210216_005752539.PORTRAIT%257E2%2Bcopy.jpg" alt="la-esperanza-restaurant" />
					<h3 class="card-link">
						<a href="https://laesperanzarestaurants.com/" target="_blank">La Esperanza Restaurant</a>
					</h3>
					<p>
						Creole cuisine, appetizers, breakfast, tamales, Salvadorean
						specialties and plates, classic plates, meats, soups,
						Mexican food, salads, kids' menu, desserts, open Monday
						through Sunday, and catering.
					</p>
				</article>
			</div>
		</section>
		<!-- 	lodging	 -->
		<section class="lodging part" id="lodging">
			<h2>Lodging</h2>
			<p class="part-desc">
				<a href="https://www.usnews.com/" target="_blank">U.S. News</a>
				in their post, "<em>Best Hotels in Long Beach, CA</em>", ranks
				the best hotels in Long Beach based on their industry awards,
				hotel star and user ratings. U.S. News’s is an influential media
				company that’s been publishing news, consumer advice, rankings,
				and analysis since 1948. Click on any of the 6 ranked hotels
				presented below.
			</p>
			<!-- cards -->
			<div class="card-container">
				<article>
					<img src="https://www.pleasantholidays.com/media/ffffffffbbbffd59/hotel/images/HYL/hyl_main.jpg" alt="hyatt" />
					<h3 class="card-link">
						<a href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-long-beach/lgbrl?src=corp_lclb_gmb_seo_lgbrl" target="_blank">Hyatt Regency Long Beach</a>
					</h3>
					<p>
						Best number 1, on South Pine Avenue, 4-star, free wi-fi,
						business center, pools, restaurants, beachfront hotel, 4
						Diamond Award, sophisticated, comfortable, your room key on
						iPhone and Apple Watch.
					</p>
				</article>
				<article>
					<img src="https://assets.hyatt.com/content/dam/hyatt/hyattdam/images/2016/10/24/1814/Hyatt-Centric-The-Pike-P011R-Exterior.jpg/Hyatt-Centric-The-Pike-P011R-Exterior.4x3.jpg?imwidth=1280" alt="hyatt" />
					<h3 class="card-link">
						<a href="https://www.hyatt.com/en-US/hotel/california/hyatt-centric-the-pike-long-beach/lgbrp?src=corp_lclb_gmb_seo_lgbrp" target="_blank">Hyatt Centric The Pike Long Beach</a>
					</h3>
					<p>
						Best number 2, popular Rooftop 360° and its views of Long
						Beach, free internet access, restaurant on site, fitness
						center, pool, meeting facilities, digital check-in.
					</p>
				</article>
				<article>
					<img src="https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/westin-hotel-long-beach-2-david-zanzinger.jpg" alt="westin" />
					<h3 class="card-link">
						<a href="https://www.marriott.com/hotels/travel/lgbwi-the-westin-long-beach/?scid=bb1a189a-fec3-4d19-a255-54ba596febe2&y_source=1_MTUwMjg1My03MTUtbG9jYXRpb24uZ29vZ2xlX3dlYnNpdGVfb3ZlcnJpZGU%3D" target="_blank">The Westin Long Beach</a>
					</h3>
					<p>
						Best number 3, at Downtown Long Beach, business travelers,
						business center, pets allowed, pools, restaurants, near the
						convention center, fitness studio, ballroom, hi-speed
						wi-fi, ocean views.
					</p>
				</article>
				<article>
					<img src="https://www.hilton.com/im/en/LGBLHHF/3034618/hiltonlb-ext-day1.jpg?impolicy=crop&cw=5400&ch=2882&gravity=NorthWest&xposition=0&yposition=358&rw=768&rh=410" alt="hilton-long-beach-ca" />
					<h3 class="card-link">
						<a href="https://www.hilton.com/en/hotels/lgblhhf-hilton-long-beach/" target="_blank">Hilton Long Beach</a>
					</h3>
					<p>
						Best number 4, next to Long Beach One World Trade Center,
						pools, free wi-fi, restaurants, non-smoking rooms, digital
						key, on-site restaurant, fitness center, pet-friendly
						rooms, business center, meeting rooms, accessible
						amenities.
					</p>
				</article>
				<article>
					<img src="https://images.trvl-media.com/hotels/1000000/20000/13600/13536/db700778.jpg?impolicy=fcrop&w=670&h=385&p=1&q=medium" alt="long-beach-marriott" />
					<h3 class="card-link">
						<a href="https://www.marriott.com/hotels/travel/lgblb-long-beach-marriott/" target="_blank">Long Beach Marriott</a>
					</h3>
					<p>
						Best number 5, near Long Beach Airport, free parking,
						convenient location near top attractions, airport shuttle,
						backdrop for weddings and meetings, near Boeing, Gulfstream
						and Disneyland, fitness center, and pool.
					</p>
				</article>
				<article>
					<img src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/288200140.jpg?k=423f71ad7c36ac36735fe7c0defddf4454ab2e86cc7593963be8e115f027e4c6&o=&hp=1" alt="holiday-inn-long-beach-airport" />
					<h3 class="card-link">
						<a href="https://www.ihg.com/holidayinn/hotels/us/en/long-beach/laxlb/hoteldetail" target="_blank">Holiday Inn Long Beach Airport</a>
					</h3>
					<p>
						Best number 6, redesigned, refreshed, near Long Beach
						Airport, about 5 miles from Downtown Long Beach, Aquarium
						of the Pacific, home to Vue Bar and Restaurant, fitness
						center, kids stay and eat free, accessibility.
					</p>
				</article>
			</div>
			<p class="part-desc">
				<a href="https://www.lodging-world.com/" target="_blank">Lodging World</a>, a site that offers travel services, ranks by popularity bed &
				breakfasts and inns. Click on any three popular stays shown
				below.
			</p>
			<!-- cards -->
			<div class="card-container">
				<article>
					<img src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/195909265.jpg?k=e565ffdbe76ddb61c0e2e19af936313960085c62b645fd9fa1eb3a184d538eb7&o=&hp=1" alt="the-belmont-shore-inn" />
					<h3 class="card-link">
						<a href="https://www.thebelmontshoreinn.com/" target="_blank">The Belmont Shore Inn</a>
					</h3>
					<p>
						Chic and modern, luxurious, affordable, beach-inspired
						décor, high-speed internet, free parking, business rooms,
						daily housekeeping, non-smoking rooms, no pets allowed,
						ADA/Accessible.
					</p>
				</article>
				<article>
					<img src="https://cf.bstatic.com/xdata/images/hotel/max1280x900/204349787.jpg?k=fbdf32e435f537f8bda690d584d781024059b9ae7b8271156b4ae8d4159f89a9&o=&hp=1" alt="long-beach-luxury-inn" />
					<h3 class="card-link">
						<a href="https://www.lodging-world.com/us/hotels/long-beach-luxury-inn-in-long-beach-94018822" target="_blank">Long Beach Luxury Inn</a>
					</h3>
					<p>
						Twenty-four hour front desk, free wi-fi, no smoking rooms,
						free parking.
					</p>
				</article>
				<article>
					<img src="https://images.squarespace-cdn.com/content/v1/5b48e7324eddecae642f781e/1554849370202-72P21HHGO61ND2AH2URY/Front+Entrance.png?format=2500w" alt="anchor-pointe-inn" />
					<h3 class="card-link">
						<a href="https://www.anchorpointeinn.com/" target="_blank">Anchor Pointe Inn</a>
					</h3>
					<p>
						Cozy welcome room, free wi-fi, free parking, found in
						Wilmington, about 6 miles away from Long Beach Airport,
						about 17 miles from Huntington Beach, colorful stairs,
						bright clean rooms, 4.8/5 star guest reviews.
					</p>
				</article>
			</div>
		</section>
		<!-- 	credits	 -->
		<section class="credits-part" id="credits">
			<h2>Credits</h2>
			<h3>Photography</h3>
			<p>
				<a class="credit-link" href="https://wallpaperbat.com/long-beach-ca-wallpapers" target="_blank">Long Beach CA Wallpapers</a>
			</p>
			<p>
				<a class="credit-link" href="https://www.google.com/imghp?hl=en" target="_blank">Google Images</a>
			</p>
			<h3>Sources</h3>
			<p>
				<a class="credit-link" href="https://www.tripadvisor.com/Attractions-g32648-Activities-Long_Beach_California.html" target="_blank">Tripadvisor - The 15 Best Things to Do in Long Beach -
					2021</a>
			</p>
			<p>
				<a class="credit-link" href="https://la.eater.com/maps/best-long-beach-restaurants-cambodian-tacos-seafood-los-angeles" target="_blank">Eater LA - 16 Essential Restaurants in Long Beach’s Diverse
					Dining Scene</a>
			</p>
			<p>
				<a class="credit-link" href="https://travel.usnews.com/Hotels/Long_Beach_CA/" target="_blank">U.S. News - 15 Best Hotels in Long Beach, CA</a>
			</p>
			<p>
				<a class="credit-link" href="https://www.lodging-world.com/us/california/ca/long-beach/bed-and-breakfasts" target="_blank">Lodging World - Long Beach B&B</a>
			</p>
			<p>
				<a class="credit-link" href="https://www.shipafreight.com/knowledge-series/largest-ports-in-north-america/" target="_blank">Shipa Freight - 10 Largest Ports in North America [Updated:
					Jan 2022]</a>
			</p>
			<p>
				<a class="credit-link" href="https://en.wikipedia.org/wiki/Long_Beach,_California" target="_blank">Wikipedia - Long Beach, California</a>
			</p>
			<p>
				<a class="credit-link" href="https://en.wikipedia.org/wiki/Long_Beach_Oil_Field" target="_blank">Wikipedia - Long Beach Oil Field</a>
			</p>
			<p>
				<a class="credit-link" href="https://en.wikipedia.org/wiki/RMS_Queen_Mary" target="_blank">Wikipedia - RMS Queen Mary</a>
			</p>
			<p>
				<a class="credit-link" href="https://en.wikipedia.org/wiki/Aquarium_of_the_Pacific" target="_blank">Wikipedia - Aquarium of the Pacific</a>
			</p>
			<p>
				<a class="credit-link" href="https://www.longbeach.gov/lbds/planning/preservation/history/" target="_blank">Long Beach - Long Beach History</a>
			</p>
		</section>
		<!-- footer -->
		<section class="footer-part" id="footer">
			<footer>Developed by Raya Bergin &copy; v.2-25Jan2022</footer>
		</section>
	</main>
	<script src="myscripts.js"></script>
</body>

</html>
!

CSS 

              
                /* MY TEMPLATE */
/* CSS Reset */
* {
	/* Outline to view layout on screen while styling | Remove after styling */
	/* outline: 0.0625em dashed #ff0075; */
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	font-size: 100%;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

/* headings and footer */
h1,
h2,
h3,
footer {
	font-family: "Josefin Sans", sans-serif;
}

/* declaring variables for colors */
/* warm city light tones */
:root {
	--goldsand: #eab394;
	--albescentwhite: #f6e3d2;
	--delrio: #b09b98;
	--shark: #272729;
	--rock: #4e3634;
	--aquamarine: #88fff7;
}

/* body */
body {
	max-width: 75%;
	margin: 0 auto;
	font-family: "Lato", sans-serif;
	color: var(--albescentwhite);
	background-color: var(--shark);
}

/* fixed navigation bar */
.navmenu {
	display: flex;
	position: fixed;
	width: 100%;
	max-width: 75%;
	justify-content: space-between;
	padding: 0.5em 1em;
	line-height: 3.125em;
	background-color: var(--rock);
	z-index: 2;
}
/* logo */
.navmenu .lab-activity a {
	font-family: "Josefin Sans", sans-serif;
	color: var(--albescentwhite);
	font-size: 1.875rem;
	font-weight: bold;
	cursor: pointer;
	transition: 0.4s ease;
}
/* logo hover */
.navmenu .lab-activity a:hover {
	color: var(--aquamarine);
}
/* nav links */
.navmenu .navbar-links {
	display: flex;
}
.navmenu .navbar-links li {
	display: block;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.25rem;
}
.navmenu .navbar-links li .navlink {
	color: var(--albescentwhite);
	display: block;
	padding: 0 1.875em;
	transition: 0.4s ease;
}
/* nav links hover */
.navmenu .navbar-links li a:hover {
	color: var(--aquamarine);
}
/* hamburger menu */
.navmenu .hamburger {
	display: none;
}
.navmenu .hamburger .bar {
	display: block;
	width: 1.5em;
	height: 0.25em;
	margin: 0.25em auto;
	transition: all 0.4s ease-in-out;
	background-color: var(--albescentwhite);
}

/* the main part */
/* Home */
.page {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-top: 5em;
}
.page .text {
	padding: 0 2em;
	position: relative;
	z-index: 1;
	font-size: 1.75rem;
	color: var(--albescentwhite);
}
.page .text .best {
	font-family: "Josefin Sans", sans-serif;
	padding-bottom: 0.25em;
}
.page .text .best,
h1 {
	color: var(--aquamarine);
}
.page .text .home-desc {
	padding-top: 0.25em;
	text-align: justify;
}
.page .image {
	position: absolute;
	background: url(https://wallpaperbat.com/img/249684-wallpaper-long-beach-ca.jpg);
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	filter: brightness(40%);
}

/* part */
/* things to do | restaurants | lodging */
.part {
	position: relative;
	min-height: 100vh;
	padding: 5em 0;
	width: 100%;
}
.part h2 {
	font-size: 2.25rem;
	margin: 1em 1em;
	position: relative;
}
.part .part-desc {
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 0 3em 2em 3em;
	text-align: justify;
}
/* links and links hover */
/* restaurants | lodging */
.restaurants .part-desc a,
.lodging .part-desc a {
	color: var(--albescentwhite);
}
.restaurants .part-desc a:hover,
.lodging .part-desc a:hover {
	color: var(--aquamarine);
}

/* credits */
.credits-part {
	padding: 1em;
	line-height: 1.5;
}
.credits-part p {
	font-family: "Varela Round", sans-serif;
}
/* links and links hover */
.credits-part p .credit-link {
	margin-left: 1em;
	color: var(--albescentwhite);
}
.credits-part p .credit-link:hover {
	color: var(--aquamarine);
}

/* cards */
.part .card-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
/* card content */
/* gradient background */
.part .card-container article {
	flex-basis: 30%;
	text-align: center;
	background: linear-gradient(
		to bottom,
		var(--albescentwhite) 0%,
		var(--goldsand) 9%,
		var(--delrio) 18%,
		var(--shark) 100%
	);
	min-width: 15em;
	margin-bottom: 2em;
	border-radius: 0.25em;
	color: var(--shark);
	cursor: pointer;
	box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 1);
	transition: 0.4s;
}
/* card links and hover */
.part .card-container article:hover {
	box-shadow: 0 9px 15px 0 rgba(0, 0, 0, 1);
}
.part .card-container article .card-link a {
	color: var(--albescentwhite);
}
.part .card-container article .card-link a:hover {
	color: var(--aquamarine);
}
/* card image */
.part .card-container article img {
	max-width: 100%;
	height: auto;
	margin-bottom: 1em;
}
/* card heading */
.part .card-container article .card-link {
	font-size: 1.5rem;
}
/* card description */
.part .card-container article p {
	color: var(--albescentwhite);
	padding: 1em;
	text-align: justify;
}

/* footer */
.footer-part {
	text-align: center;
	font-size: 1.25rem;
	padding: 1em 0;
	color: var(--albescentwhite);
	background-color: var(--rock);
}

/* Laptop styles */
/* max-width 64em (1024px) */
@media (max-width: 64em) {
	/* body */
	body {
		max-width: 100%;
	}

	/* fixed navigation bar */
	.navmenu {
		max-width: 100%;
	}

	/* the main part */
	/* Home */
	.page .text {
		padding: 0 1.5em;
	}

	/* part */
	/* things to do | restaurants | lodging */
	.part h2 {
		font-size: 2rem;
	}
}

/* Tablet styles */
/* max-width 48em (768px) */
@media (max-width: 48em) {
	/* body */
	body {
		max-width: none;
	}

	/* fixed navigation bar */
	.navmenu {
		max-width: none;
	}
	/* logo */
	.navmenu .lab-activity a {
		font-size: 1.5rem;
	}
	/* nav links */
	/* hide the navbar-links */
	.navmenu .navbar-links {
		position: fixed;
		left: -100%;
		top: 4em;
		flex-direction: column;
		background-color: var(--rock);
		width: 100%;
		border-radius: 0.3em;
		text-align: center;
		transition: 0.4s;
		box-shadow: 0.125em 0.125em 0.125em rgba(42, 39, 39, 0.4);
	}
	.navmenu .navbar-links.active {
		left: 0;
	}
	/* display hamburger */
	.navmenu .hamburger {
		display: block;
		cursor: pointer;
		padding: 0.75em 0;
	}
	/* hamburger X animation */
	.navmenu .hamburger.active .bar:nth-child(2) {
		opacity: 0;
	}
	.navmenu .hamburger.active .bar:nth-child(1) {
		transform: translateY(0.5em) rotate(45deg);
	}
	.navmenu .hamburger.active .bar:nth-child(3) {
		transform: translateY(-0.5em) rotate(-45deg);
	}

	/* the main part */
	/* Home */
	.page .text {
		padding: 0 1em;
		font-size: 1.5rem;
	}
	/* part */
	/* things to do | restaurants | lodging */
	.part {
		padding: 2em 0;
	}
	.part h2 {
		font-size: 2rem;
		margin: 1em 0.5em;
		padding-top: 1em;
	}
	.part .part-desc {
		font-size: 1.15rem;
		margin: 0 2em 2em 2em;
	}

	/* cards */
	/* card content */
	.part .card-container article {
		flex-basis: 40%;
	}
	.part .card-container article .card-link {
		font-size: 1.25rem;
	}

	/* footer */
	.footer-part {
		font-size: 1.15rem;
	}
}

/* Mobile styles */
/* max-width 26.5em (425px) */
@media (max-width: 26.5em) {
	/* part */
	/* things to do | restaurants | lodging */
	.part h2 {
		font-size: 1.75rem;
	}
	.part .part-desc {
		font-size: initial;
		margin: 0 1.25em 1.5em 1.25em;
	}

	/* credits */
	.credits-part h2,
	h3 {
		color: var(--goldsand);
	}
	.credits-part p .credit-link {
		margin-left: initial;
	}

	/* cards */
	/* card content */
	.part .card-container article {
		flex-basis: 80%;
	}
}
!

JS 

              
                // Responsive navmenu
// Adds class active when user clicks on hamburger

const hamburger = document.querySelector(".hamburger");
const navbarLinks = document.querySelector(".navbar-links");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
	hamburger.classList.toggle("active");
	navbarLinks.classList.toggle("active");
}

// Close hamburger when user clicks on a navlink

const navLink = document.querySelectorAll(".navlink");

navLink.forEach((n) => n.addEventListener("click", closeMenu));

function closeMenu() {
	hamburger.classList.remove("active");
	navbarLinks.classList.remove("active");
}
!
999px

Console