Skip to content

Instantly share code, notes, and snippets.

@Mark1626

Mark1626/index.html

Last active June 18, 2019 04:09
Show Gist options
  • Save Mark1626/507cb92cfc6a000a3fd4d1e959693581 to your computer and use it in GitHub Desktop.
Save Mark1626/507cb92cfc6a000a3fd4d1e959693581 to your computer and use it in GitHub Desktop.
Download ZIP
Club-Y! Poster v0.3
Raw
index.html
<html>
<link href="https://fonts.googleapis.com/css?family=Anton|Dosis|Fira+Sans|Oswald|Playfair+Display&display=swap" rel="stylesheet">
<script src="https://unpkg.com/feather-icons"></script>
<body>
<div class="main">
<div class="title">
<div class="wording">
Club-Y! Event v0.3
</div>
<div class="time">
Jun 19th, Wednesday @ 3 - 4 PM
</div>
</div>
<div class="icon-patch">
<div class="icons">
<i id="a1" data-feather="star"></i>
<i id="a2" data-feather="star"></i>
<i id="a3" data-feather="star"></i>
<i id="a4" data-feather="star"></i>
<i id="a5" data-feather="star"></i>
<i id="a6" data-feather="star"></i>
<i id="a7" data-feather="star"></i>
<i id="a8" data-feather="star"></i>
<i id="a9" data-feather="loader"></i>
<i id="a10" data-feather="loader"></i>
<i id="a11" data-feather="loader"></i>
<i id="a12" data-feather="loader"></i>
<i id="a13" data-feather="loader"></i>
<i id="a14" data-feather="loader"></i>
<i id="a15" data-feather="loader"></i>
<i id="a16" data-feather="loader"></i>
<i id="a17" data-feather="loader"></i>
<i id="a18" data-feather="loader"></i>
<i id="a19" data-feather="loader"></i>
<i id="a20" data-feather="star"></i>
<i id="a21" data-feather="star"></i>
<i id="a22" data-feather="star"></i>
<i id="a23" data-feather="star"></i>
<i id="a24" data-feather="star"></i>
<i id="a25" data-feather="star"></i>
<i id="a26" data-feather="star"></i>
<i id="a27" data-feather="star"></i>
<i id="a28" data-feather="star"></i>
<i id="a29" data-feather="star"></i>
</div>
</div>
<div class="agenda">
<span>Agenda</span>
<ul>
<li>Introduction</li>
<li>Team Activity</li>
<li>Table Topics</li>
<li>Prepared Speech</li>
</ul>
</div>
</div>
<script>
feather.replace()
</script>
</body>
</html>
Raw
script.js
// Randomizer used to generate stars
const _ = require("lodash")
const cssTag = (i, x, y, size, deg) => `#a${i} {
position: absolute;
top: ${x}px;
left: ${y}px;
@include icon-size(${size}px);
transform: rotate(${deg}deg);
}`
_.each(_.times(30, (i) => cssTag(
i,
_.random(0, 250),
_.random(0, 630),
_.random(15, 65),
_.random(-45, 45)
)), (val) => console.log(val))
Raw
style.scss
$yellow: rgb(238, 228, 75);
$purple: rgb(201, 191, 244);
$dark_blue: rgb(52, 17, 185);
$blue: rgb(35, 55, 138);
@mixin icon-size($size) {
width: $size;
height: $size;
}
.main {
position: relative;
height: 628px;
width: 1200px;
background-color: $yellow;
}
.title {
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
padding: 20px;
color: #000;
.wording {
font-family: Anton;
font-size: 60px;
font-weight: 1000;
}
.time {
font-family: Fira Sans;
font-size: 24px;
}
}
.icon-patch {
position: absolute;
bottom: 0;
padding: 15px;
margin-left: 40px;
width: 50%;
height: 50%;
.icons {
position: relative;
#a0 {
position: absolute;
top: 191px;
left: 247px;
@include icon-size(41px);
transform: rotate(3deg);
}
#a1 {
position: absolute;
top: 120px;
left: 572px;
@include icon-size(21px);
transform: rotate(19deg);
}
#a2 {
position: absolute;
top: 45px;
left: 206px;
@include icon-size(48px);
transform: rotate(26deg);
}
#a3 {
position: absolute;
top: 115px;
left: 256px;
@include icon-size(62px);
transform: rotate(-14deg);
}
#a4 {
position: absolute;
top: 45px;
left: 509px;
@include icon-size(23px);
transform: rotate(-2deg);
}
#a5 {
position: absolute;
top: 89px;
left: 630px;
@include icon-size(50px);
transform: rotate(-14deg);
}
#a6 {
position: absolute;
top: 23px;
left: 310px;
@include icon-size(37px);
transform: rotate(-30deg);
}
#a7 {
position: absolute;
top: 83px;
left: 265px;
@include icon-size(30px);
transform: rotate(11deg);
}
#a8 {
position: absolute;
top: 7px;
left: 411px;
@include icon-size(64px);
transform: rotate(-1deg);
}
#a9 {
position: absolute;
top: 25px;
left: 142px;
@include icon-size(29px);
transform: rotate(-38deg);
}
#a10 {
position: absolute;
top: 5px;
left: 560px;
@include icon-size(15px);
transform: rotate(-31deg);
}
#a11 {
position: absolute;
top: 21px;
left: 331px;
@include icon-size(54px);
transform: rotate(39deg);
}
#a12 {
position: absolute;
top: 80px;
left: 468px;
@include icon-size(43px);
transform: rotate(-17deg);
}
#a13 {
position: absolute;
top: 55px;
left: 86px;
@include icon-size(34px);
transform: rotate(17deg);
}
#a14 {
position: absolute;
top: 141px;
left: 374px;
@include icon-size(62px);
transform: rotate(1deg);
}
#a15 {
position: absolute;
top: 117px;
left: 171px;
@include icon-size(50px);
transform: rotate(10deg);
}
#a16 {
position: absolute;
top: 9px;
left: 392px;
@include icon-size(39px);
transform: rotate(29deg);
}
#a17 {
position: absolute;
top: 183px;
left: 0px;
@include icon-size(40px);
transform: rotate(43deg);
}
#a18 {
position: absolute;
top: 191px;
left: 367px;
@include icon-size(37px);
transform: rotate(15deg);
}
#a19 {
position: absolute;
top: 116px;
left: 122px;
@include icon-size(63px);
transform: rotate(-34deg);
}
#a20 {
position: absolute;
top: 122px;
left: 366px;
@include icon-size(22px);
transform: rotate(-23deg);
}
#a21 {
position: absolute;
top: 17px;
left: 330px;
@include icon-size(17px);
transform: rotate(-9deg);
}
#a22 {
position: absolute;
top: 246px;
left: 339px;
@include icon-size(34px);
transform: rotate(-21deg);
}
#a23 {
position: absolute;
top: 73px;
left: 40px;
@include icon-size(62px);
transform: rotate(7deg);
}
#a24 {
position: absolute;
top: 213px;
left: 214px;
@include icon-size(60px);
transform: rotate(-42deg);
}
#a25 {
position: absolute;
top: 66px;
left: 281px;
@include icon-size(28px);
transform: rotate(-2deg);
}
#a26 {
position: absolute;
top: 195px;
left: 16px;
@include icon-size(48px);
transform: rotate(41deg);
}
#a27 {
position: absolute;
top: 155px;
left: 78px;
@include icon-size(52px);
transform: rotate(-2deg);
}
#a28 {
position: absolute;
top: 17px;
left: 170px;
@include icon-size(35px);
transform: rotate(-45deg);
}
#a29 {
position: absolute;
top: 172px;
left: 505px;
@include icon-size(60px);
transform: rotate(-3deg);
}
#act {
position: absolute;
top: 200px;
left: 85px;
@include icon-size(85px);
}
}
}
.agenda {
position: absolute;
right: 40px;
bottom: 40px;
font-size: 20px;
span {
font-family: Playfair Display;
font-weight: 600;
font-size: 30px;
}
li {
font-family: Dosis;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment