diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..3e1a8d8 Binary files /dev/null and b/.DS_Store differ diff --git a/.index.html.swp b/.index.html.swp new file mode 100644 index 0000000..8d0ef09 Binary files /dev/null and b/.index.html.swp differ diff --git a/README.md b/README.md index 0f15dac..1987675 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# BioHack 2018 Website +# BioHack 2019 Website > The official BioHack at UCR website -This is the landing page for BioHack 2018. The website is hosted at [www.biohackucr.com](http://biohackucr.com) +This is the landing page for BioHack 2019. The website is hosted at [www.biohackucr.com](http://biohackucr.com) ## Updating diff --git a/css/slideshow.css b/css/slideshow.css new file mode 100644 index 0000000..db01006 --- /dev/null +++ b/css/slideshow.css @@ -0,0 +1,42 @@ +/* +body { + padding-top: 200px; +} +*/ + +.carousel { + width: 100%; +} + +.slide-box { + display: flex; + justify-content: space-between; +} + + +@media (max-width: 600px) { + .carousel { + width: 0%; + } +} +/* + +@media (min-width: 768px) and (max-width: 991.98px) { + .slide-box img { + -ms-flex: 0 0 33.3333%; + flex: 0 0 33.3333%; + max-width: 33.3333%; + } +} +*/ + +/* +@media (min-width: 992px) +{ + .slide-box img { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } +} +*/ diff --git a/css/style.css b/css/style.css index 83525ed..09bd0d2 100644 --- a/css/style.css +++ b/css/style.css @@ -1,10 +1,42 @@ +@font-face { +font-family: "poppins-light"; + src: url("css/fonts/poppins/poppins-light-webfont.eot"); + src: url("css/fonts/poppins/poppins-light-webfont.woff") format("woff"), + url("css/fonts/poppins/poppins-light-webfont.eot#filename") format("svg"); +} + +@font-face { +font-family: "questrial"; + src: url("css/fonts/questrial/questrial-regular-webfont.eot"); + src: url("css/fonts/questrial/questrial-regular-webfont.woff") format("woff"), + url("css/fonts/questrial/questrial-regular-webfont.eot#filename") format("svg"); +} + body { - background: #fff; - font-family: "Open Sans", Arial, sans-serif; + background: linear-gradient(180deg, rgba(251, 199, 212, 0.9) 0%, #9796F0 100%); + background-attachment: fixed; + font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.8; color: #868e96; + +} + +/* +background_t { +background-image: linear-gradient(171.18de:g, #202E74 2.11%, rgba(102, 110, 150, 0.55) 43.19%, #B0B4C8 53.93%); +} +*/ + +#home { + background-image: url("img/background.png"); + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + width: 100vw; } a { @@ -12,10 +44,13 @@ a { -o-transition: .3s all ease; transition: .3s all ease; text-decoration: none; + color: black; } + a:hover { text-decoration: none; + color: #007bff; } h1, h2, h3, h4, h5 { @@ -28,6 +63,7 @@ h1, h2, h3, h4, h5 { box-shadow: none !important; } + /* Header */ header { position: relative; @@ -47,64 +83,11 @@ header .navbar-brand span { color: #007bff; } -header .top-bar { - background: #007bff; -} - -header .top-bar a { - color: #fff; - padding: 10px; - font-size: 13px; - display: inline-block; -} - -header .top-bar .cta-btn { - display: inline-block; - padding-right: 15px; - padding-left: 15px; - background: #5AC8D8; -} - -header .top-bar .cta-btn:hover { - -webkit-box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1); - box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1); -} - -header .top-bar .social { - margin-bottom: 0; -} - -header .top-bar .social li { - display: inline-block; - text-align: center; -} - -header .top-bar .social li a { - color: #fff; - padding: 10px; - width: 40px; - display: inline-block; -} - -@media (max-width: 991px) { - header .top-bar .social li a { - padding-left: 10px; - padding-right: 10px; - width: inherit; - } -} - -header .top-bar .social li a:hover { - background: #5AC8D8; - color: #fff; - -webkit-box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1); - box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1); -} - header .navbar { padding-top: 0; padding-bottom: 0; - background: white !important; + background: linear-gradient(180deg, rgba(251, 199, 212, 0.9) 0%, #9796F0 100%); !important; + background-attachment: fixed; } @media (max-width: 1199px) { @@ -148,6 +131,20 @@ header .navbar .dropdown-menu a { padding-bottom: 7px; } +.top-pad { + padding-top: 30px; +} + +.head-text { + font-size: 24px; + font-weight: bold; + text-align: center; + text-decoration: underline; + color: black; + width: 100%; + height:100%; +} + /* Owl Carousel */ .owl-carousel .owl-item { opacity: .4; @@ -363,7 +360,7 @@ header .navbar .dropdown-menu a { } .home-feature { - margin-top: -120px; + margin-top: 3em; position: relative; z-index: 2; } @@ -375,7 +372,12 @@ header .navbar .dropdown-menu a { transition: .3s all ease; z-index: 2; top: 0; - border-bottom: 10px solid #5AC8D8; +} +.home-feature .one-col { + border-radius: 30px 1px 1px 30px; +} +.home-feature .three-col { + border-radius: 1px 30px 30px 1px; } @media (max-width: 767px) { @@ -391,8 +393,9 @@ header .navbar .dropdown-menu a { } .home-feature .one-col .icon, .home-feature .two-col .icon, .home-feature .three-col .icon { - font-size: 200px; - color: rgba(255, 255, 255, 0.07); + font-family: "poppins-light"; + font-size: 150px; + color: rgba(255, 255, 255, 0.247); position: absolute; left: 50%; top: 50%; @@ -406,17 +409,22 @@ header .navbar .dropdown-menu a { } .home-feature .one-col h2, .home-feature .two-col h2, .home-feature .three-col h2 { - color: #fff; + color: rgba(0, 0, 0, 0.76); + font-family: "poppins-light"; font-size: 16px; + text-align: center; letter-spacing: .05em; - font-weight: 300; - margin-bottom: 20px; + font-weight: 350; + margin-bottom: 15px; text-transform: uppercase; } .home-feature .one-col p, .home-feature .two-col p, .home-feature .three-col p { - color: rgba(255, 255, 255, 0.7); - font-weight: 300; + color: rgba(0, 0, 0, 0.726); + font-family: "poppins-light"; + font-size: 15px; + font-weight: 350; + } .home-feature .one-col p:last-child, .home-feature .two-col p:last-child, .home-feature .three-col p:last-child { @@ -488,19 +496,19 @@ header .navbar .dropdown-menu a { } .home-feature .one-col { - background: #007bff; + background: #e7cbde; } .home-feature .two-col { - background: #006fe6; + background: #debad3; } .home-feature .three-col { - background: #0067d6; + background: #d6a8c8; } .section { - padding: 7em 0; + padding: 3em 0; } .cta-link { @@ -542,23 +550,21 @@ header .navbar .dropdown-menu a { .cover_1 { background-size: cover; background-position: center center; - padding: 7em 0; + padding: 2em 0; } .cover_1 .sub-heading { - color: rgba(255, 255, 255, 0.7); - font-size: 22px; + color: black; + font-size: 20px; } .cover_1 .heading { - font-size: 50px; - color: white; - font-weight: 300; + font-size: 40px; + color: black; + font-weight: bolder; } -.heading { - color: #000; -} + .heading.border-bottom { position: relative; @@ -730,11 +736,11 @@ header .navbar .dropdown-menu a { .site-footer h3 { color: #fff; - font-size: 16px; + font-size: 100px; /*50*/ font-weight: 700; margin-bottom: 30px; text-transform: uppercase; - letter-spacing: .05em; + letter-spacing: .1em; /*.5*/ border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; margin-bottom: 20px; @@ -764,22 +770,28 @@ header .navbar .dropdown-menu a { .hero { z-index: 1000; position: absolute; - top: 20%; + top: 75%; width: 100%; text-align: center; - color: #fff; + color: white; display: flex; justify-content: center; align-items: center; } .hero h1 { - color: white; + color: black; + text-transform: uppercase; font-weight: 800; - font-size: 15em; + font-size: 10em; +} + +.hero h1 span { + color: #007bff; } .hero p { + line-height: 1.25em; font-size: 2em; } @@ -791,54 +803,869 @@ html, body { border-right: none; border-left: none; position: relative; + margin-top: auto; + margin-bottom: 1%; + margin-left: auto; + margin-right: auto; + + justify-content: center; + align-items: center; } + .no-video .video-container video, .touch .video-container video { display: none; } + .no-video .video-container .poster, .touch .video-container .poster { display: block !important; } -.video-container { - position: relative; - bottom: 0%; - left: 0%; - height: 100%; - width: 100%; - overflow: hidden; - background: #000; -} -.video-container .poster img { - width: 100%; - bottom: 0; - position: absolute; -} -.video-container .filter { - z-index: 100; - position: absolute; - background: rgba(0, 0, 0, 0.4); - width: 100%; -} -.video-container video { - position: absolute; - z-index: 0; - bottom: 0; + +.logo-container { + z-index: -1; + background: linear-gradient(180deg, rgba(251, 199, 212, 0.9) 0%, #9796F0 100%); + background-attachment: fixed; + + margin-left: auto; + margin-right: auto; + display: flex; + height: auto; + width: auto; + justify-content: center; + align-items: center; } -.video-container video.fillWidth { - width: 100%; + +.logo-container img { + position: absolute; + display: block; + margin-left: auto; + margin-right: auto; + + top: 45%; + transform: translateY(-50%); + + height: auto; + max-height: 80%; + width: auto; + max-width: 80%; + overflow: hidden; } + .hero-text { z-index: 2; position: absolute; } + .date { margin-bottom: 0px; } + .sponsor { max-height: 100px; } + +.spon h2 { + font-size: 27px; +} + +.mar-top { + margin-top: 50px; +} + .sticky-top { position: fixed; width: 100%; } + +.section-bg-light { + background: linear-gradient(180deg, rgba(251, 199, 212, 0.9) 0%, #9796F0 100%); + background-attachment: fixed; +} + +.section-bg-light h2{ + font-weight: bolder; + text-decoration: underline; +} + +.answer { + color: black; +} + +.lead { + color: black +} + +/* Collapsible Panel */ +@import url(https://fonts.googleapis.com/css?family=Raleway); + +.faq-panel { + color: #333; + font-family: 'Raleway', sans-serif; + overflow-x: hidden; +} + +.faq-question { + font-family: "poppins-light"; + padding-bottom: 15px; +} + +.faq-question h2 { + font-family: "poppins-light"; + font-weight: bolder; + text-decoration: underline; + font-size: 27px; + color: black; +} + +.panel-list-content { + margin: 0 auto; +} + +.panel-wrap { + padding: 8px 0 7px 10px; + border-bottom: 1px dotted rgb(53, 50, 50); +} + +.panel-title { + font-size: 16px; + width: 100%; + position: relative; + margin: 0; + padding: 10px 20px 0 55px; + display: block; + cursor: pointer; +} + +.panel-content { + font-size: 14px; + padding: 0px 10px; + margin: 0 40px; + height: 0; + overflow: hidden; + z-index: -1; + position: relative; + opacity: 0; + -webkit-transition: .4s ease; + -moz-transition: .4s ease; + -o-transition: .4s ease; + transition: .4s ease; +} + +.panel:checked ~ .panel-content{ + height: auto; + opacity: 1; + padding: 14px; +} + +.plus { + position: absolute; + overflow: hidden; + margin-left: 20px; + margin-top: 4px; + z-index: 2; + font-size: 20px; + line-height: 100%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + -webkit-transition: .2s ease; + -moz-transition: .2s ease; + -o-transition: .2s ease; + transition: .2s ease; +} + +.panel:checked ~ .plus { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} + +.panel { + display: none; +} +/* End of Collapsible Panel */ + +.space-sp { + color: #333; + font-family: 'Raleway', sans-serif; + overflow-x: hidden; + opacity: 0; +} + +.proj-sec h2 { + font-family: "poppins-light"; + font-size: 24px; + font-weight: bolder; + text-decoration: underline; +} + +.proj-sec h3 { + font-family: "poppins-light"; + font-size: 18px; +} + +.proj-title { + font-family: "poppins-light"; + font-size: 17px; + color: black; + font-weight: bold; +} + +.proj-desc { + font-family: "poppins-light"; + font-size: 12px; + color: black; +} + +.proj-auth { + font-size: 12px; + font-style: italic; + color: black; +} + +.change-f { + text-transform: uppercase; + letter-spacing: .2em; + font-weight: 400; + font-size: 12px; +} + +.under-line { + text-decoration: underline; +} + +/* Social Media Side Bar*/ +ul { + list-style-type: none; + padding: 0; + margin: 0; +} + +.social { + z-index: 5; + width: 200px; + height: 100%; + position: fixed; + margin-top: 150px; + perspective: 1000px +} +/* add a media transformation */ + +.social li a { + display: block; + height: 100%; + width: 40px; + background: #222; + border-bottom: 1px solid #333; + font: normal normal normal + 16px/20px + 'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif; + color: #fff; + -webkit-font-smoothing: antialiased; + padding: 10px; + text-decoration: none; + text-align: center; + transition: background .5s ease .300ms +} + +.social li:first-child a:hover { background: #3b5998 } +.social li:nth-child(2) a:hover { background: #b600ee } +.social li:nth-child(3) a:hover { background: #4cd2ea } +.social li:nth-child(4) a:hover { background: #dd4b39 } + +.social li:first-child a { border-radius: 0 5px 0 0 } +.social li:last-child a { border-radius: 0 0 5px 0 } + +.social li a span { + width: 100px; + float: left; + text-align: center; + background: #222; + color: #fff; + margin: -25px 74px; + transform-origin: 0; + visibility: hidden; + opacity: 0; + transform: rotateY(45deg); + border-radius: 5px; + transition: all .5s ease .300ms +} + +.social li span:after { + content: ''; + display: block; + width: 0; + height: 0; + position: absolute; + left: -20px; + top: 0; + border-left: 10px solid transparent; + border-right: 10px solid #222; + border-bottom: 10px solid transparent; + border-top: 10px solid transparent; +} + +.social li a:hover span { + visibility: visible; + opacity: 1; + transform: rotateY(0) +} +/* Social Media Side Bar End */ + +.schedule { + background-size: 0px; + overflow: hidden; + box-sizing: border-box; +} +.schedule .schedule-holder { + display: flex; + justify-content: center; +} +@media (max-width: 500px) { + .schedule .schedule-holder { + margin: 0; + } +} + +.schedule .schedule-middle { + margin-left: 1em; + padding-bottom: 2rem; + margin-right: 1em; +} + +.schedule .schedule-box { + border-color: black; + padding: .75em 1.5em 1.5em; + margin-bottom: 2em; + border: .5em solid #fff; + border-radius: 2em; + display: block; + width: 100%; +} +.schedule h2 { + text-align: center; + font-weight: bolder; + font-size: 25px; +} +.schedule h3 { + text-decoration: underline; + font-size: 20px; + text-align: center +} +.schedule p { + color: black; + font-size: 14px; + text-align: center; +} + +.schedule p span { + font-size: 8; +} +.column-a { + float: left; + padding: 10px; + +} +.time { + width: 80px; +} +.wch138, .wch139, .bytes { + width: 200px; +} +.row:after { + content: ""; + display: table; + clear: both; +} + +.bubble { + max-width: 900px; + color: white; + padding: 40px 40px 80px 40px; + background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/476907/speechbubble.svg') no-repeat top center; + background-size: 100% 100%; +} +.bubble h2 { + font-family: "poppins-light"; + font-size: 24px; + font-weight: bold; + text-align: center; +} +.bubble h3 { + font-family: "poppins-light"; + font-size: 18px; + font-weight: 500px; + text-decoration: underline; +} +.bubble p { + font-size: 15px; + color: rgb(32, 31, 31); + font-style: italic; +} + +@media (max-width: 200px) { + .ann-tag { + font-family: "poppins-light"; + font-size: 15px; + } +} + +.ann-logo img { + width: 180px; + height: 180px; + margin-left: 700px; +} + +.hr { + box-sizing: content-box; + overflow: visible; + padding: 0px; + width: 100%; + height: 17px; + margin: 0px; + border: none; +/* + background-color: #e7cbde; +*/ +background-color: #16ffff; +} + + +/* speakers */ +.spe-ment .judge { + width: 100%; +} + +.view { + height: 100%; + margin: 10px; + float: left; + border: 10px solid #fff; + border-radius: 1em; + overflow: hidden; + position: relative; + text-align: center; + box-shadow: 1px 1px 2px #e6e6e6; + cursor: default; + background: #fff url(../images/bgimg.jpg) no-repeat center center +} + +.view :hover { + color: rgb(229, 225, 233); +} + +.view .mask, +.view .content { + width: 270px; + height: 190px; + position: absolute; + overflow: hidden; + top: 0; + left: 0 +} + +.view img { + display: block; + position: relative +} + +.view h2 { + text-transform: uppercase; + color: #fff; + text-align: center; + position: relative; + font-size: 13px; + font-family: Raleway, serif; + padding: 3px; + /*background: rgba(0, 0, 0, 0.8);*/ + margin: 15px 0 0 0 +} +.view h3 { + color: #fff; + text-align: center; + position: relative; + font-size: 12px; + font-family: Raleway, serif; + margin: 0 0 12px 0 + /*background: rgba(0, 0, 0, 0.8);*/ + +} + +.view p { + font-family: Merriweather, serif; + font-style: italic; + font-size: 11px; + position: relative; + color: #fff; + padding: 0px 10px 0px; + text-align: center +} + +.view a.info { + display: inline-block; + text-decoration: none; + padding: 5px 10px; + background: #000; + color: #fff; + font-family: Raleway, serif; + font-size: 10px; + box-shadow: 0 0 1px rgba(0, 0, 0, 0.719) +} + +.view a.info:hover { + box-shadow: 0 0 1px rgba(0, 0, 0, 0.719) +} + +.view-first img { + transition: all 0.2s linear; + width: 270px; + height: 190px; +} + +.view-first .mask { + opacity: 0; + background-color: rgba(100, 46, 172, 0.44); + transition: all 0.4s ease-in-out; +} + +.view-first h2 { + transform: translateY(-100px); + opacity: 0; + font-family: Raleway, serif; + transition: all 0.2s ease-in-out; +} + +.view-first p { + transform: translateY(100px); + opacity: 0; + transition: all 0.2s linear; +} + +.view-first a.info { + opacity: 0; + transition: all 0.2s ease-in-out; +} + +/* */ +.view-first:hover img { + transform: scale(1.1); +} + +.view-first:hover .mask { + opacity: 1; +} + +.view-first:hover h2, +.view-first:hover p, +.view-first:hover a.info { + opacity: 1; + transform: translateY(0px); +} + +.view-first:hover p { + transition-delay: 0.1s; +} + +.view-first:hover a.info { + transition-delay: 0.2s; +} +/* speakers end */ + +/* judges */ +.judge { + width: 100%; +} +.jview { + height: 100%; + margin: 10px; + float: left; + border: 10px solid #fff; + border-radius: 1em; + overflow: hidden; + position: relative; + text-align: center; + box-shadow: 1px 1px 2px #e6e6e6; + cursor: default; + background: #fff url(../images/bgimg.jpg) no-repeat center center +} + +.jview :hover { + color: rgb(212, 226, 228); +} + +.jview .jmask, +.jview .jcontent { + width: 220px; + height: 220px; + position: absolute; + overflow: hidden; + top: 0; + left: 0 +} + +.jview img { + display: block; + position: relative +} + +.jview h2 { + text-transform: uppercase; + color: #fff; + text-align: center; + position: relative; + font-size: 13px; + font-family: Raleway, serif; + padding: 3px; + margin: 18px 0 0 0 +} + +.jview h3 { + color: #fff; + text-align: center; + position: relative; + font-size: 11px; + font-family: Raleway, serif; + margin: 0 0 12px 0 + +} + +.jview p { + font-family: Merriweather, serif; + font-style: italic; + font-size: 12px; + position: relative; + color: #fff; + padding: 0px 10px 0px; + text-align: center +} + +.jview a.jinfo { + display: inline-block; + text-decoration: none; + padding: 5px 10px; + background: #000; + color: #fff; + font-family: Raleway, serif; + font-size: 10px; + box-shadow: 0 0 1px rgba(0, 0, 0, 0.719) +} + +.jview a.jinfo:hover { + box-shadow: 0 0 1px rgba(0, 0, 0, 0.719) +} + +.jview-first img { + transition: all 0.2s linear; + width: 220px; + height: 220px; +} + +.jview-first .jmask { + opacity: 0; + background-color: rgba(1, 132, 132, 0.44); + transition: all 0.4s ease-in-out; +} + +.jview-first h2 { + opacity: 0; + font-family: Raleway, serif; +} + +.jview-first p { + transform: translateY(100px); + opacity: 0; + transition: all 0.2s linear; +} + +.jview-first a.jinfo { + opacity: 0; + transition: all 0.2s ease-in-out; +} + +.jview-first:hover img { + transform: scale(1.1); +} + +.jview-first:hover .jmask { + opacity: 1; +} + +.jview-first:hover h2, +.jview-first:hover p, +.jview-first:hover a.jinfo { + opacity: 4; + transform: translateY(0px); +} + +.jview-first:hover p { + transition-delay: 0.1s; +} + +.jview-first:hover a.jinfo { + transition-delay: 0.2s; +} + +/* judges end */ + +/* workshops */ +.workshop { + width: 100%; +} +.bview { + height: 100%; + margin: 0 50px 10px 50px ; + float: left; + border: 10px solid #fff; + border-radius: 10px; + overflow: hidden; + position: relative; + text-align: center; + box-shadow: 1px 1px 2px #e6e6e6; + cursor: default; + background: #fff url(../images/bgimg.jpg) no-repeat center center +} + +.bview :hover { + color: rgba(212, 226, 228, 0.904); +} + +.bview .bmask, +.bview .bcontent { + width: 260px; + height: 160px; + position: absolute; + overflow: hidden; + top: 0; + left: 0; +} + +.bview img { + display: block; + position: relative +} + +.bview h2 { + text-transform: uppercase; + color: #fff; + text-align: center; + position: relative; + font-size: 12px; + font-family: Raleway, serif; + padding: 3px; + margin: 20px 0 0 0; +} + +.bview h3 { + color: #fff; + text-align: center; + position: relative; + font-size: 11px; + font-family: Raleway, serif; +} + +.bview p { + font-family: Merriweather, serif; + font-style: italic; + font-size: 10px; + position: relative; + color: #fff; + padding: 0px 10px 0px; + text-align: center +} + +.bview a.binfo { + display: inline-block; + text-decoration: none; + padding: 5px 10px; + background: #000; + color: #fff; + font-family: Raleway, serif; + font-size: 10px; + box-shadow: 0 0 1px rgba(0, 0, 0, 0.719) +} + +.bview a.binfo:hover { + box-shadow: 0 0 1px rgba(0, 0, 0, 0.719) +} + +.bview-first img { + transition: all 0.2s linear; + width: 260px; + height: 160px; +} + +.bview-first .bmask { + opacity: 0; + background-color: rgba(86, 190, 45, 0.44); + transition: all 0.4s ease-in-out; +} + +.bview-first h2 { + transform: translateY(-100px); + opacity: 0; + font-family: Raleway, serif; + transition: all 0.2s ease-in-out; +} + +.bview-first p { + transform: translateY(100px); + opacity: 0; + transition: all 0.2s linear; +} + +.bview-first a.binfo { + opacity: 0; + transition: all 0.2s ease-in-out; +} + +.bview-first:hover img { + transform: scale(1.1); +} + +.bview-first:hover .bmask { + opacity: 1; +} + +.bview-first:hover h2, +.bview-first:hover p, +.bview-first:hover a.binfo { + opacity: 1; + transform: translateY(0px); +} + +.bview-first:hover p { + transition-delay: 0.1s; +} + +.bview-first:hover a.binfo { + transition-delay: 0.2s; +} +/*workshop ends*/ + +.agenda-txt { + font-size: 24px; + color: #f8f9fa; + text-align: center; + font-weight: bold; +} + +.agenda-img img { + display: block; + width: 65%; + height: 100%; + margin-left: auto; + margin-right: auto; + padding-top: 10px; + padding-bottom: 30px; + +} +@media (max-width: 600px){ + .agenda-txt .agenda-img{ + width: 100%; + font-size: 17px; + } +} diff --git a/docs/BIOHACK_SPONSORSHIP_PACKET_2019.pdf b/docs/BIOHACK_SPONSORSHIP_PACKET_2019.pdf new file mode 100644 index 0000000..d55deca Binary files /dev/null and b/docs/BIOHACK_SPONSORSHIP_PACKET_2019.pdf differ diff --git a/fonts/.DS_Store b/fonts/.DS_Store new file mode 100644 index 0000000..bceb0fd Binary files /dev/null and b/fonts/.DS_Store differ diff --git a/fonts/poppins-lite/generator_config.txt b/fonts/poppins-lite/generator_config.txt new file mode 100755 index 0000000..05c9257 --- /dev/null +++ b/fonts/poppins-lite/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"expert","formats":["ttf","woff","woff2","eot","svg"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/fonts/poppins-lite/poppins-light-demo.html b/fonts/poppins-lite/poppins-light-demo.html new file mode 100755 index 0000000..04d41b2 --- /dev/null +++ b/fonts/poppins-lite/poppins-light-demo.html @@ -0,0 +1,620 @@ + + + + + + + + + + + + + Poppins Light Regular Specimen + + + + + + +
+ + + +
+ + +
+ +
+
+
AaBb
+
+
+ +
+
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
+
+
+
+ + + + + + + + + + + + + + + + +
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
+ +
+ +
+ + + +
+ + +
+
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
+
+ bodyPoppins Light Regular +
+
+ bodyArial +
+
+ bodyVerdana +
+
+ bodyGeorgia +
+ + + +
+ + +
+ +
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+ +
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + +
+
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + + +
+ +
+ +
+ +
+

