A Pen by Patch Hofweber

Thumbnail
This awesome code was written by hofweber, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hofweber ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Patch Hofweber</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <figure class="iphone-frame">
  <div class="travel-planner">
    
    <h2>The ART of connecting the dots</h2>
    <label>Travel from</label>
    <div class="input-group">
  <input class="travel-from" placeholder="Start location…"> </input>
  <div class="list-wrapper">
    <div class="destination-list">
<dl id="attractions">
  <dt>Attractions</dt>
  <dd>ARTIC</dd>
  <dd>Anaheim Convention Center</dd>
  <dd>Anaheim GardenWalk</dd>
  <dd>Anaheim Grayline Tour Center</dd>
  <dd>Anaheim Plaza Shopping Center</dd>
  <dd>Anaheim Police Department</dd>
  <dd>Angel Stadium</dd>
  <dd>Arena Corporate Center</dd>
  <dd>Bodies THE EXHIBITION</dd>
  <dd>CVS/pharmacy</dd>
  <dd>Center Street Promenade</dd>
  <dd>City Hall</dd>
  <dd>Dad Miller Golf Course</dd>
  <dd>Disney California Adventure</dd>
  <dd>Disneyland Resort</dd>
  <dd>Downtown Anaheim -- Anaheim Muzeo</dd>
  <dd>Downtown Disney District</dd>
  <dd>Honda Center</dd>
  <dd>Kaiser Permanente Medical Center</dd>
  <dd>Knott's Berry Farm</dd>
  <dd>L3 Interstate Electronics</dd>
  <dd>National Grove of Anaheim</dd>
  <dd>Outlets at Orange</dd>
  <dd>South Coast Plaza</dd>
  <dd>TITANIC The Artifact Exhibition</dd>
  <dd>Target</dd>
  <dd>Team Disney Administration Building</dd>
  <dd>The White House</dd>
  <dd>Toy Story Transportation Center</dd>
  <dd>US Postal Office</dd>
  <dd>WSS Shoe store</dd>
  <dd>Walmart Neighborhood Market</dd>
  <a href="#hotels" id="hotels-link"><dt>Hotels</dt></a>
  <a href="#restaurants" id="restaurants-link"><dt>Restaurants</dt></a>
</dl>
<dl id="hotels">
    <dt >Hotels</dt>
    <dd>ALO Hotel</dd>
<dd>America's Best Value Inn & Suites Convention Center</dd>
<dd>America's Best Value Inn (W) Ball Rd.</dd>
<dd>Anaheim Islander Inn & Suites</dd>
<dd>Anaheim Marriott</dd>
<dd>Anaheim RV Park</dd>
<dd>Anaheim Residence Inn Maingate</dd>
<dd>Avenue of the Arts Costa Mesa, A Tribute Portfolio Hotel</dd>
<dd>Ayres Hotel Anaheim</dd>
<dd>Ayres Inn Costa Mesa</dd>
<dd>BLVD Hotel</dd>
<dd>Best Western Meridian</dd>
<dd>Best Western Pavilions</dd>
<dd>Best Western Plus Newport Mesa Inn</dd>
<dd>Best Western Raffles</dd>
<dd>Best Western Stovall's</dd>
<dd>Clarion Hotel</dd>
<dd>Cortona Inn & Suites</dd>
<dd>Costa Mesa Marriott</dd>
<dd>Country Inn & Suites</dd>
<dd>Courtyard by Marriott Anaheim Resort/Convention Center</dd>
<dd>Courtyard by Marriott Anaheim Theme Park Entrance</dd>
<dd>Crowne Plaza</dd>
<dd>Desert Palm Suite</dd>
<dd>Dolphin's Cove</dd>
<dd>Double Tree Guest Suites</dd>
<dd>Econolodge</dd>
<dd>Embassy Suites</dd>
<dd>Embassy Suites Anaheim-North</dd>
<dd>Extended Stay</dd>
<dd>Four Points by Sheraton</dd>
<dd>GreenWood Suites</dd>
<dd>Harbor RV Park</dd>
<dd>Hilton Anaheim</dd>
<dd>Hilton Costa Mesa</dd>
<dd>Holiday Inn Anaheim Resort</dd>
<dd>Holiday Inn Express Suites Garden Grove-Anaheim</dd>
<dd>Holiday Inn Express- Costa Mesa</dd>
<dd>Holiday Inn Hotel & Suites Anaheim</dd>
<dd>Homewood Suites</dd>
<dd>Howard Johnson Anaheim</dd>
<dd>Hyatt House</dd>
<dd>Hyatt Place</dd>
<dd>Knight's Inn</dd>
<dd>La Quinta Inn & Suites</dd>
<dd>Motel 6</dd>
<dd>Peacock Suites</dd>
<dd>Portofino Inn & Suites</dd>
<dd>Quality Inn & Suites (Courtyard and Residence Inn 2016)</dd>
<dd>Ramada Inn & Suites</dd>
<dd>Ramada Maingate North</dd>
<dd>Ramada Plaza</dd>
<dd>Red Lion Hotel</dd>
<dd>Residence Inn by Marriott</dd>
<dd>Sheraton Park</dd>
<dd>SpringHill Suites Maingate Anaheim- W Ball Road</dd>
<dd>SpringHill Suites- S Harbor Blvd</dd>
<dd>Stanford Inn & Suites</dd>
<dd>Staybridge Suites</dd>
<dd>Staybridge Suites Anaheim at the Park</dd>
<dd>The Westin South Coast Plaza</dd>
<dd>TownePlace Suites</dd>
<dd>WorldMark Anaheim</dd>
  </dl>
  <dl id="restaurants">
    <dt>Restaurants</dt>
    <dd>American Tavern Eatery & Drink</dd>
