Skip to content

Instantly share code, notes, and snippets.

@IsaiahJTurner

IsaiahJTurner/index.html

Created October 9, 2016 00:56
Show Gist options
  • Save IsaiahJTurner/5cf7d2e8b3a4f65c1f44d34c2994dc08 to your computer and use it in GitHub Desktop.
Save IsaiahJTurner/5cf7d2e8b3a4f65c1f44d34c2994dc08 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<HTML>
<body style="height: 100%; margin: 0; overflow: hidden;">
<!-- Top gradient -->
<div style="width: 100%; height: calc(50% - 78px); background-image: linear-gradient(-180deg, #000000 0%, #9B2F2F 100%);"></div>
<!-- Middle majigger -->
<div style="position: relative; height: 156px; background-image: linear-gradient(-180deg, #333333 0%, #4D4D4D 100%);box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.50);">
<div style="position: absolute;border-radius: 50%; left: calc(50% - 125px);">
</div>
<div style="position: absolute;border-radius: 50%; left: calc(50% - 125px);margin-top: -55px;height: 250px; width: 250px; background: #282828;box-shadow: 0px 2px 7px 0px #000000;text-align:center; font-family: LucidaGrande;font-size: 100px;color: #E8E8E8;">
<div style="padding-top: 65px;">90</div>
</div>
<!-- Driving Score Label -->
<div style="position: absolute; width: 100%; top: calc(100% + 50px); text-align: center; font-family: LucidaGrande; font-size: 30px; color: #E8E8E8;">
Driving Score
</div>
</div>
<!-- Bottom thingy -->
<div style="width: 100%; height: calc(50% - 78px); background-image: linear-gradient(0deg, #000000 0%, #9B2F2F 100%);"></div>
</div>
</body>
</HTML>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment