Octavia/odin-rock-paper-scissors
Watch
1
0
Fork
You've already forked odin-rock-paper-scissors
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fonts and move styles to styles folder

Browse source
This commit is contained in:
lolabird 2023-12-31 16:45:41 -07:00
commit 0f5528f328
15 changed files with 42 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

36
styles/fonts.css Normal file
View file

@ -0,0 +1,36 @@
@font-face {
font-family: "Purisa-Bold";
src: url("../fonts/Purisa-Bold.ttf") format("truetype"),
url("../fonts/Purisa-Bold.woff") format("woff"),
url("../fonts/Purisa-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Purisa-BoldOblique";
src: url("../fonts/Purisa-BoldOblique.ttf") format("truetype"),
url("../fonts/Purisa-BoldOblique.woff") format("woff"),
url("../fonts/Purisa-BoldOblique.woff2") format("woff2");
font-weight: 700;
font-style: oblique;
}
@font-face {
font-family: "Purisa-Oblique";
src: url("../fonts/Purisa-Oblique.ttf") format("truetype"),
url("../fonts/Purisa-Oblique.woff") format("woff"),
url("../fonts/Purisa-Oblique.woff2") format("woff2");
font-weight: 400;
font-style: oblique;
}
@font-face {
font-family: "Purisa";
src: url("../fonts/Purisa.ttf") format("truetype"),
url("../fonts/Purisa.woff") format("woff"),
url("../fonts/Purisa.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}

93
styles/style.css Normal file
View file

@ -0,0 +1,93 @@
body {
background-image: url("../images/paper-5985445_1920.jpg");
background-size: cover;
background-color: rgb(221, 125, 104);
color: #eee;
text-align: center;
height: 100vh;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
}
h1{
font-size: 50px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.buttons {
display: flex;
justify-content: center;
}
.button {
width: 200px;
height: 200px;
margin: 5px;
font-size: 30px;
}
.replay-button {
width: 200px;
height: auto;
margin: 5px;
font-size: 30px;
}
#rock {
background-image: url("../images/rocks-576653_640.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#paper {
background-image: url("../images/certificate-154169_640.png");
background-size: contain;
background-repeat: no-repeat;
background-position-x: center;
}
#scissors {
background-image: url("../images/school-1555907_640.png");
background-size: contain;
background-repeat: no-repeat;
background-position-x: center;
}
.score {
display: flex;
justify-content: center;
}
.score-text {
margin: 20px;
font-size: 25px;
}
.count {
margin-bottom: 20px;
font-size: 25px;
}
#msg {
font-size: 32px;
}
#msg .button {
margin-top: 30px;
}
footer {
flex: 0 0 auto;
}