<dd>Anaheim Brewery</dd>
<dd>Anaheim Packing District</dd>
<dd>Coco's Restaurant</dd>
<dd>Coffee Bean & Tea Leaf</dd>
<dd>Denny's Restaurant</dd>
<dd>IHOP</dd>
<dd>Marri's Restaurant</dd>
<dd>Medieval Times Dinner & Tournament</dd>
<dd>Morton's The Steakhouse</dd>
<dd>Pirates Dinner Adventure</dd>
<dd>Roscoes Chicken & Waffles</dd>
<dd>Ruth Chris Steakhouse</dd>
<dd>Shakey's Pizza</dd>
<dd>Tangerine Grill</dd>
<dd>The Sand Box</dd>
<dd>Tiffy's Restaurant</dd>
  </dl>
</div>
  </div>
  </div>
  
  </div>
</figure>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/hofweber/a-pen-by-patch-hofweber-MQXGwN */
* {box-sizing: border-box;}

html {
  text-align: center;
  font-family: MrEavesXLModOT-Reg;
  background-color: #abe3f3;
}

h2 {margin: 0;}


.browser-frame,
.iphone-frame {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  background-color: #009add;
  text-align: left;
}

.iphone-frame:before,
.iphone-frame:after {
  content: '';
  position: absolute;
  z-index: 1000;
  background-color: #fff;
  opacity: 0.7;
}

.browser-frame:before {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  top: -15px;
  left: 3px;
  box-shadow: 15px 0 0 white,
              30px 0 0 white;
}

.iphone-frame {
  border: 7px solid black;
  border-radius: 20px;
  border-top: 50px solid;
  border-bottom: 70px solid;
 
}

.iphone-frame img {z-index: 0;}

.iphone-frame:before {
  top: -26px;
  left: 0;
  right: 0;
  height: 6px;
  width: 40px;
  border-radius: 3px;
  margin: 0 auto;
}

.iphone-frame:after {
  transform: translateY(35%);
  left: 0;
  right: 0;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin: 0 auto;
}

.travel-planner {
  height: 480px;
  width: 320px;
  padding: 15px;
}

label {
  color: #ff9e3a;
  font-weight: bold;
  text-align: left;
  font-size: 20px;
}

.travel-from {
  margin: 10px;
  padding: 3px 0;
  border: none;
  display: block;
  width: 260px;
  border-bottom: dashed 3px #ff9e3a;
}

.travel-from:focus {
  outline: none;
  border-bottom: 3px solid #ff9e3a;
}

.travel-from,
.destination-list {
  box-sizing: border-box;
  font-size: 20px;
  font-family: MrEavesXLModOT-Reg;
}
.input-group {
  border: 3px solid #0e71af;
  display: block;
  background-color: white;
  /*max-height: 57px;*/
  max-height: 400px;
  overflow: hidden; 
}

.input-group:focus-within {
  border-color: #ff9e3a;*/
  transition: max-height .2s;
}

.input-group:focus-within .list-wrapper {
  height: 280px;
  visibility: visible;
}

.list-wrapper {
  height: 0px;
  width: 280px;
  visibility: hidden;
  position: relative;
}



.destination-list {
  background-color: white;
  padding: 0 12px;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 280px;
}


dl {margin: 0;}

dt {
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #fff;
  font-family: MrEavesXLModOT-Bold;
  font-weight: bold;
  border-bottom: 2px solid lightgray;
  margin: 0;
  padding: 12px 0 4px;;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

dd {
  margin: 0;
  padding: 8px 0;
  white-space: nowrap;
  overflow-x: hidden;
  background-color: white;
}

a {
  color: black;
  text-decoration: none;
}

#restaurants-link,
#hotels-link {
  position: absolute;
  display: block;
  width: 260px;
}

#hotels-link {
  z-index: 100;
  bottom: 36px;
}

#restaurants-link {
  z-index: 300;
  bottom: 0;
}

#hotels {
  z-index: 200;
  position: relative;
}

#restaurants-link dt {border-color: white;}

#restaurants {
  z-index: 400;
  position: relative;
}

dd:hover {background-color: #abe3f3;}

dd + dd {border-top: 1px solid #CCC}


Comments