Skip to content

Instantly share code, notes, and snippets.

@storbukas
Last active February 20, 2021 10:58
Show Gist options
  • Save storbukas/1f71b85a6e1f94ff4f5cecf6dc92409d to your computer and use it in GitHub Desktop.
Save storbukas/1f71b85a6e1f94ff4f5cecf6dc92409d to your computer and use it in GitHub Desktop.
Personlig kjennemerke (bilskilt) - Statens Vegvesen
.bilskilt {
font-family: "LFT Etica", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height: 1.4;
box-sizing: border-box;
overflow: hidden;
display: inline-block;
background-color: black;
color: black;
height: 46px;
min-width: 220px;
width: 220px;
font-size: 36px;
border-radius: 4px;
}
.bilskilt-kjennemerke {
text-align: center;
margin-top: 2px;
height: 42px;
width: 197px;
margin-right: 2px;
float: right;
background-color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
line-height: 44px;
}
.bilskilt-flagg {
margin-top: 2px;
height: 42px;
width: 19px;
margin-left: 2px;
float: left;
background-color: #039;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
<div class="bilskilt">
<div class="bilskilt-flagg">
<svg version="1.0" viewBox="0 0 213.33 469.33" xmlns="http://www.w3.org/2000/svg">
<rect transform="scale(-1,1)" x="-213.33" width="213.33" height="469.33" style="fill:#039;stroke-width:1.0667"></rect>
<g transform="matrix(.97915 0 0 1.0213 -8 0)" style="fill:#fff" aria-label="N">
<path d="m176.49 395.13h-31.048l-53.034-85.761v85.761h-29.538v-124.95h38.517l45.566 71.579v-71.579h29.538z" style="fill:#fff;stroke-width:1.0667px"></path>
</g>
<rect x="23.645" y="62.481" width="165.92" height="120.67" style="fill:#ef2b2d;stroke-width:1.0667"></rect>
<rect x="68.895" y="62.481" width="30.167" height="120.67" style="fill:#fff;stroke-width:1.0667"></rect>
<rect x="23.645" y="107.73" width="165.92" height="30.167" style="fill:#fff;stroke-width:1.0667"></rect>
<rect x="76.437" y="62.481" width="15.083" height="120.67" style="fill:#002868;stroke-width:1.0667"></rect>
<rect x="23.645" y="115.27" width="165.92" height="15.083" style="fill:#002868;stroke-width:1.0667"></rect>
</svg>
</div>
<div class="bilskilt-kjennemerke">GEEK</div>
</div>

Bilskilt

HTML
<div class="bilskilt">
  <div class="bilskilt-flagg">
    <svg version="1.0" viewBox="0 0 213.33 469.33" xmlns="http://www.w3.org/2000/svg">
      <rect transform="scale(-1,1)" x="-213.33" width="213.33" height="469.33" style="fill:#039;stroke-width:1.0667"></rect>
      <g transform="matrix(.97915 0 0 1.0213 -8 0)" style="fill:#fff" aria-label="N">
        <path d="m176.49 395.13h-31.048l-53.034-85.761v85.761h-29.538v-124.95h38.517l45.566 71.579v-71.579h29.538z" style="fill:#fff;stroke-width:1.0667px"></path>
      </g>
      <rect x="23.645" y="62.481" width="165.92" height="120.67" style="fill:#ef2b2d;stroke-width:1.0667"></rect>
      <rect x="68.895" y="62.481" width="30.167" height="120.67" style="fill:#fff;stroke-width:1.0667"></rect>
      <rect x="23.645" y="107.73" width="165.92" height="30.167" style="fill:#fff;stroke-width:1.0667"></rect>
      <rect x="76.437" y="62.481" width="15.083" height="120.67" style="fill:#002868;stroke-width:1.0667"></rect>
      <rect x="23.645" y="115.27" width="165.92" height="15.083" style="fill:#002868;stroke-width:1.0667"></rect>
    </svg>
  </div>
  <div class="bilskilt-kjennemerke">GEEK</div>
</div>

CSS

.bilskilt {
  font-family: "LFT Etica", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  line-height: 1.4;
  box-sizing: border-box;
  overflow: hidden;
  display: inline-block;
  background-color: black;
  color: black;
  height: 46px;
  min-width: 220px;
  width: 220px;
  font-size: 36px;
  border-radius: 4px;
}

.bilskilt-kjennemerke {
  text-align: center;
  margin-top: 2px;
  height: 42px;
  width: 197px;
  margin-right: 2px;
  float: right;
  background-color: white;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  line-height: 44px;
}

.bilskilt-flagg {
  margin-top: 2px;
  height: 42px;
  width: 19px;
  margin-left: 2px;
  float: left;
  background-color: #039;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment