summaryrefslogtreecommitdiff
path: root/rannak/mangud
diff options
context:
space:
mode:
authorRasmus Luha <rasmus.luha@gmail.com>2022-09-19 18:44:57 +0300
committerRasmus Luha <rasmus.luha@gmail.com>2022-09-19 18:44:57 +0300
commitffdb767de352bb82253e241b6ad996e7b06fee17 (patch)
tree54db5f88b38025db883a2a6ef46be32edba2ec67 /rannak/mangud
parent40d015a15bee7d0a51c28e20c29ff7045419b8f5 (diff)
ristsõna css done
Diffstat (limited to 'rannak/mangud')
-rw-r--r--rannak/mangud/perenaine/ristsona/index.html417
-rw-r--r--rannak/mangud/perenaine/ristsona/script.js8
-rw-r--r--rannak/mangud/perenaine/ristsona/style.css58
-rw-r--r--rannak/mangud/style.css3
4 files changed, 301 insertions, 185 deletions
diff --git a/rannak/mangud/perenaine/ristsona/index.html b/rannak/mangud/perenaine/ristsona/index.html
index 96df3bc..9089c33 100644
--- a/rannak/mangud/perenaine/ristsona/index.html
+++ b/rannak/mangud/perenaine/ristsona/index.html
@@ -10,21 +10,27 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
-<body class="bg-dark">
+<body>
+
<div class="container text-white text-center">
<h1>Ristsõna</h1>
<p>Lahenda ristsõna, vastuseks tuleb retsept?</p>
- <div class="align-items-center text-center">
+ <div class="text-center">
+
<div class="col">
<a href="" class="btn-success btn disabled" role="button" aria-disabled="true">Liigu Edasi</a>
</div>
- </div>
- <form onsubmit="javascript:checkAnswer()" action="javascript:null">
- <input placeholder="vastus..."/>
- </form>
- </div>
+ <div class="text-center inputBox">
+ <label for="quantity">Nr:</label>
+ <input type="number" id="number" name="number" placeholder="1" min="1" max="12">
+
+ <input type="text" placeholder="Vastus " id="inputId">
+ <button type="button" onclick="getInputValue();">Proovi</button>
+ </div>
+ </div>
+ </div>
<!-- Crossword -->
@@ -33,206 +39,267 @@
<div class="left text-center text-white">
<ol>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
+ <li>
+ Köögivili, mida kasvatatakse nii kasvuhoones kui avamaal. Selles toidus kasutatakse nii
+ värskelt, marineeritult kui hapendatult.
+ </li>
+
+ <li>
+ Valmistatakse õlist, munakollasest ja äädikast (või sidrunimahlast).
+ </li>
+
+ <li>
+ Piklik oranžikas juurvili, mis sisaldab rikkalikult beeta-karoteeni.
+ </li>
+
+ <li>
+ Lihatoode, maitseb hästi võileival.
+ </li>
+
+ <li>
+ Puuvili, mis sai Lumivalgukesele saatuslikuks.
+ </li>
+
+ <li>
+ Sellel maitseainele olevat ehitatud keskaegne Tallinn.
+ </li>
+
</ol>
</div>
<table class="text-center text-white">
+ <!-- Essa Rida-->
<tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="hernes"><sup>8</sup><span>H</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
</tr>
+
+ <!-- Teine Rida-->
<tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="vorst"><sup>4</sup><span>V</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="hernes"><span>E</span></td>
+ <td></span></td>
+ <td class="sibul"><sup>10</sup><span>S</span></td>
+ <td></span></td>
+ <td></span></td>
</tr>
+
+ <!-- Kolmas Rida-->
<tr>
- <td></td>
- <td class="kurk"><sup>1</sup>K</td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td class="kurk"><sup>1</sup><span>K</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="vorst"><span>O</span></td>
+ <td></span></td>
+ <td class="sool"><sup>6</sup><span>S</span></td>
+ <td></span></td>
+ <td class="hernes"><span>R</span></td>
+ <td class="muna"><sup>9</sup><span>M</span></td>
+ <td class="sibul"><span>I</span></td>
+ <td></span></td>
+ <td class="kartul"><sup>12</sup><span>K</span></td>
</tr>
+
+ <!-- Neljas Rida-->
<tr>
- <td></td>
- <td class="kurk">U</td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td class="kurk"><span>U</span></td>
+ <td></span></td>
+ <td class="porgand"><sup>3</sup><span>P</span></td>
+ <td class="vorst"><span>R</span></td>
+ <td></span></td>
+ <td class="sool"><span>O</span></td>
+ <td></span></td>
+ <td class="hernes"><span>N</span></td>
+ <td class="muna"><span>U</span></td>
+ <td class="sibul"><span>B</span></td>
+ <td></span></td>
+ <td class="kartul"><span>A</span></td>
</tr>
+
+ <!-- Viies Rida-->
<tr>
- <td></td>
- <td class="kurk">R</td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td class="kurk"><span>R</span></td>
+ <td class="majonees"><sup>2</sup><span>M</span></td>
+ <td class="porgand"><span>O</span></td>
+ <td class="vorst"><span>S</span></td>
+ <td class="õun"><sup>5</sup><span>Õ</span></td>
+ <td class="sool"><span>O</span></td>
+ <td class="pipar"><sup>7</sup><span>P</span></td>
+ <td class="hernes"><span>E</span></td>
+ <td class="muna"><span>N</span></td>
+ <td class="sibul"><span>U</span></td>
+ <td class="hapukoor"><sup>11</sup><span>H</span></td>
+ <td class="kartul"><span>R</span></td>
</tr>
+
+ <!-- Kuues Rida-->
<tr class="vastus">
- <td>&rarr;</td>
- <td class="kurk">K</td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td>&rarr;</span></td>
+ <td class="kurk"><span>K</span></td>
+ <td class="majonees"><span>A</span></td>
+ <td class="porgand"><span>R</span></td>
+ <td class="vorst"><span>T</span></td>
+ <td class="õun"><span>U</span></td>
+ <td class="sool"><span>L</span></td>
+ <td class="pipar"><span>I</span></td>
+ <td class="hernes"><span>S</span></td>
+ <td class="muna"><span>A</span></td>
+ <td class="sibul"><span>L</span></td>
+ <td class="hapukoor"><span>A</span></td>
+ <td class="kartul"><span>T</span></td>
</tr>
+
+ <!-- Seitsmes Rida-->
<tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="majonees"><span>J</span></td>
+ <td class="porgand"><span>G</span></td>
+ <td></span></td>
+ <td class="õun"><span>N</span></td>
+ <td></span></td>
+ <td class="pipar"><span>P</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="hapukoor"><span>P</span></td>
+ <td class="kartul"><span>U</span></td>
</tr>
+
+ <!-- Kaheksas Rida-->
<tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="majonees"><span>O</span></td>
+ <td class="porgand"><span>A</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="pipar"><span>A</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="hapukoor"><span>U</span></td>
+ <td class="kartul"><span>L</span></td>
</tr>
+
+ <!-- Üheksas Rida-->
<tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="majonees"><span>N</span></td>
+ <td class="porgand"><span>N</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="pipar"><span>R</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="hapukoor"><span>K</span></td>
+ <td></span></td>
</tr>
+
+ <!-- Kümnes Rida-->
<tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="majonees"><span>E</span></td>
+ <td class="porgand"><span>D</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="hapukoor"><span>O</span></td>
+ <td></span></td>
</tr>
+
+ <!-- 11 Rida-->
<tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="majonees"><span>E</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="hapukoor"><span>O</span></td>
+ <td></span></td>
</tr>
+
+ <!-- 12 Rida-->
<tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="majonees"><span>S</span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td></span></td>
+ <td class="hapukoor"><span>R</span></td>
+ <td></span></td>
+
</tr>
</table>
<div class="right text-white">
<ol start="7">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
+ <li>
+ Kõige tuntum vürts.
+ </li>
+
+ <li>
+ Seitse poissi ühes kindas? Eesti mõistatus
+ </li>
+
+ <li>
+ Kas enne oli kana või see toiduaine?
+ </li>
+
+ <li>
+ Siiruviiruline köögivili, mis paneb nutma.
+ </li>
+
+ <li>
+ Hapendatud piimatoode, mida eestlased armastavad süüa iga roaga.
+ </li>
+
+ <li>
+ Köögivili, mille Kolumbus Ameerikast Euroopasse tõi.
+ </li>
+
</ol>
</div>
diff --git a/rannak/mangud/perenaine/ristsona/script.js b/rannak/mangud/perenaine/ristsona/script.js
index eac2fc2..01f4ad5 100644
--- a/rannak/mangud/perenaine/ristsona/script.js
+++ b/rannak/mangud/perenaine/ristsona/script.js
@@ -1,6 +1,14 @@
console.log("Brrrr");;
let counter = 0;
+function getInputValue() {
+ // Selecting the input element and get its value
+ let inputVal = document.getElementById("inputId").value;
+ // Displaying the value
+ alert(inputVal);
+ }
+
+
// Button func
function moveOnEnable(){
diff --git a/rannak/mangud/perenaine/ristsona/style.css b/rannak/mangud/perenaine/ristsona/style.css
index 00c55b6..dab40f7 100644
--- a/rannak/mangud/perenaine/ristsona/style.css
+++ b/rannak/mangud/perenaine/ristsona/style.css
@@ -2,26 +2,66 @@
box-sizing: border-box;
}
-table{
- margin: 20px auto;
+body{
+ background-color: #212121 !important;
}
+/* Input Box styles */
-.vastus td{
- border: 5px solid lime !important;
+.inputBox{
+ margin-top: 10px !important;
}
-td {
- border: 4px solid white !important;
- width: 40px !important;
- height: 40px !important;
- font-weight: bold;
+#number {
+ width: 3em !important;
}
+
+/* Kusimusi */
+
+.main li{
+ margin: 10px;
+}
+
+
+
+/* Main styles*/
+
.main{
display: flex;
}
+table{
+ margin: 20px auto;
+}
+
+td {
+ border: 4px solid #212121 !important;
+ width: 40px !important;
+ height: 40px !important;
+ font-weight: bold;
+}
+
.left, .right{
margin: 10px;
width: calc((100vw - (13*40px) - 40px) / 2) !important;
}
+
+/* Ristsõna */
+
+.vastus td{
+ border: 5px solid lime !important;
+}
+
+.kurk, .majonees, .vorst,
+.porgand, .õun, .sool, .pipar, .hernes,
+.muna, .sibul, .hapukoor, .kartul {
+ border: 5px solid white !important;
+ color: white;
+}
+
+.kurk span, .majonees span, .vorst span,
+.porgand span, .õun span, .sool span,
+.pipar span, .hernes span, .muna span,
+.sibul span, .hapukoor span, .kartul span{
+ display: none;
+}
diff --git a/rannak/mangud/style.css b/rannak/mangud/style.css
index 9519820..0b11a79 100644
--- a/rannak/mangud/style.css
+++ b/rannak/mangud/style.css
@@ -13,10 +13,11 @@ h1{
.main{
display: flex;
+ flex-wrap: wrap;
max-width:1100px;
margin:auto
}
.main div{
- width: 15%;
+ width: 33.3%;
}