110swag / frontpage

Download as
Browse Code ยป

Commit b1c2e10f01abe079a92d1c246f69d7bcf4da725e

Authored by Andrew Buss
1 parent a92cd18505
Exists in master

removed navbar thing; changed some wording

Showing 3 changed files with 70 additions and 47 deletions Inline Diff

.gitignore View file @ b1c2e10
*~ 1 1 *~
2 .idea*
css/style.css View file @ b1c2e10
/* Custom Stylesheet */ 1 1 /* Custom Stylesheet */
/** 2 2 /**
* 3 3 *
* Made By Joash Pereira 4 4 * Made By Joash Pereira
* Thanks for MaterializeCSS.com 5 5 * Thanks for MaterializeCSS.com
*/ 6 6 */
7 7
/*.default_color{background-color: #D2143F !important}*/ 8 8 /*.default_color{background-color: #D2143F !important}*/
.default_color{background-color: #D2143F !important} 9 9 .default_color{background-color: #D2143F !important}
10 10
.default_color_text{color: #D2143F !important} 11 11 .default_color_text{color: #D2143F !important}
12 12
.icon-block { 13 13 .icon-block {
padding: 0 15px; 14 14 padding: 0 15px;
} 15 15 }
16 16
#intro, #work, #team {padding-top: 4rem;} 17 17 #intro, #work, #team {padding-top: 4rem;}
18 18
19 19
#index-banner { 20 20 #index-banner {
/*min-height: 100vh;*/ 21 21 /*min-height: 100vh;*/
/*max-height: 100vh;*/ 22 22 /*max-height: 100vh;*/
top: 0px; 23 23 top: 0px;
bottom: 0px; 24 24 bottom: 0px;
height: 100vh; 25 25 height: 100vh;
position: relative; 26 26 position: relative;
/*background-color: #D2143F;*/ 27 27 /*background-color: #D2143F;*/
background-color: #D2143F; 28 28 background-color: #D2143F;
} 29 29 }
30 30
#nav_f{ 31 31 #nav_f{
box-shadow: none !important; 32 32 box-shadow: none !important;
-webkit-box-shadow:none !important; 33 33 -webkit-box-shadow:none !important;
} 34 34 }
35 35
.text_h { 36 36 .text_h {
padding: 15% 0; 37 37 padding: 15% 0;
font-size: 6.0em; 38 38 font-size: 6.0em;
font-weight: 100; 39 39 font-weight: 100;
color:white; 40 40 color:white;
} 41 41 }
42 42
.brand-logo{ 43 43 .brand-logo{
position: absolute; 44 44 position: absolute;
color: #fff; 45 45 color: #fff;
display: inline-block; 46 46 display: inline-block;
font-size: 2.1rem; 47 47 font-size: 2.1rem;
font-style: normal; 48 48 font-style: normal;
font-weight: 100; 49 49 font-weight: 100;
padding: 0; 50 50 padding: 0;
letter-spacing: 7px; 51 51 letter-spacing: 7px;
} 52 52 }
53 53
.text_h2 {font-weight: 100;margin-bottom: 4%; line-height: 4.5rem;} 54 54 .text_h2 {font-weight: 100;margin-bottom: 4%; line-height: 4.5rem;}
55 55
.span_h2 {font-weight: 300;color: #D2143F;} 56 56 .span_h2 {font-weight: 300;color: #D2143F;}
57 57
.text_b{color: #D2143F;} 58 58 .text_b{color: #D2143F;}
59 59
.in{font-weight: 400 !important; font-style: normal !important;} 60 60 .in{font-weight: 400 !important; font-style: normal !important;}
61 61
.promo i { 62 62 .promo i {
color: #D2143F; 63 63 color: #D2143F;
font-size: 7rem; 64 64 font-size: 7rem;
display: block; 65 65 display: block;
} 66 66 }
.card-content a {color: #D2143F;} 67 67 .card-content a {color: #D2143F;}
68 68
.card-content a:hover {color: #D2143F;} 69 69 .card-content a:hover {color: #D2143F;}
70 70
#work, #team{background: rgb(247, 247, 247);} 71 71 #work, #team{background: rgb(247, 247, 247);}
72 72
.text_pink{color:#EF9A9A;} 73 73 .text_pink{color:#EF9A9A;}
74 74
nav ul a { 75 75 nav ul a {
font-size: 1.2rem; 76 76 font-size: 1.2rem;
color: #FFF; 77 77 color: #FFF;
letter-spacing: 2px; 78 78 letter-spacing: 2px;
display: block; 79 79 display: block;
font-weight: 300; 80 80 font-weight: 300;
padding: 0px 15px; 81 81 padding: 0px 15px;
} 82 82 }
83 83
.cd-headline.type .cd-words-wrapper { 84 84 .cd-headline.type .cd-words-wrapper {
vertical-align: top; 85 85 vertical-align: top;
overflow: hidden; 86 86 overflow: hidden;
} 87 87 }
88 88
.cd-headline.type .cd-words-wrapper::after { 89 89 .cd-headline.type .cd-words-wrapper::after {
/* vertical bar */ 90 90 /* vertical bar */
content: ''; 91 91 content: '';
position: absolute; 92 92 position: absolute;
right: 0; 93 93 right: 0;
top: 50%; 94 94 top: 50%;
bottom: auto; 95 95 bottom: auto;
-webkit-transform: translateY(-50%); 96 96 -webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%); 97 97 -moz-transform: translateY(-50%);
-ms-transform: translateY(-50%); 98 98 -ms-transform: translateY(-50%);
-o-transform: translateY(-50%); 99 99 -o-transform: translateY(-50%);
transform: translateY(-50%); 100 100 transform: translateY(-50%);
height: 90%; 101 101 height: 90%;
width: 1px; 102 102 width: 1px;
background-color: #aebcb9; 103 103 background-color: #aebcb9;
} 104 104 }
105 105
.cd-headline.type .cd-words-wrapper.waiting::after { 106 106 .cd-headline.type .cd-words-wrapper.waiting::after {
-webkit-animation: cd-pulse 1s infinite; 107 107 -webkit-animation: cd-pulse 1s infinite;
-moz-animation: cd-pulse 1s infinite; 108 108 -moz-animation: cd-pulse 1s infinite;
animation: cd-pulse 1s infinite; 109 109 animation: cd-pulse 1s infinite;
} 110 110 }
.cd-headline.type .cd-words-wrapper.selected { 111 111 .cd-headline.type .cd-words-wrapper.selected {
background-color: #FFF; 112 112 background-color: #FFF;
} 113 113 }
114 114
.cd-headline.type .cd-words-wrapper.selected::after { 115 115 .cd-headline.type .cd-words-wrapper.selected::after {
visibility: hidden; 116 116 visibility: hidden;
} 117 117 }
118 118
.cd-headline.type .cd-words-wrapper.selected b.wow { 119 119 .cd-headline.type .cd-words-wrapper.selected b.wow {
color: #D2143F; 120 120 color: #D2143F;
} 121 121 }
122 122
.cd-headline.type b.wow { 123 123 .cd-headline.type b.wow {
visibility: hidden; 124 124 visibility: hidden;
} 125 125 }
126 126
.cd-headline.type b.wow.is-visible { 127 127 .cd-headline.type b.wow.is-visible {
visibility: visible; 128 128 visibility: visible;
} 129 129 }
130 130
.cd-headline.type i { 131 131 .cd-headline.type i {
position: absolute; 132 132 position: absolute;
visibility: hidden; 133 133 visibility: hidden;
} 134 134 }
.cd-headline.type i.in { 135 135 .cd-headline.type i.in {
position: relative; 136 136 position: relative;
visibility: visible; 137 137 visibility: visible;
} 138 138 }
139 139
@-webkit-keyframes cd-pulse { 140 140 @-webkit-keyframes cd-pulse {
0% { 141 141 0% {
-webkit-transform: translateY(-50%) scale(1); 142 142 -webkit-transform: translateY(-50%) scale(1);
opacity: 1; 143 143 opacity: 1;
} 144 144 }
40% { 145 145 40% {
-webkit-transform: translateY(-50%) scale(0.9); 146 146 -webkit-transform: translateY(-50%) scale(0.9);
opacity: 0; 147 147 opacity: 0;
} 148 148 }
100% { 149 149 100% {
-webkit-transform: translateY(-50%) scale(0); 150 150 -webkit-transform: translateY(-50%) scale(0);
opacity: 0; 151 151 opacity: 0;
} 152 152 }
} 153 153 }
@-moz-keyframes cd-pulse { 154 154 @-moz-keyframes cd-pulse {
0% { 155 155 0% {
-moz-transform: translateY(-50%) scale(1); 156 156 -moz-transform: translateY(-50%) scale(1);
opacity: 1; 157 157 opacity: 1;
} 158 158 }
40% { 159 159 40% {
-moz-transform: translateY(-50%) scale(0.9); 160 160 -moz-transform: translateY(-50%) scale(0.9);
opacity: 0; 161 161 opacity: 0;
} 162 162 }
100% { 163 163 100% {
-moz-transform: translateY(-50%) scale(0); 164 164 -moz-transform: translateY(-50%) scale(0);
opacity: 0; 165 165 opacity: 0;
} 166 166 }
} 167 167 }
168 168
@keyframes cd-pulse { 169 169 @keyframes cd-pulse {
0% { 170 170 0% {
-webkit-transform: translateY(-50%) scale(1); 171 171 -webkit-transform: translateY(-50%) scale(1);
-moz-transform: translateY(-50%) scale(1); 172 172 -moz-transform: translateY(-50%) scale(1);
-ms-transform: translateY(-50%) scale(1); 173 173 -ms-transform: translateY(-50%) scale(1);
-o-transform: translateY(-50%) scale(1); 174 174 -o-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1); 175 175 transform: translateY(-50%) scale(1);
opacity: 1; 176 176 opacity: 1;
} 177 177 }
40% { 178 178 40% {
-webkit-transform: translateY(-50%) scale(0.9); 179 179 -webkit-transform: translateY(-50%) scale(0.9);
-moz-transform: translateY(-50%) scale(0.9); 180 180 -moz-transform: translateY(-50%) scale(0.9);
-ms-transform: translateY(-50%) scale(0.9); 181 181 -ms-transform: translateY(-50%) scale(0.9);
-o-transform: translateY(-50%) scale(0.9); 182 182 -o-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9); 183 183 transform: translateY(-50%) scale(0.9);
opacity: 0; 184 184 opacity: 0;
} 185 185 }
100% { 186 186 100% {
-webkit-transform: translateY(-50%) scale(0); 187 187 -webkit-transform: translateY(-50%) scale(0);
-moz-transform: translateY(-50%) scale(0); 188 188 -moz-transform: translateY(-50%) scale(0);
-ms-transform: translateY(-50%) scale(0); 189 189 -ms-transform: translateY(-50%) scale(0);
-o-transform: translateY(-50%) scale(0); 190 190 -o-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0); 191 191 transform: translateY(-50%) scale(0);
opacity: 0; 192 192 opacity: 0;
} 193 193 }
} 194 194 }
195 195
196 196
/* Preloader */ 197 197 /* Preloader */
#preloader { 198 198 #preloader {
position: fixed; 199 199 position: fixed;
top:0; 200 200 top:0;
left:0; 201 201 left:0;
right:0; 202 202 right:0;
bottom:0; 203 203 bottom:0;
background-color:#fff; /* change if the mask should have another color then white */ 204 204 background-color:#fff; /* change if the mask should have another color then white */
z-index:1200; /* makes sure it stays on top */ 205 205 z-index:1200; /* makes sure it stays on top */
} 206 206 }
207 207
#status { 208 208 #status {
width:200px; 209 209 width:200px;
height:200px; 210 210 height:200px;
position:absolute; 211 211 position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */ 212 212 left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */ 213 213 top:50%; /* centers the loading animation vertically one the screen */
background-image:url(../img/status.gif); /* path to your loading animation */ 214 214 background-image:url(../img/status.gif); /* path to your loading animation */
background-repeat:no-repeat; 215 215 background-repeat:no-repeat;
background-position:center; 216 216 background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */ 217 217 margin:-100px 0 0 -100px; /* is width and height divided by two */
} 218 218 }
219 219
@media only screen and (max-width: 480px) { 220 220 @media only screen and (max-width: 480px) {
.text_h { 221 221 .text_h {
padding: 4% 0; 222 222 padding: 4% 0;
font-size: 5em; 223 223 font-size: 5em;
font-weight: 100; 224 224 font-weight: 100;
color: white; 225 225 color: white;
} 226 226 }
} 227 227 }
228 228
input, textarea { 229 229 input, textarea {
border-bottom: 1px solid #fff; 230 230 border-bottom: 1px solid #fff;
} 231 231 }
232 232
nav a.button-collapse { 233 233 nav a.button-collapse {
left: -25px; 234 234 left: -25px;
} 235 235 }
236 236
.card-avatar .waves-effect { 237 237 .card-avatar .waves-effect {
text-align: center; 238 238 text-align: center;
margin-top: 20px; 239 239 margin-top: 20px;
} 240 240 }
241 241
.card-avatar img { 242 242 .card-avatar img {
height: 150px; 243 243 height: 150px;
width: 150px; 244 244 width: 150px;
border-radius: 75px; 245 245 border-radius: 75px;
} 246 246 }
247 247
.card-avatar .card-content { 248 248 .card-avatar .card-content {
text-align: center; 249 249 text-align: center;
} 250 250 }
251 251
.card .card-content p { 252 252 .card .card-content p {
margin: 15px 0px; 253 253 margin: 15px 0px;
} 254 254 }
255 255
256 .card-avatar a {
257 margin-right:0;
258 }
259
.card-avatar .card-content i { 256 260 .card-avatar .card-content i {
font-size: 1.5rem; 257 261 font-size: 1.5rem;
} 258 262 }
index.html View file @ b1c2e10
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html> 2 2 <html>
<head> 3 3 <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 4 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<meta name="theme-color" content="#2196F3"> 6 6 <meta name="theme-color" content="#2196F3">
<link rel="shortcut icon" href="flashy.ico"> 7 7 <link rel="shortcut icon" href="flashy.ico">
<title>Flashy</title> 8 8 <title>Flashy</title>
9 9
<!-- CSS --> 10 10 <!-- CSS -->
<link href="css/materialize.css" type="text/css" rel="stylesheet"> 11 11 <link href="css/materialize.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet" > 12 12 <link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/font-awesome.min.css" type="text/css" rel="stylesheet" > 13 13 <link href="css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link 14 14 <link
href='https://fonts.googleapis.com/css?family=Satisfy|Titillium+Web:400,200,200italic,300,600,700,900,700italic,600italic,400italic,300italic' 15 15 href='https://fonts.googleapis.com/css?family=Satisfy|Titillium+Web:400,200,200italic,300,600,700,900,700italic,600italic,400italic,300italic'
rel='stylesheet' type='text/css'> 16 16 rel='stylesheet' type='text/css'>
<script src="js/modernizr.js"></script> <!-- Modernizr --> 17 17 <script src="js/modernizr.js"></script>
18 <!-- Modernizr -->
</head> 18 19 </head>
<body id="top" class="scrollspy"> 19 20 <body id="top" class="scrollspy">
20 21
<!-- Pre Loader --> 21 22 <!-- Pre Loader -->
<div id="loader-wrapper"> 22 23 <div id="loader-wrapper">
<div id="loader"></div> 23 24 <div id="loader"></div>
24 25
<div class="loader-section section-left"></div> 25 26 <div class="loader-section section-left"></div>
<div class="loader-section section-right"></div> 26 27 <div class="loader-section section-right"></div>
27 28
</div> 28 29 </div>
29 30
<!--Navigation--> 30 31 <!--Navigation-->
<div class="navbar-fixed navbar-fade"> 31 32 <!--<div class="navbar-fixed navbar-fade">-->
<nav id="nav_f" class="default_color" role="navigation"> 32 33 <!--<nav id="nav_f" class="default_color" role="navigation">-->
<div class="container"> 33 34 <!--<div class="container">-->
<div class="nav-wrapper"> 34 35 <!--<div class="nav-wrapper">-->
<a id="navbar-logo" href="#top" class="center center-block logo page-scroll">Flashy</a> 35 36 <!--<a id="navbar-logo" href="#top" class="center center-block logo page-scroll">Flashy</a>-->
<ul id="nav-mobile" class="right side-nav"> 36 37 <!--<ul id="nav-mobile" class="right side-nav">-->
<li><a href="#intro">Service</a></li> 37 38 <!--<li><a href="#intro">Service</a></li>-->
<li><a href="#work">Work</a></li> 38 39 <!--<li><a href="#work">Work</a></li>-->
<li><a href="#team">Team</a></li> 39 40 <!--<li><a href="#team">Team</a></li>-->
<li><a href="#contact">Contact</a></li> 40 41 <!--<li><a href="#contact">Contact</a></li>-->
<li><a href="" target="_blank">Download</a></li> 41 42 <!--<li><a href="" target="_blank">Download</a></li>-->
</ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 42 43 <!--</ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>-->
</div> 43 44 <!--</div>-->
</div> 44 45 <!--</div>-->
</nav> 45 46 <!--</nav>-->
</div> 46 47 <!--</div>-->
47 48
<!--Hero--> 48 49 <!--Hero-->
<div class="section no-pad-bot" id="index-banner"> 49 50 <div class="section no-pad-bot" id="index-banner">
<div class="container"> 50 51 <div class="container">
<h1 class="text_h center header cd-headline letters type"> 51 52 <h1 class="text_h center header cd-headline letters type">
<span class="logo">Flashy</span> 52 53 <span class="logo">Flashy</span>
<span>.cards</span> 53 54 <span>.cards</span>
</h1> 54 55 </h1>
<br> 55 56 <br>
57
<div class="center"> 56 58 <div class="center">
<a href="/app/" class="waves-effect waves-light btn red lighten-2">Check out the app</a> 57 59 <a href="/app/" class="waves-effect waves-light btn red lighten-2">Check out the app</a>
</div> 58 60 </div>
<br><br> 59 61 <br><br>
<br><br><br> 60 62 <br><br><br>
63
<div class="center"> 61 64 <div class="center">
<a href="#intro" class="btn btn-large btn-floating page-scroll"> 62 65 <a href="#intro" class="btn btn-large btn-floating page-scroll">
<i class="fa fa-angle-double-down"></i> 63 66 <i class="fa fa-angle-double-down"></i>
</a> 64 67 </a>
</div> 65 68 </div>
</div> 66 69 </div>
</div> 67 70 </div>
68 71
<!--Intro and service--> 69 72 <!--Intro and service-->
<div id="intro" class="section scrollspy"> 70 73 <div id="intro" class="section scrollspy">
<div class="container"> 71 74 <div class="container">
<div class="row"> 72 75 <div class="row">
<div class="col s12"> 73 76 <div class="col s12">
<h2 class="center header text_h2"><span class="span_h2"> Collaborate </span> with your classmates in <span class="span_h2"> realtime </span> and never forget a thing again!</h2> 74 77 <h2 class="center header text_h2"><span class="span_h2"> Collaborate </span> with your classmates in
78 <span class="span_h2"> real time </span> and never forget a thing again!</h2>
</div> 75 79 </div>
76 80
<div class="col s12 m4 l4"> 77 81 <div class="col s12 m4 l4">
<div class="center promo promo-example"> 78 82 <div class="center promo promo-example">
<i class="mdi-image-flash-on"></i> 79 83 <i class="mdi-image-flash-on"></i>
<h5 class="promo-caption">Make flashcards in no time!</h5> 80 84 <h5 class="promo-caption">Make flashcards in no time!</h5>
<p class="light center">Our slick UI makes sure to not get in your way and let you focus on the actual content.</p> 81 85
86 <p class="light center">Our slick UI makes sure to not get in your way and let you focus on the
87 actual content.</p>
</div> 82 88 </div>
</div> 83 89 </div>
<div class="col s12 m4 l4"> 84 90 <div class="col s12 m4 l4">
<div class="center promo promo-example"> 85 91 <div class="center promo promo-example">
<i class="mdi-hardware-desktop-windows"></i> 86 92 <i class="mdi-hardware-desktop-windows"></i>
<h5 class="promo-caption">Fully Responsive</h5> 87 93 <h5 class="promo-caption">Fully Responsive</h5>
<p class="light center">Use Flashy on both your phone and your desktop computer! Flashy uses cutting-edge notification technology. It takes just one click to enable notifications and always be reminded when you need to review your cards. Works best with the latest version of Chrome.</p> 88 94
95 <p class="light center">
96 Use Flashy on both your phone and your desktop computer!
97 Plus, if you use Chrome on Android, you can opt in to be reminded when a batch of cards is up
98 for review!
99 </p>
</div> 89 100 </div>
</div> 90 101 </div>
<div class="col s12 m4 l4"> 91 102 <div class="col s12 m4 l4">
<div class="center promo promo-example"> 92 103 <div class="center promo promo-example">
<i class="mdi-social-group"></i> 93 104 <i class="mdi-social-group"></i>
<h5 class="promo-caption">Crowdsource the hardwork</h5> 94 105 <h5 class="promo-caption">Crowdsource the hardwork</h5>
<p class="light center">Distribute the arduous task of note-taking among the entire class. Publish cards for your classmates to review and view cards posted by your classmates. Working together has never been easier!</p> 95 106
107 <p class="light center">Distribute the arduous task of note-taking among the entire class. Publish
108 cards for your classmates to review, or pull cards posted by your classmates into your deck.
109 Working together has never been easier!</p>
</div> 96 110 </div>
</div> 97 111 </div>
</div> 98 112 </div>
<div class="center"> 99 113 <div class="center">
<a href="#team" class="btn btn-large btn-floating page-scroll"> 100 114 <a href="#team" class="btn btn-large btn-floating page-scroll">
<i class="fa fa-angle-double-down"></i> 101 115 <i class="fa fa-angle-double-down"></i>
</a> 102 116 </a>
</div> 103 117 </div>
</div> 104 118 </div>
</div> 105 119 </div>
106 120
<!--Parallax--> 107 121 <!--Parallax-->
<div class="parallax-container"> 108 122 <!--<div class="parallax-container">-->
<div class="parallax"><img src="img/parallax1.png"></div> 109 123 <!--<div class="parallax"><img src="img/parallax1.png"></div>-->
</div> 110 124 <!--</div>-->
111 125
<!--Team--> 112 126 <!--Team-->
<div class="section scrollspy" id="team"> 113 127 <div class="section scrollspy" id="team">
<div class="container"> 114 128 <div class="container">
<h2 class="header text_b"> Our Team </h2> 115 129 <h2 class="header text_b"> Our Team </h2>
130
<div class="row"> 116 131 <div class="row">
<div class="col s12 m3"> 117 132 <div class="col s12 m3">
<div class="card card-avatar"> 118 133 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 119 134 <div class="waves-effect waves-block waves-light">
<span class="avatar">gary</span> 120 135 <span class="avatar">gary</span>
</div> 121 136 </div>
<div class="card-content"> 122 137 <div class="card-content">
<span class="card-title activator grey-text text-darken-4">Gary Gillespie<br/> 123 138 <span class="card-title activator grey-text text-darken-4">Gary Gillespie<br/>
<small><em><a class="red-text text-darken-1" href="#">CEO</a></em></small></span> 124 139 <small><em><a class="red-text text-darken-1" href="#">CEO</a></em></small></span>
</div> 125 140 </div>
</div> 126 141 </div>
</div> 127 142 </div>
<div class="col s12 m3"> 128 143 <div class="col s12 m3">
<div class="card card-avatar"> 129 144 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 130 145 <div class="waves-effect waves-block waves-light">
<span class="avatar">abuss</span> 131 146 <span class="avatar">abuss</span>
</div> 132 147 </div>
<div class="card-content"> 133 148 <div class="card-content">
<span class="card-title activator grey-text text-darken-4">Andrew<br/> 134 149 <span class="card-title activator grey-text text-darken-4">Andrew<br/>
<small><em><a class="red-text text-darken-1" href="#">Database Specialist</a></em></small> 135 150 <small><em><a class="red-text text-darken-1" href="#">DB Specialist</a></em></small>
</span> 136 151 </span>
</div> 137 152 </div>
</div> 138 153 </div>
</div> 139 154 </div>
<div class="col s12 m3"> 140 155 <div class="col s12 m3">
<div class="card card-avatar"> 141 156 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 142 157 <div class="waves-effect waves-block waves-light">
<span class="avatar">lhawkins</span> 143 158 <span class="avatar">lhawkins</span>
</div> 144 159 </div>
<div class="card-content"> 145 160 <div class="card-content">
<span class="card-title activator grey-text text-darken-4"> 146 161 <span class="card-title activator grey-text text-darken-4">
Laura<br/> 147 162 Laura<br/>
<small><em><a class="red-text text-darken-1" href="#">Project Manager</a></em></small></span> 148 163 <small><em><a class="red-text text-darken-1" href="#">Project Manager</a></em>
164 </small></span>
</div> 149 165 </div>
</div> 150 166 </div>
</div> 151 167 </div>
<div class="col s12 m3"> 152 168 <div class="col s12 m3">
<div class="card card-avatar"> 153 169 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 154 170 <div class="waves-effect waves-block waves-light">
<span class="avatar">rlee</span> 155 171 <span class="avatar">rlee</span>
</div> 156 172 </div>
<div class="card-content"> 157 173 <div class="card-content">
<span class="card-title activator grey-text text-darken-4"> 158 174 <span class="card-title activator grey-text text-darken-4">
Rachel<br/> 159 175 Rachel<br/>
<small><em><a class="red-text text-darken-1" href="#">Software Dev Lead</a></em></small></span> 160 176 <small><em><a class="red-text text-darken-1" href="#">Software Dev Lead</a></em>
177 </small></span>
</div> 161 178 </div>
</div> 162 179 </div>
</div> 163 180 </div>
</div> 164 181 </div>
<div class="row"> 165 182 <div class="row">
<div class="col s12 m3"> 166 183 <div class="col s12 m3">
<div class="card card-avatar"> 167 184 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 168 185 <div class="waves-effect waves-block waves-light">
<span class="avatar">rray</span> 169 186 <span class="avatar">rray</span>
</div> 170 187 </div>
<div class="card-content"> 171 188 <div class="card-content">
<span class="card-title activator grey-text text-darken-4">Rohan<br/> 172 189 <span class="card-title activator grey-text text-darken-4">Rohan<br/>
<small><em><a class="red-text text-darken-1" href="#">Algo. Specialist</a></em></small></span> 173 190 <small><em><a class="red-text text-darken-1" href="#">Algo. Specialist</a></em></small></span>
</div> 174 191 </div>
</div> 175 192 </div>
</div> 176 193 </div>
<div class="col s12 m3"> 177 194 <div class="col s12 m3">
<div class="card card-avatar"> 178 195 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 179 196 <div class="waves-effect waves-block waves-light">
<span class="avatar">namtran</span> 180 197 <span class="avatar">namtran</span>
</div> 181 198 </div>
<div class="card-content"> 182 199 <div class="card-content">
<span class="card-title activator grey-text text-darken-4">Phuong<br/> 183 200 <span class="card-title activator grey-text text-darken-4">Phuong<br/>
<small><em><a class="red-text text-darken-1" href="#">Q.A. Lead</a></em></small> 184 201 <small><em><a class="red-text text-darken-1" href="#">Q.A. Lead</a></em></small>
</span> 185 202 </span>
</div> 186 203 </div>
</div> 187 204 </div>
</div> 188 205 </div>
<div class="col s12 m3"> 189 206 <div class="col s12 m3">
<div class="card card-avatar"> 190 207 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 191 208 <div class="waves-effect waves-block waves-light">
<span class="avatar">ckwang</span> 192 209 <span class="avatar">ckwang</span>
</div> 193 210 </div>
<div class="card-content"> 194 211 <div class="card-content">
<span class="card-title activator grey-text text-darken-4"> 195 212 <span class="card-title activator grey-text text-darken-4">
Kent<br/> 196 213 Kent<br/>
<small><em><a class="red-text text-darken-1" href="#">Business Analyst</a></em></small></span> 197 214 <small><em><a class="red-text text-darken-1" href="#">Business Analyst</a></em>
215 </small></span>
</div> 198 216 </div>
</div> 199 217 </div>
</div> 200 218 </div>
<div class="col s12 m3"> 201 219 <div class="col s12 m3">
<div class="card card-avatar"> 202 220 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 203 221 <div class="waves-effect waves-block waves-light">
<span class="avatar">mjeng</span> 204 222 <span class="avatar">mjeng</span>
</div> 205 223 </div>
<div class="card-content"> 206 224 <div class="card-content">
<span class="card-title activator grey-text text-darken-4">Melody<br/> 207 225 <span class="card-title activator grey-text text-darken-4">Melody<br/>
<small><em><a class="red-text text-darken-1" href="#">Software Arch.</a></em></small></span> 208 226 <small><em><a class="red-text text-darken-1" href="#">Software Arch.</a></em></small></span>
</div> 209 227 </div>
</div> 210 228 </div>
</div> 211 229 </div>
</div> 212 230 </div>
<div class="row"> 213 231 <div class="row">
<div class="col s12 m3"> 214 232 <div class="col s12 m3">
<div class="card card-avatar"> 215 233 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 216 234 <div class="waves-effect waves-block waves-light">
<span class="avatar">masud</span> 217 235 <span class="avatar">masud</span>
</div> 218 236 </div>
<div class="card-content"> 219 237 <div class="card-content">
<span class="card-title activator grey-text text-darken-4">Masud<br/> 220 238 <span class="card-title activator grey-text text-darken-4">Masud<br/>
<small><em><a class="red-text text-darken-1" href="#">UI Specialist</a></em></small></span> 221 239 <small><em><a class="red-text text-darken-1" href="#">UI Specialist</a></em></small></span>
</div> 222 240 </div>
</div> 223 241 </div>
</div> 224 242 </div>
<div class="col s12 m3"> 225 243 <div class="col s12 m3">
<div class="card card-avatar"> 226 244 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 227 245 <div class="waves-effect waves-block waves-light">
<span class="avatar">arnog</span> 228 246 <span class="avatar">arnog</span>
</div> 229 247 </div>
<div class="card-content"> 230 248 <div class="card-content">
<span class="card-title activator grey-text text-darken-4">Arno<br/> 231 249 <span class="card-title activator grey-text text-darken-4">Arno<br/>
<small><em><a class="red-text text-darken-1" href="#">Sr. Sys. Analyst</a></em></small></span> 232 250 <small><em><a class="red-text text-darken-1" href="#">Sr. Sys. Analyst</a></em></small></span>
</div> 233 251 </div>
</div> 234 252 </div>
</div> 235 253 </div>
<div class="col s12 m3"> 236 254 <div class="col s12 m3">
<div class="card card-avatar"> 237 255 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 238 256 <div class="waves-effect waves-block waves-light">
<span class="avatar">kmach</span> 239 257 <span class="avatar">kmach</span>
</div> 240 258 </div>
<div class="card-content"> 241 259 <div class="card-content">
<span class="card-title activator grey-text text-darken-4">Kevin<br/> 242 260 <span class="card-title activator grey-text text-darken-4">Kevin<br/>
<small><em><a class="red-text text-darken-1" href="#">UI Specialist</a></em></small> 243 261 <small><em><a class="red-text text-darken-1" href="#">UI Specialist</a></em></small>
</span> 244 262 </span>
</div> 245 263 </div>
</div> 246 264 </div>
</div> 247 265 </div>
<div class="col s12 m3"> 248 266 <div class="col s12 m3">
<div class="card card-avatar"> 249 267 <div class="card card-avatar">
<div class="waves-effect waves-block waves-light"> 250 268 <div class="waves-effect waves-block waves-light">
<span class="avatar">pinkmuffinere</span> 251 269 <span class="avatar">pinkmuffinere</span>
</div> 252 270 </div>
<div class="card-content"> 253 271 <div class="card-content">
<span class="card-title activator grey-text text-darken-4">Michael<br/> 254 272 <span class="card-title activator grey-text text-darken-4">Michael<br/>
<small><em><a class="red-text text-darken-1" href="#">Unpaid intern</a></em></small></span> 255 273 <small><em><a class="red-text text-darken-1" href="#">Unpaid intern</a></em></small></span>
</div> 256 274 </div>
</div> 257 275 </div>
</div> 258 276 </div>
</div> 259 277 </div>
</div> 260 278 </div>
</div> 261 279 </div>
262 280
<!--Footer--> 263 281 <!--Footer-->
<footer id="contact" class="page-footer default_color scrollspy"> 264 282 <footer id="contact" class="page-footer default_color scrollspy">
<div class="container"> 265 283 <div class="container">
<div class="row"> 266 284 <div class="row">
<div class="col l6 s12"> 267 285 <div class="col l6 s12">
<div class="footer-copyright default_color"> 268 286 <div class="footer-copyright default_color">
<div class="container"> 269 287 <div class="container">
For more information, contact <a class="white-text" href="mailto:halp@flashy.cards">us here.</a>. 270 288 For more information, contact <a class="white-text" href="mailto:halp@flashy.cards">us here.</a>.
</div> 271 289 </div>
</div> 272 290 </div>
</div> 273 291 </div>
<div class="col l6 s12"> 274 292 <div class="col l6 s12">
<div class="footer-copyright default_color"> 275 293 <div class="footer-copyright default_color">
<div class="container"> 276 294 <div class="container">
Flashy was made possible by <a class="white-text gary" href="https://media.licdn.com/mpr/mpr/shrink_200_200/p/2/000/0db/205/1492be8.jpg">gary</a> 277 295 Flashy was made possible by <a class="white-text gary"
296 href="https://media.licdn.com/mpr/mpr/shrink_200_200/p/2/000/0db/205/1492be8.jpg">gary</a>
</div> 278 297 </div>
</div> 279 298 </div>
</div> 280 299 </div>
</div> 281 300 </div>
</div> 282 301 </div>
</footer> 283 302 </footer>
284 303
285 304
<!-- Scripts--> 286 305 <!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 287 306 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://iamsaravieira.com/jquery.textillate.js"></script> 288 307 <!-- Plugin JavaScript -->
<!-- Plugin JavaScript --> 289 308 <script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.easing.min.js"></script> 290 309 <script src="js/materialize.js"></script>
<script src="js/materialize.js"></script> 291 310 <script src="js/smooth.js"></script>
<script src="js/smooth.js"></script> 292
293 311
</body> 294 312 </body>
</html> 295 313 </html>
314