USA using webfont stately

Developer
Maksim Surguy
Size
2,579 Kb
Views
28,336
  1. USA using webfont stately Previews
  2. USA using webfont stately HTML Codes
  3. USA using webfont stately CSS Codes

How do I make an usa using webfont stately?

Make a nice map of USA using a webfont. What is a usa using webfont stately? How do you make a usa using webfont stately? This script and codes were developed by Maksim Surguy on 12 September 2022, Monday.

USA using webfont stately Previews
IQ Test

USA using webfont stately - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>USA using webfont stately</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>United States of America Elections</h1>
<ul class="stately" id="election"> <li data-state="al" id="al">A</li> <li data-state="ak" id="ak">B</li> <li data-state="ar" id="ar">C</li> <li data-state="az" id="az">D</li> <li data-state="ca" id="ca">E</li> <li data-state="co" id="co">F</li> <li data-state="ct" id="ct">G</li> <li data-state="de" id="de">H</li> <li data-state="dc" id="dc">I</li> <li data-state="fl" id="fl">J</li> <li data-state="ga" id="ga">K</li> <li data-state="hi" id="hi">L</li> <li data-state="id" id="id">M</li> <li data-state="il" id="il">N</li> <li data-state="in" id="in">O</li> <li data-state="ia" id="ia">P</li> <li data-state="ks" id="ks">Q</li> <li data-state="ky" id="ky">R</li> <li data-state="la" id="la">S</li> <li data-state="me" id="me">T</li> <li data-state="md" id="md">U</li> <li data-state="ma" id="ma">V</li> <li data-state="mi" id="mi">W</li> <li data-state="mn" id="mn">X</li> <li data-state="ms" id="ms">Y</li> <li data-state="mo" id="mo">Z</li> <li data-state="mt" id="mt">a</li> <li data-state="ne" id="ne">b</li> <li data-state="nv" id="nv">c</li> <li data-state="nh" id="nh">d</li> <li data-state="nj" id="nj">e</li> <li data-state="nm" id="nm">f</li> <li data-state="ny" id="ny">g</li> <li data-state="nc" id="nc">h</li> <li data-state="nd" id="nd">i</li> <li data-state="oh" id="oh">j</li> <li data-state="ok" id="ok">k</li> <li data-state="or" id="or">l</li> <li data-state="pa" id="pa">m</li> <li data-state="ri" id="ri">n</li> <li data-state="sc" id="sc">o</li> <li data-state="sd" id="sd">p</li> <li data-state="tn" id="tn">q</li> <li data-state="tx" id="tx">r</li> <li data-state="ut" id="ut">s</li> <li data-state="va" id="va">t</li> <li data-state="vt" id="vt">u</li> <li data-state="wa" id="wa">v</li> <li data-state="wv" id="wv">w</li> <li data-state="wi" id="wi">x</li> <li data-state="wy" id="wy">y</li>
</ul>
</body>
</html>

USA using webfont stately - Script Codes CSS Codes

body { padding: 40px; background-image: url(https://subtlepatterns.com/patterns/kindajean.png); margin: 0 auto; font-family: "helvetica neue",arial,sans-serif; -webkit-font-smoothing: antialiased;
}
h1 { text-align: center; font-size: 24px; font-weight: bold; margin: 24px 0 6px; color: #9d9d9d;
}
/** Stately setup
*************************************/
@font-face { font-family: 'stately-webfont'; src: url("https://raw.github.com/intridea/stately/master/assets/font/stately-webfont.eot"); src: url("https://raw.github.com/intridea/stately/master/assets/font/stately-webfont.eot?#iefix") format("embedded-opentype"), url("https://raw.github.com/intridea/stately/master/assets/font/stately-webfont.woff") format("woff"), url("https://raw.github.com/intridea/stately/master/assets/font/stately-webfont.ttf") format("truetype"), url("https://raw.github.com/intridea/stately/master/assets/font/stately-webfont.svg#testfontRegular") format("svg"); font-weight: normal; font-style: normal;
}
.stately { font: normal normal 500px/100% "stately-webfont"; font-size-adjust: none; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -moz-font-feature-settings: "liga=1"; -ms-font-feature-settings: "liga" 1; -ms-font-feature-settings: "liga", "dlig"; overflow: hidden; width: 500px; display: block; margin: 0 auto; padding: 0; list-style: none;
}
.stately li { float: left; margin: -20% 0 0 -100%; position: relative; cursor: default; -webkit-transition: all 1s ease-in; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; left: 101%; width: 100%;
}
/** Style customizations
*************************************/
.stately { background: #f2f2f2; padding: 20px; border-radius: 10px; border-top: 1px solid #dddddd;
}
#election { color: #00aeef;
}
#election #id,
#election #ut,
#election #az,
#election #ak,
#election #wy,
#election #mt,
#election #no,
#election #sd,
#election #nd,
#election #ne,
#election #ks,
#election #ok,
#election #tx,
#election #mo,
#election #ar,
#election #la,
#election #ms,
#election #tn,
#election #ky,
#election #wv,
#election #nc,
#election #sc,
#election #ga,
#election #al { color: #ff7474;
}
USA using webfont stately - Script Codes
USA using webfont stately - Script Codes
Home Page Home
Developer Maksim Surguy
Username msurguy
Uploaded September 12, 2022
Rating 3.5
Size 2,579 Kb
Views 28,336
Do you need developer help for USA using webfont stately?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Maksim Surguy (msurguy) Script Codes
Name
Dynamic SVG poster
Bootstrap - flat ui buttons
Background Blur plugin
Magnetic particles - iOS version
Ladda Bootstrap 3
Lightning In JS
Coolest clock ever
Sort algorithms illustrated
Sortable Grid UI JS
Google maps new styling
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!