# Travel Guide (Hungary-Holland )

<div class="timeline">
<div class="container left">
<div class="date">HOLLAND</div>
<i class="icon fa fa-home"></i>
<div class="content">
<h2>Ready?</h2>
<p>
Bring your <b>idcard</b> or <b>passport</b> and international Covid <b>QRcode</b> and mask.<br>See latest travel-advice
<a href="https://www.nederlandwereldwijd.nl/landen/hongarije/reizen/reisadvies" target="_blank">here</a> and <a target="_blank" href="https://reopen.europa.eu/nl/from-to/NLD/HUN">here</a> and <a href="https://www.rijksoverheid.nl/documenten/publicaties/2020/07/20/gezondheidsverklaring-reizigers-nederlands">here</a>.<br><br>Accomodation in Budapest can be booked thru <a href="https://booking.com" target="_blank">booking.com</a> or <a href="https://airbnb.com">airbnb.com</a> (please choose DISTRICT <b>5, 6 or 7</b>). Contact us in case of questions.
</p>
</div>
</div>
<div class="container right">
<div class="date">airport<br>budapest<br>or<br>trainstation</div>
<i class="icon fa fa-plane"></i>
<div class="content">
<h2>You made it!</h2>
<p>
<img src="https://a.cdn-hotels.com/gdcs/production191/d1300/c8bfd81c-2932-4411-a7a3-5eabfc30664b.jpg" width="100%"/><br><br>
Get a bit of cash from an ATM (just to be sure).
<br>In case of airport: get a taxi at the <a href="https://www.bud.hu/en/passengers/transport/airport_transfer_and_other_services/taxi" target="_blank">official taxi-stand</a> to your accomodation (~ €27)<br>OR<br>Take bus 100E (€2.7) to the heart of the city (<a href="https://goo.gl/maps/Ejqg3hCHLu61B7XD9" target="_blank">Deák Ferenc Square</a>). Ticketmachine is next to the bus.
</p>
</div>
</div>
<div class="container left">
<div class="date">ACCO-<br>MODATION</div>
<i class="icon fa fa-hotel"></i>
<div class="content">
<h2></h2>
<p>
<img src="https://www.ucityguides.com/images/city-guides/fishermans-bastion.jpg" width="100%"/><br><br>
Tapwater is <a href="https://info-budapest.com/budapest-tap-water/" target="_blank">drinkable / good quality</a>.<br><br>
<b>TAXI's</b> are relatively cheap. Instead of hailing taxis on the street: click <a href="tel:[phone]" target="_blank">here</a> to call <a href="https://www.6x6taxi.hu" target="_blank">6x6taxi.hu</a> or use the BOLT <a href="https://bolt.eu/en/cities/budapest/" target="_blank">mobile app</a>
<br><br>
<b>BUS/TRAM/METRO</b>: They arrive/depart every ~7 minutes.<br>Buy single/hourly/daily ticket at these <a href="https://bkk.hu/pontkereso">ticket machines</a>.<br>Use google maps for directions/times.
<br><br>
</p>
</div>
</div>
<div class="container right">
<div class="date">CITY</div>
<i class="icon fa fa-coffee"></i>
<div class="content">
<h2>Enjoy</h2>
<p>
<img src="https://d1bvpoagx8hqbg.cloudfront.net/originals/szechenyi-thermal-baths-in-budapest-dbd3ba8640917636b37105ad72ffa3f0.jpg" width="100%"/><br><br>
You can try the <a href="https://goo.gl/maps/hreL4sdMf11mH6eu9" target="_blank">warm thermal spa's</a>, visit ruin bars like <a href="https://goo.gl/maps/uUz4UKybRKhU98iZ8" target="_blank">Szimpla</a>, the <a href="https://goo.gl/maps/NgpQcaVs8YSaqZsM9" target="_blank">gigantic botanical ZOO</a>, the <a href="https://en.wikipedia.org/wiki/St._Stephen%27s_Basilica" target="_blank">Basilica</a>, one of the oldest <a href="https://en.wikipedia.org/wiki/Metro_Line_M1_(Budapest_Metro)" target="_blank">metroline of Europe</a>, or a <a href="https://hoponhopoff-budapest.com/" target="_blank">hop-on-hop-off bus</a> if you're in a hurry. <br>Btw. you can work at <a href="https://www.google.com/maps/search/coworking+space+budapest" target="_blank">coworking spaces</a>, or a Starbucks nearby.<br><br>Useful words:<br>
<b>Szia!</b> (Seeya!) = Hello/Bye<br>
<b>Köszi!</b> (Kuhsee!) = Thanks!<br>
<b>Jó!</b> (Yo!) = Good!<br><br>
<b>BTW.</b> spa red (bubbles) = spa blue (and vice versa)</b>
</p>
</div>
</div>
<div class="container left">
<div class="date">22 OCTOBER</div>
<i class="icon fa fa-cog"></i>
<div class="content">
<h2>The wedding!</h2>
<p>
<b>15:00-03:00</b>
<br>fun fact: hungarian weddings don't stop before midnight<br>
<br>Location: <a href="https://g.page/lazarlovaspark?share" target="_blank">Lázár horsepark</a><br><br>
How do I get there?<br>
How do I get back?<br>
Can we party till late and sleep over?<br>
<a class="btn" href="https://cutt.ly/weddingpage" target="_blank">View Details</a>
</p>
</div>
</div>