Lorem Ipsum Dolor

+

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

+
+
+
+
+

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+ +

Cras mattis consectetur

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+
+ +
+ +
+

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +

Maecenas sed diam eget risus varius.

+ +

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + + +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

+ +

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ +
+
+ +
+ + + + + + +
+
+
+ +

Language Support

+

The subset of Poppins Light Regular in this kit supports the following languages:
+ + Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

+

Glyph Chart

+

The subset of Poppins Light Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+
+ +



+

 

+

!

!
+

"

"
+

#

#
+

$

$
+

%

%
+

&

&
+

'

'
+

(

(
+

)

)
+

*

*
+

+

+
+

,

,
+

-

-
+

.

.
+

/

/
+

0

0
+

1

1
+

2

2
+

3

3
+

4

4
+

5

5
+

6

6
+

7

7
+

8

8
+

9

9
+

:

:
+

&#59;

;
+

<

<
+

&#61;

=
+

&#62;

>
+

&#63;

?
+

&#64;

@
+

&#65;

A
+

&#66;

B
+

&#67;

C
+

&#68;

D
+

&#69;

E
+

&#70;

F
+

&#71;

G
+

&#72;

H
+

&#73;

I
+

&#74;

J
+

&#75;

K
+

&#76;

L
+

&#77;

M
+

