Initial commit
This commit is contained in:
Mikko Ahlroth
commit
78ebccd2ac
4 changed files with 381 additions and 0 deletions
BIN
bg.jpg
Normal file
BIN
bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
bg_orig.jpg
Normal file
BIN
bg_orig.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
85
index.html
Normal file
85
index.html
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TRElixir</title>
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="marketing.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="#top">TRElixir</a>
|
||||
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item"><a class="pure-menu-link" href="#signup">Sign up</a></li>
|
||||
<li class="pure-menu-item"><a class="pure-menu-link" href="#contact">Contact</a></li>
|
||||
<li class="pure-menu-item"><a class="pure-menu-link" href="#top">Top</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="splash-container">
|
||||
<header class="splash">
|
||||
<h1 class="splash-head">TRElixir</h1>
|
||||
<p class="splash-subhead">
|
||||
Tampere ❤️ Elixir! TRElixir is a developer meetup focusing on the Elixir ecosystem.
|
||||
</p>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<main class="content-wrapper">
|
||||
<section id="signup" class="ribbon l-box-lrg">
|
||||
<h2 class="content-head content-head-ribbon is-center">Sign up</h2>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-1-2">
|
||||
<p>
|
||||
We are currently gauging interest for an Elixir meetup in Tampere. If you are
|
||||
interested in attending or speaking, please fill our contact form. This
|
||||
ensures you will know when our first meetup happens!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-1-2 signupform">
|
||||
<form method="get" action="https://docs.google.com/forms/d/e/1FAIpQLSed2DTg3UmyoTDnIOKZbtQ6s3lXL1ywBw-GlEsmnIWFu6CXmg/viewform?usp=sf_link">
|
||||
<button type="submit" class="pure-button">Fill the form</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="content">
|
||||
<h2 class="content-head is-center">Contact</h2>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2">
|
||||
<h3 class="content-subhead">Matrix</h3>
|
||||
|
||||
<p>
|
||||
Join our Matrix discussion channel at <a href="https://matrix.to/#/#matrix:matrix.org"><code>#trelixir:matrix.org</code></a>
|
||||
or the IRC channel <a href="irc://irc.freenode.net/trelixir"><code>#trelixir @ Freenode</code></a>.
|
||||
Both the Matrix and IRC channels are linked so you can join either one.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2">
|
||||
<h3 class="content-subhead">Twitter</h3>
|
||||
|
||||
<p>
|
||||
Follow us on Twitter for the latest updates: @trelixir
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer l-box is-center">
|
||||
Sponsored by <a href="https://vincit.com/">Vincit</a>. Tampere background © Tampereen kaupunki, licensed under CC-BY-NC.
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
296
marketing.css
Normal file
296
marketing.css
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- BASE STYLES --
|
||||
* Most of these are inherited from Base, but I want to change a few.
|
||||
*/
|
||||
body {
|
||||
line-height: 1.7em;
|
||||
color: #7f8c8d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
label {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.pure-img-responsive {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- LAYOUT STYLES --
|
||||
* These are some useful classes which I will need
|
||||
*/
|
||||
.l-box {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.l-box-lrg {
|
||||
padding: 2em;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.is-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* -- PURE FORM STYLES --
|
||||
* Style the form inputs and labels
|
||||
*/
|
||||
.pure-form label {
|
||||
margin: 1em 0 0;
|
||||
font-weight: bold;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.pure-form input[type] {
|
||||
border: 2px solid #ddd;
|
||||
box-shadow: none;
|
||||
font-size: 100%;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- PURE BUTTON STYLES --
|
||||
* I want my pure-button elements to look a little different
|
||||
*/
|
||||
.pure-button {
|
||||
background-color: #6f3ec6;
|
||||
color: white;
|
||||
padding: 0.5em 2em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
a.pure-button-primary {
|
||||
background: white;
|
||||
color: #1f8dd6;
|
||||
border-radius: 5px;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- MENU STYLES --
|
||||
* I want to customize how my .pure-menu looks at the top of the page
|
||||
*/
|
||||
|
||||
.home-menu {
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
|
||||
}
|
||||
.home-menu {
|
||||
background: #000;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.pure-menu.pure-menu-fixed {
|
||||
/* Fixed menus normally have a border at the bottom. */
|
||||
border-bottom: none;
|
||||
/* I need a higher z-index here because of the scroll-over effect. */
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-heading {
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-selected a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.home-menu a, .footer a {
|
||||
color: #6FBEF3;
|
||||
}
|
||||
.home-menu li a:hover,
|
||||
.home-menu li a:focus {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #AECFE5;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- SPLASH STYLES --
|
||||
* This is the blue top section that appears on the page.
|
||||
*/
|
||||
|
||||
.splash-container {
|
||||
background-image: url('bg.jpg');
|
||||
background-color: #fff;
|
||||
background-position: left top;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
/* The following styles are required for the "scroll-over" effect */
|
||||
width: 100%;
|
||||
height: 88%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.splash {
|
||||
/* absolute center .splash within .splash-container */
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 100px; left: 0; bottom: 0; right: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* This is the main heading that appears on the blue section */
|
||||
.splash-head {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border: 3px solid white;
|
||||
padding: 1em 1.6em;
|
||||
font-weight: 100;
|
||||
border-radius: 5px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
/* This is the subheading that appears on the blue section */
|
||||
.splash-subhead {
|
||||
color: white;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- CONTENT STYLES --
|
||||
* This represents the content area (everything below the blue section)
|
||||
*/
|
||||
.content-wrapper {
|
||||
/* These styles are required for the "scroll-over" effect */
|
||||
position: absolute;
|
||||
top: 87%;
|
||||
width: 100%;
|
||||
min-height: 12%;
|
||||
z-index: 2;
|
||||
background: white;
|
||||
|
||||
}
|
||||
|
||||
/* We want to give the content area some more padding */
|
||||
.content {
|
||||
padding: 1em 1em 3em;
|
||||
}
|
||||
|
||||
/* This is the class used for the main content headers (<h2>) */
|
||||
.content-head {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin: 2em 0 1em;
|
||||
}
|
||||
|
||||
/* This is a modifier class used when the content-head is inside a ribbon */
|
||||
.content-head-ribbon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* This is the class used for the content sub-headers (<h3>) */
|
||||
.content-subhead {
|
||||
color: #1f8dd6;
|
||||
}
|
||||
.content-subhead i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
/* This is the class used for the dark-background areas. */
|
||||
.ribbon {
|
||||
background: #2d3e50;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* This is the class used for the footer */
|
||||
.footer {
|
||||
background: #111;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- TABLET (AND UP) MEDIA QUERIES --
|
||||
* On tablets and other medium-sized devices, we want to customize some
|
||||
* of the mobile styles.
|
||||
*/
|
||||
@media (min-width: 48em) {
|
||||
|
||||
/* We increase the body font size */
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* We can align the menu header to the left, but float the
|
||||
menu items to the right. */
|
||||
.home-menu {
|
||||
text-align: left;
|
||||
}
|
||||
.home-menu ul {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* We increase the height of the splash-container */
|
||||
/* .splash-container {
|
||||
height: 500px;
|
||||
}*/
|
||||
|
||||
/* We decrease the width of the .splash, since we have more width
|
||||
to work with */
|
||||
.splash {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
font-size: 250%;
|
||||
}
|
||||
|
||||
|
||||
/* We remove the border-separator assigned to .l-box-lrg */
|
||||
.l-box-lrg {
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
||||
* On desktops and other large devices, we want to over-ride some
|
||||
* of the mobile and tablet styles.
|
||||
*/
|
||||
@media (min-width: 78em) {
|
||||
/* We increase the header font size even more */
|
||||
.splash-head {
|
||||
font-size: 300%;
|
||||
}
|
||||
}
|
||||
|
||||
.signupform {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
Loading…
Reference in a new issue