</div>

<style>
*,
*::before,
*::after {
box-sizing: border-box;
}

img{ border-radius:5px;}

.btn{
display:inline-block;
width:100%;
background:#FFF;
border-radius:10px;
padding:20px 30px;
text-decoration:none !important;
border:2px solid #CCC;
text-transform:uppercase;
margin:20px 0px 0px 0px;
}

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
}

.timeline {
position: relative;
width: 100%;
max-width: 1140px;
min-width:365px;
margin: 0 auto;
padding: 15px 0;
}

.timeline::after {
content: '';
position: absolute;
width: 2px;
background: #006E51;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}

.container {
padding: 15px 30px;
position: relative;
background: inherit;
width:50%;
min-width:300px;
}

.container.left {
left: -25%;
}

.container.right {
left: 25%;
}

.container::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: calc(50% - 8px);
right: -8px;
background: #ffffff;
border: 2px solid #006E51;
border-radius: 16px;
z-index: 1;
}

.container.right::after {
left: -8px;
}

.container::before {
content: '';
position: absolute;
width: 50px;
height: 2px;
top: calc(50% - 1px);
right: 8px;
background: #006E51;
z-index: 1;
}

.container.right::before {
left: 8px;
}

.container .date {
position: absolute;
display: inline-block;
top: calc(50% - 8px);
text-align: center;
font-size: 14px;
font-weight: bold;
color: #006E51;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 1;
}
.container .date {
width:100%;
padding:0 20px
}

.container.left .date {
right: -100%;
text-align:left;
}

.container.right .date {
left: -100%;
text-align:right;
}

.container .icon {
position: absolute;
display: inline-block;
width: 40px;
height: 40px;
padding: 9px 0;
top: calc(50% - 20px);
background: #E9F4E3;
border: 2px solid #006E51;
border-radius: 40px;
text-align: center;
font-size: 18px;
color: #006E51;
z-index: 1;
}

.container.left .icon {
right: 56px;
}

.container.right .icon {
left: 56px;
}

.container .content {
padding: 30px 90px 30px 30px;
background: #FFEEE6;
position: relative;
border-radius: 20px;
border: 2px solid #006e5122;
}

.container.right .content {
padding: 30px 30px 30px 90px;
border-radius: 20px;
}

.container .content h2 {
margin: 0 0 10px 0;
font-size: 15px;
font-weight: bold;
color: #004E31;
}

.container .content p {
margin: 0;
font-size: 14px;
line-height: 22px;
color: #666;
}

.container .content p a{
color: #287;
text-decoration: underline;
font-weight: bold;
}

@media (max-width: 767.98px) {
.timeline::after {
left: 90px;
}

.container::before{
width:21px;
}

.container {
width: 100%;
padding-left: 120px;
padding-right: 30px;
}

.container.right {
left: 0%;
}

.container.left::after,
.container.right::after {
left: 82px;
}

.container.left::before,
.container.right::before {
left: 100px;
border-color: transparent #006E51 transparent transparent;
}

.container.left .date,
.container.right .date {
right: auto;
left: 15px;
}

.container.left .icon,
.container.right .icon {
right: auto;
left: 70px;
z-index:200;
}

.container.left {
left: unset;
}

.container.right .date,
.container.left .date{
text-align: left;
left:0;
padding-top:25px;
font-size:11px;
top:calc(50% - 0px);
background: #FFFC;
z-index: 1;
}

.container.left .content,
.container.right .content {
padding: 15px;
border-radius: 20px;
z-index:10;
}

.container .content p,
.container.left .content p,
.container.right .content li{
font-size:11px !important;
}

a{
color:green;
font-weight:bold;
}
}
</style>