Skip to content

Commit

Permalink
first demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@SrGeneroso
SrGeneroso committed Jan 7, 2020
1 parent 58be684 commit 199ebae
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 94 deletions.
124 changes: 60 additions & 64 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,45 @@

#overlay {
position: absolute;
/* Sit on top of the page content */
display: none;
/* Hidden by default */
display: grid;
z-index: 3;
background-color: rgb(253, 253, 253);
min-width: 1000px;
max-width: 1000px;
min-height: 1000px;
max-height: 1000px;
margin: auto;
background-image: url(../img/bckgrnd/bckMain.webp);
background-size: 100%;
z-index: 3;
/* Specify a stack order in case you're using a different order for other elements */
min-height: 800px;
max-height: 800px;
border-radius: 50px;
background-image: url(../img/bckgrnd/overlaybckgrnd.webp);
color: wheat;
word-spacing: 5px;
letter-spacing: 2px;
}

.overlayMain {
display: flex;
}

.overlayText {
justify-self: center;
align-self: center;
cursor: default;
font-size: x-large;
text-align: center;
width: 75%;
}

.overlayButton {
justify-self: center;
align-self: center;
cursor: pointer;
/* Add a pointer on hover */
background-image: url(../img/bckgrnd/bckTitle.webp);
background-size: 100% 500%;
background-position-x: 40%;
background-position-y: 50%;
font-size: xx-large;
width: 40%;
text-align: center;
color: black;
}


Expand Down Expand Up @@ -82,6 +107,7 @@ body {
background-size: 98% 454%;
background-position-x: 40%;
background-position-y: 50%;
font-size: larger;
}


Expand Down Expand Up @@ -118,10 +144,11 @@ body {

.menuTimer {
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-rows: 1.5fr 2fr 1.5fr;
grid-template-columns: 1fr;
background-image: url(../img/bckgrnd/bckTimer.webp);
background-size: 100%;
background-size: contain;
background-repeat: round;
}


Expand All @@ -131,6 +158,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
font-size: larger;
}


Expand All @@ -140,6 +168,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
font-size: large;
}


Expand All @@ -149,7 +178,7 @@ body {
border-radius: 15px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr 0.5fr;
grid-template-rows: 1fr 2fr 1fr;
background-image: url(../img/bckgrnd/bckMuseum.webp);
background-size: 158% 110%;
background-position-x: 47%;
Expand All @@ -165,6 +194,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
font-size: larger;
}


Expand All @@ -176,6 +206,7 @@ body {
position: relative;
height: 90%;
width: 80%;
display: grid;
justify-self: center;
align-self: center;
cursor: pointer;
Expand All @@ -199,75 +230,41 @@ body {
/*Bloque Puntuacion General*/

.menuScore {
background: cornflowerblue;
border-radius: 15px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
justify-items: center;
align-items: center;
grid-template-rows: 0.75fr 1fr 1fr 0.25fr;
background-image: url(../img/bckgrnd/bckScore.webp);
background-size: 325% 118%;
background-position-x: 47%;
background-position-y: 50%;
}


/*Bloque Puntuacion*/

.mnScorePoints {
/*background: darkcyan;*/
border-radius: 15px;
width: 80%;
height: 80%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
}


/*Bloque Objetos Encontrados*/

.mnScoreItems {
/*background: darkcyan;*/
border-radius: 15px;
width: 80%;
height: 80%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
justify-items: center;
align-items: center;
}


/*Bloque Total Objetos*/

.mnScoreTotal {
/*background: darkcyan;
border-radius: 15px;*/
width: 80%;
height: 80%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
justify-items: center;
align-items: center;
display: flex;
flex-flow: column;
}


/*Titulos Puntuacion*/

.mnScoreTitle {
text-align: center;
display: flex;
justify-self: center;
align-self: center;
font-size: larger;
}


/*Texto Puntuaciones*/

.mnScoreValue {
text-align: center;
font-size: larger;
}


Expand Down Expand Up @@ -310,6 +307,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
font-size: larger;
}


Expand Down Expand Up @@ -390,14 +388,10 @@ body {
display: flex;
justify-content: center;
align-items: center;
font-size: larger;
}


/*Items Museo*/

.menuMuseumItem {}


/*
CSS Bloque Central
*/
Expand Down Expand Up @@ -451,9 +445,11 @@ body {
}

.itemImg {
display: flex;
align-items: center;
justify-content: center;
display: grid;
/* align-items: center;
justify-content: center; */
align-self: center;
justify-self: center;
z-index: 1;
width: 85%;
}
Expand Down
Binary file added img/bckgrnd/overlaybckgrnd.webp
View file
Binary file not shown.
17 changes: 7 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
</div>
<!-- bloque general -->
<div class="wrapper">
<div id="overlay"></div>
<div id="overlay" class="overlayMain"></div>
<!-- bloque izquierdo -->
<div class="menuLeft">
<!-- Temporizador -->
Expand All @@ -50,17 +50,14 @@
</div>
<!-- Puntuacion-->
<div class="menuScore">
<div class="mnScorePoints">
<div class="mnScoreTitle">PUNTOS</div>
<div id="ScoreValue1" class="mnScoreValue">250</div>
</div>
<div class="mnScoreTitle">PUNTUACION</div>
<div class="mnScoreItems">
<div class="mnScoreTitle">OBJETOS ENCONTRADOS</div>
<div id="ScoreValue2" class="mnScoreValue">250</div>
<div class="mnScoreTitle">NIVEL</div>
<div id="ScoreValue1" class="mnScoreValue">0</div>
</div>
<div class="mnScoreTotal">
<div class="mnScoreTitle"> TOTAL OBJETOS</div>
<div id="ScoreValue3" class="mnScoreValue">250</div>
<div class="mnScoreItems">
<div class="mnScoreTitle">PARTIDA</div>
<div id="ScoreValue2" class="mnScoreValue">0</div>
</div>
</div>
<!-- Nivel -->
Expand Down
Loading

0 comments on commit 199ebae

Please sign in to comment.