&#78;

N
+

&#79;

O
+

&#80;

P
+

&#81;

Q
+

&#82;

R
+

&#83;

S
+

&#84;

T
+

&#85;

U
+

&#86;

V
+

&#87;

W
+

&#88;

X
+

&#89;

Y
+

&#90;

Z
+

&#91;

[
+

&#92;

\
+

&#93;

]
+

&#94;

^
+

&#95;

_
+

&#96;

`
+

&#97;

a
+

&#98;

b
+

&#99;

c
+

&#100;

d
+

&#101;

e
+

&#102;

f
+

&#103;

g
+

&#104;

h
+

&#105;

i
+

&#106;

j
+

&#107;

k
+

&#108;

l
+

&#109;

m
+

&#110;

n
+

&#111;

o
+

&#112;

p
+

&#113;

q
+

&#114;

r
+

&#115;

s
+

&#116;

t
+

&#117;

u
+

&#118;

v
+

&#119;

w
+

&#120;

x
+

&#121;

y
+

&#122;

z
+

&#123;

{
+

&#124;

|
+

&#125;

}
+

&#126;

~
+

&#160;

 
+

&#161;

¡
+

&#162;

¢
+

&#163;

£
+

&#164;

¤
+

&#165;

¥
+

&#166;

¦
+

&#167;

§
+

&#168;

¨
+

&#169;

©
+

&#170;

ª
+

&#171;

«
+

&#172;

¬
+

&#173;

­
+

&#174;

®
+

&#175;

¯
+

&#176;

°
+

&#177;

±
+

&#178;

²
+

&#179;

³
+

&#180;

´
+

&#181;

µ
+

&#182;

+

&#183;

·
+

&#184;

¸
+

&#185;

¹
+

&#186;

º
+

&#187;

»
+

&#188;

¼
+

&#189;

½
+

&#190;

¾
+

&#191;

¿
+

&#192;

À
+

&#193;

Á
+

&#194;

Â
+

&#195;

Ã
+

&#196;

Ä
+

&#197;

Å
+

&#198;

Æ
+

&#199;

Ç
+

&#200;

È
+

&#201;

É
+

&#202;

Ê
+

&#203;

Ë
+

&#204;

Ì
+

&#205;

Í
+

&#206;

Î
+

&#207;

Ï
+

&#208;

Ð
+

&#209;

Ñ
+

&#210;

Ò
+

&#211;

Ó
+

&#212;

Ô
+

&#213;

Õ
+

&#214;

Ö
+

&#215;

×
+

&#216;

Ø
+

&#217;

Ù
+

&#218;

Ú
+

&#219;

Û
+

&#220;

Ü
+

&#221;

Ý
+

&#222;

Þ
+

&#223;

ß
+

&#224;

à
+

&#225;

á
+

&#226;

â
+

&#227;

ã
+

&#228;

ä
+

&#229;

å
+

&#230;

æ
+

&#231;

ç
+

&#232;

è
+

&#233;

é
+

&#234;

ê
+

&#235;

ë
+

&#236;

ì
+

&#237;

í
+

&#238;

î
+

&#239;

ï
+

&#240;

ð
+

&#241;

ñ
+

&#242;

ò
+

&#243;

ó
+

&#244;

ô
+

&#245;

õ
+

&#246;

ö
+

&#247;

÷
+

&#248;

ø
+

&#249;

ù
+

&#250;

ú
+

&#251;

û
+

&#252;

ü
+

&#253;

ý
+

&#254;

þ
+

&#255;

ÿ
+

&#338;

Œ
+

&#339;

œ
+

&#376;

Ÿ
+

&#710;

ˆ
+

&#732;

˜
+

&#8192;

 
+

&#8193;

 
+

&#8194;

 
+

&#8195;

 
+

&#8196;

 
+

&#8197;

 
+

&#8198;

 
+

&#8199;

 
+

&#8200;

 
+

&#8201;

 
+

&#8202;

 
+

&#8208;

‐
+

&#8209;

‑
+

&#8210;

‒
+

&#8211;

–
+

&#8212;

—
+

&#8216;

‘
+

&#8217;

’
+

&#8218;

‚
+

&#8220;

“
+

&#8221;

”
+

&#8222;

„
+

&#8226;

•
+

&#8230;

…
+

&#8239;

 
+

&#8249;

‹
+

&#8250;

›
+

&#8287;

 
+

&#8364;

€
+

&#8482;

™
+

&#9724;

◼
+

&#64257;

fi
+

&#64258;

fl
+
+
+ + +
+
+ + +
+ +
+ +
+
+
+

Installing Webfonts

+ +

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

+ +

1. Upload your webfonts

+

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

+ + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

+

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+
+ +
+
+

Troubleshooting
Font-Face Problems

+

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

+ +

Fonts not loading in iPhone or iPad

+ +

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

+ +

Fonts not loading in Firefox

+ +

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

+ +

Fonts not loading in IE

+ +

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+
+
+
+ +
+ +
+ +
+ + diff --git a/fonts/poppins-lite/poppins-light-webfont.eot b/fonts/poppins-lite/poppins-light-webfont.eot new file mode 100755 index 0000000..7bf0221 Binary files /dev/null and b/fonts/poppins-lite/poppins-light-webfont.eot differ diff --git a/fonts/poppins-lite/poppins-light-webfont.svg b/fonts/poppins-lite/poppins-light-webfont.svg new file mode 100755 index 0000000..fed0038 --- /dev/null +++ b/fonts/poppins-lite/poppins-light-webfont.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/poppins-lite/poppins-light-webfont.ttf b/fonts/poppins-lite/poppins-light-webfont.ttf new file mode 100755 index 0000000..3c724e3 Binary files /dev/null and b/fonts/poppins-lite/poppins-light-webfont.ttf differ diff --git a/fonts/poppins-lite/poppins-light-webfont.woff b/fonts/poppins-lite/poppins-light-webfont.woff new file mode 100755 index 0000000..190048d Binary files /dev/null and b/fonts/poppins-lite/poppins-light-webfont.woff differ diff --git a/fonts/poppins-lite/poppins-light-webfont.woff2 b/fonts/poppins-lite/poppins-light-webfont.woff2 new file mode 100755 index 0000000..134b375 Binary files /dev/null and b/fonts/poppins-lite/poppins-light-webfont.woff2 differ diff --git a/fonts/poppins-lite/specimen_files/grid_12-825-55-15.css b/fonts/poppins-lite/specimen_files/grid_12-825-55-15.css new file mode 100755 index 0000000..3d6aef7 --- /dev/null +++ b/fonts/poppins-lite/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/fonts/poppins-lite/specimen_files/specimen_stylesheet.css b/fonts/poppins-lite/specimen_files/specimen_stylesheet.css new file mode 100755 index 0000000..aecc43c --- /dev/null +++ b/fonts/poppins-lite/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +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, font, 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 + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 300px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/fonts/poppins-lite/stylesheet.css b/fonts/poppins-lite/stylesheet.css new file mode 100755 index 0000000..7537021 --- /dev/null +++ b/fonts/poppins-lite/stylesheet.css @@ -0,0 +1,16 @@ +/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 18, 2019 */ + + + +@font-face { + font-family: 'poppinslight'; + src: url('poppins-light-webfont.eot'); + src: url('poppins-light-webfont.eot?#iefix') format('embedded-opentype'), + url('poppins-light-webfont.woff2') format('woff2'), + url('poppins-light-webfont.woff') format('woff'), + url('poppins-light-webfont.ttf') format('truetype'), + url('poppins-light-webfont.svg#poppinslight') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/fonts/poppins/generator_config.txt b/fonts/poppins/generator_config.txt new file mode 100755 index 0000000..05c9257 --- /dev/null +++ b/fonts/poppins/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"expert","formats":["ttf","woff","woff2","eot","svg"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/fonts/poppins/poppins-regular-demo.html b/fonts/poppins/poppins-regular-demo.html new file mode 100755 index 0000000..58ffa9a --- /dev/null +++ b/fonts/poppins/poppins-regular-demo.html @@ -0,0 +1,620 @@ + + + + + + + + + + + + + Poppins Regular Specimen + + + + + + +
+ + + +
+ + +
+ +
+
+
AaBb
+
+
+ +
+
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
+
+
+
+ + + + + + + + + + + + + + + + +
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
+ +
+ +
+ + + +
+ + +
+
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
+
+ bodyPoppins Regular +
+
+ bodyArial +
+
+ bodyVerdana +
+
+ bodyGeorgia +
+ + + +
+ + +
+ +
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+ +
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + +
+
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + + +
+ +
+ +
+ +
+

Lorem Ipsum Dolor

+

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

+
+
+
+
+

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+ +

Cras mattis consectetur

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+
+ +
+ +
+

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +

Maecenas sed diam eget risus varius.

+ +

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + + +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

+ +

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ +
+
+ +
+ + + + + + +
+
+
+ +

Language Support

+

The subset of Poppins Regular in this kit supports the following languages:
+ + Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

+

Glyph Chart

+

The subset of Poppins Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+
+ +

&#13;

+

&#32;

+

&#33;

!
+

&#34;

"
+

&#35;

#
+

&#36;

$
+

&#37;

%
+

&#38;

&
+

&#39;

'
+

&#40;

(
+

&#41;

)
+

&#42;

*
+

&#43;

+
+

&#44;

,
+

&#45;

-
+

&#46;

.
+

&#47;

/
+

&#48;

0
+

&#49;

1
+

&#50;

2
+

&#51;

3
+

&#52;

4
+

&#53;

5
+

&#54;

6
+

&#55;

7
+

&#56;

8
+

&#57;

9
+

&#58;

:
+

&#59;

;
+

&#60;

<
+

&#61;

=
+

&#62;

>
+

&#63;

?
+

&#64;

@
+

&#65;

A
+

&#66;

B
+

&#67;

C
+

&#68;

D
+

&#69;

E
+

&#70;

F
+

&#71;

G
+

&#72;

H
+

&#73;

I
+

&#74;

J
+

&#75;

K
+

&#76;

L
+

&#77;

M
+

&#78;

N
+

&#79;

O
+

&#80;

P
+

&#81;

Q
+

&#82;

R
+

&#83;

S
+

&#84;

T
+

&#85;

U
+

&#86;

V
+

&#87;

W
+

&#88;

X
+

&#89;

Y
+

&#90;

Z
+

&#91;

[
+

&#92;

\
+

&#93;

]
+

&#94;

^
+

&#95;

_
+

&#96;

`
+

