- Published on
Tạo lịch trình cho nhiều ngày bằng CSS
- Authors
- Name
- Hai Nguyen
Tạo một lịch trình nhiều ngày cho chuyến đi giúp chúng ta có sự chuẩn bị tốt nhất, tránh việc tìm kiếm ngẫu nhiên khi đặt chân tới nơi đến. Tất nhiên sự ngẫu nhiên không phải không tốt, tuy vậy rủi ro của nó cũng có thể đem lại cho bạn có thể làm chuyến đi bớt vui vẻ đi. Bài tập hôm nay chúng ta sẽ đi tạo một bảng lịch trình cho 5 ngày theo 4 tiêu chí là Điểm đến (Destination) , Ăn uống (Eat), Hoạt động (Leisure), Phương tiện (Transportation).
HTML:
<div class="container">
<div class="itinerary">
<div class="title">TRIP DURATION: <b>5 DAYS</b></div>
<div class="table">
<div class="cell--header cell--icon--5">DAYS</div>
<div class="cell--header">1</div>
<div class="cell--header">2</div>
<div class="cell--header">3</div>
<div class="cell--header">4</div>
<div class="cell--header">5</div>
<!-- Row 1 -->
<div class="cell--dt cell--icon color--1">
<svg
id="_01-booking"
data-name="01-booking"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 64"
>
<path
d="M43,57H1V13H4V53H29a2.938,2.938,0,0,1,3,3,2.938,2.938,0,0,1,3-3h8Z"
style="fill:#8394b2"
/>
<path d="M63,13V57H51V53h9V13Z" style="fill:#8394b2" />
<path d="M51,57v4l-4-4-4,4V53h8Z" style="fill:#e63b47" />
<polygon points="56 31 56 35 36 35 43 28 47 32 52 27 56 31" style="fill:#01a84e" />
<path
d="M56,13V31l-4-4-5,5-4-4-7,7V13h2.32c1.17,3.87,5.28,5.6,5.28,9.64a2.4,2.4,0,0,0,4.8,0c0-4.04,4.11-5.77,5.28-9.64Z"
style="fill:#4989f4"
/>
<path
d="M29,9H4V53H29a2.938,2.938,0,0,1,3,3V12A2.938,2.938,0,0,0,29,9ZM16,24a3.011,3.011,0,0,1,3,3,3,3,0,0,1-6,0,3.011,3.011,0,0,1,3-3ZM28,35V49H8V33H28Z"
style="fill:#fbfbfb"
/>
<path
d="M35,53a2.938,2.938,0,0,0-3,3V12a2.938,2.938,0,0,1,3-3h3.22A8.162,8.162,0,0,0,38,10.86,6.867,6.867,0,0,0,38.32,13H36V35H56V13H53.68A6.867,6.867,0,0,0,54,10.86,8.162,8.162,0,0,0,53.78,9H60V53H35Z"
style="fill:#fbfbfb"
/>
<path
d="M32,56a2.938,2.938,0,0,0-3-3H4V13H3V55H28.893a2.8,2.8,0,0,1,2.925,2H32Z"
style="fill:#5c6979"
/>
<path
d="M35,53a2.938,2.938,0,0,0-3,3v1h.182a2.8,2.8,0,0,1,2.925-2H43V53Z"
style="fill:#5c6979"
/>
<path d="M61,55V13H60V53H51v2H61Z" style="fill:#5c6979" />
<circle cx="46" cy="11" r="3" style="fill:#96272e" />
<path
d="M38.22,9A8.044,8.044,0,0,1,53.78,9,8.162,8.162,0,0,1,54,10.86,6.867,6.867,0,0,1,53.68,13c-1.17,3.87-5.28,5.6-5.28,9.64a2.4,2.4,0,0,1-4.8,0c0-4.04-4.11-5.77-5.28-9.64A6.867,6.867,0,0,1,38,10.86,8.162,8.162,0,0,1,38.22,9ZM49,11a3,3,0,1,0-3,3A3,3,0,0,0,49,11Z"
style="fill:#e63b47"
/>
<path
d="M41.6,24.64a2.4,2.4,0,0,0,4.767.324A2.467,2.467,0,0,1,46,25a2.38,2.38,0,0,1-2.4-2.36c0-4.04-4.11-5.77-5.28-9.64H36.01a6.844,6.844,0,0,0,.31,2C37.49,18.87,41.6,20.6,41.6,24.64Z"
style="fill:#084eea"
/>
<path
d="M46,7a4,4,0,1,0,4,4A4,4,0,0,0,46,7Zm0,7a3,3,0,1,1,3-3A3,3,0,0,1,46,14Z"
style="fill:#b32e37"
/>
<path
d="M36,37V9H35a2.938,2.938,0,0,0-3,3V56a2.938,2.938,0,0,1,3-3H60V49H48A12,12,0,0,1,36,37Z"
style="fill:#e8eff5"
/>
<polygon points="28 35 28 41 25 38 28 35" style="fill:#4989f4" />
<polygon points="13 44 8 49 8 39 13 44" style="fill:#01a84e" />
<polygon points="28 49 14 49 21 42 28 49" style="fill:#4989f4" />
<polygon
points="28 33 28 35 25 38 28 41 28 49 21 42 14 49 8 49 13 44 8 39 8 33 16 41 24 33 28 33"
style="fill:#fbcb00"
/>
<polygon points="16 41 8 33 16 33 24 33 16 41" style="fill:#01a84e" />
<path d="M20,49H8V9H4V53H29a2.938,2.938,0,0,1,3,3V49H20Z" style="fill:#e8eff5" />
<path
d="M8.212,39.212,8,39V49l3.515-3.515A11.966,11.966,0,0,1,8.212,39.212Z"
style="fill:#019144"
/>
<path d="M14,49h6a11.925,11.925,0,0,1-4.931-1.069Z" style="fill:#084eea" />
<path d="M8,37v2l.212.212A12.03,12.03,0,0,1,8,37Z" style="fill:#faab1b" />
<path
d="M11.515,45.485,8,49h6l1.069-1.069A11.983,11.983,0,0,1,11.515,45.485Z"
style="fill:#faab1b"
/>
<rect x="11" y="12.5" width="18" height="1" style="fill:#8394b2" />
<rect x="7" y="12.5" width="2" height="1" style="fill:#8394b2" />
<rect x="11" y="20.5" width="18" height="1" style="fill:#8394b2" />
<rect x="7" y="20.5" width="2" height="1" style="fill:#8394b2" />
<rect x="7" y="16.5" width="22" height="1" style="fill:#8394b2" />
<rect x="7" y="24.5" width="22" height="1" style="fill:#8394b2" />
<path
d="M13.77,25A3,3,0,0,1,19,27a3,3,0,0,1-6,0A2.965,2.965,0,0,1,13.77,25Z"
style="fill:#b32e37"
/>
<circle cx="16" cy="27" r="2" style="fill:#e63b47" />
<path d="M15.5,29.95V37h1V29.95a2.525,2.525,0,0,1-1,0Z" style="fill:#a8b7d4" />
<path d="M51,55V53H43v8l4-4V55Z" style="fill:#b32e37" />
<rect x="39" y="40.5" width="18" height="1" style="fill:#8394b2" />
<rect x="35" y="40.5" width="2" height="1" style="fill:#8394b2" />
<rect x="39" y="48.5" width="18" height="1" style="fill:#8394b2" />
<rect x="35" y="48.5" width="2" height="1" style="fill:#8394b2" />
<rect x="35" y="44.5" width="22" height="1" style="fill:#8394b2" />
</svg>
<div class="text uppercase">Destination</div>
</div>
<div class="cell--dt color--1">
<div class="text">Welton Hotel</div>
<div class="text">(Room 2209)</div>
</div>
<div class="cell--dt color--1">
<div class="text">The Atrium Event Centre</div>
</div>
<div class="cell--dt color--1">
<div class="text">The Atrium Event Centre</div>
</div>
<div class="cell--dt color--1">
<div class="text">The Axewell</div>
</div>
<div class="cell--dt color--1">
<div class="text">The Axewell</div>
</div>
<!-- Row 2 -->
<div class="cell--dt cell--icon color--2">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="512px"
height="512px"
viewBox="0 0 512 512"
enable-background="new 0 0 512 512"
xml:space="preserve"
>
<g id="famous_places">
<g id="Pyramid"></g>
<g id="Colloseum"></g>
<g id="Mount_Fuji"></g>
<g id="Great_Wall_of_China"></g>
<g id="Stonehenge"></g>
<g id="Golden_Gate_Bridge"></g>
<g id="Christ_the_Redeemer"></g>
<g id="Statue_of_Liberty"></g>
<g id="Taj_Mahal"></g>
<g id="Eiffel_tower"></g>
</g>
<g id="camping">
<g id="mug"></g>
<g id="hook"></g>
<g id="Swiss_knife"></g>
<g id="flashlight"></g>
<g id="lantern"></g>
<g id="campfire"></g>
<g id="beanie"></g>
<g id="rope"></g>
<g id="boot"></g>
<g id="axe"></g>
</g>
<g id="hotel_1_">
<g id="towel"></g>
<g id="phone"></g>
<g id="pool"></g>
<g id="food_service"></g>
<g id="wifi"></g>
<g id="bed"></g>
<g id="door"></g>
<g id="key"></g>
<g id="do_not_disturb"></g>
<g id="bell"></g>
</g>
<g id="winter">
<g id="snowman"></g>
<g id="snow_mountain"></g>
<g id="reindeer"></g>
<g id="winter_tree"></g>
<g id="lift"></g>
<g id="beanie__x26__google"></g>
<g id="ski"></g>
<g id="snowboard"></g>
<g id="snowboading"></g>
<g id="skiing"></g>
</g>
<g id="general_travelling">
<g id="dinner_set"></g>
<g id="polaroid"></g>
<g id="camera"></g>
<g id="calendar"></g>
<g id="calendar_single"></g>
<g id="shopping_bag"></g>
<g id="watch"></g>
<g id="alarm_clock"></g>
<g id="credit_card"></g>
<g id="road_sign"></g>
<g id="hotel"></g>
<g id="money"></g>
<g id="sunglass"></g>
<g id="cocktail"></g>
<g id="compass"></g>
<g id="tent">
<polygon fill="#FF6650" points="170.381,107.288 247.417,130.77 170.381,154.253 " />
<line
fill="none"
stroke="#8A532D"
stroke-width="7"
stroke-miterlimit="10"
x1="171.365"
y1="220.573"
x2="171.365"
y2="101.774"
/>
<polygon
fill="#FFB561"
points="216.853,407.937 170.668,200.764 336.572,200.764 456.292,407.937 "
/>
<polygon fill="#FFD161" points="50.949,407.937 170.668,200.577 290.388,407.937 " />
<polygon fill="#8A532D" points="136.002,407.892 170.668,263.522 221.777,407.937 " />
<polygon fill="#6E4224" points="170.668,263.522 146.223,407.892 119.559,407.937 " />
<polygon fill="#FFD161" points="187.374,173.526 170.787,202.255 154.2,173.526 " />
<polygon fill="#FFD161" points="299.47,407.778 332.643,391.27 332.643,407.778 " />
<polygon fill="#FFB561" points="352.452,173.526 335.866,202.255 319.279,173.526 " />
<rect x="290.388" y="374.382" fill="#8A532D" width="8.978" height="33.555" />
<rect x="41.971" y="374.382" fill="#8A532D" width="8.978" height="33.555" />
<rect x="287.447" y="402.638" fill="#FFD161" width="14.861" height="5.299" />
<polygon fill="#FFB561" points="467.85,407.778 501.023,391.27 501.023,407.778 " />
<rect x="458.768" y="374.382" fill="#6E4224" width="8.978" height="33.555" />
<rect x="455.827" y="402.638" fill="#FFB561" width="14.861" height="5.299" />
<polygon fill="#FFD161" points="40.812,407.778 7.638,391.27 7.638,407.778 " />
<rect x="37.974" y="402.638" fill="#FFD161" width="14.861" height="5.299" />
</g>
<g id="backpack"></g>
<g id="map"></g>
<g id="ticket_1_"></g>
<g id="passport"></g>
<g id="luggage"></g>
<g id="globe"></g>
<g id="suitcase"></g>
</g>
<g id="vehicles">
<g id="trailer"></g>
<g id="airplane"></g>
<g id="yatch"></g>
<g id="taxi"></g>
<g id="hot_air_ballon"></g>
<g id="bus"></g>
<g id="train"></g>
</g>
<g id="summer">
<g id="postcard"></g>
<g id="bikini"></g>
<g id="flipflop"></g>
<g id="plane_around_the_globe"></g>
<g id="binocular"></g>
<g id="beach_table"></g>
<g id="sun_hat"></g>
<g id="beach_bag"></g>
<g id="sea__x26__wave"></g>
<g id="beach"></g>
<g id="beach_ball"></g>
<g id="jetski"></g>
<g id="sandcastle"></g>
<g id="lifeguard_male"></g>
<g id="lifeguard_female"></g>
<g id="lighthouse"></g>
<g id="hammok"></g>
<g id="beach_chair__x26__umbrella"></g>
<g id="lifeguard"></g>
<g id="suncream"></g>
<g id="starfish"></g>
<g id="beach_bar"></g>
<g id="bucket__x26__shovel"></g>
<g id="palm_tree"></g>
<g id="shark_warning"></g>
<g id="surfboard"></g>
<g id="swimming_trunks"></g>
<g id="coconut_drink"></g>
<g id="beach_chair__x26__towel"></g>
<g id="coconut_tree"></g>
</g>
</svg>
<div class="text uppercase">EAT</div>
</div>
<div class="cell--dt color--2">
<div class="text">The Garrison, winchester, Pub, Ali Khan's</div>
</div>
<div class="cell--dt color--2">
<div class="text">Lunch & Dinner provided</div>
</div>
<div class="cell--dt color--2">
<div class="text">The Haluman magic show</div>
</div>
<div class="cell--dt color--2">
<div class="text">Julianna's Mario Italian, The Hot Wok</div>
</div>
<div class="cell--dt color--2">
<div class="text">The Captain's Mark, Jackson Astor, Spring Rolls</div>
</div>
<!-- Row 3 -->
<div class="cell--dt cell--icon color--3">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 256 256"
style="enable-background:new 0 0 256 256;"
xml:space="preserve"
>
<style type="text/css">
.st0 {
fill: #f98fa6;
}
.st1 {
fill: #fc657e;
}
.st2 {
fill: #dae6f1;
}
.st3 {
fill: #5290db;
}
.st4 {
fill: #fcdd86;
}
.st5 {
fill: #f5c84c;
}
.st6 {
fill: #87d147;
}
.st7 {
fill: #70d6f9;
}
.st8 {
fill: #edf4fc;
}
.st9 {
fill: #9be5f9;
}
.st10 {
fill: #b2e26d;
}
.st11 {
fill: #f9c1a8;
}
.st12 {
fill: #414344;
}
.st13 {
fill: #e1fbff;
}
.st14 {
fill: #ffe3ec;
}
.st15 {
fill: #fcbecf;
}
.st16 {
fill: #ef4460;
}
.st17 {
fill: #80c2f9;
}
.st18 {
fill: #3a70bf;
}
.st19 {
fill: #fca265;
}
.st20 {
fill: #5b5d60;
}
.st21 {
fill: #818182;
}
.st22 {
fill: #c7d7e5;
}
.st23 {
fill: #f9d0b4;
}
.st24 {
fill: #aa6f59;
}
.st25 {
fill: #d1856d;
}
.st26 {
fill: #fcc29a;
}
.st27 {
fill: #29589f;
}
.st28 {
fill: #f7b386;
}
.st29 {
fill: #fc8c48;
}
.st30 {
fill: #fff0cc;
}
.st31 {
fill: #57af12;
}
.st32 {
fill: #3caadc;
}
.st33 {
fill: #edb311;
}
.st34 {
fill: #231f20;
}
</style>
<g id="Layer_1"></g>
<g id="Layer_2"></g>
<g id="Layer_3"></g>
<g id="Layer_4"></g>
<g id="Layer_5"></g>
<g id="Layer_6"></g>
<g id="Layer_7"></g>
<g id="Layer_8"></g>
<g id="Layer_9"></g>
<g id="Layer_10"></g>
<g id="Layer_11"></g>
<g id="Layer_12"></g>
<g id="Layer_13"></g>
<g id="Layer_14"></g>
<g id="Layer_15"></g>
<g id="Layer_16"></g>
<g id="Layer_17"></g>
<g id="Layer_18"></g>
<g id="Layer_19"></g>
<g id="Layer_20"></g>
<g id="Layer_21"></g>
<g id="Layer_22"></g>
<g id="Layer_23"></g>
<g id="Layer_24"></g>
<g id="Layer_25"></g>
<g id="Layer_26"></g>
<g id="Layer_27"></g>
<g id="Layer_28"></g>
<g id="Layer_29"></g>
<g id="Layer_30"></g>
<g id="Layer_31"></g>
<g id="Layer_32"></g>
<g id="Layer_33"></g>
<g id="Layer_34"></g>
<g id="Layer_35"></g>
<g id="Layer_36"></g>
<g id="Layer_37"></g>
<g id="Layer_38"></g>
<g id="Layer_39"></g>
<g id="Layer_40"></g>
<g id="Layer_41"></g>
<g id="Layer_42"></g>
<g id="Layer_43"></g>
<g id="Layer_44"></g>
<g id="Layer_45"></g>
<g id="Layer_46"></g>
<g id="Layer_47"></g>
<g id="Layer_48"></g>
<g id="Layer_49"></g>
<g id="Layer_50"></g>
<g id="Layer_51"></g>
<g id="Layer_52"></g>
<g id="Layer_53"></g>
<g id="Layer_54"></g>
<g id="Layer_55"></g>
<g id="Layer_56"></g>
<g id="Layer_57"></g>
<g id="Layer_58"></g>
<g id="Layer_59"></g>
<g id="Layer_60"></g>
<g id="Layer_61"></g>
<g id="Layer_62"></g>
<g id="Layer_63"></g>
<g id="Layer_64"></g>
<g id="Layer_65"></g>
<g id="Layer_66"></g>
<g id="Layer_67"></g>
<g id="Layer_68"></g>
<g id="Layer_69"></g>
<g id="Layer_70"></g>
<g id="Layer_71"></g>
<g id="Layer_72"></g>
<g id="Layer_73"></g>
<g id="Layer_74"></g>
<g id="Layer_75"></g>
<g id="Layer_76"></g>
<g id="Layer_77"></g>
<g id="Layer_78"></g>
<g id="Layer_79"></g>
<g id="Layer_80"></g>
<g id="Layer_81"></g>
<g id="Layer_82"></g>
<g id="Layer_83"></g>
<g id="Layer_84">
<g>
<g>
<g>
<path
class="st7"
d="M208.753,184.212c-0.38-6.813-5.145-12.588-11.762-14.253l-15.347-3.863v39.002
c-0.675-0.369-1.436-0.598-2.256-0.598H164.9c-0.82,0-1.581,0.229-2.256,0.598v-43.725c0-0.308,0.036-0.607,0.091-0.899
l-7.274-3.587c-4.662-2.298-7.613-7.045-7.613-12.242v-6.726c-5.594,3.045-11.993,4.778-18.777,4.778h0
c-6.326,0-12.313-1.515-17.628-4.188v6.135c0,5.197-2.952,9.944-7.613,12.242l-7.274,3.587c0.055,0.292,0.091,0.591,0.091,0.899
v43.725c-0.675-0.369-1.436-0.598-2.256-0.598H79.9c-0.82,0-1.581,0.229-2.256,0.598v-39.002l-15.347,3.863
c-6.617,1.666-11.383,7.44-11.762,14.253l-4.369,64.712c-0.138,2.485,1.839,4.576,4.328,4.576h158.299
c2.489,0,4.466-2.091,4.328-4.576L208.753,184.212z"
/>
</g>
</g>
<g>
<g>
<path
class="st5"
d="M94.388,218.5H79.9c-0.82,0-1.581-0.229-2.256-0.598V253.5h19v-35.598
C95.969,218.271,95.208,218.5,94.388,218.5z"
/>
</g>
</g>
<g>
<g>
<path
class="st5"
d="M179.388,218.5H164.9c-0.82,0-1.581-0.229-2.256-0.598V253.5h19v-35.598
C180.969,218.271,180.208,218.5,179.388,218.5z"
/>
</g>
</g>
<g>
<g>
<path
class="st11"
d="M155.46,156.887c-4.662-2.298-7.613-7.045-7.613-12.242v-6.726c-5.594,3.045-11.993,4.778-18.777,4.778h0
c-6.326,0-12.313-1.515-17.628-4.188v6.135c0,5.197-2.952,9.944-7.613,12.242l-1.703,0.84
c5.147,9.987,15.566,16.861,27.52,16.861s22.373-6.875,27.52-16.861L155.46,156.887z"
/>
</g>
</g>
<g>
<g>
<path
class="st3"
d="M147.834,137.926C147.834,137.926,147.834,137.926,147.834,137.926
C147.834,137.926,147.834,137.926,147.834,137.926L147.834,137.926z M186.22,104h-7.117c-2.367,1.313-5.088,2.066-7.987,2.066
c-0.899,0-1.775-0.092-2.635-0.23v0c-0.141,2.094-0.447,4.144-0.905,6.139c-0.003,0.013-0.006,0.025-0.009,0.038
c-2.582,11.198-9.958,20.594-19.734,25.914c0.004-0.002,0.008-0.004,0.013-0.006v6.726c0,5.197,2.952,9.944,7.613,12.242
l7.274,3.587c-0.055,0.292-0.091,0.591-0.091,0.899c0-2.691,2.182-4.874,4.874-4.874h9.253c2.692,0,4.874,2.182,4.874,4.874
v4.722l15.347,3.863c0.579,0.146,1.138,0.333,1.686,0.54v-54.042C198.677,109.605,193.072,104,186.22,104z"
/>
</g>
</g>
<g>
<g>
<path
class="st3"
d="M89.658,105.836L89.658,105.836c-0.86,0.139-1.736,0.23-2.635,0.23c-2.899,0-5.62-0.753-7.987-2.066h-5.968
c-6.851,0-12.457,5.605-12.457,12.457v54.042c0.549-0.207,1.108-0.395,1.687-0.54l15.347-3.863v-4.722
c0-2.691,2.182-4.874,4.874-4.874h9.253c2.692,0,4.874,2.182,4.874,4.874c0-0.308-0.036-0.607-0.091-0.899l7.274-3.587
c4.662-2.298,7.613-7.045,7.613-12.242v-6.135C99.128,132.318,90.607,119.983,89.658,105.836z"
/>
</g>
</g>
<g>
<g>
<path
d="M186.221,101.5h-6.978c-1.381,0-2.5,1.119-2.5,2.5s1.119,2.5,2.5,2.5h6.978c5.49,0,9.957,4.467,9.957,9.957v53.582
c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5v-53.582C201.178,108.21,194.468,101.5,186.221,101.5z"
/>
</g>
</g>
<g>
<g>
<path
d="M78.788,101.5h-5.72c-8.247,0-14.957,6.71-14.957,14.957v53.453c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5v-53.453
c0-5.49,4.467-9.957,9.957-9.957h5.72c1.381,0,2.5-1.119,2.5-2.5S80.169,101.5,78.788,101.5z"
/>
</g>
</g>
<g>
<g>
<path
d="M111.441,136.533c-1.381,0-2.5,1.119-2.5,2.5v5.611c0,4.277-2.383,8.108-6.219,10l-6.839,3.372
c-1.238,0.61-1.747,2.109-1.137,3.348c0.436,0.883,1.322,1.396,2.244,1.396c0.371,0,0.748-0.083,1.104-0.259l6.839-3.372
c5.557-2.739,9.008-8.289,9.008-14.484v-5.611C113.941,137.652,112.822,136.533,111.441,136.533z"
/>
</g>
</g>
<g>
<g>
<path
d="M163.423,158.026l-6.857-3.382c-3.836-1.892-6.219-5.723-6.219-10v-5.726c0-1.381-1.119-2.5-2.5-2.5s-2.5,1.119-2.5,2.5
v5.726c0,6.195,3.451,11.745,9.008,14.484l6.857,3.382c0.355,0.176,0.732,0.259,1.104,0.259c0.922,0,1.809-0.513,2.244-1.396
C165.17,160.136,164.661,158.637,163.423,158.026z"
/>
</g>
</g>
<g>
<g>
<path
d="M215.615,248.756l-4.366-64.683c-0.442-7.949-5.927-14.596-13.647-16.539l-14.363-3.616
c-1.339-0.33-2.697,0.476-3.035,1.814c-0.337,1.339,0.476,2.697,1.814,3.035l14.363,3.616c5.587,1.405,9.556,6.215,9.878,11.996
l4.366,64.684c0.028,0.509-0.148,0.992-0.499,1.363c-0.35,0.369-0.823,0.573-1.332,0.573H50.495
c-0.51,0-0.983-0.204-1.333-0.574c-0.351-0.37-0.527-0.854-0.501-1.334l4.37-64.74c0.32-5.753,4.29-10.563,9.877-11.968
l14.988-3.773c1.339-0.338,2.151-1.696,1.814-3.035c-0.338-1.339-1.695-2.147-3.035-1.814l-14.988,3.773
c-7.721,1.943-13.205,8.589-13.646,16.51l-4.37,64.74c-0.104,1.868,0.573,3.719,1.858,5.077
c1.285,1.359,3.095,2.139,4.966,2.139h158.299c1.87,0,3.68-0.779,4.965-2.138C215.044,252.503,215.722,250.652,215.615,248.756z
"
/>
</g>
</g>
<g>
<g>
<path
class="st5"
d="M94.388,204.5H79.9c-2.616,0-4.756,2.14-4.756,4.756v4.488c0,2.616,2.14,4.756,4.756,4.756h14.488
c2.616,0,4.756-2.14,4.756-4.756v-4.488C99.144,206.64,97.004,204.5,94.388,204.5z"
/>
</g>
</g>
<g>
<g>
<path
class="st5"
d="M179.388,204.5H164.9c-2.616,0-4.756,2.14-4.756,4.756v4.488c0,2.616,2.14,4.756,4.756,4.756h14.488
c2.616,0,4.756-2.14,4.756-4.756v-4.488C184.144,206.64,182.004,204.5,179.388,204.5z"
/>
</g>
</g>
<g>
<g>
<path
class="st5"
d="M176.771,156.5h-9.253c-2.692,0-4.874,2.182-4.874,4.874v43.725c0.675-0.369,1.436-0.598,2.256-0.598
h14.488c0.82,0,1.581,0.229,2.256,0.598v-43.725C181.644,158.682,179.462,156.5,176.771,156.5z"
/>
</g>
</g>
<g>
<g>
<path
class="st5"
d="M91.771,156.5h-9.253c-2.692,0-4.874,2.182-4.874,4.874v43.725c0.675-0.369,1.436-0.598,2.256-0.598h14.488
c0.82,0,1.581,0.229,2.256,0.598v-43.725C96.644,158.682,94.462,156.5,91.771,156.5z"
/>
</g>
</g>
<g>
<g>
<path
class="st5"
d="M82.088,14.882c-4.498-0.837-8.043-4.31-8.898-8.716c-0.043-0.221-0.352-0.221-0.395,0
c-0.855,4.406-4.4,7.879-8.898,8.716c-0.226,0.042-0.226,0.345,0,0.387c4.498,0.838,8.043,4.311,8.898,8.717
c0.043,0.221,0.352,0.221,0.395,0c0.855-4.406,4.4-7.879,8.898-8.717C82.314,15.227,82.314,14.924,82.088,14.882z"
/>
</g>
</g>
<g>
<g>
<path
class="st1"
d="M225.526,105.941c-3.135-0.583-5.606-3.004-6.202-6.076c-0.03-0.154-0.245-0.154-0.275,0
c-0.596,3.071-3.067,5.492-6.202,6.076c-0.157,0.029-0.157,0.24,0,0.27c3.135,0.584,5.606,3.004,6.202,6.076
c0.03,0.154,0.245,0.154,0.275,0c0.596-3.071,3.067-5.492,6.202-6.076C225.684,106.181,225.684,105.97,225.526,105.941z"
/>
</g>
</g>
<g>
<g>
<path
class="st7"
d="M44.487,152.302h-2.329v-2.33c0-1.744-1.413-3.157-3.157-3.157s-3.157,1.413-3.157,3.157v2.33h-2.33
c-1.744,0-3.157,1.414-3.157,3.158c0,1.744,1.413,3.157,3.157,3.157h2.33v2.33c0,1.744,1.413,3.158,3.157,3.158
s3.157-1.414,3.157-3.158v-2.33h2.329c1.744,0,3.157-1.414,3.157-3.157C47.644,153.715,46.231,152.302,44.487,152.302z"
/>
</g>
</g>
<g>
<g>
<path
class="st5"
d="M35.021,179c-1.865,0-3.377,1.512-3.377,3.377c0,1.865,1.512,3.377,3.377,3.377
c1.865,0,3.377-1.512,3.377-3.377C38.399,180.512,36.887,179,35.021,179z"
/>
</g>
</g>
<g>
<g>
<path
class="st6"
d="M99.021,0c-1.865,0-3.377,1.512-3.377,3.377c0,1.865,1.512,3.377,3.377,3.377
c1.865,0,3.377-1.512,3.377-3.377C102.399,1.512,100.887,0,99.021,0z"
/>
</g>
</g>
<g>
<g>
<path
class="st11"
d="M168.575,67.372c-0.022-1.121-0.92-2.044-2.04-2.077c-16.414-0.481-25.063-6.987-28.386-10.244
c-0.907-0.89-2.372-0.796-3.162,0.199c-14.431,18.148-35.721,15.587-42.879,14.089c-1.301-0.272-2.549,0.708-2.55,2.037
c0,0,0,0.018,0,0.027v31.784c0,21.731,17.78,39.512,39.511,39.512h0c21.731,0,39.512-17.78,39.512-39.512V67.99
C168.581,67.783,168.579,67.577,168.575,67.372z"
/>
</g>
</g>
<g>
<g>
<path
class="st12"
d="M159.989,25.461c-4.21,0-8.147,1.189-11.529,3.218c-3.952-6.594-11.15-11.047-19.355-11.047h-11.59
c-22.431,0-40.784,18.353-40.784,40.784V76.69c2.823-2.258,6.397-3.617,10.293-3.617c0.863,0,1.708,0.073,2.535,0.201v-1.872
c0-0.009,0-0.018,0-0.018c0.001-1.338,1.249-2.318,2.55-2.046c7.158,1.498,28.447,4.059,42.879-14.089
c0.791-0.995,2.255-1.088,3.162-0.199c3.323,3.257,11.972,9.763,28.386,10.244c1.12,0.033,2.018,0.957,2.04,2.077
c0.004,0.205,0.006,0.411,0.006,0.618v5.285c0.827-0.128,1.672-0.201,2.535-0.201c4.447,0,8.475,1.768,11.442,4.629V48.031
C182.558,35.617,172.402,25.461,159.989,25.461z"
/>
</g>
</g>
<g>
<g>
<path
class="st11"
d="M171.117,73.074c-0.863,0-1.708,0.073-2.535,0.201v29.912c0,0.891-0.041,1.773-0.1,2.65
c0.86,0.138,1.736,0.23,2.635,0.23c9.111,0,16.496-7.386,16.496-16.497C187.613,80.459,180.227,73.074,171.117,73.074z"
/>
</g>
</g>
<g>
<g>
<path
class="st11"
d="M89.558,103.187c0-4.094,0-21.773,0-29.912c-0.827-0.128-1.672-0.201-2.536-0.201
c-9.111,0-16.496,7.386-16.496,16.496c0,9.111,7.386,16.497,16.496,16.497c0.899,0,1.775-0.092,2.635-0.23v-0.001
C89.599,104.959,89.558,104.077,89.558,103.187z"
/>
</g>
</g>
<g>
<g>
<g>
<path
d="M171.074,67.322c-0.049-2.466-2.011-4.453-4.466-4.526c-15.805-0.464-23.943-6.819-26.709-9.53
c-0.936-0.918-2.229-1.399-3.525-1.317c-1.308,0.08-2.526,0.716-3.344,1.744l-0.001,0.001
c-13.325,16.758-32.7,14.812-40.408,13.198c-1.373-0.285-2.78,0.056-3.868,0.938c-1.075,0.873-1.693,2.165-1.694,3.572v31.784
c0,23.165,18.846,42.012,42.011,42.012s42.012-18.847,42.012-42.012V67.99C171.081,67.768,171.079,67.545,171.074,67.322z
M166.081,103.187c0,20.408-16.604,37.012-37.012,37.012s-37.011-16.604-37.011-37.012V71.88
c7.226,1.428,29.495,3.943,44.633-14.762c4.075,3.878,13.096,10.094,29.389,10.663c0.001,0.069,0.001,0.14,0.001,0.209V103.187
z"
/>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<path
d="M159.988,22.961c-3.696,0-7.355,0.839-10.71,2.443c-4.708-6.388-12.238-10.271-20.175-10.271h-11.59
c-23.866,0-43.283,19.417-43.283,43.283V76.69c0,0.961,0.551,1.837,1.417,2.253s1.893,0.3,2.645-0.301
c2.51-2.008,5.529-3.069,8.73-3.069c0.692,0,1.417,0.058,2.154,0.172c0.718,0.109,1.455-0.099,2.009-0.572
c0.554-0.476,0.873-1.169,0.873-1.898V71.88c7.227,1.428,29.496,3.941,44.633-14.762c4.075,3.878,13.096,10.094,29.389,10.663
c0.001,0.069,0.001,0.14,0.001,0.209v5.284c0,0.729,0.319,1.423,0.873,1.898c0.554,0.474,1.289,0.683,2.009,0.572
c0.737-0.114,1.462-0.172,2.154-0.172c3.632,0,7.078,1.396,9.706,3.929c0.476,0.458,1.101,0.7,1.736,0.7
c0.329,0,0.661-0.065,0.977-0.199c0.923-0.393,1.522-1.298,1.522-2.301V48.03C185.059,34.207,173.813,22.961,159.988,22.961z
M180.059,72.812c-2.726-1.462-5.781-2.238-8.941-2.238h-0.036V67.99c0-0.223-0.002-0.445-0.007-0.668
c-0.049-2.466-2.011-4.453-4.466-4.526c-15.805-0.464-23.943-6.819-26.709-9.53c-0.936-0.918-2.229-1.399-3.525-1.317
c-1.308,0.08-2.526,0.716-3.345,1.745c-13.325,16.758-32.7,14.812-40.408,13.198c-1.372-0.286-2.778,0.056-3.865,0.938
c-0.861,0.699-1.43,1.667-1.623,2.744h-0.11c-2.732,0-5.366,0.568-7.792,1.667V58.416c0-21.109,17.174-38.283,38.283-38.283
h11.59c6.982,0,13.577,3.768,17.211,9.832c0.341,0.568,0.894,0.979,1.537,1.14c0.642,0.162,1.324,0.061,1.894-0.281
c3.122-1.872,6.664-2.862,10.243-2.862c11.066,0,20.07,9.003,20.07,20.069V72.812z"
/>
</g>
</g>
</g>
</g>
<g>
<g>
<path
d="M171.117,70.573c-0.592,0-1.205,0.03-1.821,0.091c-1.375,0.135-2.38,1.357-2.245,2.732
c0.135,1.374,1.347,2.377,2.732,2.244c0.455-0.045,0.904-0.067,1.334-0.067c7.718,0,13.996,6.279,13.996,13.997
s-6.278,13.996-13.996,13.996c-0.432,0-0.873-0.025-1.35-0.078c-1.383-0.146-2.608,0.84-2.759,2.212
c-0.15,1.373,0.84,2.607,2.212,2.759c0.66,0.072,1.28,0.107,1.896,0.107c10.475,0,18.996-8.521,18.996-18.996
S181.592,70.573,171.117,70.573z"
/>
</g>
</g>
<g>
<g>
<path
d="M91.071,105.716c-0.146-1.373-1.373-2.351-2.751-2.222c-0.454,0.049-0.879,0.072-1.298,0.072
c-7.718,0-13.996-6.278-13.996-13.996s6.278-13.997,13.996-13.997c0.412,0,0.819,0.02,1.221,0.057
c1.37,0.129,2.593-0.885,2.719-2.26c0.127-1.375-0.886-2.593-2.26-2.719c-0.563-0.052-1.127-0.078-1.68-0.078
c-10.475,0-18.996,8.522-18.996,18.997s8.521,18.996,18.996,18.996c0.589,0,1.204-0.033,1.827-0.1
C90.223,108.32,91.217,107.089,91.071,105.716z"
/>
</g>
</g>
<g>
<g>
<path
d="M158.078,156.043c-1.214-0.657-2.73-0.203-3.387,1.014c-5.001,9.271-14.599,15.031-25.047,15.031
c-10.354,0-19.909-5.684-24.939-14.832c-0.665-1.21-2.187-1.651-3.395-0.986c-1.21,0.665-1.651,2.185-0.986,3.395
c5.908,10.747,17.143,17.424,29.32,17.424c12.289,0,23.572-6.767,29.447-17.658
C159.747,158.215,159.294,156.698,158.078,156.043z"
/>
</g>
</g>
<g>
<g>
<path
d="M111.645,83.5c-4.963,0-9,4.037-9,9c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5c0-2.206,1.794-4,4-4s4,1.794,4,4
c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5C120.645,87.537,116.607,83.5,111.645,83.5z"
/>
</g>
</g>
<g>
<g>
<path
d="M147.645,83.5c-4.963,0-9,4.037-9,9c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5c0-2.206,1.794-4,4-4s4,1.794,4,4
c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5C156.645,87.537,152.607,83.5,147.645,83.5z"
/>
</g>
</g>
<g>
<g>
<path
d="M143.476,113.604c-0.618-1.233-2.12-1.732-3.355-1.115c-3.025,1.517-6.647,2.317-10.476,2.317
s-7.451-0.801-10.477-2.317c-1.234-0.617-2.736-0.118-3.355,1.115c-0.618,1.234-0.119,2.736,1.115,3.355
c3.717,1.862,8.114,2.847,12.717,2.847c4.602,0,8.999-0.984,12.716-2.847C143.595,116.34,144.094,114.838,143.476,113.604z"
/>
</g>
</g>
<g>
<g>
<g>
<path
d="M94.389,202H79.9c-4.001,0-7.256,3.255-7.256,7.256v4.488c0,4.001,3.255,7.256,7.256,7.256h14.488
c4.001,0,7.256-3.255,7.256-7.256v-4.488C101.645,205.255,98.39,202,94.389,202z M96.645,213.744
c0,1.244-1.012,2.256-2.256,2.256H79.9c-1.244,0-2.256-1.012-2.256-2.256v-4.488c0-1.244,1.012-2.256,2.256-2.256h14.488
c1.244,0,2.256,1.012,2.256,2.256V213.744z"
/>
</g>
</g>
</g>
<g>
<g>
<g>
<path
d="M179.389,202H164.9c-4.001,0-7.256,3.255-7.256,7.256v4.488c0,4.001,3.255,7.256,7.256,7.256h14.488
c4.001,0,7.256-3.255,7.256-7.256v-4.488C186.645,205.255,183.39,202,179.389,202z M181.645,213.744
c0,1.244-1.012,2.256-2.256,2.256H164.9c-1.244,0-2.256-1.012-2.256-2.256v-4.488c0-1.244,1.012-2.256,2.256-2.256h14.488
c1.244,0,2.256,1.012,2.256,2.256V213.744z"
/>
</g>
</g>
</g>
<g>
<g>
<path
d="M176.771,154h-9.253c-4.065,0-7.373,3.308-7.373,7.373v42.881c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5v-42.881
c0-1.309,1.064-2.373,2.373-2.373h9.253c1.309,0,2.374,1.064,2.374,2.373v43.124c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5
v-43.124C184.145,157.308,180.837,154,176.771,154z"
/>
</g>
</g>
<g>
<g>
<path
d="M181.645,216.005c-1.381,0-2.5,1.119-2.5,2.5V252.5c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5v-33.995
C184.145,217.124,183.025,216.005,181.645,216.005z"
/>
</g>
</g>
<g>
<g>
<path
d="M162.645,215.826c-1.381,0-2.5,1.119-2.5,2.5v34.178c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5v-34.178
C165.145,216.945,164.025,215.826,162.645,215.826z"
/>
</g>
</g>
<g>
<g>
<path
d="M96.645,216.005c-1.381,0-2.5,1.119-2.5,2.5v34.327c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5v-34.327
C99.145,217.124,98.025,216.005,96.645,216.005z"
/>
</g>
</g>
<g>
<g>
<path
d="M77.645,216.005c-1.381,0-2.5,1.119-2.5,2.5v34.335c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5v-34.335
C80.145,217.124,79.025,216.005,77.645,216.005z"
/>
</g>
</g>
<g>
<g>
<path
d="M91.771,154h-9.253c-4.065,0-7.373,3.308-7.373,7.373v43.124c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5v-43.124
c0-1.309,1.064-2.373,2.373-2.373h9.253c1.309,0,2.374,1.064,2.374,2.373v43.124c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5
v-43.124C99.145,157.308,95.837,154,91.771,154z"
/>
</g>
</g>
<g>
<g>
<path
class="st7"
d="M148.874,222h-38.459c-3.036,0-5.52,2.484-5.52,5.521v20.459c0,3.036,2.484,5.521,5.52,5.521h38.459
c3.036,0,5.521-2.484,5.521-5.521v-20.459C154.394,224.484,151.91,222,148.874,222z"
/>
</g>
</g>
<g>
<g>
<path
class="st3"
d="M148.874,222h-38.459c-3.036,0-5.52,2.484-5.52,5.521v20.459c0,3.036,2.484,5.521,5.52,5.521h38.459
c3.036,0,5.521-2.484,5.521-5.521v-20.459C154.394,224.484,151.91,222,148.874,222z"
/>
</g>
</g>
<g>
<g>
<ellipse
transform="matrix(0.3827 -0.9239 0.9239 0.3827 -139.6208 266.5426)"
class="st7"
cx="129.644"
cy="237.75"
rx="9.5"
ry="9.5"
/>
</g>
</g>
<g>
<g>
<path
class="st3"
d="M133.104,213h-6.92c-4.725,0-8.591,3.866-8.591,8.591V222h24.102v-0.409
C141.695,216.866,137.829,213,133.104,213z"
/>
</g>
</g>
<g>
<g>
<g>
<path
d="M148.874,219.5h-38.459c-4.423,0-8.021,3.598-8.021,8.021v20.459c0,4.423,3.598,8.021,8.021,8.021h38.459
c4.423,0,8.021-3.598,8.021-8.021v-20.459C156.895,223.098,153.297,219.5,148.874,219.5z M151.895,247.979
c0,1.665-1.355,3.021-3.021,3.021h-38.459c-1.665,0-3.021-1.355-3.021-3.021v-20.459c0-1.665,1.355-3.021,3.021-3.021h38.459
c1.665,0,3.021,1.355,3.021,3.021V247.979z"
/>
</g>
</g>
</g>
<g>
<g>
<path
d="M148.874,219.5h-38.459c-4.423,0-8.021,3.598-8.021,8.021v20.459c0,4.423,3.598,8.021,8.021,8.021
c1.381,0,2.5-1.119,2.5-2.5s-1.119-2.5-2.5-2.5c-1.665,0-3.021-1.355-3.021-3.021v-20.459c0-1.665,1.355-3.021,3.021-3.021
h38.459c1.665,0,3.021,1.355,3.021,3.021v20.459c0,1.665-1.355,3.021-3.021,3.021c-1.381,0-2.5,1.119-2.5,2.5s1.119,2.5,2.5,2.5
c4.423,0,8.021-3.598,8.021-8.021v-20.459C156.895,223.098,153.297,219.5,148.874,219.5z"
/>
</g>
</g>
<g>
<g>
<g>
<path
d="M129.645,225.75c-6.617,0-12,5.383-12,12s5.383,12,12,12s12-5.383,12-12S136.262,225.75,129.645,225.75z
M129.645,244.75c-3.859,0-7-3.141-7-7s3.141-7,7-7s7,3.141,7,7S133.504,244.75,129.645,244.75z"
/>
</g>
</g>
</g>
<g>
<g>
<path
d="M115.645,226.375h-3c-1.381,0-2.5,1.119-2.5,2.5s1.119,2.5,2.5,2.5h3c1.381,0,2.5-1.119,2.5-2.5
S117.025,226.375,115.645,226.375z"
/>
</g>
</g>
<g>
<g>
<path
d="M133.104,210.5h-6.92c-6.116,0-11.092,4.976-11.092,11.092c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5
c0-3.359,2.732-6.092,6.092-6.092h6.92c3.358,0,6.091,2.732,6.091,6.092c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5
C144.195,215.476,139.22,210.5,133.104,210.5z"
/>
</g>
</g>
<g>
<g>
<path
d="M116.846,221.506l-13.5-67c-0.273-1.354-1.595-2.227-2.945-1.957c-1.354,0.273-2.229,1.592-1.957,2.945l13.5,67
c0.239,1.187,1.282,2.006,2.448,2.006c0.164,0,0.33-0.016,0.497-0.049C116.242,224.178,117.118,222.859,116.846,221.506z"
/>
</g>
</g>
<g>
<g>
<path
d="M158.889,152.549c-1.352-0.271-2.673,0.604-2.945,1.957l-13.5,67c-0.272,1.354,0.604,2.672,1.957,2.945
c0.167,0.033,0.333,0.049,0.497,0.049c1.165,0,2.209-0.819,2.448-2.006l13.5-67
C161.118,154.141,160.242,152.822,158.889,152.549z"
/>
</g>
</g>
</g>
</g>
<g id="Layer_85"></g>
</svg>
<div class="text uppercase">LEISURE</div>
</div>
<div class="cell--dt color--3">
<div class="text">Jazz Festival Moreno</div>
</div>
<div class="cell--dt color--3">
<div class="text">Yak Yak Comedy Club</div>
</div>
<div class="cell--dt color--3">
<div class="text">Yak-Yak Comedy Club</div>
</div>
<div class="cell--dt color--3">
<div class="text">The Networkers Marketing Events</div>
</div>
<div class="cell--dt color--3">
<div class="text">The Networkers Marketing Events</div>
</div>
<!-- Row 4 -->
<div class="cell--dt cell--icon color--4">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="512px"
height="512px"
viewBox="0 0 512 512"
enable-background="new 0 0 512 512"
xml:space="preserve"
>
<g id="famous_places">
<g id="Pyramid"></g>
<g id="Colloseum"></g>
<g id="Mount_Fuji"></g>
<g id="Great_Wall_of_China"></g>
<g id="Stonehenge"></g>
<g id="Golden_Gate_Bridge"></g>
<g id="Christ_the_Redeemer"></g>
<g id="Statue_of_Liberty"></g>
<g id="Taj_Mahal"></g>
<g id="Eiffel_tower"></g>
</g>
<g id="camping">
<g id="mug"></g>
<g id="hook"></g>
<g id="Swiss_knife"></g>
<g id="flashlight"></g>
<g id="lantern"></g>
<g id="campfire"></g>
<g id="beanie"></g>
<g id="rope"></g>
<g id="boot"></g>
<g id="axe"></g>
</g>
<g id="hotel_1_">
<g id="towel"></g>
<g id="phone"></g>
<g id="pool"></g>
<g id="food_service">
<g>
<path
fill="#2D3E52"
d="M243.178,92.702c-5.566-8.884-10.312-12.036-10.312-24.645V44.871h-4.829h-0.516h-5.366v23.187
c0,12.609-5.083,15.761-10.649,24.645c-5.566,8.884-5.952,19.487-5.952,19.487v55.594c0,8.856,19.352,7.659,21.822,7.472
c2.47,0.188,21.822,1.385,21.822-7.472v-55.594C249.199,112.189,248.744,101.586,243.178,92.702"
/>
<rect x="212.21" y="111.074" fill="#E3E3E3" width="30.333" height="49.676" />
<path
fill="#212E3D"
d="M243.178,92.702c-5.566-8.884-10.312-12.036-10.312-24.645V44.871h-4.016v23.187
c0,12.609,5.013,15.761,10.58,24.645c5.566,8.884,6.289,19.487,6.289,19.487v55.594c0,6.053-9.179,7.41-15.715,7.602
c5.991,0.171,19.196-0.274,19.196-7.602v-55.594C249.199,112.189,248.744,101.586,243.178,92.702"
/>
<g>
<circle
fill="none"
stroke="#A6A6A6"
stroke-width="2"
stroke-miterlimit="10"
cx="173.5"
cy="101"
r="7"
/>
<path
fill="#A6A6A6"
d="M219,159.452c0-0.388-0.315-0.702-0.702-0.702h-89.595c-0.388,0-0.702,0.315-0.702,0.702v4.595
c0,0.388,0.315,0.702,0.702,0.702h89.595c0.388,0,0.702-0.315,0.702-0.702V159.452z"
/>
<path
fill="#A6A6A6"
d="M113.483,173.074c0.768,1.636,2.425,2.676,4.352,2.676h112.251c1.927,0,3.584-1.04,4.352-2.676H113.483z
"
/>
<path
fill="#E3E3E3"
d="M113,171.035v-1.743c0-2.656,2.178-4.378,4.835-4.378h112.251c2.656,0,4.914,1.721,4.914,4.378v1.743
c0,0.73-0.272,1.879-0.563,1.879H113.483C113.192,172.914,113,171.765,113,171.035z"
/>
<g>
<path
fill="#E3E3E3"
d="M176.515,114.149h-6.689c-1.617,0-2.927-1.31-2.927-2.927v-0.295c0-1.617,1.31-2.927,2.927-2.927h6.689
c1.617,0,2.927,1.31,2.927,2.927v0.295C179.442,112.838,178.132,114.149,176.515,114.149z"
/>
<path
fill="#E3E3E3"
d="M207.477,126.387c-9.069-9.06-21.135-14.05-33.977-14.05c-12.842,0-24.908,4.99-33.977,14.05
c-9.076,9.067-14.074,21.037-14.074,33.895c0,0.407,0.33,0.632,0.738,0.632h94.625c0.407,0,0.738-0.225,0.738-0.632
C221.55,147.423,216.552,135.454,207.477,126.387z"
/>
<path
fill="#A6A6A6"
d="M207.477,126.387c-9.069-9.06-21.135-14.05-33.977-14.05c-3.068,0-6.09,0.288-9.039,0.845
c9.396,1.774,18.036,6.309,24.938,13.205c9.075,9.067,14.074,20.955,14.074,33.813c0,0.407-0.33,0.55-0.738,0.55h18.077
c0.407,0,0.738-0.143,0.738-0.55C221.55,147.341,216.552,135.454,207.477,126.387z"
/>
</g>
</g>
<path
fill="#E3E3E3"
d="M258.095,134.914c6.023,0,10.905-4.797,10.905-10.82v-24.18h-23v24.18c0,5.569,4.552,9.941,10,10.569
v37.086l-8,4.164h9h9l-8-4.164v-36.836H258.095z"
/>
<path
fill="#E3E3E3"
d="M286.095,134.914c6.023,0,10.905-4.797,10.905-10.82v-24.18h-23v24.18c0,5.569,4.552,9.941,10,10.569
v37.086l-8,4.164h9h9l-8-4.164v-36.836H286.095z"
/>
<rect x="126.92" y="375.75" fill="#A6A6A6" width="203.551" height="28" />
<g>
<path
fill="#E3E3E3"
d="M331,181.75c-3.866,0-7-3.134-7-7v-63c0-9.339,6.897-26.836,33-26.836h49c3.866,0,7,3.134,7,7
s-3.134,7-7,7h-49c-8.262,0-13.941,2.211-16.881,6.732c-1.961,3.018-2.119,6.074-2.119,6.103v63
C338,178.616,334.866,181.75,331,181.75z"
/>
</g>
<circle fill="#2D415A" cx="141.25" cy="451" r="21.25" />
<circle fill="#A6A6A6" cx="141.25" cy="451" r="14" />
<g>
<path
fill="#E3E3E3"
d="M141,454.75c-3.866,0-7-3.134-7-7v-11.377l-13.747-5.866c-2.579-1.101-4.253-3.635-4.253-6.438V227.75
c0-3.866,3.134-7,7-7s7,3.134,7,7v191.695l13.747,5.866c2.579,1.101,4.253,3.635,4.253,6.438v16
C148,451.616,144.866,454.75,141,454.75z"
/>
</g>
<circle fill="#2D415A" cx="349.25" cy="451" r="21.25" />
<circle fill="#A6A6A6" cx="349.25" cy="451" r="14" />
<g>
<path
fill="#E3E3E3"
d="M349,454.75c-3.866,0-7-3.134-7-7v-11.377l-13.747-5.866c-2.579-1.101-4.253-3.635-4.253-6.438V227.75
c0-3.866,3.134-7,7-7s7,3.134,7,7v191.695l13.747,5.866c2.579,1.101,4.253,3.635,4.253,6.438v16
C356,451.616,352.866,454.75,349,454.75z"
/>
</g>
<path
fill="#2D415A"
d="M423.17,103.75h-54c-3.038,0-5.5-2.462-5.5-5.5v-11c0-3.038,2.462-5.5,5.5-5.5h54
c3.038,0,5.5,2.462,5.5,5.5v11C428.67,101.288,426.208,103.75,423.17,103.75z"
/>
<g>
<path
fill="#FFD161"
d="M371.424,366.475H83.33V213.527c0-21.229,17.209-38.438,38.438-38.438h211.218
c21.229,0,38.438,17.209,38.438,38.438V366.475z"
/>
<polygon fill="#FF9B29" points="124,366.914 140.5,271.221 158.5,366.914 " />
<polygon fill="#FF9B29" points="283,366.914 299.5,271.221 317.5,366.914 " />
</g>
<path
fill="#FF6650"
d="M232.296,59.417h-10.195c-1.235,0-2.236-1.001-2.236-2.236V41.986c0-1.235,1.001-2.236,2.236-2.236
h10.195c1.235,0,2.236,1.001,2.236,2.236v15.195C234.532,58.416,233.531,59.417,232.296,59.417z"
/>
<rect x="219.865" y="44.871" fill="#FFD161" width="14.667" height="4.712" />
</g>
</g>
<g id="wifi"></g>
<g id="bed"></g>
<g id="door"></g>
<g id="key"></g>
<g id="do_not_disturb"></g>
<g id="bell"></g>
</g>
<g id="winter">
<g id="snowman"></g>
<g id="snow_mountain"></g>
<g id="reindeer"></g>
<g id="winter_tree"></g>
<g id="lift"></g>
<g id="beanie__x26__google"></g>
<g id="ski"></g>
<g id="snowboard"></g>
<g id="snowboading"></g>
<g id="skiing"></g>
</g>
<g id="general_travelling">
<g id="dinner_set"></g>
<g id="polaroid"></g>
<g id="camera"></g>
<g id="calendar"></g>
<g id="calendar_single"></g>
<g id="shopping_bag"></g>
<g id="watch"></g>
<g id="alarm_clock"></g>
<g id="credit_card"></g>
<g id="road_sign"></g>
<g id="hotel"></g>
<g id="money"></g>
<g id="sunglass"></g>
<g id="cocktail"></g>
<g id="compass"></g>
<g id="tent"></g>
<g id="backpack"></g>
<g id="map"></g>
<g id="ticket_1_"></g>
<g id="passport"></g>
<g id="luggage"></g>
<g id="globe"></g>
<g id="suitcase"></g>
</g>
<g id="vehicles">
<g id="trailer"></g>
<g id="airplane"></g>
<g id="yatch"></g>
<g id="taxi"></g>
<g id="hot_air_ballon"></g>
<g id="bus"></g>
<g id="train"></g>
</g>
<g id="summer">
<g id="postcard"></g>
<g id="bikini"></g>
<g id="flipflop"></g>
<g id="plane_around_the_globe"></g>
<g id="binocular"></g>
<g id="beach_table"></g>
<g id="sun_hat"></g>
<g id="beach_bag"></g>
<g id="sea__x26__wave"></g>
<g id="beach"></g>
<g id="beach_ball"></g>
<g id="jetski"></g>
<g id="sandcastle"></g>
<g id="lifeguard_male"></g>
<g id="lifeguard_female"></g>
<g id="lighthouse"></g>
<g id="hammok"></g>
<g id="beach_chair__x26__umbrella"></g>
<g id="lifeguard"></g>
<g id="suncream"></g>
<g id="starfish"></g>
<g id="beach_bar"></g>
<g id="bucket__x26__shovel"></g>
<g id="palm_tree"></g>
<g id="shark_warning"></g>
<g id="surfboard"></g>
<g id="swimming_trunks"></g>
<g id="coconut_drink"></g>
<g id="beach_chair__x26__towel"></g>
<g id="coconut_tree"></g>
</g>
</svg>
<div class="text uppercase">TRANSPORTATION</div>
</div>
<div class="cell--dt color--4">
<div class="text">Public Bus</div>
</div>
<div class="cell--dt color--4">
<div class="text">Taxi</div>
</div>
<div class="cell--dt color--4">
<div class="text">Taxi</div>
</div>
<div class="cell--dt color--4">
<div class="text">Tuk Tuk</div>
</div>
<div class="cell--dt color--4">
<div class="text">Minivan</div>
</div>
</div>
</div>
</div>
Style:
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@layer defaut, components, custom-style;
@layer default {
body {
background-color: #f3f3f3;
font-family: Nunito;
padding-top: 60px;
}
.uppercase {
text-transform: uppercase;
}
.bold {
font-weight: bold;
}
}
@layer custom-style {
.color--1 {
background-color: #f2cd7c;
}
.color--2 {
background-color: #f3ddff;
}
.color--3 {
background-color: #d6f1c1;
}
.color--4 {
background-color: #6fdcef;
}
.color--5 {
background-color: #0098f3;
}
}
@layer components {
.container {
container-type: inline-size;
display: flex;
justify-content: center;
}
.itinerary {
display: flex;
flex-direction: column;
gap: 20px;
background: #fff;
padding: 24px 40px;
border-radius: 16px;
.title {
text-align: center;
font-size: 32px;
color: #146385;
}
}
.table {
display: grid;
grid-template-columns: 200px repeat(5, minmax(0, 1fr));
gap: 8px;
}
.cell--icon {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
padding: 8px;
svg {
max-width: 100px;
height: auto;
}
.text {
color: #00587e;
font-weight: bold;
font-size: 16px;
}
}
.cell--header,
.cell--dt {
background-color: #0098f3;
border-radius: 12px;
}
.cell--header {
font-size: 24px;
font-weight: bold;
text-align: center;
color: #00587e;
padding: 6px 32px;
}
.cell--dt {
padding: 12px 20px;
font-size: 16px;
line-height: 18px;
color: #424853;
display: flex;
justify-content: center;
}
@container (min-width: 600px) {
.itinerary {
max-width: 890px;
}
}
}
Chú ý chỗ grid-template-columns: 200px repeat(5, minmax(0, 1fr));
Ý nghĩa của hàm minmax() CSS ở đây giúp cho 5 cột phía sau có cùng chiều rộng.
Tôi cũng bỏ thẻ code CSS vào thẻ style ở head. Khi đó trình duyệt sẽ dựng các thành phần html với style đầu tiên. Đó là nơi thích hợp cho việc bỏ các style chung của toàn dự án. Tất nhiên hãy sử dụng nó có chừng mực.
Cuộn xuống để tải bình luận