diff --git a/MTG/img/dice.png b/MTG/img/dice.png new file mode 100644 index 0000000..f6c04b5 Binary files /dev/null and b/MTG/img/dice.png differ diff --git a/MTG/index.html b/MTG/index.html index ad8cb68..b3019f3 100644 --- a/MTG/index.html +++ b/MTG/index.html @@ -17,8 +17,7 @@ - - +t> @@ -32,7 +31,11 @@
- + +
+ +
1
+
@@ -165,5 +168,7 @@ + + \ No newline at end of file diff --git a/MTG/script.js b/MTG/script.js index 9ac9b80..a5bf366 100644 --- a/MTG/script.js +++ b/MTG/script.js @@ -136,3 +136,38 @@ function fullscreen() { } } +// let rand = Math.floor(Math.random() * 20 +1); +let random = () => { + spin(); + let rand = Math.floor(Math.random() * 20 +1); + console.log(rand); + document.getElementById("center").innerHTML = rand; +} + + + + + +// function rolar(){ +// let rolagem = Math.floor(Math.random() * 20 +1); +// let valor = 1 +// spin() +// document.getElementById("result").innerHTML = rolagem; +// document.getElementById("span").innerHTML = parseInt(valor)+rolagem; +// if (rolagem === 20){ +// document.getElementById("result").style.color = "var(--green)"; +// document.getElementById("body").style.backgroundColor = "var(--dark-green)"; +// } +// else if(rolagem === 1){ +// document.getElementById("result").style.color = "var(--red)"; +// document.getElementById("body").style.backgroundColor = "var(--dark-red)"; +// } +// else{ +// document.getElementById("result").style.color = "black"; +// document.getElementById("body").style.backgroundColor = "var(--black)"; +// } +// } +function spin(){ + document.getElementById("d20").classList.add("spin"); + setTimeout(function(){document.getElementById("d20").classList.remove("spin");}, 500); +} \ No newline at end of file diff --git a/MTG/style.css b/MTG/style.css index 651680f..2f2480d 100644 --- a/MTG/style.css +++ b/MTG/style.css @@ -30,6 +30,9 @@ main { position: relative; margin-top: 70px; +} +#dice_div{ + } .name { font-size: 3em; @@ -145,6 +148,9 @@ color:rgb(141, 140, 140); font-size: 0.65rem; } +#d20 { + width: 2.85rem; +} .fiveLife { display: flex; @@ -168,3 +174,142 @@ color:rgb(141, 140, 140); .lifeFlex{ flex-direction: column } + + /* Container holding the image and the text */ + .container { + /* display: flex; */ + position: relative; + flex-direction: row; + /* text-align: center; */ + +} + + +/* Centered text */ +.centered { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: black; + font-size: 0.55rem; +} +/* + +:root{ + --black: rgb(28, 29, 36); + --white: whitesmoke; + --dark-red: #a8041d; + --dark-green: #174240; + --red: #eb0404; + --green: #01c321; +} + +#centralizar{ + position: relative; + left: 50%; + transform: translateX(-50%); +} +.container{ + width: 70%; + max-width: 400px; + padding: 30px 50px; + position: absolute; + left: 50%; + top: 50%; + background-color: whitesmoke; + transform: translate(-50%,-50%); + border-radius: 8px; +} +*\ +\* +#result{ + position: absolute; + z-index: 2; + left: 50%; + top: 28%; + transform: translateX(-50%); + font-size: 40px; +} +img{ + width: 50%; + margin-bottom: 5px; + position: relative; + left: 25%; +} +p{ + text-align: center; + margin-bottom: 25px; + font-size: 18px; +} +.modificador{ + width: 145px; + height: 46px; + display: flex; + margin-bottom: 25px; + border: 3px solid rgb(28, 29, 36); + border-radius: 5px; +} +input[type="number"]{ + background-color: var(--white); + -moz-appearance: textfield; + text-align: center; + font-size: 30px; + border: none; + width: 80px; + pointer-events: none; +} +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { +-webkit-appearance: none; +} +button{ + width: 30px; + color: #3264fe; + background-color: var(--white); + border: none; + font-size: 38px; + cursor: pointer; +} +.botao{ + background-color: var(--black); + border: none; + outline: none; + color: whitesmoke; + font-size: 16px; + padding: 15px 0; + width: 150px; + border-radius: 5px; +} +.botao:hover{ + cursor: pointer; + background-color: #08080c; + transition: ease 0.3s; +} +*/ +.spin{ + -webkit-animation: spin 0.3s linear; + -moz-animation: spin 0.3s linear; + animation: spin 0.3s linear; + animation-duration: 0.3s; +} +@-webkit-keyframes spin{ + 0%{-webkit-transform: rotate(0deg);} + 100%{-webkit-transform: rotate(120deg);} +} +@-moz-keyframes spin{ + 0%{-moz-transform: rotate(0deg);} + 100%{-moz-transform: rotate(120deg);} +} +@keyframes spin{ + 0%{transform: rotate(0deg);} + 100%{transform: rotate(120deg);} +} +@media only screen and (max-width: 460px){ + h1{ + font-size: 26px; + } + p{ + font-size: 20px; + } +} diff --git a/beach/img/assets/logo-sm.png b/beach/img/assets/logo-sm.png new file mode 100644 index 0000000..3a4c663 Binary files /dev/null and b/beach/img/assets/logo-sm.png differ diff --git a/beach/img/assets/logosmall_bpb.jpg b/beach/img/assets/logosmall_bpb.jpg new file mode 100644 index 0000000..5eb07ab Binary files /dev/null and b/beach/img/assets/logosmall_bpb.jpg differ diff --git a/beach/img/assets/logosmall_bpb1.jpg b/beach/img/assets/logosmall_bpb1.jpg new file mode 100644 index 0000000..60e7a2d Binary files /dev/null and b/beach/img/assets/logosmall_bpb1.jpg differ diff --git a/beach/img/slideshow/img1.jpg b/beach/img/slideshow/img1.jpg new file mode 100644 index 0000000..fffe745 Binary files /dev/null and b/beach/img/slideshow/img1.jpg differ diff --git a/beach/img/slideshow/img2.jpg b/beach/img/slideshow/img2.jpg new file mode 100644 index 0000000..68fdfce Binary files /dev/null and b/beach/img/slideshow/img2.jpg differ diff --git a/beach/img/slideshow/img3.jpg b/beach/img/slideshow/img3.jpg new file mode 100644 index 0000000..29a976f Binary files /dev/null and b/beach/img/slideshow/img3.jpg differ diff --git a/beach/index.html b/beach/index.html new file mode 100644 index 0000000..0395221 --- /dev/null +++ b/beach/index.html @@ -0,0 +1,71 @@ + + + + + + + Beach Party Balloons + + + + + + + + + + + +
+ +
+ + +
+ + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/beach/script.js b/beach/script.js new file mode 100644 index 0000000..a77d1d7 --- /dev/null +++ b/beach/script.js @@ -0,0 +1,13 @@ +// initialize navbar +document.addEventListener('DOMContentLoaded', function() { + var elems = document.querySelectorAll('.sidenav'); + var instances = M.Sidenav.init(elems, options); + + }); + +// init slideshow +document.addEventListener('DOMContentLoaded', function() { + var elems = document.querySelector('.carousel'); + var instances = M.Carousel.init(elems, options); +console.log("twst") + }); \ No newline at end of file diff --git a/beach/style.css b/beach/style.css new file mode 100644 index 0000000..88f9e0f --- /dev/null +++ b/beach/style.css @@ -0,0 +1,9 @@ +body { + display: flex; + min-height: 100vh; + flex-direction: column; + } + + main { + flex: 1 0 auto; + } \ No newline at end of file diff --git a/tictac/index.html b/tictac/index.html index 92e21b9..aa742bf 100644 --- a/tictac/index.html +++ b/tictac/index.html @@ -10,6 +10,8 @@ Tic Tac Toe Touch + @@ -58,8 +60,7 @@ But husbanded through many a long campaign." - Wordsworth
- + \ No newline at end of file diff --git a/tictac/tictac.css b/tictac/tictac.css index 7ca8eaa..aa85f15 100644 --- a/tictac/tictac.css +++ b/tictac/tictac.css @@ -4,35 +4,46 @@ body { } td{ border: 3px solid black; - height: 100px; - width: 100px; + height: 120px; + width: 120px; } #game { + justify-self: center; + align-content: center; + margin-top: 20px; background-color:#ce4949; text-align: center; box-shadow: 5px 5px 5px #888888; - height: 300px; - width: 300px; + /* height: 300px; */ + width: 100%; +/* table-layout: fixed; */ border-collapse: collapse; /* color:#1A1A1A; */ } +#tic{ +/* width: 85%; */ + margin:auto; +} - -tr{ +tr{ width: 10vh; } #game:hover{ cursor: pointer; } -#button { - text-align: center +#button { + text-align: center; +} +button{ + font-size: large; + padding: 2vh; } - #score { text-align: center; - color: #1A1A1A + color: #1A1A1A; + font-size: larger; } #level { @@ -48,6 +59,8 @@ tr{ } .cells{ text-align: center; + font-size: 70pt + } #tic{ display: flex;