&#97;

a
+

&#98;

b
+

&#99;

c
+

&#100;

d
+

&#101;

e
+

&#102;

f
+

&#103;

g
+

&#104;

h
+

&#105;

i
+

&#106;

j
+

&#107;

k
+

&#108;

l
+

&#109;

m
+

&#110;

n
+

&#111;

o
+

&#112;

p
+

&#113;

q
+

&#114;

r
+

&#115;

s
+

&#116;

t
+

&#117;

u
+

&#118;

v
+

&#119;

w
+

&#120;

x
+

&#121;

y
+

&#122;

z
+

&#123;

{
+

&#124;

|
+

&#125;

}
+

&#126;

~
+

&#160;

 
+

&#161;

¡
+

&#162;

¢
+

&#163;

£
+

&#164;

¤
+

&#165;

¥
+

&#166;

¦
+

&#167;

§
+

&#168;

¨
+

&#169;

©
+

&#170;

ª
+

&#171;

«
+

&#172;

¬
+

&#173;

­
+

&#174;

®
+

&#175;

¯
+

&#176;

°
+

&#177;

±
+

&#178;

²
+

&#179;

³
+

&#180;

´
+

&#181;

µ
+

&#182;

+

&#183;

·
+

&#184;

¸
+

&#185;

¹
+

