Nerdli.st

Developer
Kevin Gimbel
Size
5,688 Kb
Views
36,432
  1. Nerdli.st Previews
  2. Nerdli.st HTML Codes
  3. Nerdli.st CSS Codes

How do I make an nerdli.st?

@TimPietrusky and me build this landing page in Collab Mode. The Basic idea of nerdli.st is to host Conferences and Meetups in Frankfurt, Germany but there's more to be announced! nerdli.st. What is a nerdli.st? How do you make a nerdli.st? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

Nerdli.st Previews
IQ Test

Nerdli.st - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>nerdli.st</title> <link rel='stylesheet prefetch' href='http://yui.yahooapis.com/pure/0.3.0/grids-min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="site__header pure-g-r"> <hgroup class="site__header--inner pure-u"> <h1 class="site--title">NERDLI.ST</h1> </hgroup>
</header>
<main class="content"> <article class="pure-g-r"> <div class="pure-u-1-2"> <div class="box__alpha"> <p>You live close to Frankfurt am Main? You hack awesome stuff? HTML, CSS and JavaScript are your best friends? Star Wars is your religion (or Star Trek, we won't judge you on that).</p> <p>No matter what you do, no matter what your skill level is: Join us on our first Development Conference / Hackday in Frankfurt (Main)! We're searching all kinds of Developers or creative folks to have a great time together and build amazing things in 24h.</p>
<p>As you may see the concepts are still in development and rough around the edge, however this is your chance to take actively part in planning this conference! Share your ideas or wishes for a conference with us. We're thrilled to hear from you!</p> </div> </div> <div class="pure-u-1-2"> <div class="box__alpha"> <article> <h2>Who?</h2> <p>Everyone who codes and/or designs for the interwebs.</p> </article> <article> <h2>What?</h2> <p>24 hours to hack on an idea</p> </article> <article> <h2>Where?</h2> <p>In the region around Frankfurt (Main)</p> </article> <article> <h2>When?</h2> <p>tba</p> </article> </div> </div> </article> <article class="pure-g-r"> <div class="pure-u"> <h2>You want to be the first who knows all the details?</h2> </div> </article> <br> <article class="pure-g-r"> <!-- Begin MailChimp Signup Form --> <form action="http://nerdli.us7.list-manage.com/subscribe/post?u=ac324eb6dc36d0947ce44086b&amp;id=4f6e288a0e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div class="pure-u-1-2"> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="E-Mail" required> </div> <div class="pure-u-1-2"> <div class="signup__container"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn--sign-up hacker" /> </div> </div> </form> <!--End mc_embed_signup--> </div> </article>
</main>
<br><br>
<footer class="site__footer"> <article class="pure-g-r"> <div class="pure-u-1-2"> <p>Header Image by <a href="http://flic.kr/p/eN9akM">Mozilla Europe on Flickr</a></p> </div> <div class="pure-u-1-2 helper__alpha"> 2013 by <a href="http://twitter.com/nerdlistHQ" target="_blank">@nerdlistHQ</a> </div> </article>
</footer>
</body>
</html>

Nerdli.st - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Archivo+Black);
/** * Colors */
/* best gray in the world. */
/* angelhack red */
/** * Lists */
/** * Units */
.helper__alpha { text-align: right;
}
* { margin: 0; padding: 0; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html,
body { width: 100%; height: 100%;
}
body { font: 1rem/1.65rem "Open Sans", sans-serif; background: #fff;
}
a { color: #38edfb; text-decoration: none; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; -webkit-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out;
}
a:hover { color: #f33634;
}
h2 { font: 3em "Archivo Black", sans-serif; margin: .55em 0 0 0; padding: 0 .25em; color: #fff; background: #f33634;
}
form { width: 100%;
}
input[type="email"] { border: 0.15em solid #222; width: 100%; font-size: 2.5em;
}
input[type="submit"] { font-size: 1em;
}
/** * * $SITE-HEADER * */
.site__header { width: 100%; height: auto; padding: 10em 0; background: url("http://farm8.staticflickr.com/7346/9054789119_a9ec2d2a68_h.jpg"); background-position: -20%; background-size: cover;
}
.site__header--inner { width: 100%; max-width: 60em; margin: 0 auto;
}
.site--title { font: 6em/1.4em "Archivo Black", sans-serif; background: black; color: #f33634; display: inline; padding: .1em .3em; -webkit-animation: damagedSign linear 2s infinite; -moz-animation: damagedSign linear 2s infinite; -o-animation: damagedSign linear 2s infinite; animation: damagedSign linear 2s infinite;
}
@media (max-width: 60em) { .site--title { font-size: 2em; }
}
@-webkit-keyframes damagedSign { 0% { background: black; color: #f33634; } 15% { background: white; color: black; text-shadow: 0.1em 0 #f33634, -0.05em 0 #38edfb; } 20% { background: black; color: #f33634; } 26% { background: white; color: black; text-shadow: -0.1em 0 #f33634, 0.1em 0 #38edfb; } 30% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; } 35% { background: white; color: black; text-shadow: -0.1em 0 #f33634, 0.1em 0 #38edfb; } 50% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; } 100% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; }
}
@-moz-keyframes damagedSign { 0% { background: black; color: #f33634; } 15% { background: white; color: black; text-shadow: 0.1em 0 #f33634, -0.05em 0 #38edfb; } 20% { background: black; color: #f33634; } 26% { background: white; color: black; text-shadow: -0.1em 0 #f33634, 0.1em 0 #38edfb; } 30% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; } 35% { background: white; color: black; text-shadow: -0.1em 0 #f33634, 0.1em 0 #38edfb; } 50% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; } 100% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; }
}
@-o-keyframes damagedSign { 0% { background: black; color: #f33634; } 15% { background: white; color: black; text-shadow: 0.1em 0 #f33634, -0.05em 0 #38edfb; } 20% { background: black; color: #f33634; } 26% { background: white; color: black; text-shadow: -0.1em 0 #f33634, 0.1em 0 #38edfb; } 30% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; } 35% { background: white; color: black; text-shadow: -0.1em 0 #f33634, 0.1em 0 #38edfb; } 50% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; } 100% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; }
}
@keyframes damagedSign { 0% { background: black; color: #f33634; } 15% { background: white; color: black; text-shadow: 0.1em 0 #f33634, -0.05em 0 #38edfb; } 20% { background: black; color: #f33634; } 26% { background: white; color: black; text-shadow: -0.1em 0 #f33634, 0.1em 0 #38edfb; } 30% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; } 35% { background: white; color: black; text-shadow: -0.1em 0 #f33634, 0.1em 0 #38edfb; } 50% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; } 100% { background: black; color: #f33634; text-shadow: 0 0 0 transparent; }
}
/** * * $CONTENT * */
.content { width: 100%; max-width: 60em; margin: 0 auto; background: #fff; color: #222;
}
.content p { padding: 0.5em 0; font-size: 1.25em; line-height: 1.55em;
}
.content article:nth-child(1) h2 { background: #f33634;
}
.content article:nth-child(2) h2 { background: #f36634;
}
.content article:nth-child(3) h2 { background: #f39634;
}
.content article:nth-child(4) h2 { background: #f3c534;
}
.box__alpha { padding: 2em 0 2em 1.5em;
}
.box__alpha article:first-child h2 { margin-top: 0;
}
@media (max-width: 60em) { .box__alpha { padding-right: 1.5em; }
}
.box__beta { width: 100%; height: 25em; position: relative;
}
.signup__container { margin-left: .5em;
}
.hacker, .sponsor { letter-spacing: 0; display: inline; width: 50%;
}
.hacker { background: #f33634; color: #750807; border: none; border-bottom: .2em solid #750807;
}
.hacker:hover { background: #750807; color: #f33634; border-bottom: .2em solid #f33634;
}
.sponsor { background: #38edfb; color: #026f78; border-bottom: .2em solid #026f78; margin-left: .5em;
}
.sponsor:hover { background: #026f78; color: #38edfb; border-bottom: .2em solid #38edfb;
}
.btn--sign-up { padding: 1.15em 1.5em; margin-top: 0;
}
.btn--sign-up:active { padding: .8em 1.5em 1.2em 1.5em; margin-top: .5em; border-bottom: none;
}
.sign-up--devider { display: inline-block; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; padding: .2em; margin: -7.8em; letter-spacing: 0; background: #fff;
}
/** * * Footer * */
.site__footer { width: 100%; max-width: 60em; height: auto; margin: 0 auto; color: #fff; background: #222; padding: 1em;
}
Nerdli.st - Script Codes
Nerdli.st - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 3.5
Size 5,688 Kb
Views 36,432
Do you need developer help for Nerdli.st?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Gimbel (kevingimbel) Script Codes
Name
Slide Menu
Pinterest Thumb
ViewSwitcher
A Pen by Kevin Gimbel
Chat UI - WIP
LazyLoad.js Example
Felixble Product Flags
.LANG
CSS3 only Vault-Tec Logo
CSS Pre-Block Overflow example
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!