Skip to content

Travis #13

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
travisgorman wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Travis #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
78472f4
nothing much
travisgorman Jul 10, 2016
27cb8f4
some styles on hit and miss labels
travisgorman Jul 10, 2016
9ba6568
hit or miss
travisgorman Jul 10, 2016
45e7b80
care bear stare
travisgorman Jul 10, 2016
5c37ee6
layout for fight page
travisgorman Jul 11, 2016
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
23 changes: 21 additions & 2 deletions app/styles/main.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

140 changes: 41 additions & 99 deletions app/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@

body {
text-align: center;
font-family: helvetica;
background: url("images/cbbackground.jpeg") top center repeat;

h2 {
font-family: 'Fontdiner Swanky', cursive;
font-family: 'Atma', cursive;
font-size: 3rem;
}
.character-container {
Expand All @@ -16,68 +15,22 @@ body {
text-align: justify;
margin-top: 1rem;
margin-bottom: 2rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1.2rem;
font-style: italic;
border-top: 2px solid black;
border-bottom: 2px solid black;
}

.character {
display: inline-block;
width: 24%;
ul {
// padding-left:0;
width: 22%;

&:hover {
// transform: scale(1.2);
}
img {
width: 100%;
// border-bottom: 2px solid black;
}
li {
list-style-type: none;
text-align: left;

span {
font-weight: bold;
font-family: 'Fontdiner Swanky', cursive;
}
}
.choose {
border-radius: 5px;
font-family: 'Fontdiner Swanky', cursive;
font-size: 1.2rem;
padding: 0.7rem;
border: 2px solid black;
background-color: white;
margin-bottom: 1rem;

&:hover {
color: white;
transform: scale(1.1);
background: linear-gradient(270deg, #38e182, #f7077a, #ffe933, #ff8f33, #ff2f00, #c500ff);
background-size: 1200% 1200%;

-webkit-animation: Rainbow 5s ease infinite;
-moz-animation: Rainbow 5s ease infinite;
animation: Rainbow 5s ease infinite;

@-webkit-keyframes Rainbow {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes Rainbow {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes Rainbow {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
// rainbow gradient code from https://www.gradient-animator.com/
}
}
}
}
Expand All @@ -98,7 +51,7 @@ body {
div::before {
content: '';
position: absolute;
top: 95px;
top: 96px;
right: 5px;
border-width: 15px 10px 0;
border-style: solid;
Expand All @@ -109,7 +62,7 @@ body {
div::after {
content: '';
position: absolute;
top: 95px;
top: 96px;
right: 8.2px;
border-width: 10px 7px 0;
border-style: solid;
Expand All @@ -123,22 +76,12 @@ body {
border-radius: 5px;
border: 1px solid black;
}

.new-game {
padding: 0.7rem;
margin-bottom: 1rem;
border-radius: 10px;
background: url('images/rainbowbg.jpg');
// color: white;
font-family: 'Fontdiner Swanky', cursive;
border: 2px solid black;

}
}
.icon {
display: inline-block;
width: 280px;
height: 280px;
border: 1px solid black;
font-size: 256px;
text-align:center;
color: #2DAEBF;
Expand All @@ -151,22 +94,13 @@ body {
font-size: 236px;
margin-left: 15%;
margin-right: 2%;
text-shadow:
0px 2px 0px #0092B3,
0px 5px 2px #555;
transition: all 0.25s;
&:active{
font-size: 256px;

}
}
.special {
font-size: 236px;
margin-right: 15%;
text-shadow:
0px 2px 0px #0092B3,
0px 5px 2px #555;
transition: all 0.25s;
&:active{
font-size: 256px;
}
Expand Down Expand Up @@ -200,34 +134,43 @@ body {
width: 90%;
height: 300px;
margin: 36px auto;
// background: #ccc;
position: relative;
}

.enemy div{
display: inline-block;
width: 15%;

}
.enemy h3{
color: #00D5FF;
font-family: 'Frijole', sans-serif;
font-size: 3rem;
.protagonist-hit {
font-family: 'Fontdiner Swanky', cursive;
font-weight: bold;
font-size: 36px;
color: -webkit-gradient(
linear, left top, right top,
color-stop(0, #f22),
color-stop(0.15, #f2f),
color-stop(0.3, #22f),
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2),
color-stop(0.9, #ff2),
color-stop(1, #f22));
}
.protagonist-miss {
font-family: 'Fontdiner Swanky', cursive;
font-weight: bold;
font-size: 36px;
color: -webkit-gradient(
linear, left top, right top,
color-stop(0, #f22),
color-stop(0.15, #f2f),
color-stop(0.3, #22f),
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2),
color-stop(0.9, #ff2),
color-stop(1, #f22));
}
.enemy-hit {

.protagonist div{
width: 15%;
display: inline-block;
}
.protagonist h3{
font-size: 3rem;
font-family: 'Fontdiner Swanky', sans-serif;
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
//^stolen from https://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/
.enemy-miss {

}

.button_container h5{
Expand All @@ -238,5 +181,4 @@ body {
top: 3rem;
// left: -5rem;


}
34 changes: 28 additions & 6 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,24 @@
<html>
<head>
<meta charset="utf-8">
<title>Feelings Fight</title>
<title>Project Title</title>

<!-- Normalise -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" media="screen" title="no title" charset="utf-8">

<link href="https://fonts.googleapis.com/css?family=Fontdiner+Swanky" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/95cea4501d.js"></script>
<!-- <script src="https://use.fontawesome.com/95cea4501d.js"></script> -->
<!-- main CSS -->
<link rel="stylesheet" href="main.css" media="screen">
<link rel="stylesheet" href="../app/styles/main.css" media="screen">
<!-- zurb foundation fonts -->
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css"/>
<!-- fontdiner swanky -->
<link href="https://fonts.googleapis.com/css?family=Fontdiner+Swanky" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Frijole" rel="stylesheet"/>
</head>
<body>

<header>
<h2>Feelings Fight!</h2>
</header>
Expand Down Expand Up @@ -134,12 +138,30 @@ <h2>Defeat!</h2>

<div class="button_container bedtime hidden">
<img src="images/bedtime.gif"/>
<div>
<i class="fi-cloud bedtime attack"></i>
<div><i class="fi-cloud bedtime attack"></i>
<i class="fi-heart bedtime special"></i>
</div>
</div>

<!-- hit and miss -->
<div class="protagonist-hit hidden">
<p> HIT! You just gave Professor Coldheart</p>
<p>a face full of FEELINGS!</p>
</div>
<div class="protagonist-miss hidden">
<p> MISS!</p>
<p></p>
</div>
<div class="enemy-hit ">
<p>HIT! Professor Coldheart is chipping away</p>
<p>at your cheer!</p>
</div>
<div class="enemy-miss ">
<p> MISS</p>
<p></p>
</div>
<!-- buttons and graphics END -->

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"
integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
Expand Down