&#186;

º
+

&#187;

»
+

&#188;

¼
+

&#189;

½
+

&#190;

¾
+

&#191;

¿
+

&#192;

À
+

&#193;

Á
+

&#194;

Â
+

&#195;

Ã
+

&#196;

Ä
+

&#197;

Å
+

&#198;

Æ
+

&#199;

Ç
+

&#200;

È
+

&#201;

É
+

&#202;

Ê
+

&#203;

Ë
+

&#204;

Ì
+

&#205;

Í
+

&#206;

Î
+

&#207;

Ï
+

&#208;

Ð
+

&#209;

Ñ
+

&#210;

Ò
+

&#211;

Ó
+

&#212;

Ô
+

&#213;

Õ
+

&#214;

Ö
+

&#215;

×
+

&#216;

Ø
+

&#217;

Ù
+

&#218;

Ú
+

&#219;

Û
+

&#220;

Ü
+

&#221;

Ý
+

&#222;

Þ
+

&#223;

ß
+

&#224;

à
+

&#225;

á
+

&#226;

â
+

&#227;

ã
+

&#228;

ä
+

&#229;

å
+

&#230;

æ
+

&#231;

ç
+

&#232;

è
+

&#233;

é
+

&#234;

ê
+

&#235;

ë
+

&#236;

