Skip to content

Design new slack sign up #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Design new slack sign up #2

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d600464
init commit
Oct 3, 2018
5dc1dff
font change, cache busting
Oct 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Contributing Guidelines
Copy link
Member

@casassg casassg Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy from other repo

Copy link
Author

@devonsoto devonsoto Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gonna keep so we know that we need contributing guidelines still or to update them

15 changes: 15 additions & 0 deletions .github/PULL_REQUEST_TEMPLATE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
## Description
A few sentences describing the overall goals of the pull request's commits.

## Related Issues
Link to any issues that are relevant to this PR. This could be an issue this PR fixes.

## Some questions
1. Did you read the contributing guidelines?
(Your answer)

## Additional Notes
Do you want to add anything else? We :heart: to hear your opinions!

## Share how this made you feel
<img src="https://media.giphy.com/media/xUPGcAep2BZhomS0HC/giphy.gif" width="150" height="150" />
7 changes: 7 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
workspace.xml
/website/nbproject/private/
*.swp
Thumbs.db
.idea/*
.DS_Store
_site
39 changes: 37 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,37 @@
# slack
👨‍💻 Sign up page for our slack

<br>
<p align="center">
<img alt="HackCU IV" src="https://github.com/HackCU/splash-page/blob/master/img/hackcu_black.png" width="200"/>
</p>
<br>

Slack Sign Up Page

# Run project

Needs: Ruby

## Local

1. `git clone https://github.com/HackCU/slack.git && cd slack`
2. `gem install jekyll`
3. `jekyll serve --watch`

## Deploy

1. Push changes to master
2. There's no `2`

Deployment is done automatically by [GitHub pages](https://pages.github.com/). You don't need to do anything else than pushing to master.

# Development

## To add new logo images for sponsors and partners

1. Remove background
1. Resize the image to `600 x 400 px` centering
3. Archive the original `.png` file in the corresponding `originals/` folder
Copy link
Member

@casassg casassg Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No logos on this page most probably, you can delete this lines.

Copy link
Author

@devonsoto devonsoto Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


## Want to contribute?

Please read our [Code of Conduct](.github/CODE_OF_CONDUCT.md), then follow these [guidelines](.github/CONTRIBUTING.md)
23 changes: 23 additions & 0 deletions _includes/cover.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<section class="section">
<div class="cover-flatirons"></div>
<div id="fall"></div>
<div class="main">
<!-- <div class="container"> -->
<div class="header">
<h1>
HackCU Slack Signup
</h1>
<h2>
Enter your email below to join hackcu on slack!
</h2>
</div>

<div class="input-container">
<div class="input">
<input type="mitext" name="email" placeholder="Enter Your Email Address" class="field">
<button type="submit" class="submit">Join</button>
</div>
</div>
<!-- </div> -->
</div>
</section>
87 changes: 87 additions & 0 deletions _layouts/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!doctype html>
<html lang="en-US">
<head>

<meta charset="utf-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<title>HackCU Slack Signup Page | 2018</title>
<!-- <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> -->
<!-- <link rel="icon" href="img/favicon.ico" type="image/x-icon"> -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- for Google -->
<meta name="description" content="Join us for Local Hack Day at the University of Colorado Boulder."/>
<meta name="keywords" content="Hackathon, MLH, LocalHackDay, HackCU, Boulder, Colorado, CU, University"/>
<meta name="author" content="HackCU"/>
<meta name="theme-color" content="#315B7F">
<meta name="copyright" content="HackCU"/>
<meta name="application-name" content="Local Hack Day 2018"/>
Copy link
Member

@casassg casassg Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remember to change all the above tags

Copy link
Author

@devonsoto devonsoto Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


<!-- for Facebook -->
<meta property="og:title" content="Local Hack Day 2018"/>
<!-- <meta property="og:image" content="img/og-image.png"/> -->
<!-- <meta property="og:image:secure_url" content="img/og-image.png"> -->
<meta property="og:url" content="https://local.hackcu.org"/>
<meta property="og:description" content="Join us for Local Hack Day at the University of Colorado Boulder."/>

<!-- for Twitter -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Local Hack Day 2018"/>
<meta name="twitter:site" content="@hackcu">
<meta name="twitter:creator" content="@hackcu">
<meta name="twitter:description" content="Join us for Local Hack Day at the University of Colorado Boulder."/>
<meta name="twitter:image" content="https://local.hackcu.org/img/og-image.png"/>

<!-- Libs and Plugins CSS -->
<!-- <link rel="stylesheet" href="inc/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="inc/font-awesome/css/font-awesome.min.css"> -->
<!-- Font Icons -->
Copy link
Member

@casassg casassg Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be cool to use Biko (official HackCU font). See files: https://github.com/HackCU/HackCU/tree/master/assets/fonts

Copy link
Author

@devonsoto devonsoto Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


<!-- Theme CSS -->
<!-- <link rel="stylesheet" href="css/reset.css?_={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="css/style.css?_={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="css/mobile.css?_={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="css/form.css?_={{ site.time | date: '%s' }}"> -->

<!-- Skin CSS -->
<!-- <link rel="stylesheet" href="css/skin/summer-orange.css?_={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="css/skin/the_new_one.css?_={{ site.time | date: '%s' }}"> -->

<!-- CSS -->
<link rel="stylesheet" href="css/fall.css">
<link rel="stylesheet" href="css/style.css">
Copy link
Member

@casassg casassg Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add ?_={{ site.time | date: '%s' }} for cache busting

Reference: http://www.adopsinsider.com/ad-ops-basics/what-is-a-cache-buster-and-how-does-it-work/

Copy link
Author

@devonsoto devonsoto Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍




</head>
<body>

{{content}}

<!-- Plugins JS -->
<!-- <script src="inc/jquery/jquery-1.11.1.min.js"></script>
<script src="inc/bootstrap/js/bootstrap.min.js"></script> -->
<!-- <script src="inc/waypoints.min.js"></script> -->
<!-- Some features break when removing this -->
<!-- <script src="inc/jquery.counterup.min.js"></script> -->

<!-- Theme JS -->
<!-- <script src="js/theme.js"></script> -->


<!-- JQuery JS -->
<!-- <script src="js/jquery-3.2.1.min.js"></script> -->

<!-- Pixi JS -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.0.0/pixi.min.js"></script> -->

<!-- Pixi JS -->
<!-- <script src="js/flakes.js?_={{ site.time | date: '%s' }}"></script>
<script src="js/scroll.js"></script> -->

<!-- JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
<script src="js/fall.js"></script>
Copy link
Member

@casassg casassg Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as before, cache busting.

Copy link
Author

@devonsoto devonsoto Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


</body>
</html>
10 changes: 10 additions & 0 deletions css/fall.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@

.dot{
width:35px;
height:35px;
position:absolute;
background: url(http://www.clipartqueen.com/image-files/red-lobed-fall-clipart-leaf.png);
background-size: 100% 100%;
}


129 changes: 129 additions & 0 deletions css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
---
---


////////////////////////////////////////
// Variables
////////////////////////////////////////

// Fonts
$font: sans-serif;


// Images
$img: url(../img/flatirons.jpg);



html {
height: 100% !important;
font-family: $font;
}

body {
height: 100%;
width: 100%;
overflow: hidden;
font-family: $font;
}

.section {
height: 100%;
width: 100%;
}

.cover-flatirons {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: $img;
filter: brightness(80%);
background: linear-gradient(rgba(49, 91, 127, 0.5), rgba(49, 91, 127, 0.5)), $img;
background-size: cover;
background-attachment: fixed;
position: fixed;
padding: 20px;
z-index: -25;
}

#fall {
background: transparent !important;
}

.main {
width: 100%;
height: 50%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}

.container {
text-align: center;
}

.header {
width: 100%;
color: black;
}

h1, h2 {
text-align: center;
font-weight: 700;
}

h1 {
font-size: 38px;
}

h2 {
font-size: 20px;
}

.input-container {
width: 100%;
display: flex;
justify-content: center;
align-self: center;
align-items: center;
}

.input {
position: relative;
width: 500px;
margin-top: 20px;
}


.field {
display: block;
margin: 0 auto;
width: 400px;
border-radius: 30px;
border: none;
font-size: 16px;
padding: 15px;
background-color: #62605D;
color: white;
height: 10px;
}

::placeholder {
color: rgb(73, 71, 67);
}

.submit {
padding: 3px 10px;
border-radius: 30px;
font-size: 14px;
border: none;
cursor: pointer;
margin-left: -10px;
position: absolute;
top: 8px;
right: 53px;
}

Binary file added img/flatirons.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
layout: base
---

{% include cover.html %}
26 changes: 26 additions & 0 deletions js/fall.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/* a Pen by Diaco m.lotfollahi : https://diacodesign.com */

var falling = true;

TweenLite.set("#fall",{perspective:600})
TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"})

var total = 30;
var container = document.getElementById("fall"), w = window.innerWidth , h = window.innerHeight;

for (i=0; i<total; i++){
var Div = document.createElement('div');
TweenLite.set(Div,{attr:{class:'dot'},x:R(0,w),y:R(-200,-150),z:R(-200,200)});
container.appendChild(Div);
animm(Div);
}

function animm(elm){
TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15});
TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut});
TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5});
};

function R(min,max) {return min+Math.random()*(max-min)};

/* a Pen by Diaco m.lotfollahi : https://diacodesign.com */