books/formular.html

249 lines
6.8 KiB
HTML
Raw Permalink Normal View History

2024-05-13 15:33:18 +02:00
<!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()">&#9776;</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>