ì
+

&#237;

í
+

&#238;

î
+

&#239;

ï
+

&#240;

ð
+

&#241;

ñ
+

&#242;

ò
+

&#243;

ó
+

&#244;

ô
+

&#245;

õ
+

&#246;

ö
+

&#247;

÷
+

&#248;

ø
+

&#249;

ù
+

&#250;

ú
+

&#251;

û
+

&#252;

ü
+

&#253;

ý
+

&#254;

þ
+

&#255;

ÿ
+

&#338;

Œ
+

&#339;

œ
+

&#376;

Ÿ
+

&#710;

ˆ
+

&#732;

˜
+

&#8192;

 
+

&#8193;

 
+

&#8194;

 
+

&#8195;

 
+

&#8196;

 
+

&#8197;

 
+

&#8198;

 
+

&#8199;

 
+

&#8200;

 
+

&#8201;

 
+

&#8202;

 
+

&#8208;

‐
+

&#8209;

‑
+

&#8210;

‒
+

&#8211;

–
+

&#8212;

—
+

&#8216;

‘
+

&#8217;

’
+

&#8218;

‚
+

&#8220;

“
+

&#8221;

”
+

&#8222;

„
+

&#8226;

•
+

&#8230;

…
+

&#8239;

 
+

&#8249;

‹
+

&#8250;

›
+

&#8287;

 
+

&#8364;

€
+

&#8482;

™
+

&#9724;

◼
+

&#64257;

fi
+

&#64258;

fl
+
+
+ + +
+
+ + +
+ +
+ +
+
+
+

Installing Webfonts

+ +

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

+ +

1. Upload your webfonts

+

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

+ + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

+

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+
+ +
+
+

Troubleshooting
Font-Face Problems

+

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

+ +

Fonts not loading in iPhone or iPad

+ +

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

+ +

Fonts not loading in Firefox

+ +

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

+ +

Fonts not loading in IE

