249 lines
6.8 KiB
HTML
249 lines
6.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="sk">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Books</title>
|
||
|
|
<meta name="description" content="Books">
|
||
|
|
<meta name="keywords" content="books, booktok, bookstagram, author, romance, fantasy, sci-fi, characters, love ">
|
||
|
|
<!-- namapovanie css -->
|
||
|
|
<link rel="stylesheet" href="formular.css">
|
||
|
|
<link rel="stylesheet" href="h1css.css">
|
||
|
|
<link rel="shortcut icon" href="icon.jpg" type="image/x-icon">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
</head>
|
||
|
|
<body style="background-color: rgb(83, 129, 83); padding: 0px;">
|
||
|
|
<style>
|
||
|
|
body {margin:0;font-family:Arial}
|
||
|
|
|
||
|
|
.topnav {
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: rgb(9, 56, 27);
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.topnav a {
|
||
|
|
float: left;
|
||
|
|
display: block;
|
||
|
|
color: rgb(210, 227, 200);
|
||
|
|
text-align: center;
|
||
|
|
padding: 14px 16px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 17px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
background-color: rgb(9, 56, 27);
|
||
|
|
color: rgb(210, 227, 200);
|
||
|
|
}
|
||
|
|
|
||
|
|
.topnav .icon {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown {
|
||
|
|
float: left;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown .dropbtn {
|
||
|
|
font-size: 17px;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
color: rgb(210, 227, 200);
|
||
|
|
padding: 14px 16px;
|
||
|
|
background-color: rgb(9, 56, 27);
|
||
|
|
font-family: inherit;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-content {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
background-color: rgb(210, 227, 200);
|
||
|
|
min-width: 160px;
|
||
|
|
box-shadow: 0px 8px 16px 0px rgb(9, 56, 27);
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-content a {
|
||
|
|
float: none;
|
||
|
|
color: rgb(9, 56, 27);
|
||
|
|
padding: 12px 16px;
|
||
|
|
text-decoration: none;
|
||
|
|
display: block;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.topnav a:hover, .dropdown:hover .dropbtn {
|
||
|
|
background-color: rgb(210, 227, 200);
|
||
|
|
color: rgb(9, 56, 27);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-content a:hover {
|
||
|
|
background-color: rgb(9, 56, 27);
|
||
|
|
color: rgb(210, 227, 200);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown:hover .dropdown-content {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 600px) {
|
||
|
|
.topnav a:not(:first-child), .dropdown .dropbtn {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.topnav.responsive .dropdown {float: none;}
|
||
|
|
.topnav.responsive .dropdown-content {position: relative;}
|
||
|
|
.topnav.responsive .dropdown .dropbtn {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="topnav" id="myTopnav">
|
||
|
|
<a href="home.html" class="active">Home</a>
|
||
|
|
<a href="aboutus.html">About us</a>
|
||
|
|
<a href="topbooks.html">TOP books 2023</a>
|
||
|
|
<a href="formular.html">Rate us!</a>
|
||
|
|
<div class="dropdown">
|
||
|
|
<button class="dropbtn">Genre
|
||
|
|
<i class="fa fa-caret-down"></i>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-content">
|
||
|
|
<a href="romance.html">romance</a>
|
||
|
|
<a href="fantasy.html">fantasy</a>
|
||
|
|
<a href="scifi.html">sci-fi</a>
|
||
|
|
<a href="horror.html">horror</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="dropdown">
|
||
|
|
<button class="dropbtn">Authors
|
||
|
|
<i class="fa fa-caret-down"></i>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-content">
|
||
|
|
<a href="anahuang.html">Ana Huang</a>
|
||
|
|
<a href="colleenhooveer.html">Colleen Hooveer</a>
|
||
|
|
<a href="ellekennedy.html">Elle Kennedy</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function myFunction() {
|
||
|
|
var x = document.getElementById("myTopnav");
|
||
|
|
if (x.className === "topnav") {
|
||
|
|
x.className += " responsive";
|
||
|
|
} else {
|
||
|
|
x.className = "topnav";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<form id="druhy" method="post" style="padding: 50px;">
|
||
|
|
<h2>Rate us!</h2>
|
||
|
|
<label for="meno">Name:</label>
|
||
|
|
<input type="text" id="meno" name="meno"><br><hr>
|
||
|
|
<label for="priezvisko">Last name:</label>
|
||
|
|
<input type="text" id="priezvisko" name="priezvisko"><hr>
|
||
|
|
|
||
|
|
<h3>Gender:</h3>
|
||
|
|
<input type="radio" id="muz" name="Pohlavie" value="muz">
|
||
|
|
<label for="muz">Man</label><br>
|
||
|
|
<input type="radio" id="zena" name="Pohlavie" value="zena">
|
||
|
|
<label for="zena">Woman</label><br>
|
||
|
|
<input type="radio" id="ine" name="Pohlavie" value="ine">
|
||
|
|
<label for="ine">Other</label><hr>
|
||
|
|
|
||
|
|
<label for="datemax">Birthday:</label><br>
|
||
|
|
<input type="date" id="datemax" name="datemax"
|
||
|
|
max="2024-01-15"><br><br>
|
||
|
|
|
||
|
|
<label for="email">Email:</label>
|
||
|
|
<input type="email" id="email" name="email"><br><br>
|
||
|
|
|
||
|
|
<label for="phone">Enter your phone number:</label>
|
||
|
|
<input type="tel" id="phone" name="phone"
|
||
|
|
placeholder="zadajte cislo 1234-567-890"
|
||
|
|
pattern="[0-9]{4}-[0-9]{3}-[0-9]{3}"><br><br>
|
||
|
|
|
||
|
|
<h3>Favourite genre:<h3>
|
||
|
|
|
||
|
|
<input type="checkbox" id="hudba1" name="hudba12" value="rap">
|
||
|
|
<label for="hudba1">romance</label><br>
|
||
|
|
<input type="checkbox" id="hudba2" name="hudba22" value="kpop">
|
||
|
|
<label for="hudba2">fantasy</label><br>
|
||
|
|
<input type="checkbox" id="hudba3" name="hudba32" value="hip hop">
|
||
|
|
<label for="hudba">horror</label><br>
|
||
|
|
<input type="checkbox" id="hudba4" name="hudba42" value="clasic">
|
||
|
|
<label for="hudba">sci-fi</label><br>
|
||
|
|
<input type="checkbox" id="hudba5" name="hudba52" value="nepocuvam hudbu">
|
||
|
|
<label for="hudba">other</label><br>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<label for="farba">Favourite colour:</label><br>
|
||
|
|
<input type="color" id="farba" name="farba"><br>
|
||
|
|
|
||
|
|
<h3>Do you like animals?</h3>
|
||
|
|
<input type="radio" id="ano" name="nazor" value="ano">
|
||
|
|
<label for="ano">Yes</label><br>
|
||
|
|
<input type="radio" id="nie" name="nazor" value="nie">
|
||
|
|
<label for="nie">No</label><br>
|
||
|
|
<input type="radio" id="neviem" name="nazor" value="neviem">
|
||
|
|
<label for="neviem">Idk</label><hr>
|
||
|
|
|
||
|
|
<h3>Ebook or book?</h3>
|
||
|
|
<input type="radio" id="ano" name="surodenec" value="ano">
|
||
|
|
<label for="ano">ebook</label><br>
|
||
|
|
<input type="radio" id="nie" name="surodenec" value="nie">
|
||
|
|
<label for="nie">book</label><br><hr>
|
||
|
|
|
||
|
|
<h3>Rate us!</h3>
|
||
|
|
<form method="post" action="post.php">
|
||
|
|
<label for="vol">1</label>
|
||
|
|
<input type="range" id="vol" name="vol" min="0" max="50">
|
||
|
|
<label for="vol">10</label>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div style="padding: 50px;">
|
||
|
|
<textarea name="odkaz" rows="10" cols="30"" >Write something about your favourite book
|
||
|
|
</textarea><br><br>
|
||
|
|
<input type="submit" value="Submit">
|
||
|
|
<button type="button" onclick="alert('Thanks for rating us!')">
|
||
|
|
SEND</button></div>
|
||
|
|
</form>
|