Skip to content

Commit

Permalink
Merge pull request #16 from Badsauce/master
Browse files Browse the repository at this point in the history 
Clean up html and run through validator
  • Loading branch information
@i-vishi
i-vishi authored Oct 24, 2018
2 parents c048475 + 87ba669 commit 43cb5e1
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 94 deletions.
41 changes: 28 additions & 13 deletions assets/css/match.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,14 @@ ul {
width: 100%;
}

#score {
.score-display {
font-size: 100px;
font-weight: 800;
color: #bdbdbd;
letter-spacing: 4px;
}

.navbar-brand {
.title {
display: block;
text-transform: uppercase;
letter-spacing: 2px;
Expand All @@ -141,6 +141,7 @@ ul {
font-size: 30px;
font-weight: 700;
padding: 15px;
margin: 0;
}

.left-nav .navbar-nav > li {
Expand All @@ -163,6 +164,18 @@ ul {
padding-right: 160px;
}

.sublist {
display: block;
}

.numbered-list {
list-style-type: decimal;
}

.alpha-list {
list-style-type: lower-alpha;
}

.game-grid {
display: flex;
flex-wrap: wrap;
Expand All @@ -176,14 +189,12 @@ ul {
text-decoration: none;
}

a:link{
text-decoration: none;
color: #9d9d9d;
a:link, a:visited, .title {
color: #9d9d9d;
}

a:visited{
a:link, a:visited {
text-decoration: none;
color: #9d9d9d;
}

.button {
Expand All @@ -199,14 +210,14 @@ a:visited{
margin: 5px;
}

.button span {
.button-text {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
.button-text:after {
content: '\00bb';
position: absolute;
opacity: 0;
Expand All @@ -215,11 +226,11 @@ a:visited{
transition: 0.5s;
}

.button:hover span {
.button:hover .button-text {
padding-right: 20px;
}

.button:hover span:after {
.button:hover .button-text:after {
opacity: 1;
right: 0;
}
Expand All @@ -229,7 +240,7 @@ a:visited{
border-radius: 50%;
margin: auto;
}
#sidelove{
.sidelove{
color: white;
padding-top: 15px;
font-size: 10px;
Expand Down Expand Up @@ -444,6 +455,10 @@ $btn-shadow--success: rgba(0,208,0,0.5);
text-decoration: none;
}

.right-nav-links {
padding-bottom: 20px;
}

@media screen and (max-width: 1000px) {
.app-container {
display: flex;
Expand Down Expand Up @@ -483,7 +498,7 @@ $btn-shadow--success: rgba(0,208,0,0.5);
margin-bottom: 0;
}

#score {
.score-display {
font-size: 80px;
}

Expand Down
147 changes: 66 additions & 81 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,21 @@ <h2 class="modal-title">
</h2>
</div>
<div class="modal-body">
<ol type="1">
<ol class="numbered-list">
<li>Click on a tile to reveal its color.</li>
<li>Guess the tile with same color.</li>
<ol type="a">
<li>If right, marks increase by 25.</li>
<li>If wrong, marks decrease by 5.</li>
</ol>
<li class="sublist">
<ol class="alpha-list">
<li>If right, marks increase by 25.</li>
<li>If wrong, marks decrease by 5.</li>
</ol>
</li>
<li>The game is played till all colors are revealed.</li>
</ol>
<br>
<br>
Note :
<ul type="disc">
<ul>
<li>Colors are in RGB code.</li>
<li>No more than two colors are same.</li>
</ul>
Expand All @@ -64,15 +66,15 @@ <h2 class="modal-title">
<div class="modal-body dev-modal">
<div class="dev-profile-container">
<a class="dev-profile" href="https://github.com/i-vishi">
<img class="pics" src="assets/photos/vishal.jpg" />
<img class="pics" alt="Portrait photo of Vishal Gaur" src="assets/photos/vishal.jpg" />
<span>Vishal Gaur</span>
</a>
<a class="dev-profile" href="https://github.com/antew7">
<img class="pics" src="assets/photos/ananya.jpg" />
<img class="pics" alt="Portrait photo of Ananya Tewari" src="assets/photos/ananya.jpg" />
<span>Ananya Tewari</span>
</a>
<a class="dev-profile" href="https://github.com/ravivarshney01">
<img class="pics" src="assets/photos/ravi.jpg" />
<img class="pics" alt="Portrait photo of Ravi Varshney" src="assets/photos/ravi.jpg" />
<span>Ravi Varshney</span>
</a>
</div>
Expand Down Expand Up @@ -106,79 +108,62 @@ <h2 class="modal-title">
<div class="app-container">
<!-- Left Side-bar -->
<div class="navbar left-nav">
<a class="navbar-brand" href="#">Find The Match</a>
<h1 class="title">Find The Match</h1>
<ul class="right-nav-links">
<li class="nav-li"><a href="#" data-toggle="modal" data-target="#howToPlayModal">How to play?</a></li>
<li class="nav-li"><a href="#" data-toggle="modal" data-target="#developersModal">Developers</a></li>
<br>
<li class="nav-li"><a href="#" data-toggle="modal" data-target="#developersModal">Developers</a></li>
</ul>
</div>
<!-- Body of Game -->
<div class="container">
<div class="game-grid">
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
</div>
<div class="game-tile">
<div class="thumbnail">
</div>
<div class="game-grid">
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
<div class="game-tile">
<div class="thumbnail"></div>
</div>
</div>
</div>
Expand All @@ -189,17 +174,17 @@ <h2 class="modal-title">
</p>
<div>
<p class="score-container">
<span id="score">000</span>
<span class="score-display" id="score">000</span>
</p>
<button class="button" onclick="init()"><span>Reset</span></a></button>
<button class="button" onclick="init()"><span class="button-text">Reset</span></button>
</div>
<p id="sidelove" class="mobile-hidden">Made With &#10084; By VAR Solutions</p>
<p class="sidelove mobile-hidden">Made With &#10084; By VAR Solutions</p>
</div>
</div>
<script type="text/javascript" src="assets/js/lib/jquery-3.3.1.min.js"></script>
<script src="assets/js/lib/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/matches.js"></script>
<script src="assets/js/matches.js"></script>
</body>

</html>

0 comments on commit 43cb5e1

Please sign in to comment.