mirror of https://github.com/me50/kukemuna.git
automated commit by submit50
This commit is contained in:
kukemuna
commit
63d67c8a04
|
|
@ -0,0 +1,63 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.5">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Page2</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="topnav" id="myTopnav">
|
||||||
|
<a href="index.html" class="active">Home</a>
|
||||||
|
<a href="lakes.html">Lakes</a>
|
||||||
|
<a href="contacts.html">Contacts</a>
|
||||||
|
<a href="radio.html">Radio</a>
|
||||||
|
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mycard">
|
||||||
|
<table>
|
||||||
|
<caption>*Random data</caption>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>First name</th>
|
||||||
|
<th>Last name</th>
|
||||||
|
<th>Birthday</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Phone</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="datarow">
|
||||||
|
<td>1</td>
|
||||||
|
<td>Hunt</td>
|
||||||
|
<td>Susi</td>
|
||||||
|
<td>12.03.1945</td>
|
||||||
|
<td>asdf@qwer.ty</td>
|
||||||
|
<td>+372 5564 458</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="datarow">
|
||||||
|
<td>2</td>
|
||||||
|
<td>Hunt</td>
|
||||||
|
<td>Kriimsilm</td>
|
||||||
|
<td>01.01.1970</td>
|
||||||
|
<td>bin@ba.sh</td>
|
||||||
|
<td>+42 458 7786 254</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="datarow">
|
||||||
|
<td>3</td>
|
||||||
|
<td>Ott</td>
|
||||||
|
<td>Karu</td>
|
||||||
|
<td>31.02.1886</td>
|
||||||
|
<td>burger@lol.no</td>
|
||||||
|
<td>+1 1800 6969 420</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<script src="func.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
function myFunction() {
|
||||||
|
var x = document.getElementById("myTopnav");
|
||||||
|
if (x.className === "topnav") {
|
||||||
|
x.className += " responsive";
|
||||||
|
} else {
|
||||||
|
x.className = "topnav";
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
|
|
@ -0,0 +1,35 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.5">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Home</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="topnav" id="myTopnav">
|
||||||
|
<a href="index.html" class="active">Home</a>
|
||||||
|
<a href="lakes.html">Lakes</a>
|
||||||
|
<a href="contacts.html">Contacts</a>
|
||||||
|
<a href="radio.html">Radio</a>
|
||||||
|
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid index-container">
|
||||||
|
<h2>Welcome to this basic website with little to no value.</h2>
|
||||||
|
<p><strong>You are going to find the following:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>Some lakes to visit.</li>
|
||||||
|
<li>A random contacts list.</li>
|
||||||
|
<li>An iframe of a WebSDR instance running somewhere in SE Estonia.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="func.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.5">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Page1</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="topnav" id="myTopnav">
|
||||||
|
<a href="index.html" class="active">Home</a>
|
||||||
|
<a href="lakes.html">Lakes</a>
|
||||||
|
<a href="contacts.html">Contacts</a>
|
||||||
|
<a href="radio.html">Radio</a>
|
||||||
|
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container mt-3">
|
||||||
|
<h2>Lakes to visit</h2>
|
||||||
|
<br>
|
||||||
|
<!-- Nav tabs -->
|
||||||
|
<ul class="nav nav-tabs" role="tablist">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" data-bs-toggle="tab" href="#home">Tamula</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Paidra</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Äntu</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Tab panes -->
|
||||||
|
<div class="tab-content">
|
||||||
|
<div id="home" class="container tab-pane active"><br>
|
||||||
|
<h3>Lake Tamula</h3>
|
||||||
|
<div class="card">
|
||||||
|
<img src="img/tamula-rannapromenaad-visit-estonia_.jpg" alt="Lake Tamula">
|
||||||
|
<div class="card-body">
|
||||||
|
<details>
|
||||||
|
<summary>Summary</summary>
|
||||||
|
<p>
|
||||||
|
Tamula Lake, located right next to the city of Võru, is a favourite place of tourists. The beach has attractions for children, training machines for sports enthusiasts, and a beach bungalow for enjoying the summertime buzz.
|
||||||
|
<br><br>
|
||||||
|
In August, the pop-up marine school ’Meresõber’ (Friend of the Sea) opens its doors on the Tamula beach. It gives young people the opportunity to try different maritime sports on their own. The sailboat Tuuletark welcomes enthusiasts on sunset trips. The vessel Tamula Vanake, which has a sauna and a barbecue, offers fun trips for groups.
|
||||||
|
During winter, fishing competitions and winter rallies take place on Lake Tamula.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="menu1" class="container tab-pane fade"><br>
|
||||||
|
<h3>Lake paidra</h3>
|
||||||
|
<div class="card">
|
||||||
|
<img src="img/Paidra.jpg" alt="Lake Paidra">
|
||||||
|
<div class="card-body">
|
||||||
|
<details>
|
||||||
|
<summary>Summary</summary>
|
||||||
|
<p>
|
||||||
|
Lake Paidra, located about 15km from Võru along Võru-Räpina highway, is one cosy little lake in the middle of a pine forest.
|
||||||
|
It offers an official camping site with some basic amenities like fire ring with barbeque grill, 3 outdoor fireplaces, a dry toilet and a parking area.
|
||||||
|
Being in the middle of a pine forest one can also find some blueberries and cowberries not too deep into the woods.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="menu2" class="container tab-pane fade"><br>
|
||||||
|
<h3>Äntu Lakes</h3>
|
||||||
|
<div class="card">
|
||||||
|
<img src="img/äntu-blue-lake-visit-estonia_Kenno+Soo_.jpg" alt="Lake Äntu">
|
||||||
|
<div class="card-body">
|
||||||
|
<details>
|
||||||
|
<summary>Summary</summary>
|
||||||
|
<p>
|
||||||
|
There are seven transparent lakes near Väike-Maarja, called the Äntu Lakes. The largest of the Äntu lakes are Valgejärv (White Lake), Roheline (Green) or Vahejärv (Middle Lake), and Sinijärv (Blue Lake). The latter two are unique thanks to their bluish-green colour and clear waters. The bottom of the lakes is covered with light-coloured lime which, together with the surrounding nature, gives the water its beautiful hue.
|
||||||
|
<br><br>
|
||||||
|
Somewhere in the distance, there are the remaining Äntu lakes: Linaleo, Mäetaguse, Kaanjärv, and Umbjärv, which are small forest lakes with unstable banks surrounded by the boggy landscape containing a number of hiking trails.
|
||||||
|
<br><br>
|
||||||
|
Good to know: Valgejärv Lake is also a swimming spot in the summer.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="func.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.5">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Page3</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="topnav" id="myTopnav">
|
||||||
|
<a href="index.html" class="active">Home</a>
|
||||||
|
<a href="lakes.html">Lakes</a>
|
||||||
|
<a href="contacts.html">Contacts</a>
|
||||||
|
<a href="radio.html">Radio</a>
|
||||||
|
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<iframe src="https://sdr.puravik.eu" title="Bit of radio spectrum in SE Estonia"></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="func.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
div
|
||||||
|
ul
|
||||||
|
li
|
||||||
|
a
|
||||||
|
img
|
||||||
|
details
|
||||||
|
summary
|
||||||
|
table
|
||||||
|
caption
|
||||||
|
iframe
|
||||||
|
|
||||||
|
.bg
|
||||||
|
.topnav
|
||||||
|
.card
|
||||||
|
.mycard
|
||||||
|
iframe
|
||||||
|
|
||||||
|
Bootstrap was used for containers and nav tabs, JavaScript was for responsive top nav.
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
body, html{
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.bg{
|
||||||
|
background-image: url(img/vinni.jpg);
|
||||||
|
height: 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #242428;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.topnav a {
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
color: #f2f2f2;
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
.topnav a:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.topnav a.active {
|
||||||
|
background-color: #04AA6D;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.topnav .icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.index-container{
|
||||||
|
margin: 2rem 1.5rem;
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
transition: 50ms;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.mycard{
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 0.5rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
td, th{
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
}
|
||||||
|
.datarow:hover{
|
||||||
|
background-color: rgba(236, 238, 240, 0.821);
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
iframe{
|
||||||
|
width: 100vw;
|
||||||
|
height: 95vh;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
}
|
||||||
|
details[open] summary ~ * {
|
||||||
|
animation: sweep .5s ease-in-out;
|
||||||
|
}
|
||||||
|
@media screen and (max-width:600px){
|
||||||
|
.topnav a:not(:first-child) {display: none;}
|
||||||
|
.topnav a.icon {
|
||||||
|
float: right;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.topnav.responsive {position: relative;}
|
||||||
|
.topnav.responsive .icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.topnav.responsive a {
|
||||||
|
float: none;
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes sweep {
|
||||||
|
0% {opacity: 0; margin-left: -10px;}
|
||||||
|
100% {opacity: 1; margin-left: 0px;}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue