Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/header-images. makin some social media headers with herohero
Something went wrong. Try again.
header-images index.html
3.8 kB · 64 lines
HTML
at master
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465<!DOCTYPE html><html lang="en">
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style> html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f2930d; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 640 1120' xmlns='http://www.w3.org/2000/svg' fill='%23f2930d' fill-opacity='1' width='640' height='1120' %3E%3Cpath d='M0 799.718v-40h59.98l-.02 359.96h80v.3h-120l.02-320.26H0zm179.98 320.26v-40.26h-80v-120c46.8 0 93.59-.15 140.39 0 24.62.23 48.38 16.91 56.45 40.76 2.09 6.18 3.14 12.72 3.16 19.2v100.3h-39.81c.09-33.51.13-67.02-.19-100.53-.16-10.31-9.13-19.7-20.03-19.73h-99.97v40h80v80.26h-40zm160 0v-400.27h120c0 60.08-.57 120.17 0 180.26.16 10.32 9.13 19.7 20.03 19.74h99.97v-40h-80l.02-359.97h-80v-120c46.79 0 93.59-.15 140.38 0 24.63.24 48.38 16.92 56.46 40.76 2.09 6.18 3.14 12.73 3.16 19.21v140.03h20v40h-60c0-60.09.57-120.18 0-180.26-.17-10.32-9.14-19.7-20.03-19.74H460v40h80l-.02 359.97h80v120c-46.8 0-93.59.14-140.39 0-24.62-.24-48.38-16.92-56.45-40.76-2.09-6.18-3.14-12.73-3.16-19.21v-140.03h-40v360.27h-40zm120 0h-40v-120.28h40v120.28zm40 0v-120.27h120c0 40.09-.25 80.18-.25 120.27h-39.75v-80.27h-40v80.27h-40zM540 0v359.738H420c0-60.09.57-120.178 0-180.263-.17-10.316-9.14-19.702-20.03-19.737H300v40h80l-.02 359.97h80v120c-46.8 0-93.59.14-140.39 0-24.62-.24-48.38-16.92-56.45-40.76-2.09-6.18-3.14-12.73-3.16-19.21v-140.03h-40v440.01h-120c0-60.09.57-120.18 0-180.27-.16-10.31-9.13-19.7-20.03-19.73H0v-40.05c26.79-.03 53.58-.04 80.37.05 24.62.23 48.38 16.91 56.45 40.76 2.09 6.18 3.14 12.72 3.16 19.2v140.04h40v-440.01h120c0 60.08-.57 120.17 0 180.26.16 10.32 9.13 19.7 20.03 19.74h99.97v-40h-80l.02-359.97h-80v-120c46.79 0 93.59-.147 140.38.001 24.63.235 48.38 16.915 56.46 40.76 2.09 6.18 3.14 12.726 3.16 19.207v140.032h40V0h40zM299.98 919.708h-40v-200h40v200zM640 679.688v40.05h-20v40h20v40h-60v-120c20 0 40-.03 60-.05zM179.98 0h40l-.02 279.678h80v120c-46.79 0-93.59.15-140.38 0-24.63-.23-48.38-16.91-56.46-40.76-2.09-6.18-3.14-12.72-3.16-19.21V199.68h-40l.02 440.038H0v-40h19.98l-.02-440.038h120c0 60.088-.57 120.178 0 180.268.17 10.31 9.14 19.7 20.03 19.73h99.97v-40h-80L179.98 0zm-40 639.698h-40v-200h40v200zm480.01-279.98h-40V159.721h40v199.997zM139.96 0v119.642c-46.65 0-93.31.147-139.96 0v-40h99.96v-40h-80V0h120zm479.79 0c0 19.989.06 39.979.25 59.967.16 10.307 9.12 19.685 20 19.737v40l-.39-.001c-24.62-.235-48.38-16.915-56.45-40.76-2.09-6.18-3.14-12.726-3.16-19.207V0h39.75zM419.98 0h40v79.719h-40V0zm-40 0v79.714h-120c0-26.571.11-53.143.19-79.714h39.81v39.714h40V0h40z' /%3E%3C/svg%3E"), linear-gradient(45deg, rgba(68, 62, 53, 0) 10%, rgba(68, 62, 53, 0.1), rgba(68, 62, 53, 0) 90%); background-position: center; background-size: 320px, 100%; }
svg { fill: currentColor; }
.logo { display: flex; justify-content: center; align-items: center; width: 140px; height: 120px; color: #ffffff; } </style></head>
<body> <div class="logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 281 241" width="281" height="241" preserveAspectRatio="xMinYMid" > <title>Go to homepage</title> <path d="M280 120v120c-46.795 0-93.59.148-140.385-.001-24.624-.235-48.379-16.914-56.455-40.76-2.093-6.18-3.139-12.726-3.16-19.207V40H40v200H0V0h120c0 60.088-.568 120.178.002 180.263.164 10.317 9.135 19.703 20.03 19.737H240v-40h-80V0h40v120h80z" /> </svg> </div></body>
</html>