Дорожные знаки #CPC (HTML код)
<!-- 🛣🚦🚗-->
<div class="wrapper">
<div class="credit">
<p>Design based on <a href="https://dribbble.com/shots/12670227-Welcome-To-Georgia">Katie Connolly's Dribble shot</a></p>
</div>
<div class="map">
<svg id="map" data-name="map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410.9 610.4">
<path id="map-lines" d="M1 210c5 3 9 5 11 11l16 66 7 28c1 3 1 5-3 5H5c-3 0-4 0-5-2v15l3-2h21l1 1-25 18v17l4-2 32 5c3 0 4 1 3 4l-18 41c-1 3-2 4-5 3H4c-2 1-3 0-4-1v8c1-2 2-2 5-2h14c3 0 5-1 6-4l19-46c1-2 1-2 3-2l37 5a6 6 0 015 4l18 46c1 3 1 5-1 7l-42 48a9 9 0 01-6 3l-52 7c-3 1-5 0-6-1v8l4-2 57-7a8 8 0 006-4l40-46 3-4c7 13 9 26 11 39l8 45 16 86c0 4 0 5-5 5H5l-5-1v1h411v-1l-4 1h-37c-5 1-6-1-7-5l-1-12c0-2 0-4 3-3l43 2a3 3 0 013 2v-15c-1 3-3 3-7 2l-37-2c-5 0-6-1-6-6l3-103 2-59c0-8 2-13 9-18 9-5 16-12 24-19l11-9a4 4 0 011 1v-18l-5 8c-14 9-27 20-41 30l-79 63c-2 2-3 2-5-1l-80-99-19-23a10 10 0 01-2-7v-20-22c0-3 1-4 4-5l71-2 92-3a10 10 0 019 4l52 53a9 9 0 013 4v-19l-2 1-34-35-40-40c-2-3-4-5-3-9v-39c0-3 1-5 4-3l72 35 3 3V112v95a7 7 0 01-1 1l-31-16-78-38-24-12c-2-1-3-2-1-4l33-44c7-8 9-17 9-27 0-4-1-10 1-12s8 0 12 0l76 5c2 0 4 0 4 3V0H0v68c1-2 2-3 5-2a5 5 0 002 0c13 0 18 7 24 18 14 30 29 59 45 88l1 11c-2 15-1 29-1 44l-2 98c0 3-1 4-4 3l-18-6c-3-1-4-3-5-6L21 213c0-3-2-5-4-7a3 3 0 01-1 0c-5-4-13-6-15-12M319 39V5c0-4 2-5 5-5h82c4 0 5 1 5 5v39c0 3-1 4-4 4l-54-4-31-2c-2 0-3 0-3-3zM194 358c2 3 1 4-2 5l-26 8c-1 0-3 1-5-1l-26-34 32-4c3-1 5 0 7 2l20 24zm124-183a4 4 0 013 5l-1 39v15c0 2 2 3 3 4l23 23-1 1-34 1-102 4h-25c-3 1-4 0-4-3v-55c0-3 1-4 3-6l36-44 16-20c2-2 3-3 6-2l77 38zM272 30h30c3 0 5 1 5 5l-1 42a6 6 0 01-2 4l-38 51c-2 3-3 3-6 2l-13-7c-3-1-4-3-3-6l15-61 5-24c1-4 3-6 8-6zM179 0h78c4 0 3 2 3 4l-18 71c-2 12-6 24-7 37l-3 3c-14-13-23-29-34-45l-12-18a6 6 0 00-6-3h-16c-3 0-3-1-3-3l14-43c0-2 2-3 4-3zM3 54c-2-1-3-2-3-4V3c0-3 3-3 5-3h152c6 0 6 1 4 6l-12 40c-1 3-3 3-5 3H99c-14 0-27 3-41 5l-27 3c-10 1-19-2-28-3zm50 49L38 73c-2-4-1-5 3-5l51-7h54c3 0 4 1 4 4v71c0 4-1 5-4 5l-62 13c-3 1-5 1-6-2l-25-49zM5 361l34-25c4-4 8-4 13-2l19 7c1 0 3 0 4 2l11 28-81-10zm80-35v-21-25c3-31 1-61 3-92 1-8 2-18-4-25-3-4 1-4 3-4l49-10 15-3c3-1 4-3 4-6V66c0-4 1-5 6-5 12-2 19 3 26 13a222 222 0 0026 38l12 14c3 2 3 4 1 6l-55 67a12 12 0 00-2 8v106c0 5-1 7-6 8l-73 9c-4 1-5 0-5-4zm76 283c-3 1-4 0-5-4l-10-54-7-38-11-63c-2-9-6-17-9-26l-19-48-11-29c-2-3-2-5 3-6l33-4c3 0 5 1 7 3l26 34c2 3 4 3 7 2l30-9c3-1 5-1 7 2l73 90c2 2 2 4 2 6v105c0 4-1 5-4 6l-109 32a25 25 0 00-3 1zm126 1h-88v-1l58-17 22-6c3-1 4 0 5 2l6 18c1 3 0 4-3 4zm68 0h-48c-3 0-5-1-6-4l-6-17c-1-3 0-4 3-4l55 4c2 0 4 1 4 3l2 14c1 3-1 4-4 4zm2-49l-1 13c0 3-1 4-4 4l-47-3-12-1c-4 0-5-1-5-4v-53-50c0-4 1-6 4-9l65-51c1 0 2-2 4-1s1 2 1 4l-2 58-3 93z" />
<path class="compass" d="M411 346v-15a8 8 0 000-3v20a13 13 0 000-2zM411 63v0zM0 501v104a7 7 0 000 4V498a7 7 0 000 3zM411 575V370v-4 213a18 18 0 000-4zM0 428v58a7 7 0 000 4v-65a7 7 0 000 3zM411 309v-85a4 4 0 000-2v87zM0 316a6 6 0 000 2M0 370v44a5 5 0 000 3v-50a6 6 0 000 3zM411 607v-12a4 4 0 000-2v16a4 4 0 000-2zM0 334v16-17a3 3 0 000 1z" />
<path class="compass" d="M58 595a44 44 0 10-43-44 44 44 0 0043 44zm0-81a37 37 0 11-37 37 37 37 0 0137-37z" />
<path class="compass" d="M58 581l10-28a6 6 0 000-3l-10-29-9 29a4 4 0 000 2l9 29zm0-34c3 0 5 1 5 4s-2 5-4 5c-3 0-5-2-5-5s2-4 4-4z" />
</svg>
</div>
<div class="palm-tree">
<svg id="palm-tree" data-name="palm-tree" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362.3 266.1">
<path class="palm-tree" d="M297 20c4 1 8-2 10 1s-4 5-6 7l-97 90-7 6c-1 1-1 4-3 2-2-1-3-2-2-4a195 195 0 013-20 101 101 0 0119-39c21-28 49-41 83-43zM65 20c49 0 93 36 103 84l2 17c0 2 1 4-1 5s-4-1-5-2l-27-26-63-58-16-15c-1-1-3-2-2-4 0-2 2-1 4-1h5zM73 130H14c-2 0-4 1-5-1 0-2 2-3 3-4 22-21 49-32 80-30 8 1 15 5 21 10l21 20c1 1 3 2 3 4-1 2-3 1-5 1H73zM289 130h-59c-1 0-3 1-4-1s1-3 2-4l24-21a35 35 0 0123-9c29-1 54 9 75 29 2 2 4 3 3 5s-3 1-5 1h-59zM311 233c-1 3 1 7-2 8-2 1-4-3-6-4l-19-20-60-59a22 22 0 01-2-2c-2-2-2-4 1-4 14 0 27-1 41 1a26 26 0 0113 7c21 20 32 44 34 73zM122 152h16c1 0 2-1 3 1 1 1 0 3-1 3l-50 50-30 30-3 2c-1 1-2 3-4 2l-1-4c1-13 2-25 7-37a115 115 0 0123-36c7-7 15-11 24-11h16zM208 246c-7 0-13-7-13-14s7-13 14-13 13 7 13 14a14 14 0 01-14 13zM168 191c0-8 6-14 14-14 7 0 13 7 13 14s-6 13-14 13a13 13 0 01-13-13zM153 220c9-2 15 7 15 13-1 7-7 13-14 13s-13-6-13-13q0-13 12-13z" />
</svg>
</div>
<div class="city-sign">
<div class="city dark">
<h3>Charleston</h3>
<svg id="city-right" data-name="city-right-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.8 27.2">
<path d="M35 1l19 10c2 1 3 3 0 4L35 26c-1-8-1-8-9-8H5c-4 1-3-2-3-4S0 9 5 9h24c5 0 6-1 6-6a11 11 0 010-2z" />
</svg>
</div>
<div class="city light">
<h3>Jacksonville</h3>
<svg id="city-left" data-name="city-left-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.8 27.2">
<path d="M24 27L0 13 23 0l1 1c1 7 1 7 8 7h21c5 0 4 3 4 5s1 6-4 5H30c-5 0-7 2-6 6a16 16 0 010 3z" />
</svg>
</div>
</div>
<div class="sunsets">
<svg id="sunset" data-name="sunset" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.7 139.3">
<path class="sunset" d="M64 63H13c-7 0-7 0-6-7 9-40 58-58 91-34a58 58 0 0123 36c1 4 0 5-5 5H64zM65 76h51c2 0 6-1 6 3s-2 6-6 6H13c-3 0-5 0-6-3-2-4-1-6 4-6h54zM64 98h44c2 0 5-1 5 2s-2 6-5 7a13 13 0 01-4 0H23c-5 0-7-3-8-6s1-3 3-3h14zM64 120h19l3 1c1 2-1 3-2 4a58 58 0 01-40 0l-3-3 4-2h19z" />
</svg>
<h1>Beach Sunsets</h1>
</div>
<div class="motto-sign">
<svg id="top-left-arrow" data-name="top-left-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.2 201.4">
<path class="top-left-arrow" d="M181 101c0 47-38 85-86 86S9 148 9 99a86 86 0 01172 2zM96 27a73 73 0 00-2 146c40 2 74-31 74-72 1-40-32-73-72-74z" />
<path class="top-left-arrow" d="M77 74l46 46 5 5c3 3 4 7 1 10-4 2-7 1-10-2L80 95 69 83c-2 2-1 3-1 5v44c0 5-2 8-6 8s-6-3-6-8V69c0-6 2-8 7-8h65c4 1 6 3 6 7s-3 6-7 6H93z" />
</svg>
<svg id="island-time" data-name="island-time" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1075.4 219.8">
<path class="island-time" d="M62 170h29c21-2 37-14 46-32 12-25 22-50 32-75a18 18 0 000-3c1-3 3-7 0-9-3-3-7-1-10 0-11 4-20 11-29 19a201 201 0 00-25 26c-6 6-6 13-2 19a123 123 0 007 12c1 2 2 4 0 6l-14 14c-2 3-4 2-5 0-7-12-14-24-15-39 0-9 1-17 6-24 21-30 48-49 83-59a58 58 0 018-1c17-2 29 10 25 27-4 15-9 28-15 42-8 19-15 38-25 57a116 116 0 01-15 22 74 74 0 01-55 23c-21 2-43 2-65 2-6 0-8-2-4-8l12-16c1-2 2-2 4-2h27zM716 200c-8 1-8 0-6-7 13-31 28-60 40-91l11-27c2-5 1-6-4-6-23 2-47 6-70 10-6 1-9-2-7-9a43 43 0 018-14c2-2 4-2 7-3l71-10c6 0 11-3 12-9 1-8 6-12 14-13l14-2c3 0 5 2 4 5l-2 6c-2 4 0 6 4 5l25-3c5-1 6 0 5 5a25 25 0 01-1 4c-7 20-6 18-24 20l-19 1c-6 1-8 5-10 9-4 14-10 27-15 41l-27 62a100 100 0 00-7 17c-1 4-4 6-8 7a96 96 0 01-15 2zM569 196h-12c-6-1-8-3-9-10 0-3 1-7-3-9s-5 3-7 6c-8 10-18 14-30 14h-7c-12-1-19-7-19-19a55 55 0 0116-38c14-15 31-24 52-25 5-1 8-2 10-7l22-52c6-13 17-16 30-18 4 0 5 2 4 5a124 124 0 01-4 12l-35 73c-6 13-8 27-9 41 0 6 2 7 8 8h1c11 1 12 2 7 11-4 8-4 8-15 8zm-57-20a18 18 0 0012-4c11-9 20-18 25-31 2-5 1-6-4-6-11 2-22 6-31 15-5 5-8 11-9 19 0 7 0 7 7 7zM921 137c6-4 11-9 17-12s12-6 19-6c5 0 8 2 10 7a22 22 0 010 17l-13 28c-3 6-2 7 4 7a42 42 0 015 0c3 0 4 2 3 4v1c-4 14-4 14-19 14h-11c-9 0-14-7-10-15l13-30a36 36 0 001-4c1-1 2-3 0-5s-4 1-5 2a93 93 0 00-16 14c-10 10-17 22-24 34-2 2-4 4-7 4a132 132 0 00-14 0c-3 0-4-1-2-4l17-36 3-9c0-1 1-3-1-5s-3 0-4 1a74 74 0 00-16 13c-9 11-17 22-23 35-2 4-5 5-9 5h-7c-8 0-8-1-6-8a669 669 0 0133-69l16-4c4 0 5 2 4 6l-2 3c-1 2-4 5-1 7s4-1 6-2a99 99 0 0118-10 27 27 0 019-3c10 0 14 4 13 13l-1 7zM457 197a45 45 0 01-15-1c-6-2-8-5-7-12l6-16 9-19c1-2 2-4 0-5-2-2-4 0-5 1-7 4-12 10-17 16a185 185 0 00-18 24 18 18 0 00-3 6c-1 5-4 6-8 6h-13c-4 0-5-2-4-5l3-7c9-19 19-39 26-59 2-4 5-7 10-7l10-1c5-1 7 1 5 6l-4 7c-1 2-2 3 0 5s3 0 4-1c8-6 16-13 25-16s17 3 17 13a29 29 0 01-1 9 169 169 0 01-9 20l-4 8c-4 8-4 9 6 9 7 0 8 1 5 8-3 11-3 11-18 11zM361 196c-7 0-14 0-20-4-3-1-5 0-7 1-10 4-20 3-30 2-6 0-8-5-10-10-2-7-2-14 2-21 12-25 31-42 59-46a175 175 0 0123-2c5 0 5 2 4 6-4 10-9 15-20 16-17 1-30 10-41 22a32 32 0 00-7 12c0 2 0 4 4 4 11 2 17-2 21-12l4-13c2-4 4-6 9-6h10c4-1 5 1 4 5-3 7-6 14-7 21-1 4 0 6 5 6h9c4 0 5 2 4 5l-5 12c-1 2-3 2-5 2h-6zM264 197a58 58 0 01-13-1c-8-1-11-6-10-15a55 55 0 013-13c16-42 33-83 51-123 4-8 6-9 14-8 13 1 13 0 8 13-15 40-33 79-50 118l-2 4c-2 3 0 5 3 5l12 1c4 0 5 1 4 6l-1 2c-5 10-7 12-19 11zM1018 197h-14c-16 0-25-10-24-26 0-30 28-56 58-56a34 34 0 017 1c11 3 15 11 13 22-3 10-9 17-17 23a91 91 0 01-19 11c-2 1-4 2-3 4s3 2 4 2h17c4 0 6 2 5 6-2 10-5 12-15 13h-12zm14-64a23 23 0 00-8 3c-10 6-17 14-22 23-1 1-3 3-1 5s3 0 5-1c7-4 14-8 20-14a35 35 0 009-11c1-3 0-5-3-5zM236 105a34 34 0 01-7 10c-5 5-7 10-5 18 3 9 5 17 5 27 0 20-15 36-35 37h-25c-3 0-5-1-4-4l1-4c2-8 6-12 15-11h10c12 0 16-7 19-18 1-4 0-8-2-12 0-3-2-4-4-1a22 22 0 00-5 4c-3 6-7 6-12 4-10-3-10-4-4-12 8-8 15-17 21-26 8-12 19-13 32-12zM780 184a34 34 0 013-14l19-44c2-4 4-6 8-6l11-1c4 0 5 2 3 6l-10 24-10 24c-2 4 0 5 4 5h2c9 0 9 0 5 10-4 9-4 9-14 9h-10c-8-1-11-5-11-13z" />
<path class="island-time" d="M828 103c-8 0-12-5-12-11 0-9 5-14 13-14 6 0 11 6 11 12a12 12 0 01-12 13z" />
</svg>
</div>
<div class="directory">
<div class="directory__heading">
<h1>01</h1>
<h2>Top US City</h2>
</div>
<div class="directory__attractions">
<div class="directory__rows">
<h3>Water Tours</h3>
<svg class="directory__arrows" id="right" data-name="right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.8 28.8">
<path d="M22 10l-5-5c-2-1-2-2-1-4a3 3 0 014 0l12 12c1 1 1 3-1 4L21 27c-1 1-3 2-5 1s0-4 1-5l5-4-1-2H3c-2 0-3 0-3-3s1-2 3-2h15l4-2z" />
</svg>
</div>
<div class="directory__rows">
<h3>Museums</h3>
<svg class="directory__arrows" id="top-right" data-name="top-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.8 28.8">
<path d="M21 13l-9 10c-2 2-4 6-7 3s1-5 2-7l8-8 2-2-3-1h-2c-2 0-5 1-5-3s3-3 5-3h13c2 0 4 1 4 4v14c0 2-1 4-3 4s-3-2-3-4v-6z" />
</svg>
</div>
<div class="directory__rows">
<h3>Golf Course</h3>
<svg class="directory__arrows" id="btm-left" data-name="arrow-bl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.8 28.8">
<path d="M12 16L23 4c1-2 3-3 5-1s0 4-1 5L14 20c4 2 6 1 8 1s4 1 4 3-2 3-4 3H7c-2 0-3-2-3-4V9c0-2 0-4 3-4 2 0 3 2 3 4v6z" />
</svg>
</div>
<div class="directory__rows">
<h3>Breweries</h3>
<svg class="directory__arrows" id="left" data-name="arrow-l" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.8 28.8">
<path d="M12 18l4 6c1 1 2 2 0 4a3 3 0 01-4 0L1 16c-2-1-1-3 1-5l10-9c1-2 3-3 4-1s1 3 0 5-5 3-4 5 5 1 7 1h9c2 0 5-1 5 3s-3 3-5 3H12z" />
</svg>
</div>
</div>
</div>
<div class="welcome-sign">
<div class="welcome peach">
<h2>Welcome to</h2>
<h2><span class="teal">Georgia</span></h2>
</div>
<div class="peach-bkgd">
<h2>The Peach State</h2>
</div>
</div>
</div>
Дорожные знаки #CPC (CSS код)
@import url("https://fonts.googleapis.com/css2?family=Satisfy&family=Source+Sans+Pro:wght@700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a,
a:hover,
a:focus,
a:active {
text-decoration: none;
color: inherit;
}
body {
font-family: "Source Sans Pro", sans-serif;
font-weight: 700;
width: 100%;
height: 100vh;
padding: 3rem;
background: linear-gradient(#eeeeee, #eeece1);
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
overflow: hidden;
}
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas: "a a a a b b b c c c c c " "a a a a d d d d d d d d " "e e e e e e e e e e e f " "g g g g g g g g h h h h";
gap: 1.5rem;
width: 100%;
height: 100%;
max-width: 800px;
max-height: 100vh;
}
.wrapper .map {
grid-area: a;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
border: 0.5rem solid #f3785f;
overflow: hidden;
}
.wrapper .map #map {
overflow: hidden;
width: 100%;
}
.wrapper .map #map-lines {
fill: #f3785f;
}
.wrapper .map .compass {
fill: #23565b;
}
.wrapper .palm-tree {
grid-area: b;
background: #f3785f;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
.wrapper .palm-tree #palm-tree {
fill: #eeece1;
height: 15vmin;
}
.wrapper .city-sign {
grid-area: c;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
border: 0.5rem solid #23565b;
min-height: 10rem;
}
.wrapper .city-sign .city {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
width: 100%;
height: 50%;
font-size: 3vmin;
line-height: 3vmin;
text-transform: uppercase;
}
.wrapper .city-sign .city #city-right {
fill: #eeece1;
}
.wrapper .city-sign .city #city-left {
fill: #23565b;
}
.wrapper .city-sign .city #city-right,
.wrapper .city-sign .city #city-left {
height: 1rem;
padding-left: 1vmin;
}
.wrapper .city-sign .dark {
background-color: #23565b;
color: #eeece1;
}
.wrapper .city-sign .light {
color: #23565b;
}
.wrapper .sunsets {
grid-area: d;
max-width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
color: #f3785f;
font-size: 2.9vmin;
line-height: 4vmin;
border: 0.5rem solid #f3785f;
}
.wrapper .sunsets #sunset {
fill: #f3785f;
height: 8vmin;
}
.wrapper .sunsets h1 {
padding-left: 1rem;
}
.wrapper .motto-sign {
grid-area: e;
width: 100%;
padding: 1rem;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
background-color: #23565b;
color: #eeece1;
border-bottom-left-radius: 3rem;
}
.wrapper .motto-sign #top-left-arrow,
.wrapper .motto-sign #island-time {
fill: #eeece1;
}
.wrapper .motto-sign #top-left-arrow {
height: 18vmin;
}
.wrapper .credit {
grid-area: f;
background-color: #23565b;
color: #eeece1;
font-size: 1.75vmin;
writing-mode: vertical-rl;
transform: rotate(-180deg);
padding: 0.5rem;
}
.wrapper .directory {
grid-area: g;
width: 100%;
border-top: 0.5rem solid #23565b;
border-bottom: 0.5rem solid #23565b;
}
.wrapper .directory__heading {
display: flex;
align-items: center;
justify-content: space-around;
}
.wrapper .directory__heading h1 {
color: #f3785f;
font-size: 8vmin;
}
.wrapper .directory__heading h2 {
color: #23565b;
font-size: 6vmin;
}
.wrapper .directory__attractions {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 0.5rem;
color: #23565b;
text-transform: uppercase;
font-size: 2vmin;
padding: 1rem 0;
border-top: 0.5rem solid #23565b;
}
.wrapper .directory__rows {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
.wrapper .directory #right,
.wrapper .directory #top-right,
.wrapper .directory #btm-left,
.wrapper .directory #left {
fill: #f3785f;
height: 1.75vmin;
padding-left: 1vmin;
}
.wrapper .welcome-sign {
grid-area: h;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
border: 0.5rem solid #f3785f;
}
.wrapper .welcome-sign .welcome {
padding: 2vmin;
}
.wrapper .welcome-sign .peach {
text-align: center;
color: #f3785f;
font-size: 3.5vmin;
line-height: 4vmin;
}
.wrapper .welcome-sign .teal {
color: #23565b;
font-size: 6.75vmin;
line-height: 7vmin;
text-transform: uppercase;
}
.wrapper .welcome-sign .peach-bkgd {
font-family: "Satisfy", cursive;
font-size: 3vmin;
line-height: 8vmin;
background: #f3785f;
color: #eeece1;
width: 100%;
padding-top: 0.5rem;
text-align: center;
}
@media (max-height: 650px) {
.wrapper {
padding-top: 0;
}
.wrapper .palm-tree #palm-tree {
height: 12vmax;
}
.wrapper .city-sign .city {
font-size: 3vmax;
line-height: 3vmax;
}
.wrapper .city-sign .city-arrow {
font-size: 5vmax;
}
.wrapper .sunsets {
font-size: 3vmax;
}
.wrapper .sunsets #sunset {
height: 8vmax;
}
.wrapper .credit {
font-size: 1.5vmax;
}
.wrapper .directory__heading h1 {
font-size: 8vmax;
}
.wrapper .directory__heading h2 {
font-size: 6vmax;
}
.wrapper .directory__attractions {
font-size: 2vmax;
}
.wrapper .directory #right,
.wrapper .directory #top-right,
.wrapper .directory #btm-left,
.wrapper .directory #left {
fill: #f3785f;
height: 1vmax;
padding-left: 1vmax;
}
.wrapper .welcome-sign .peach {
font-size: 3vmax;
line-height: 4vmax;
}
.wrapper .welcome-sign .teal {
font-size: 6vmax;
line-height: 7vmax;
}
.wrapper .welcome-sign .peach-bkgd {
font-size: 2vmax;
line-height: 3vmax;
}
}
Дорожные знаки #CPC (Результат кода)
Comments