+ +

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+
+
+
+ +
+ +
+ +
+ + diff --git a/fonts/poppins/poppins-regular-webfont.eot b/fonts/poppins/poppins-regular-webfont.eot new file mode 100755 index 0000000..d82af44 Binary files /dev/null and b/fonts/poppins/poppins-regular-webfont.eot differ diff --git a/fonts/poppins/poppins-regular-webfont.svg b/fonts/poppins/poppins-regular-webfont.svg new file mode 100755 index 0000000..2f324cd --- /dev/null +++ b/fonts/poppins/poppins-regular-webfont.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/poppins/poppins-regular-webfont.ttf b/fonts/poppins/poppins-regular-webfont.ttf new file mode 100755 index 0000000..eaf7432 Binary files /dev/null and b/fonts/poppins/poppins-regular-webfont.ttf differ diff --git a/fonts/poppins/poppins-regular-webfont.woff b/fonts/poppins/poppins-regular-webfont.woff new file mode 100755 index 0000000..02902d0 Binary files /dev/null and b/fonts/poppins/poppins-regular-webfont.woff differ diff --git a/fonts/poppins/poppins-regular-webfont.woff2 b/fonts/poppins/poppins-regular-webfont.woff2 new file mode 100755 index 0000000..3ba63e6 Binary files /dev/null and b/fonts/poppins/poppins-regular-webfont.woff2 differ diff --git a/fonts/poppins/specimen_files/grid_12-825-55-15.css b/fonts/poppins/specimen_files/grid_12-825-55-15.css new file mode 100755 index 0000000..3d6aef7 --- /dev/null +++ b/fonts/poppins/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/fonts/poppins/specimen_files/specimen_stylesheet.css b/fonts/poppins/specimen_files/specimen_stylesheet.css new file mode 100755 index 0000000..aecc43c --- /dev/null +++ b/fonts/poppins/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +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, font, 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 + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 300px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/fonts/poppins/stylesheet.css b/fonts/poppins/stylesheet.css new file mode 100755 index 0000000..9ef9de5 --- /dev/null +++ b/fonts/poppins/stylesheet.css @@ -0,0 +1,16 @@ +/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 17, 2019 */ + + + +@font-face { + font-family: 'poppinsregular'; + src: url('poppins-regular-webfont.eot'); + src: url('poppins-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('poppins-regular-webfont.woff2') format('woff2'), + url('poppins-regular-webfont.woff') format('woff'), + url('poppins-regular-webfont.ttf') format('truetype'), + url('poppins-regular-webfont.svg#poppinsregular') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..93b483a Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/BioHackonlylogo[3900].png b/img/BioHackonlylogo[3900].png new file mode 100644 index 0000000..b0b8397 Binary files /dev/null and b/img/BioHackonlylogo[3900].png differ diff --git a/img/DNA_bg.jpg b/img/DNA_bg.jpg new file mode 100644 index 0000000..b1578c1 Binary files /dev/null and b/img/DNA_bg.jpg differ diff --git a/img/SP1.jpg b/img/SP1.jpg new file mode 100644 index 0000000..7051f81 Binary files /dev/null and b/img/SP1.jpg differ diff --git a/img/SP2.jpg b/img/SP2.jpg new file mode 100644 index 0000000..1149257 Binary files /dev/null and b/img/SP2.jpg differ diff --git a/img/aga.jpg b/img/aga.jpg new file mode 100755 index 0000000..d94fd0a Binary files /dev/null and b/img/aga.jpg differ diff --git a/img/ann.png b/img/ann.png new file mode 100644 index 0000000..4f7cf44 Binary files /dev/null and b/img/ann.png differ diff --git a/img/apply.png b/img/apply.png new file mode 100644 index 0000000..a846b00 Binary files /dev/null and b/img/apply.png differ diff --git a/img/background.png b/img/background.png new file mode 100644 index 0000000..0649757 Binary files /dev/null and b/img/background.png differ diff --git a/img/bcoe.png b/img/bcoe.png index 798854e..e4f139a 100644 Binary files a/img/bcoe.png and b/img/bcoe.png differ diff --git a/img/bmes.jpg b/img/bmes.jpg deleted file mode 100644 index 23b6249..0000000 Binary files a/img/bmes.jpg and /dev/null differ diff --git a/img/bmes.png b/img/bmes.png new file mode 100644 index 0000000..59efbda Binary files /dev/null and b/img/bmes.png differ diff --git a/img/e.jpg b/img/e.jpg new file mode 100644 index 0000000..5d0875f Binary files /dev/null and b/img/e.jpg differ diff --git a/img/github-2.jpg b/img/github-2.jpg new file mode 100644 index 0000000..2924d87 Binary files /dev/null and b/img/github-2.jpg differ diff --git a/img/github.png b/img/github.png new file mode 100644 index 0000000..2e0d302 Binary files /dev/null and b/img/github.png differ diff --git a/img/he.png b/img/he.png new file mode 100644 index 0000000..3cf562a Binary files /dev/null and b/img/he.png differ diff --git a/img/inverseDNA.png b/img/inverseDNA.png new file mode 100644 index 0000000..bc93ba8 Binary files /dev/null and b/img/inverseDNA.png differ diff --git a/img/j1.jpg b/img/j1.jpg new file mode 100644 index 0000000..507357f Binary files /dev/null and b/img/j1.jpg differ diff --git a/img/j2.jpg b/img/j2.jpg new file mode 100644 index 0000000..a67bd0b Binary files /dev/null and b/img/j2.jpg differ diff --git a/img/j3.jpg b/img/j3.jpg new file mode 100644 index 0000000..3b45c0f Binary files /dev/null and b/img/j3.jpg differ diff --git a/img/j4.jpg b/img/j4.jpg new file mode 100644 index 0000000..cb45b65 Binary files /dev/null and b/img/j4.jpg differ diff --git a/img/kgi.png b/img/kgi.png new file mode 100644 index 0000000..a83b796 Binary files /dev/null and b/img/kgi.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..9d73b94 Binary files /dev/null and b/img/logo.png differ diff --git a/img/mbar.png b/img/mbar.png new file mode 100644 index 0000000..e8c3610 Binary files /dev/null and b/img/mbar.png differ diff --git a/img/otp.png b/img/otp.png new file mode 100644 index 0000000..e7aa203 Binary files /dev/null and b/img/otp.png differ diff --git a/img/sgl.png b/img/sgl.png new file mode 100644 index 0000000..4782623 Binary files /dev/null and b/img/sgl.png differ diff --git a/img/side.jpg b/img/side.jpg new file mode 100644 index 0000000..0c02d50 Binary files /dev/null and b/img/side.jpg differ diff --git a/img/ss_1.PNG b/img/ss_1.PNG new file mode 100644 index 0000000..4cecac6 Binary files /dev/null and b/img/ss_1.PNG differ diff --git a/img/ss_1.jpg b/img/ss_1.jpg new file mode 100644 index 0000000..d9f906a Binary files /dev/null and b/img/ss_1.jpg differ diff --git a/img/ss_10.PNG b/img/ss_10.PNG new file mode 100644 index 0000000..238a46c Binary files /dev/null and b/img/ss_10.PNG differ diff --git a/img/ss_11.PNG b/img/ss_11.PNG new file mode 100644 index 0000000..a18a7a2 Binary files /dev/null and b/img/ss_11.PNG differ diff --git a/img/ss_12.PNG b/img/ss_12.PNG new file mode 100644 index 0000000..e5e6167 Binary files /dev/null and b/img/ss_12.PNG differ diff --git a/img/ss_13.PNG b/img/ss_13.PNG new file mode 100644 index 0000000..b9d3c7f Binary files /dev/null and b/img/ss_13.PNG differ diff --git a/img/ss_14.PNG b/img/ss_14.PNG new file mode 100644 index 0000000..f8988a3 Binary files /dev/null and b/img/ss_14.PNG differ diff --git a/img/ss_15.PNG b/img/ss_15.PNG new file mode 100644 index 0000000..8ff1fdd Binary files /dev/null and b/img/ss_15.PNG differ diff --git a/img/ss_2.PNG b/img/ss_2.PNG new file mode 100644 index 0000000..494bd4c Binary files /dev/null and b/img/ss_2.PNG differ diff --git a/img/ss_2.jpg b/img/ss_2.jpg new file mode 100644 index 0000000..f465072 Binary files /dev/null and b/img/ss_2.jpg differ diff --git a/img/ss_3.PNG b/img/ss_3.PNG new file mode 100644 index 0000000..489d0f9 Binary files /dev/null and b/img/ss_3.PNG differ diff --git a/img/ss_3.jpg b/img/ss_3.jpg new file mode 100644 index 0000000..38115fc Binary files /dev/null and b/img/ss_3.jpg differ diff --git a/img/ss_5.PNG b/img/ss_5.PNG new file mode 100644 index 0000000..b7b6744 Binary files /dev/null and b/img/ss_5.PNG differ diff --git a/img/ss_6.PNG b/img/ss_6.PNG new file mode 100644 index 0000000..693d92a Binary files /dev/null and b/img/ss_6.PNG differ diff --git a/img/ss_7.PNG b/img/ss_7.PNG new file mode 100644 index 0000000..e5a64ff Binary files /dev/null and b/img/ss_7.PNG differ diff --git a/img/ss_8.PNG b/img/ss_8.PNG new file mode 100644 index 0000000..c499466 Binary files /dev/null and b/img/ss_8.PNG differ diff --git a/img/ss_9.PNG b/img/ss_9.PNG new file mode 100644 index 0000000..9dab132 Binary files /dev/null and b/img/ss_9.PNG differ diff --git a/img/title_bg.png b/img/title_bg.png new file mode 100644 index 0000000..cf926e5 Binary files /dev/null and b/img/title_bg.png differ diff --git a/img/viruslogo.png b/img/viruslogo.png new file mode 100644 index 0000000..1b519e5 Binary files /dev/null and b/img/viruslogo.png differ diff --git a/img/vr.jpg b/img/vr.jpg new file mode 100644 index 0000000..2257141 Binary files /dev/null and b/img/vr.jpg differ diff --git a/index.html b/index.html index 94fc604..ef45859 100644 --- a/index.html +++ b/index.html @@ -2,14 +2,16 @@ - BioHack 2018 | UC Riverside + BioHack 2019 | UC Riverside + + - + @@ -17,12 +19,12 @@ - +
+
-

BioHack

-

May 19th, 2018

-

University of California, Riverside

-

Merging man with machine

- Apply +
+

May 18th, 2019

+

University of California, Riverside +

+
+ Application +
-
-
- - + +
+
+
+ +
+
+
+
-

Innovators

+

What

- We are inviting over 150 innovators of all skill levels to come make the next technological advancement in the biomedical field. + Founded in 2018 by student leaders from the Society of Women Engineers and the Biomedical Engineering Society, + BioHack is a 12-hour bioengineering related, health & medicine themed hackathon at the University of California, Riverside.

-

A Weekend

+

Is

- Innovators will be supported for 12 hours in their suit of their projects + Our mission is to foster connections among students and sponsors throughout the computer science and bioengineering industries. Through BioHack, + students will form teams to work on projects, attend technical workshops, speak with mentors, learn about new technologies, and network with industries.

-

Challenges

+

BioHack?

- Working with industry partners, we will provide our innovators with real world challenges that the solutions will have an immediate impact. + We encourage curious non-computer science or engineering students to develop valuable technical and teamwork skills in a safe and encouraging environment. + BioHack focuses on an event where students can create medically innovative projects and technologies with the freedom of their creativity.

-
+
+
+ +
+
+ +
-
-
-

- What is BioHack? -

-

- A hackathon is an multi-day event where students practice and develop their computer programming skills to create ideas and projects. This year, a collaboration with the Society of Women Engineers and Biomedical Engineering Society introduces BioHack, - the very first student-run 12 hour bioengineering-themed hackathon at the University of California, Riverside. Throughout this 12-hour hackathon, students will form teams to work on projects, attend technical workshops, speak to mentors, learn - about new technologies, and network with industries. +

+
+
+

Announcements

+

Want to join the Committee for Biohack 2019?

+

+ If you would like to volunteer and help plan this year's Biohack event, come join us at our first volunteer committee meeting on Wednesday, November 28th, 2018 in BournsA265! + We will be covering what Biohack is as well as ways that you can help out and get involved! + We would love for you to join us! Hope to see you there! +

+

Interested in being a Committee Lead for BioHack 2019?

+

+ We are currently looking for committee leads to help us organize this year's BioHack! If you are interested, please fill out this form.

-

- Our mission is to foster connections among students and sponsors throughout computer science and bioengineering. We encourage non-computer science or engineering students, especially females* and minorities, to develop valuable technical and teamwork - skills in a safe and encouraging environment. Also, hosting BioHack in the Inland Empire will spawn connections with engineers throughout the bioengineering community across California. UCR students who are curious are welcome to join; no - experience necessary! +

Applications to participate in BioHack 2018 are closed

+

+ Email us at BioHack.UCR@gmail.com if you have any questions about this year's upcoming BioHack. Stay tuned for further updates!

+
-
-
-

- BioHack focuses on an event where students can create medically innovative projects and technologies with the freedom of their creativity. Unlike other hackathons, we promote bioengineering related projects as the central aspect of the event. -

​ + +
+
+ + +
+
+
+
+

2018 Agenda

-
- +
+ +
-
-
-
-
- -
-

Bioinformatics

-
+
+
+
+ + + + + -
-
-
- -
-

Neuroscience

+ + +
+
+
+
+

+ Example Projects +

+

+ Don’t know what to make during BioHack? Check out the winners from Biohack 2018 for inspiration! + We include projects that are related to, but are not limited to, these topics: Bioinformatics, Genetics, Neuroscience, + Pharmaceuticals, or Medical Devices. +

+
+
+ + Overall 1st Place: SeeFood + +
+
+ SeeFood allows you to get nutritional information for the food you eat fast. + Unlike other solutions, SeeFood uses computer vision and neural networks to identify what you're eating and see the nutritional value.
+
+
+ + Overall 2nd Place: Medalarm + +
+
+ A pills dispenser equipped with a timer that the user can set (ie: 1 hour, 4 hours, 2 days, 1 week, etc...) When the timer is up, then the dispenser will sound an alarm until the pill is dispensed. + When this occurs, the timer will automatically be reset to the initial. +
-
-
- -
-

Pharmaceuticals

-
+
+
+ + Best Startup Hack: Recover Track + +
+
+ Using a Kinect or something similar to help physical therapy patients from the convenience of their​ own home.
-
-
- -
-

Medical Devices

-
+
+
+ + Best Beginner's Hack: Hydration Reminder + +
+
+ People constantly forget to drink water throughout the day or don't know how much water they're supposed to drink, based on their body type. + Input your weight in pounds, average exercise level, and sex, to output the liters of water you need, as well as how frequently you drink throughout the day to determine how much you need each time. +
+
+
+ + Best Hardware Hack: Apple a Day + +
+
+ This app allows patients to monitor their biometrics from the comfort of their home and contact the doctor if they have any concerns. + The doctor can send the patient a specific code so that he/she has access to the patient's medical records and biometric data. +
+
+
+ + Best Humanitarian Hack: EmergencyWoundTreatmentSimulator + +
+
+ Most people in highly stressful situations tend to freeze up. Our simulator seeks to familiarize people with emergency wound treatment so that they can calmly handle a life-or-death situation. + This simulator has the potential to save many lives by keeping wounded people alive until paramedics arrive. It also can be expanded to include more dilemmas.
-
-
+
+ + -
+
-
-
-

Sponsors

-

- Sponsorship Package -

+
+
+

Sponsors

- - - + + + + + + + + + +
+

+

View Our Sponsorship Packet

+

-
+ + +
+
+
+
+

faqs

+
+
+
+
+
+ +
+
+ +
+ A hackathon is a weekend-long (or day-long) event that invites curious minds to learn and build something new. You may pick up a project of their + choosing to work on during the event to dive into a topic you've been meaning to explore. You also get to meet new friends as you work in a team + of up to 4! Hackathons provide other ways to learn such as attending workshops, listening to speakers, or networking with other students and + representatives from faculty and companies! +
+
+
+ +
+
+ +
+ If you are an undergraduate UCR student who is curious about hacking, then of course! If you do not have any programming experience, CS mentors + will be around to help. And if you are interested in mentoring during this event, you can fill out a mentor application! +
+
+
+ +
+
+ +
+ No! BioHack encourages students who are curious about coding and health to create their coding project, whether it is their first project, greatest + project, or both! We will provide resources for beginners to get started! +
+
+
+ +
+
+ +
+ Applications to participate in BioHack 2019 will open soon. Feel free to contact us at BioHack.UCR@gmail.com if you have any further questions, and follow us on social media for updates on when applications open and other exciting announcements! +
+
+
+ +
+
+ +
+ Nope! This event is free to all students. We will provide food, snacks, a place to hack, swag, and prizes for the winners! +
+
+
+ +
+
+ +
+ There will be four category prizes and two overall prizes: +
+
    +
  • Best Startup hack, Best Beginner hack, Best Hardware hack, Best Humanitarian hack, Overall 2nd place, and Overall 1st place
    • +
+
+
+
+
+ +
+
+ +
+ BioHack will be hosted in Winston Chung Hall and Bourns Hall. Further details about the locations will be provided as the event approaches. + Unfortunately, we will not be providing transportation for students. However, guests will be provided parking on campus. +
+
+
+ +
+
+ +
+ Unfortunately, we will not be able to provide travel reimbursements this year. Sorry for the inconvenience. +
+
+
+ +
+
+ +
+ Team will be between students of up to 4 people. Teams can be formed either before the event or during the day of the event right after opening ceremony. + We encourage students to collaborate with peers from different technical backgrounds to work on a computer programming project that’s medical or health related! +
+
+
+ +
+
+ +
+ Yes! Hardware will be provided. +
+
+
+ +
+
+ +
+ Bring a valid student ID for admission, a laptop with charger, and anything else you need to hack away! +
+
+
+ +
+
+ +
+ Since this event is a 12-hour event, sleeping over will not be necessary and will not be provided. +
+
+
+
+
+
+ + + +