Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/tynanpurdy/bootstrap. Learning project for custom web and eventual portfolio page
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234.colors { --yellow: #D09920; --darkblue: #1E2761; --darkgrey: #131313;}
body { font-family: 'Fira Sans'; /* color: #fff; background: var(--primary); */}
/* text styles */p {font-weight: 300;}h1 { font-family: "Fira Sans"; font-weight: 900; font-style: normal; font-size: 5rem;}h2 { font-family: "Fira Sans"; font-weight: 800;}h3 { font-family: "Fira Sans"; font-weight: bold;}
svg { position: absolute; bottom: 0; width: 100%; height: 5vw; /* set height to pixels if you want angle to change with screen width */}
.rounded { border-radius: 50px;}
.dark { background: var(--primary); background-size: cover; color: #fff;}
.magenta { background: var(--secondary); color: #fff;}
.blue { background: var(--tertiary); color: #fff;}
/* navigation bar */.navbar { background: var(--primary);}.nav-link,.navbar-brand { color: #fff; cursor: pointer;}.navbar-brand:hover { animation-name: nav-link-animation; animation-duration: 300ms; animation-fill-mode: forwards;}.nav-link { margin-right: 1em !important; font-family: 'Fira Sans';}.nav-link:hover { animation-name: nav-link-animation; animation-duration: 300ms; animation-fill-mode: forwards;}@keyframes nav-link-animation{ from {color: #fff;} to {color: var(--secondary);}}.navbar-collapse { justify-content: flex-end;}
/*--- page footer ---*/.page-footer { background-color: var(--primary); color: #ccc; padding: 60px 0 30px; }.footer-copyright { color: #666; padding: 40px 0;}
/* fonts *//* Fira Sans */@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-Thin.ttf"); font-weight: 100; font-style: normal;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-ThinItalic.ttf"); font-weight: 100; font-style: italic;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-ExtraLight.ttf"); font-weight: 200; font-style: normal;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-ExtraLightItalic.ttf"); font-weight: 200; font-style: italic;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-Light.ttf"); font-weight: 300; font-style: normal;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-LightItalic.ttf"); font-weight: 300; font-style: italic;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-Regular.ttf"); font-weight: normal; font-style: normal}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-Italic.ttf"); font-weight: normal; font-style: italic;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-Medium.ttf"); font-weight: 500; font-style: normal;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-MediumItalic.ttf"); font-weight: 500; font-style: italic;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-SemiBold.ttf"); font-weight: 600; font-style: normal;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-SemiBoldItalic.ttf"); font-weight: 600; font-style: italic;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-Bold.ttf"); font-weight: bold;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-BoldItalic.ttf"); font-weight: bold; font-style: italic;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-ExtraBold.ttf"); font-weight: 800; font-style: normal;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-ExtraBoldItalic.ttf"); font-weight: 800; font-style: italic;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-Black.ttf"); font-weight: 900; font-style: normal;}@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans/FiraSans-BlackItalic.ttf"); font-weight: 900; font-style: italic;}/* Fira Code */@font-face { font-family: "Fira Code"; src: url("fonts/FiraCode/FiraCode-Light.otf"); font-weight: 300; font-style: normal;}@font-face { font-family: "Fira Code"; src: url("fonts/FiraCode/FiraCode-Regular.otf"); font-weight: normal; font-style: normal;}@font-face { font-family: "Fira Code"; src: url("fonts/FiraCode/FiraCode-Medium.otf"); font-weight: 500; font-style: normal;}@font-face { font-family: "Fira Code"; src: url("fonts/FiraCode/FiraCode-Bold.otf"); font-weight: bold; font-style: normal;}