christiangoeschel/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
christiangoeschel 2024-02-27 10:23:19 -05:00
parent 801ee5fa57
commit af5207b9d7
77 changed files with 53842 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

96
css/basis-stylesheet.css Normal file
View File

@ -0,0 +1,96 @@
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('../fonts/Basis/BasisGrotesqueMonoPro-It.eot');
src: local('Basis Grotesque Mono Pro Italic'), local('BasisGrotesqueMonoPro-It'),
url('BasisGrotesqueMonoPro-It.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-It.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-It.woff') format('woff'),
url('BasisGrotesqueMonoPro-It.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-LightIt.eot');
src: local('Basis Grotesque Mono Pro Light Italic'), local('BasisGrotesqueMonoPro-LightIt'),
url('BasisGrotesqueMonoPro-LightIt.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-LightIt.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-LightIt.woff') format('woff'),
url('BasisGrotesqueMonoPro-LightIt.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-MediumIt.eot');
src: local('Basis Grotesque Mono Pro Medium Italic'), local('BasisGrotesqueMonoPro-MediumIt'),
url('BasisGrotesqueMonoPro-MediumIt.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-MediumIt.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-MediumIt.woff') format('woff'),
url('BasisGrotesqueMonoPro-MediumIt.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Basis Grotesque Mono ProBold';
src: url('../fonts/Basis/BasisGrotesqueMonoPro-Bold.eot');
src: local('Basis Grotesque Mono Pro Bold'), local('BasisGrotesqueMonoPro-Bold'),
url('../fonts/Basis/BasisGrotesqueMonoPro-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Basis/BasisGrotesqueMonoPro-Bold.woff2') format('woff2'),
url('../fonts/Basis/BasisGrotesqueMonoPro-Bold.woff') format('woff'),
url('../fonts/Basis/BasisGrotesqueMonoPro-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-BoldIt.eot');
src: local('Basis Grotesque Mono Pro Bold Italic'), local('BasisGrotesqueMonoPro-BoldIt'),
url('BasisGrotesqueMonoPro-BoldIt.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-BoldIt.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-BoldIt.woff') format('woff'),
url('BasisGrotesqueMonoPro-BoldIt.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-Light.eot');
src: local('Basis Grotesque Mono Pro Light'), local('BasisGrotesqueMonoPro-Light'),
url('BasisGrotesqueMonoPro-Light.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-Light.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-Light.woff') format('woff'),
url('BasisGrotesqueMonoPro-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-Medium.eot');
src: local('Basis Grotesque Mono Pro Medium'), local('BasisGrotesqueMonoPro-Medium'),
url('BasisGrotesqueMonoPro-Medium.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-Medium.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-Medium.woff') format('woff'),
url('BasisGrotesqueMonoPro-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-Regular.eot');
src: local('Basis Grotesque Mono Pro Regular'), local('BasisGrotesqueMonoPro-Regular'),
url('BasisGrotesqueMonoPro-Regular.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-Regular.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-Regular.woff') format('woff'),
url('BasisGrotesqueMonoPro-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

72
css/messina-stylesheet.css Normal file
View File

@ -0,0 +1,72 @@
@font-face {
font-family: 'Messina Sans Mono SemiBold';
src: url('../fonts/Messina/MessinaSansMono-SemiBold.eot');
src: local('Messina Sans Mono SemiBold'), local('MessinaSansMono-SemiBold'),
url('../fonts/Messina/MessinaSansMono-SemiBold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Messina/MessinaSansMono-SemiBold.woff2') format('woff2'),
url('../fonts/Messina/MessinaSansMono-SemiBold.woff') format('woff'),
url('../fonts/Messina/MessinaSansMono-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono Light';
src: url('../fonts/Messina/MessinaSansMono-Light.eot');
src: local('Messina Sans Mono Light'), local('MessinaSansMono-Light'),
url('../fonts/Messina/MessinaSansMono-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/Messina/MessinaSansMono-Light.woff2') format('woff2'),
url('../fonts/Messina/MessinaSansMono-Light.woff') format('woff'),
url('../fonts/Messina/MessinaSansMono-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono Book';
src: url('MessinaSansMono-Book.eot');
src: local('Messina Sans Mono Book'), local('MessinaSansMono-Book'),
url('MessinaSansMono-Book.eot?#iefix') format('embedded-opentype'),
url('MessinaSansMono-Book.woff2') format('woff2'),
url('MessinaSansMono-Book.woff') format('woff'),
url('MessinaSansMono-Book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono';
src: url('../fonts/Messina/MessinaSansMono-Bold.eot');
src: local('Messina Sans Mono Bold'), local('MessinaSansMono-Bold'),
url('../fonts/Messina/MessinaSansMono-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Messina/MessinaSansMono-Bold.woff2') format('woff2'),
url('../fonts/Messina/MessinaSansMono-Bold.woff') format('woff'),
url('../fonts/Messina/MessinaSansMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono';
src: url('../fonts/Messina/MessinaSansMono-Regular.eot');
src: local('Messina Sans Mono Regular'), local('MessinaSansMono-Regular'),
url('../fonts/Messina/MessinaSansMono-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/Messina/MessinaSansMono-Regular.woff2') format('woff2'),
url('../fonts/Messina/MessinaSansMono-Regular.woff') format('woff'),
url('../fonts/Messina/MessinaSansMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono';
src: url('../fonts/Messina/MessinaSansMono-Black.eot');
src: local('Messina Sans Mono Black'), local('MessinaSansMono-Black'),
url('../fonts/Messina/MessinaSansMono-Black.eot?#iefix') format('embedded-opentype'),
url('../fonts/Messina/MessinaSansMono-Black.woff2') format('woff2'),
url('../fonts/Messina/MessinaSansMono-Black.woff') format('woff'),
url('../fonts/Messina/MessinaSansMono-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}

290
css/style.css Normal file
View File

@ -0,0 +1,290 @@
@import url(messina-stylesheet.css);
@import url(basis-stylesheet.css);
@font-face {
font-family: "CamptonBook";
src:
url("../fonts/CamptonBook.otf") format("opentype");
}
@font-face {
font-family: "VoyageReg";
src:
url('..fonts/VoyageReg.eot?#iefix') format('embedded-opentype'),
url("../fonts/VoyageReg.otf") format("opentype"),
url('../fonts/VoyageReg.svg#VoyagerReg') format('svg');
}
@font-face {
font-family: "MaisonNeueMono";
src:
url('../fonts/MaisonNeueMono.ttf') format('truetype');
}
@font-face {
font-family: "GT-Flexa";
src: url("../fonts/GT-Flexa/GT-Flexa-Medium-Trial.otf") format("opentype");
}
@media (max-width: 900px) {
html { font-size: 15px; }
}
@media (max-width: 400px) {
html { font-size: 13px; }
}
::selection {
background: #3c40c6; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #3c40c6; /* Gecko Browsers */
}
/* width */
::-webkit-scrollbar {
width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #999999;
}
.floating_message::-webkit-scrollbar {
width: 3px;
}
/* Track */
.floating_message::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
/* Handle */
.floating_message::-webkit-scrollbar-thumb {
background: #000;
}
/* Handle on hover */
.floating_message::-webkit-scrollbar-thumb:hover {
background: #484848;
}
html, body {
height: 100%;
width: 100%;
background-color: #fffaf3;
margin: auto;
overflow: hidden;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
p {
margin: 0;
}
.my_name{
color:white !important;
background-color:#3c40c6;
}
.date{
color:#3c40c6 !important;
}
.banner_text{
font-family: Messina Sans Mono SemiBold;
font-size: 3vw;
letter-spacing: -.1vw;
color: black;
}
.banner_text span{
color: #0be881;
}
.banner_text a{
color: #000;
text-decoration-style: dashed;
}
.banner_text a:hover{
text-decoration: underline;
}
input, textarea {
outline: none;
}
.interactive_button {
transition: background-color 280ms cubic-bezier(0.37, 0, 0.63, 1) 70ms;
transition: color 200ms cubic-bezier(0.37, 0, 0.63, 1) 50ms;
}
#top_section{
width:100%;
height: auto;
}
.flex_container{
display: flex;
flex-direction: column;
text-align: left;
}
.flex_container_item{
padding: 10px;
flex: 100%;
border-bottom: 1px solid #000;
}
/* FOOTER */
#footer_banner{
background-color: #000;
}
.footer_message_wrapper{
padding: 10px;
width: auto;
border-bottom: 1px solid #000;
height:auto;
}
.footer_message{
color: #ffd32a !important;
font-size: 1.5vw;
word-break: unset;
white-space: nowrap;
text-transform: uppercase;
margin-left: auto;
/* animation properties */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: banner-slide 45s linear infinite;
-webkit-animation: banner-slide 45s linear infinite;
animation: banner-slide 45s linear infinite;
&:hover {
animation-play-state: paused;
}
}
.footer_message a{
color: #ffd32a;
}
/*FOOTER BANNER ANIMATION*/
/* for Firefox */
@-moz-keyframes banner-slide {
from { -moz-transform: translateX(100%); }
to { -moz-transform: translateX(-500%); }
}
/* for Chrome */
@-webkit-keyframes banner-slide {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(-500%); }
}
@keyframes banner-slide {
from {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-moz-transform: translateX(-500%);
-webkit-transform: translateX(-500%);
transform: translateX(-500%);
}
}
.nav_item{
font-size: 5vw;
transition: 350ms cubic-bezier(0.37, 0, 0.63, 1) 7ms;
&:hover{
background-color: black;
color: #ff3f34;
cursor: pointer;
padding-left: 5px;
}
}
/* Loading cover */
.loading_cover {
width: 100%;
height: 100%;
z-index: 3;
background-color: black;
display: flex;
bottom:0;
right: 0;
position: absolute;
transition: bottom 350ms cubic-bezier(0.37, 0, 0.63, 1) 70ms;
}
.loading_cover.loaded {
bottom: -100%;
}
.loading_cover_inner {
width: auto;
height: auto;
display: inline-flex;
margin: auto;
animation: fadeInOut 700ms cubic-bezier(0.37, 0, 0.63, 1) 100ms infinite;
}
@keyframes fadeInOut {
0% { opacity: 100%; }
100% { opacity: 0%; }
}

BIN
fonts/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Bold.eot Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Bold.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Bold.woff Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-BoldIt.eot Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-BoldIt.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-BoldIt.woff Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-BoldIt.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-It.eot Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-It.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-It.woff Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-It.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Light.eot Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Light.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Light.woff Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Light.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-LightIt.eot Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-LightIt.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-LightIt.woff Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-LightIt.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Medium.eot Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Medium.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Medium.woff Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-MediumIt.eot Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-MediumIt.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-MediumIt.woff Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-MediumIt.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Regular.eot Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Regular.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Regular.woff Normal file
View File

Binary file not shown.

BIN
fonts/Basis/BasisGrotesqueMonoPro-Regular.woff2 Normal file
View File

Binary file not shown.

389
fonts/Basis/demo.html Normal file
View File

@ -0,0 +1,389 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, noarchive">
<meta name="format-detection" content="telephone=no">
<title>Transfonter demo</title>
<link href="stylesheet.css" rel="stylesheet">
<style>
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* common styles */
body {
background: #f1f1f1;
color: #000;
}
.page {
background: #fff;
width: 920px;
margin: 0 auto;
padding: 20px 20px 0 20px;
overflow: hidden;
}
.font-container {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 40px;
line-height: 1.3;
white-space: nowrap;
padding-bottom: 5px;
}
h1 {
position: relative;
background: #444;
font-size: 32px;
color: #fff;
padding: 10px 20px;
margin: 0 -20px 12px -20px;
}
.letters {
font-size: 25px;
margin-bottom: 20px;
}
.s10:before {
content: '10px';
}
.s11:before {
content: '11px';
}
.s12:before {
content: '12px';
}
.s14:before {
content: '14px';
}
.s18:before {
content: '18px';
}
.s24:before {
content: '24px';
}
.s30:before {
content: '30px';
}
.s36:before {
content: '36px';
}
.s48:before {
content: '48px';
}
.s60:before {
content: '60px';
}
.s72:before {
content: '72px';
}
.s10:before, .s11:before, .s12:before, .s14:before,
.s18:before, .s24:before, .s30:before, .s36:before,
.s48:before, .s60:before, .s72:before {
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: normal;
color: #999;
padding-right: 6px;
}
pre {
display: block;
position: relative;
padding: 9px;
margin: 0 0 10px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
font-size: 13px;
line-height: 1.428571429;
color: #333;
font-weight: normal !important;
font-style: normal !important;
background-color: #f5f5f5;
border: 1px solid #ccc;
overflow-x: auto;
border-radius: 4px;
}
pre:after {
display: block;
position: absolute;
right: 0;
top: 0;
content: 'Usage';
line-height: 1;
padding: 5px 8px;
font-size: 12px;
color: #767676;
background-color: #fff;
border: 1px solid #ccc;
border-right: none;
border-top: none;
border-radius: 0 4px 0 4px;
z-index: 10;
}
/* responsive */
@media (max-width: 959px) {
.page {
width: auto;
margin: 0;
}
}
</style>
</head>
<body>
<div class="page">
<div class="demo" style="font-family: 'Basis Grotesque Mono Pro'; font-weight: normal; font-style: italic;">
<h1>Basis Grotesque Mono Pro Italic</h1>
<pre>.your-style {
font-family: 'Basis Grotesque Mono Pro';
font-weight: normal;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Basis Grotesque Mono Pro'; font-weight: 300; font-style: italic;">
<h1>Basis Grotesque Mono Pro Light Italic</h1>
<pre>.your-style {
font-family: 'Basis Grotesque Mono Pro';
font-weight: 300;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Basis Grotesque Mono Pro'; font-weight: 500; font-style: italic;">
<h1>Basis Grotesque Mono Pro Medium Italic</h1>
<pre>.your-style {
font-family: 'Basis Grotesque Mono Pro';
font-weight: 500;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Basis Grotesque Mono Pro'; font-weight: bold; font-style: normal;">
<h1>Basis Grotesque Mono Pro Bold</h1>
<pre>.your-style {
font-family: 'Basis Grotesque Mono Pro';
font-weight: bold;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Basis Grotesque Mono Pro'; font-weight: bold; font-style: italic;">
<h1>Basis Grotesque Mono Pro Bold Italic</h1>
<pre>.your-style {
font-family: 'Basis Grotesque Mono Pro';
font-weight: bold;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Basis Grotesque Mono Pro'; font-weight: 300; font-style: normal;">
<h1>Basis Grotesque Mono Pro Light</h1>
<pre>.your-style {
font-family: 'Basis Grotesque Mono Pro';
font-weight: 300;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Basis Grotesque Mono Pro'; font-weight: 500; font-style: normal;">
<h1>Basis Grotesque Mono Pro Medium</h1>
<pre>.your-style {
font-family: 'Basis Grotesque Mono Pro';
font-weight: 500;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Basis Grotesque Mono Pro'; font-weight: normal; font-style: normal;">
<h1>Basis Grotesque Mono Pro Regular</h1>
<pre>.your-style {
font-family: 'Basis Grotesque Mono Pro';
font-weight: normal;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</div>
</body>
</html>

96
fonts/Basis/stylesheet.css Normal file
View File

@ -0,0 +1,96 @@
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-It.eot');
src: local('Basis Grotesque Mono Pro Italic'), local('BasisGrotesqueMonoPro-It'),
url('BasisGrotesqueMonoPro-It.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-It.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-It.woff') format('woff'),
url('BasisGrotesqueMonoPro-It.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-LightIt.eot');
src: local('Basis Grotesque Mono Pro Light Italic'), local('BasisGrotesqueMonoPro-LightIt'),
url('BasisGrotesqueMonoPro-LightIt.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-LightIt.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-LightIt.woff') format('woff'),
url('BasisGrotesqueMonoPro-LightIt.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-MediumIt.eot');
src: local('Basis Grotesque Mono Pro Medium Italic'), local('BasisGrotesqueMonoPro-MediumIt'),
url('BasisGrotesqueMonoPro-MediumIt.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-MediumIt.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-MediumIt.woff') format('woff'),
url('BasisGrotesqueMonoPro-MediumIt.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-Bold.eot');
src: local('Basis Grotesque Mono Pro Bold'), local('BasisGrotesqueMonoPro-Bold'),
url('BasisGrotesqueMonoPro-Bold.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-Bold.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-Bold.woff') format('woff'),
url('BasisGrotesqueMonoPro-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-BoldIt.eot');
src: local('Basis Grotesque Mono Pro Bold Italic'), local('BasisGrotesqueMonoPro-BoldIt'),
url('BasisGrotesqueMonoPro-BoldIt.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-BoldIt.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-BoldIt.woff') format('woff'),
url('BasisGrotesqueMonoPro-BoldIt.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-Light.eot');
src: local('Basis Grotesque Mono Pro Light'), local('BasisGrotesqueMonoPro-Light'),
url('BasisGrotesqueMonoPro-Light.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-Light.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-Light.woff') format('woff'),
url('BasisGrotesqueMonoPro-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-Medium.eot');
src: local('Basis Grotesque Mono Pro Medium'), local('BasisGrotesqueMonoPro-Medium'),
url('BasisGrotesqueMonoPro-Medium.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-Medium.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-Medium.woff') format('woff'),
url('BasisGrotesqueMonoPro-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Basis Grotesque Mono Pro';
src: url('BasisGrotesqueMonoPro-Regular.eot');
src: local('Basis Grotesque Mono Pro Regular'), local('BasisGrotesqueMonoPro-Regular'),
url('BasisGrotesqueMonoPro-Regular.eot?#iefix') format('embedded-opentype'),
url('BasisGrotesqueMonoPro-Regular.woff2') format('woff2'),
url('BasisGrotesqueMonoPro-Regular.woff') format('woff'),
url('BasisGrotesqueMonoPro-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

BIN
fonts/Messina/MessinaSansMono-Black.eot Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Black.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Black.woff Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Black.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Bold.eot Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Bold.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Bold.woff Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Book.eot Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Book.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Book.woff Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Book.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Light.eot Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Light.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Light.woff Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Light.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Regular.eot Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Regular.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Regular.woff Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-SemiBold.eot Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-SemiBold.woff Normal file
View File

Binary file not shown.

BIN
fonts/Messina/MessinaSansMono-SemiBold.woff2 Normal file
View File

Binary file not shown.

337
fonts/Messina/demo.html Normal file
View File

@ -0,0 +1,337 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, noarchive">
<meta name="format-detection" content="telephone=no">
<title>Transfonter demo</title>
<link href="stylesheet.css" rel="stylesheet">
<style>
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* demo styles */
body {
background: #f0f0f0;
color: #000;
}
.page {
background: #fff;
width: 920px;
margin: 0 auto;
padding: 20px 20px 0 20px;
overflow: hidden;
}
.font-container {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 40px;
line-height: 1.3;
white-space: nowrap;
padding-bottom: 5px;
}
h1 {
position: relative;
background: #444;
font-size: 32px;
color: #fff;
padding: 10px 20px;
margin: 0 -20px 12px -20px;
}
.letters {
font-size: 25px;
margin-bottom: 20px;
}
.s10:before {
content: '10px';
}
.s11:before {
content: '11px';
}
.s12:before {
content: '12px';
}
.s14:before {
content: '14px';
}
.s18:before {
content: '18px';
}
.s24:before {
content: '24px';
}
.s30:before {
content: '30px';
}
.s36:before {
content: '36px';
}
.s48:before {
content: '48px';
}
.s60:before {
content: '60px';
}
.s72:before {
content: '72px';
}
.s10:before, .s11:before, .s12:before, .s14:before,
.s18:before, .s24:before, .s30:before, .s36:before,
.s48:before, .s60:before, .s72:before {
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: normal;
color: #999;
padding-right: 6px;
}
pre {
display: block;
position: relative;
padding: 9px;
margin: 0 0 10px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 13px;
line-height: 1.428571429;
color: #333;
font-weight: normal;
font-style: normal;
background-color: #f5f5f5;
border: 1px solid #ccc;
overflow-x: auto;
border-radius: 4px;
}
pre:after {
display: block;
position: absolute;
right: 0;
top: 0;
content: 'Usage';
line-height: 1;
padding: 5px 8px;
font-size: 12px;
color: #767676;
background-color: #fff;
border: 1px solid #ccc;
border-right: none;
border-top: none;
border-radius: 0 4px 0 4px;
z-index: 10;
}
/* responsive */
@media (max-width: 959px) {
.page {
width: auto;
margin: 0;
}
}
</style>
</head>
<body>
<div class="page">
<div class="demo">
<h1 style="font-family: 'Messina Sans Mono'; font-weight: 600; font-style: normal;">Messina Sans Mono SemiBold</h1>
<pre>.your-style {
font-family: 'Messina Sans Mono';
font-weight: 600;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'Messina Sans Mono'; font-weight: 600; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo">
<h1 style="font-family: 'Messina Sans Mono'; font-weight: 300; font-style: normal;">Messina Sans Mono Light</h1>
<pre>.your-style {
font-family: 'Messina Sans Mono';
font-weight: 300;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'Messina Sans Mono'; font-weight: 300; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo">
<h1 style="font-family: 'Messina Sans Mono Book'; font-weight: normal; font-style: normal;">Messina Sans Mono Book</h1>
<pre>.your-style {
font-family: 'Messina Sans Mono Book';
font-weight: normal;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'Messina Sans Mono Book'; font-weight: normal; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo">
<h1 style="font-family: 'Messina Sans Mono'; font-weight: bold; font-style: normal;">Messina Sans Mono Bold</h1>
<pre>.your-style {
font-family: 'Messina Sans Mono';
font-weight: bold;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'Messina Sans Mono'; font-weight: bold; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo">
<h1 style="font-family: 'Messina Sans Mono'; font-weight: normal; font-style: normal;">Messina Sans Mono Regular</h1>
<pre>.your-style {
font-family: 'Messina Sans Mono';
font-weight: normal;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'Messina Sans Mono'; font-weight: normal; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo">
<h1 style="font-family: 'Messina Sans Mono'; font-weight: 900; font-style: normal;">Messina Sans Mono Black</h1>
<pre>.your-style {
font-family: 'Messina Sans Mono';
font-weight: 900;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'Messina Sans Mono'; font-weight: 900; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</div>
</body>
</html>

72
fonts/Messina/stylesheet.css Normal file
View File

@ -0,0 +1,72 @@
@font-face {
font-family: 'Messina Sans Mono';
src: url('MessinaSansMono-SemiBold.eot');
src: local('Messina Sans Mono SemiBold'), local('MessinaSansMono-SemiBold'),
url('MessinaSansMono-SemiBold.eot?#iefix') format('embedded-opentype'),
url('MessinaSansMono-SemiBold.woff2') format('woff2'),
url('MessinaSansMono-SemiBold.woff') format('woff'),
url('MessinaSansMono-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono';
src: url('MessinaSansMono-Light.eot');
src: local('Messina Sans Mono Light'), local('MessinaSansMono-Light'),
url('MessinaSansMono-Light.eot?#iefix') format('embedded-opentype'),
url('MessinaSansMono-Light.woff2') format('woff2'),
url('MessinaSansMono-Light.woff') format('woff'),
url('MessinaSansMono-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono Book';
src: url('MessinaSansMono-Book.eot');
src: local('Messina Sans Mono Book'), local('MessinaSansMono-Book'),
url('MessinaSansMono-Book.eot?#iefix') format('embedded-opentype'),
url('MessinaSansMono-Book.woff2') format('woff2'),
url('MessinaSansMono-Book.woff') format('woff'),
url('MessinaSansMono-Book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono';
src: url('MessinaSansMono-Bold.eot');
src: local('Messina Sans Mono Bold'), local('MessinaSansMono-Bold'),
url('MessinaSansMono-Bold.eot?#iefix') format('embedded-opentype'),
url('MessinaSansMono-Bold.woff2') format('woff2'),
url('MessinaSansMono-Bold.woff') format('woff'),
url('MessinaSansMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono';
src: url('MessinaSansMono-Regular.eot');
src: local('Messina Sans Mono Regular'), local('MessinaSansMono-Regular'),
url('MessinaSansMono-Regular.eot?#iefix') format('embedded-opentype'),
url('MessinaSansMono-Regular.woff2') format('woff2'),
url('MessinaSansMono-Regular.woff') format('woff'),
url('MessinaSansMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Messina Sans Mono';
src: url('MessinaSansMono-Black.eot');
src: local('Messina Sans Mono Black'), local('MessinaSansMono-Black'),
url('MessinaSansMono-Black.eot?#iefix') format('embedded-opentype'),
url('MessinaSansMono-Black.woff2') format('woff2'),
url('MessinaSansMono-Black.woff') format('woff'),
url('MessinaSansMono-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}

1347
icons/cgnfavicon.ai Executable file
View File

File diff suppressed because one or more lines are too long

BIN
icons/cgnfavicon.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 653 B

BIN
icons/cgnfavicon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

35
icons/cgnicon.svg Executable file
View File

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 1920" style="enable-background:new 0 0 1920 1920;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<g>
<g>
<g>
<path class="st0" d="M1329.69,654.38h117.96c-46.03,220.09-225.84,368.25-466.07,368.25c-281.94,0-509.22-218.65-509.22-507.78
S699.64,8.5,981.58,8.5c240.23,0,420.04,146.72,466.07,366.81h-117.96c-40.28-159.67-169.74-260.36-348.11-260.36
c-221.52,0-394.14,171.18-394.14,399.9s172.62,401.33,394.14,401.33C1159.95,916.18,1289.41,812.61,1329.69,654.38z"/>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M1019.91,1377.83v516.41h-92.06l-8.63-199.95c-70.48,130.9-195.63,217.21-374,217.21
c-289.14,0-506.35-224.4-506.35-499.15c0-296.33,228.72-513.54,513.54-513.54c212.9,0,409.97,122.27,464.63,340.92H894.76
c-48.91-158.23-197.07-234.47-340.92-234.47c-225.84,0-399.9,169.74-399.9,407.09c0,212.9,162.55,392.7,391.27,392.7
c199.95,0,326.53-139.53,353.87-322.22H535.14v-105.01H1019.91z"/>
</g>
</g>
<g>
<g>
<path class="st0" d="M1881.14,916.07v978.16h-94.94l-625.74-771.02v771.02h-113.64V916.07h92.06l628.61,781.09V916.07H1881.14z
"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
icons/favicon.ico Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

58
images/cgn_logo_blk.svg Executable file
View File

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 924 119" style="enable-background:new 0 0 924 119;" xml:space="preserve">
<g>
<path d="M48.72,35.54h9.04c-2.61,13.28-12.95,22.07-26.8,22.07C15,57.61,2.21,45.39,2.21,28.86C2.21,12.24,15,0.19,30.96,0.19
c13.85,0,24.19,8.63,26.8,21.91h-9.04c-2.2-8.55-8.55-13.77-17.76-13.77c-11.32,0-19.87,8.55-19.87,20.53
c0,11.89,8.55,20.53,19.87,20.53C40.17,49.38,46.52,44.17,48.72,35.54z"/>
<path d="M115.76,1.16v55.39h-8.72V33.42H77.96v23.13h-8.8V1.16h8.8v24.11h29.08V1.16H115.76z"/>
<path d="M150.54,37.82h-12.79v18.73h-8.8V1.16h22.24c12.38,0,21.34,7.17,21.34,18.33c0,8.23-4.89,14.34-12.38,16.94l15.48,20.12
h-10.75L150.54,37.82z M137.75,29.75h13.11c7.41,0,13.03-3.91,13.03-10.26c0-6.35-5.62-10.26-13.03-10.26h-13.11V29.75z"/>
<path d="M192.49,1.16v55.39h-8.8V1.16H192.49z"/>
<path d="M248.45,17.21h-8.63c-0.98-5.86-4.97-9.45-13.03-9.45c-7.09,0-11.73,3.01-11.73,8.39c0,4.4,3.26,6.68,9.2,7.82l7.74,1.55
c10.34,2.04,16.29,6.44,16.29,14.99c0,10.34-8.47,17.02-21.18,17.02c-13.52,0-22.56-7.09-23.62-18.98h8.71
c1.06,7,6.6,11.16,15.39,11.16c7.25,0,11.73-3.01,11.73-8.15c0-3.34-2.2-6.35-8.72-7.49l-9.69-1.87
c-10.34-1.95-15.15-7.25-15.15-15.39c0-10.1,8.15-16.62,20.44-16.62C236.39,0.19,247.15,4.42,248.45,17.21z"/>
<path d="M300.91,9.23h-19.63v47.32h-8.72V9.23h-19.63V1.16h47.98V9.23z"/>
<path d="M317.77,1.16v55.39h-8.8V1.16H317.77z"/>
<path d="M368.43,43.27h-27.04l-5.7,13.28h-9.37l24.52-55.39h8.23l24.44,55.39h-9.37L368.43,43.27z M365.09,35.46l-10.18-23.87
l-10.26,23.87H365.09z"/>
<path d="M440.44,1.16v55.39h-7l-32.66-39.1v39.1h-8.8V1.16h6.76l32.99,39.91V1.16H440.44z"/>
<path d="M527.76,26.5v30.06h-6.92l-0.65-9.53c-3.91,6.43-10.51,10.51-19.96,10.51c-16.53,0-28.67-12.71-28.67-28.1
c0-17.19,12.95-29.24,29.08-29.24c11.97,0,23.38,6.6,26.63,19.79h-9.37c-2.85-8.55-10.59-11.65-17.1-11.65
c-11.65,0-20.36,8.55-20.36,21.1c0,10.67,7.98,19.87,19.79,19.87c9.77,0,16.05-6.19,18-14.66h-18.65V26.5H527.76z"/>
<path d="M596.26,28.86c0,15.96-12.87,28.67-28.83,28.67c-15.96,0-28.83-12.71-28.83-28.67c0-15.96,12.87-28.67,28.83-28.67
C583.39,0.19,596.26,12.89,596.26,28.86z M587.39,28.86c0-11.32-8.63-20.53-19.96-20.53c-11.32,0-19.96,9.2-19.96,20.53
s8.63,20.44,19.96,20.44C578.75,49.3,587.39,40.18,587.39,28.86z"/>
<path d="M616.39,9.23v15.88h27.69v8.06h-27.69v15.23h30.95v8.15h-39.75V1.16h39.75v8.06H616.39z"/>
<path d="M699.71,17.21h-8.63c-0.98-5.86-4.97-9.45-13.03-9.45c-7.09,0-11.73,3.01-11.73,8.39c0,4.4,3.26,6.68,9.2,7.82l7.74,1.55
c10.34,2.04,16.29,6.44,16.29,14.99c0,10.34-8.47,17.02-21.18,17.02c-13.52,0-22.56-7.09-23.62-18.98h8.71
c1.06,7,6.6,11.16,15.39,11.16c7.25,0,11.73-3.01,11.73-8.15c0-3.34-2.2-6.35-8.72-7.49l-9.69-1.87
c-10.34-1.95-15.15-7.25-15.15-15.39c0-10.1,8.15-16.62,20.44-16.62C687.66,0.19,698.41,4.42,699.71,17.21z"/>
<path d="M754.62,35.54h9.04c-2.61,13.28-12.95,22.07-26.8,22.07c-15.96,0-28.75-12.22-28.75-28.75c0-16.62,12.79-28.67,28.75-28.67
c13.85,0,24.19,8.63,26.8,21.91h-9.04c-2.2-8.55-8.55-13.77-17.76-13.77c-11.32,0-19.87,8.55-19.87,20.53
c0,11.89,8.55,20.53,19.87,20.53C746.06,49.38,752.42,44.17,754.62,35.54z"/>
<path d="M821.65,1.16v55.39h-8.71V33.42h-29.08v23.13h-8.8V1.16h8.8v24.11h29.08V1.16H821.65z"/>
<path d="M843.65,9.23v15.88h27.69v8.06h-27.69v15.23h30.95v8.15h-39.75V1.16h39.75v8.06H843.65z"/>
<path d="M923.8,48.41v8.15h-38.36V1.16h8.8v47.24H923.8z"/>
<path d="M52.47,62.26v55.39h-7L12.8,78.55v39.1H4V62.26h6.76l32.99,39.91V62.26H52.47z"/>
<path d="M115.51,89.62c0,16.21-12.38,28.02-29.4,28.02H65.66V62.26h20.44C103.13,62.26,115.51,73.82,115.51,89.62z M106.63,89.62
c0-11-8.88-19.3-20.53-19.3H74.46v39.18h11.65C97.76,109.5,106.63,101.03,106.63,89.62z"/>
<path d="M161.62,97.2c0,13.85-8.23,21.42-21.1,21.42c-11.24,0-19.47-6.68-20.36-18.16h8.88c0.65,6.6,5.54,10.02,12.05,10.02
c6.76,0,11.65-4.81,11.65-13.52v-34.7h8.88V97.2z"/>
<path d="M229.06,89.95c0,15.96-12.87,28.67-28.83,28.67c-15.96,0-28.83-12.71-28.83-28.67c0-15.96,12.87-28.67,28.83-28.67
C216.19,61.28,229.06,73.99,229.06,89.95z M220.18,89.95c0-11.32-8.63-20.53-19.96-20.53c-11.32,0-19.96,9.2-19.96,20.53
s8.63,20.44,19.96,20.44C211.55,110.39,220.18,101.27,220.18,89.95z"/>
<path d="M296.26,117.64h-8.72V81.56l-16.45,26.72h-5.46l-16.62-26.96l0.16,36.33h-8.8V62.26h6.35l21.58,35.19l21.58-35.19h6.35
V117.64z"/>
<path d="M365.42,89.95c0,15.96-12.87,28.67-28.83,28.67c-15.96,0-28.83-12.71-28.83-28.67c0-15.96,12.87-28.67,28.83-28.67
C352.55,61.28,365.42,73.99,365.42,89.95z M356.54,89.95c0-11.32-8.63-20.53-19.96-20.53c-11.32,0-19.96,9.2-19.96,20.53
s8.63,20.44,19.96,20.44C347.91,110.39,356.54,101.27,356.54,89.95z"/>
<path d="M423.83,93.29c0,15.56-9.69,25.33-24.27,25.33c-14.5,0-24.27-9.77-24.27-25.33V62.26h8.8v31.03
c0,10.18,6.19,17.19,15.48,17.19s15.56-7,15.56-17.19V62.26h8.72V93.29z"/>
<path d="M491.27,89.95c0,15.96-12.87,28.67-28.83,28.67c-15.96,0-28.83-12.71-28.83-28.67c0-15.96,12.87-28.67,28.83-28.67
C478.4,61.28,491.27,73.99,491.27,89.95z M482.39,89.95c0-11.32-8.63-20.53-19.96-20.53c-11.32,0-19.96,9.2-19.96,20.53
s8.63,20.44,19.96,20.44C473.76,110.39,482.39,101.27,482.39,89.95z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

62
images/cgn_logo_wht.svg Executable file
View File

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 924 119" style="enable-background:new 0 0 924 119;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M48.72,35.54h9.04c-2.61,13.28-12.95,22.07-26.8,22.07C15,57.61,2.21,45.39,2.21,28.86
C2.21,12.24,15,0.19,30.96,0.19c13.85,0,24.19,8.63,26.8,21.91h-9.04c-2.2-8.55-8.55-13.77-17.76-13.77
c-11.32,0-19.87,8.55-19.87,20.53c0,11.89,8.55,20.53,19.87,20.53C40.17,49.38,46.52,44.17,48.72,35.54z"/>
<path class="st0" d="M115.76,1.16v55.39h-8.72V33.42H77.96v23.13h-8.8V1.16h8.8v24.11h29.08V1.16H115.76z"/>
<path class="st0" d="M150.54,37.82h-12.79v18.73h-8.8V1.16h22.24c12.38,0,21.34,7.17,21.34,18.33c0,8.23-4.89,14.34-12.38,16.94
l15.48,20.12h-10.75L150.54,37.82z M137.75,29.75h13.11c7.41,0,13.03-3.91,13.03-10.26c0-6.35-5.62-10.26-13.03-10.26h-13.11V29.75
z"/>
<path class="st0" d="M192.49,1.16v55.39h-8.8V1.16H192.49z"/>
<path class="st0" d="M248.45,17.21h-8.63c-0.98-5.86-4.97-9.45-13.03-9.45c-7.09,0-11.73,3.01-11.73,8.39c0,4.4,3.26,6.68,9.2,7.82
l7.74,1.55c10.34,2.04,16.29,6.44,16.29,14.99c0,10.34-8.47,17.02-21.18,17.02c-13.52,0-22.56-7.09-23.62-18.98h8.71
c1.06,7,6.6,11.16,15.39,11.16c7.25,0,11.73-3.01,11.73-8.15c0-3.34-2.2-6.35-8.72-7.49l-9.69-1.87
c-10.34-1.95-15.15-7.25-15.15-15.39c0-10.1,8.15-16.62,20.44-16.62C236.39,0.19,247.15,4.42,248.45,17.21z"/>
<path class="st0" d="M300.91,9.23h-19.63v47.32h-8.72V9.23h-19.63V1.16h47.98V9.23z"/>
<path class="st0" d="M317.77,1.16v55.39h-8.8V1.16H317.77z"/>
<path class="st0" d="M368.43,43.27h-27.04l-5.7,13.28h-9.37l24.52-55.39h8.23l24.44,55.39h-9.37L368.43,43.27z M365.09,35.46
l-10.18-23.87l-10.26,23.87H365.09z"/>
<path class="st0" d="M440.44,1.16v55.39h-7l-32.66-39.1v39.1h-8.8V1.16h6.76l32.99,39.91V1.16H440.44z"/>
<path class="st0" d="M527.76,26.5v30.06h-6.92l-0.65-9.53c-3.91,6.43-10.51,10.51-19.96,10.51c-16.53,0-28.67-12.71-28.67-28.1
c0-17.19,12.95-29.24,29.08-29.24c11.97,0,23.38,6.6,26.63,19.79h-9.37c-2.85-8.55-10.59-11.65-17.1-11.65
c-11.65,0-20.36,8.55-20.36,21.1c0,10.67,7.98,19.87,19.79,19.87c9.77,0,16.05-6.19,18-14.66h-18.65V26.5H527.76z"/>
<path class="st0" d="M596.26,28.86c0,15.96-12.87,28.67-28.83,28.67c-15.96,0-28.83-12.71-28.83-28.67
c0-15.96,12.87-28.67,28.83-28.67C583.39,0.19,596.26,12.89,596.26,28.86z M587.39,28.86c0-11.32-8.63-20.53-19.96-20.53
c-11.32,0-19.96,9.2-19.96,20.53s8.63,20.44,19.96,20.44C578.75,49.3,587.39,40.18,587.39,28.86z"/>
<path class="st0" d="M616.39,9.23v15.88h27.69v8.06h-27.69v15.23h30.95v8.15h-39.75V1.16h39.75v8.06H616.39z"/>
<path class="st0" d="M699.71,17.21h-8.63c-0.98-5.86-4.97-9.45-13.03-9.45c-7.09,0-11.73,3.01-11.73,8.39c0,4.4,3.26,6.68,9.2,7.82
l7.74,1.55c10.34,2.04,16.29,6.44,16.29,14.99c0,10.34-8.47,17.02-21.18,17.02c-13.52,0-22.56-7.09-23.62-18.98h8.71
c1.06,7,6.6,11.16,15.39,11.16c7.25,0,11.73-3.01,11.73-8.15c0-3.34-2.2-6.35-8.72-7.49l-9.69-1.87
c-10.34-1.95-15.15-7.25-15.15-15.39c0-10.1,8.15-16.62,20.44-16.62C687.66,0.19,698.41,4.42,699.71,17.21z"/>
<path class="st0" d="M754.62,35.54h9.04c-2.61,13.28-12.95,22.07-26.8,22.07c-15.96,0-28.75-12.22-28.75-28.75
c0-16.62,12.79-28.67,28.75-28.67c13.85,0,24.19,8.63,26.8,21.91h-9.04c-2.2-8.55-8.55-13.77-17.76-13.77
c-11.32,0-19.87,8.55-19.87,20.53c0,11.89,8.55,20.53,19.87,20.53C746.06,49.38,752.42,44.17,754.62,35.54z"/>
<path class="st0" d="M821.65,1.16v55.39h-8.71V33.42h-29.08v23.13h-8.8V1.16h8.8v24.11h29.08V1.16H821.65z"/>
<path class="st0" d="M843.65,9.23v15.88h27.69v8.06h-27.69v15.23h30.95v8.15h-39.75V1.16h39.75v8.06H843.65z"/>
<path class="st0" d="M923.8,48.41v8.15h-38.36V1.16h8.8v47.24H923.8z"/>
<path class="st0" d="M52.47,62.26v55.39h-7L12.8,78.55v39.1H4V62.26h6.76l32.99,39.91V62.26H52.47z"/>
<path class="st0" d="M115.51,89.62c0,16.21-12.38,28.02-29.4,28.02H65.66V62.26h20.44C103.13,62.26,115.51,73.82,115.51,89.62z
M106.63,89.62c0-11-8.88-19.3-20.53-19.3H74.46v39.18h11.65C97.76,109.5,106.63,101.03,106.63,89.62z"/>
<path class="st0" d="M161.62,97.2c0,13.85-8.23,21.42-21.1,21.42c-11.24,0-19.47-6.68-20.36-18.16h8.88
c0.65,6.6,5.54,10.02,12.05,10.02c6.76,0,11.65-4.81,11.65-13.52v-34.7h8.88V97.2z"/>
<path class="st0" d="M229.06,89.95c0,15.96-12.87,28.67-28.83,28.67c-15.96,0-28.83-12.71-28.83-28.67
c0-15.96,12.87-28.67,28.83-28.67C216.19,61.28,229.06,73.99,229.06,89.95z M220.18,89.95c0-11.32-8.63-20.53-19.96-20.53
c-11.32,0-19.96,9.2-19.96,20.53s8.63,20.44,19.96,20.44C211.55,110.39,220.18,101.27,220.18,89.95z"/>
<path class="st0" d="M296.26,117.64h-8.72V81.56l-16.45,26.72h-5.46l-16.62-26.96l0.16,36.33h-8.8V62.26h6.35l21.58,35.19
l21.58-35.19h6.35V117.64z"/>
<path class="st0" d="M365.42,89.95c0,15.96-12.87,28.67-28.83,28.67c-15.96,0-28.83-12.71-28.83-28.67
c0-15.96,12.87-28.67,28.83-28.67C352.55,61.28,365.42,73.99,365.42,89.95z M356.54,89.95c0-11.32-8.63-20.53-19.96-20.53
c-11.32,0-19.96,9.2-19.96,20.53s8.63,20.44,19.96,20.44C347.91,110.39,356.54,101.27,356.54,89.95z"/>
<path class="st0" d="M423.83,93.29c0,15.56-9.69,25.33-24.27,25.33c-14.5,0-24.27-9.77-24.27-25.33V62.26h8.8v31.03
c0,10.18,6.19,17.19,15.48,17.19s15.56-7,15.56-17.19V62.26h8.72V93.29z"/>
<path class="st0" d="M491.27,89.95c0,15.96-12.87,28.67-28.83,28.67c-15.96,0-28.83-12.71-28.83-28.67
c0-15.96,12.87-28.67,28.83-28.67C478.4,61.28,491.27,73.99,491.27,89.95z M482.39,89.95c0-11.32-8.63-20.53-19.96-20.53
c-11.32,0-19.96,9.2-19.96,20.53s8.63,20.44,19.96,20.44C473.76,110.39,482.39,101.27,482.39,89.95z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
images/cgnlogo.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

50912
images/portfoliobanner.ai Executable file
View File

File diff suppressed because one or more lines are too long

BIN
images/portfoliobanner.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 MiB

64
index.html Normal file
View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<title>Christian Goeschel Ndjomouo - Portfolio</title>
<link rel="icon" type="image/x-icon" href="file:///Volumes/Public/Portfolio/icons/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="js/anim.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="page_body" class="flex_container">
<div id="top_section" class="flex_container">
<div class="flex_container_item">
<p class="banner_text">PORTFOLIO OF: <span class="my_name">Christian Goeschel-Ndjomouo</span></p>
</div>
<div class="flex_container_item">
<p class="banner_text">CLOUD TECH SUPPORT ENGINEER<span> @ </span><a href="https://www.ovhcloud.com/en-ca/" target="_blank">OVHcloud</a><span style="color:#ff3f34;"> {</span><span class="date">Since 08/2022</span><span style="color:#ff3f34;">}</span></p>
</div>
<div class="flex_container_item">
<p class="banner_text">LOCATED IN: Montreal,Canada<span> 45.5019° N, 73.5674° W</span></p>
</div>
</div>
<div id="footer_banner" class="flex_container">
<div class="footer_message_wrapper">
<p class="banner_text footer_message">NOTICE: In case you stumble over a bug, feel free to contact me via the contact form or send me a direct email at <a href="mailto:fixthisbug@christiangoeschel.com">fixthisbug@christiangoeschel.com</a> - Also, this page does not use any cookies because I respect your privacy, therefore the user experience may be a little static.</p>
</div>
</div>
<div id="menu_body" class="flex_container">
<div class="flex_container_item">
<p class="banner_text nav_item">ABOUT ME</p>
</div>
<div class="flex_container_item">
<p class="banner_text nav_item">PROJECTS</p>
</div>
<div class="flex_container_item">
<p class="banner_text nav_item">EXPERIENCE</p>
</div>
<div class="flex_container_item">
<p class="banner_text nav_item">WHAT I OFFER</p>
</div>
<div class="flex_container_item">
<p class="banner_text nav_item">CONTACT FORM</p>
</div>
</div>
<!--LOADING COVER-->
<div class="loading_cover">
<div class="loading_cover_inner">
<img src="icons/cgnicon.svg" width="100em" height="auto"/>
</div>
</div>
</body>
</html>

12
js/anim.js Normal file
View File

@ -0,0 +1,12 @@
//Animation function for bottomright_message
function changePos(id) {
$(
id).style.bottom = "-100%";
}
//Timer for loading cover
setTimeout(function(){
$('.loading_cover').addClass('loaded')
},3000);