init
This commit is contained in:
Viki Rajnakova
commit
4f05abc0ff
BIN
Josh & Jules - Twisted Hate.jpg
Normal file
BIN
Josh & Jules - Twisted Hate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
Preview-Twisted-Love-by-Ana-Huang.pdf
Normal file
BIN
Preview-Twisted-Love-by-Ana-Huang.pdf
Normal file
Binary file not shown.
BIN
Stella & Christian - Twisted Lies.jpg
Normal file
BIN
Stella & Christian - Twisted Lies.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
Twisted Series.jpg
Normal file
BIN
Twisted Series.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
260
aboutus.html
Normal file
260
aboutus.html
Normal file
@ -0,0 +1,260 @@
|
|||||||
|
<!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="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);">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:6.5vw">What is #booktok?</h3>
|
||||||
|
</header>
|
||||||
|
<nav><i><div class="odkazy">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">What is it?</a></li>
|
||||||
|
<li><a href="#">Is Booktok a good thing?</a></li>
|
||||||
|
<li><a href="#">How do I get BookTok?</a></li>
|
||||||
|
<li><a href="#">Why is BookTok popular?</a></li>
|
||||||
|
<li><a href="#">What is the most popular Booktok?</a></li>
|
||||||
|
<li><a href="#">Top BookTok creators in 2023</a></li>
|
||||||
|
<li><a href="#"></a></li>
|
||||||
|
</ul></div>
|
||||||
|
</i>
|
||||||
|
</nav>
|
||||||
|
<section>
|
||||||
|
<article style="color: rgb(22, 48, 32); padding: 50px; font-family: Times new Rowan;"><div class="text">
|
||||||
|
<h1>What is it?</h1>
|
||||||
|
<p>
|
||||||
|
BookTok, short for “Book TikTok,” is a community of users on TikTok who are passionate about books and literature. By making entertaining videos centered around the books they read, they have created an inventive way of discussing, reviewing, and recommending books that have revolutionized the literary and publishing communities.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
BookTok started as a hashtag on TikTok by a group of book lovers, and it quickly became a massive trend. Now, it is one of the world’s biggest social media communities for books. BookTok has over 29.1 billion views, and many big box retailers like Barnes & Noble have dedicated sections to the BookTok community.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
Like Instagram’s Bookstagrammers, these BookTokers are influencers with a devoted following of literary lovers worldwide. They use their platform to promote books they love, introduce new authors, and foster conversations with fellow readers.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
Creators often post content discussing their current reads, book hauls, and much more. They also like to talk about the characters in books they are reading and share funny anecdotes related to those characters.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
There’s a strong focus on young adult fiction, fantasy, and romance genres in BookTok. So, if you’re into those genres, this is the community for you! You’ll find book recommendations and discussions about popular book tropes like “enemies to lovers,” “morally gray villains,” and “right person wrong time.”
|
||||||
|
</p>
|
||||||
|
<h1>Is booktok a good thing?</h1>
|
||||||
|
<p>Some of the positives of interacting with Booktok include easily finding recommendations for new books to check out and learn more about different authors. It also creates a community of people who love to read and that is 1000% a good thing, no doubts there.</p>
|
||||||
|
<h1>How do I get BookTok?</h1>
|
||||||
|
<p>Anyone with the TikTok app can be part of BookTok. Simply search for BookTok users or hashtags you like, then follow and interact with their content. You don’t even need a book-related account to be a part of BookTok.</p>
|
||||||
|
<h1>Why is BookTok so popular?</h1>
|
||||||
|
<p>BookTok is popular because it offers book lovers a chance to connect with like-minded readers and discuss their favorite literature. It also provides book recommendations from other users, allowing readers to discover new books and authors they may not have known about before.</p>
|
||||||
|
<h1>What is the most popular BookTok?</h1>
|
||||||
|
<p>The most popular BookTok account is @aymansbooks, which has over 892K followers! Ayman’s account combines bookish humor, book reviews, recommendations, hauls, tags, and more. It’s a great book-lovers haven!</p>
|
||||||
|
<h1>Top BookTok creators in 2023</h1>
|
||||||
|
<p>The rise of BookTok has taken the publishing industry by storm over the past few years, with influencers inspiring book lovers of all ages to pick up a book.
|
||||||
|
<br>
|
||||||
|
Here are some of the biggest BookTok influencers on TikTok in 2023 who have helped spark a generation’s bookish revolution.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<table id="tabulka2" class="podfarbenie"><hr>
|
||||||
|
<tr>
|
||||||
|
<th>Username</th>
|
||||||
|
<th>Followers</th>
|
||||||
|
<th>Likes</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://www.tiktok.com/@aymansbooks">@aymansbooks</a></td>
|
||||||
|
<td>947.4K</td>
|
||||||
|
<td>102.6M</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://www.tiktok.com/@thebooksiveloved?lang=en">@thebooksiveloved</a></td>
|
||||||
|
<td>553.3K</td>
|
||||||
|
<td>29.3M</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://www.tiktok.com/@ezeekat">@ezeekat</a></td>
|
||||||
|
<td>549.6K</td>
|
||||||
|
<td>25.3M</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://www.tiktok.com/@abbysbooks?lang=en">@abbysbooks</a></td>
|
||||||
|
<td>462.4K</td>
|
||||||
|
<td>34.5M</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://www.tiktok.com/@amyjordanj">@amyjordanj</a></td>
|
||||||
|
<td>385.7K</td>
|
||||||
|
<td>14M</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
</div></div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<footer><br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
393
anahuang.html
Normal file
393
anahuang.html
Normal file
@ -0,0 +1,393 @@
|
|||||||
|
<!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="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">
|
||||||
|
<link rel='stylesheet' id='site' href='http://changbin.borec.cz/druhy_polrok/javascript.css'
|
||||||
|
='text/css' media='all' />
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body style="background-color: rgb(83, 129, 83);">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-left: 0px;
|
||||||
|
overflow:auto;
|
||||||
|
display:block;
|
||||||
|
padding: 50px;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:8vw">Ana Huang</h3>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<!-- <article>
|
||||||
|
<h1>Is booktok a good thing?</h1>
|
||||||
|
<p>Some of the positives of interacting with Booktok include easily finding recommendations for new books to check out and learn more about different authors. It also creates a community of people who love to read and that is 1000% a good thing, no doubts there.</p>
|
||||||
|
<h1>How do I get BookTok?</h1>
|
||||||
|
<p>Anyone with the TikTok app can be part of BookTok. Simply search for BookTok users or hashtags you like, then follow and interact with their content. You don’t even need a book-related account to be a part of BookTok.</p>
|
||||||
|
<h1>Why is BookTok so popular?</h1>
|
||||||
|
<p>BookTok is popular because it offers book lovers a chance to connect with like-minded readers and discuss their favorite literature. It also provides book recommendations from other users, allowing readers to discover new books and authors they may not have known about before.</p>
|
||||||
|
<h1>What is the most popular BookTok?</h1>
|
||||||
|
<p>The most popular BookTok account is @aymansbooks, which has over 892K followers! Ayman’s account combines bookish humor, book reviews, recommendations, hauls, tags, and more. It’s a great book-lovers haven!</p>
|
||||||
|
<h1>Top BookTok creators in 2023</h1>
|
||||||
|
<p>The rise of BookTok has taken the publishing industry by storm over the past few years, with influencers inspiring book lovers of all ages to pick up a book.
|
||||||
|
<p>Odkazy:
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<a href="http://changbin.borec.cz/3racha.jpg"
|
||||||
|
download="3racha.jpg">download Twisted Games</a><hr>
|
||||||
|
<a href="http://changbin.borec.cz/macka.docx"
|
||||||
|
download="">download Twisted Hate</a><hr>
|
||||||
|
<a href="http://changbin.borec.cz/bts.gif"
|
||||||
|
download="bts.gif">download Twisted Lies</a><hr>
|
||||||
|
</p>
|
||||||
|
</article>-->
|
||||||
|
|
||||||
|
|
||||||
|
<article style="font-family: Times new Rowan; padding: 50px;" >
|
||||||
|
<br><br><br><br><div>
|
||||||
|
<h4 style="font-size: 3vw">Twisted series</h4>
|
||||||
|
<h5><a href="http://changbin.borec.cz/Zadanie/Twisted Series.jpg"
|
||||||
|
download="Twisted Series.jpg">Characters</a></h5>
|
||||||
|
<h3 style="font-size: 2.5vw">Twisted love</h3><br>
|
||||||
|
|
||||||
|
|
||||||
|
<img class="img1" src="https://th.bing.com/th/id/OIP.Ipthu4QkznRjxH4oSQaPiwHaLE?rs=1&pid=ImgDetMain" style="width:300px;">
|
||||||
|
<p><b>He has a heart of ice...but for her, he'd burn the world.</b><br>
|
||||||
|
|
||||||
|
Alex Volkov is a devil blessed with the face of an angel and cursed with a past he can’t escape.<br>
|
||||||
|
|
||||||
|
Driven by a tragedy that has haunted him for most of his life, his ruthless pursuits for success and vengeance leave little room for matters of the heart.<br>
|
||||||
|
|
||||||
|
But when he’s forced to look after his best friend’s sister, he starts to feel something in his chest:<br>
|
||||||
|
|
||||||
|
A crack.<br>
|
||||||
|
A melt.<br>
|
||||||
|
A fire that could end his world as he knew it.<br>
|
||||||
|
<br>
|
||||||
|
***<br>
|
||||||
|
|
||||||
|
Ava Chen is a free spirit trapped by nightmares of a childhood she can’t remember.<br>
|
||||||
|
|
||||||
|
But despite her broken past, she’s never stopped seeing the beauty in the world…including the heart beneath the icy exterior of a man she shouldn’t want.<br>
|
||||||
|
|
||||||
|
Her brother’s best friend.<br>
|
||||||
|
Her neighbor.<br>
|
||||||
|
Her savior and her downfall.<br>
|
||||||
|
|
||||||
|
Theirs is a love that was never supposed to happen—but when it does, it unleashes secrets that could destroy them both…and everything they hold dear.
|
||||||
|
<br>
|
||||||
|
<a href="http://changbin.borec.cz/Zadanie/stiahnuť (6).jpg"
|
||||||
|
download="stiahnuť (6).jpg">Alex & Ava</a>
|
||||||
|
|
||||||
|
<br><br><br><br></p>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<h3 style="font-size: 2.5vw">Twisted games</h3><br>
|
||||||
|
|
||||||
|
|
||||||
|
<img class="img1" src="https://th.bing.com/th/id/OIP.tXZuJbTn2NOIql15JhbHFgHaLo?w=600&h=943&rs=1&pid=ImgDetMain" style="width:300px;">
|
||||||
|
<p><b>She can never be his...but he's taking her anyway.</b><br>
|
||||||
|
|
||||||
|
Stoic, broody, and arrogant, elite bodyguard Rhys Larsen has two rules: <br>
|
||||||
|
1) Protect his clients at all costs <br>
|
||||||
|
2) Do not become emotionally involved. Ever.<br>
|
||||||
|
|
||||||
|
He has never once been tempted to break those rules…until her.<br>
|
||||||
|
|
||||||
|
Bridget von Ascheberg. A princess with a stubborn streak that matches his own and a hidden fire that reduces his rules to ash. She’s nothing he expected and everything he never knew he needed.
|
||||||
|
<br>
|
||||||
|
Day by day, inch by inch, she breaks down his defenses until he’s faced with a truth he can no longer deny: he swore an oath to protect her, but all he wants is to ruin her. Take her.
|
||||||
|
<br>
|
||||||
|
Because she’s his.<br>
|
||||||
|
|
||||||
|
His princess.<br>
|
||||||
|
His forbidden fruit.<br>
|
||||||
|
His every depraved fantasy.<br>
|
||||||
|
|
||||||
|
***
|
||||||
|
<br>
|
||||||
|
Regal, strong-willed, and bound by the chains of duty, Princess Bridget dreams of the freedom to live and love as she chooses.<br>
|
||||||
|
|
||||||
|
But when her brother abdicates, she’s suddenly faced with the prospect of a loveless, politically expedient marriage and a throne she never wanted.<br>
|
||||||
|
|
||||||
|
And as she navigates the intricacies—and treacheries—of her new role, she must also hide her desire for a man she can’t have.<br>
|
||||||
|
|
||||||
|
Her bodyguard.<br>
|
||||||
|
Her protector.<br>
|
||||||
|
Her ultimate ruin.<br>
|
||||||
|
|
||||||
|
Unexpected and forbidden, theirs is a love that could destroy a kingdom…and doom them both.<br>
|
||||||
|
<a href="http://changbin.borec.cz/Zadanie/stiahnuť (5).jpg"
|
||||||
|
download="stiahnuť (5).jpg">Rhys & Bridget</a>
|
||||||
|
<br><br></p>
|
||||||
|
|
||||||
|
<h3 style="font-size: 2.5vw">Twisted hate</h3><br>
|
||||||
|
|
||||||
|
<img class="img1" src="https://th.bing.com/th/id/R.ff019a94ba86e49428ace3eca420dd99?rik=YafZgfdwqjPZgQ&riu=http%3a%2f%2fprodimage.images-bn.com%2fpimages%2f9781728274881_p0_v4_s1200x630.jpg&ehk=bnnKLO%2fNrOmPTDQNgPyhaauL5615WAkUsOdjel9empE%3d&risl=&pid=ImgRaw&r=0" style="width:300px;">
|
||||||
|
<p><b>He hates her...almost as much as he wants her.</b><br>
|
||||||
|
|
||||||
|
Gorgeous, cocky, and fast on his way to becoming a hotshot doctor, Josh Chen has never met a woman he couldn’t charm—except for Jules f**king Ambrose.<br>
|
||||||
|
|
||||||
|
The beautiful redhead has been a thorn in his side since they met, but she also consumes his thoughts in a way no woman ever has.<br>
|
||||||
|
|
||||||
|
When their animosity explodes into one unforgettable night, he proposes a solution that’ll get her out of his system once and for all: an enemies with benefits arrangement with simple rules.
|
||||||
|
<br>
|
||||||
|
No jealousy.<br>
|
||||||
|
|
||||||
|
No strings attached.<br>
|
||||||
|
|
||||||
|
And absolutely no falling in love.<br>
|
||||||
|
|
||||||
|
**<br>
|
||||||
|
|
||||||
|
Outgoing and ambitious, Jules Ambrose is a former party girl who’s focused on one thing: passing the attorney’s bar exam.<br>
|
||||||
|
|
||||||
|
The last thing she needs is to get involved with a doctor who puts the SUFFER in insufferable…no matter how good-looking he is.<br>
|
||||||
|
|
||||||
|
But the more she gets to know him, the more she realizes there’s more than meets the eye to the man she’s hated for so long.<br>
|
||||||
|
|
||||||
|
Her best friend’s brother.<br>
|
||||||
|
|
||||||
|
Her nemesis.<br>
|
||||||
|
|
||||||
|
And her only salvation.<br>
|
||||||
|
|
||||||
|
|
||||||
|
Theirs is a match made in hell, and when the demons from their past catch up with them, they’re faced with truths that could either save them …or destroy everything they’ve worked for.<br>
|
||||||
|
<a href="http://changbin.borec.cz/Zadanie/Josh & Jules - Twisted Hate.jpg"
|
||||||
|
download="Josh & Jules - Twisted Hate.jpg">Josh & Jules</a></p>
|
||||||
|
|
||||||
|
|
||||||
|
<br><br><br><br>
|
||||||
|
<h3 style="font-size: 2.5vw">Twisted lies</h3><br>
|
||||||
|
|
||||||
|
<img class="img1" src="https://rukminim1.flixcart.com/image/832/832/xif0q/regionalbooks/v/n/c/twisted-lies-paperback-twisted-book-4-original-imaggghbwhwwbpp8.jpeg?q=70" style="width:300px;">
|
||||||
|
<p><b>He'll do anything to have her...including lie.</b><br>
|
||||||
|
|
||||||
|
Charming, deadly, and smart enough to hide it, Christian Harper is a monster dressed in the perfectly tailored suits of a gentleman.<br>
|
||||||
|
|
||||||
|
He has little use for morals and even less use for love, but he can’t deny the strange pull he feels toward the woman living just one floor below him.<br>
|
||||||
|
|
||||||
|
She’s the object of his darkest desires, the only puzzle he can’t solve. And when the opportunity to get closer to her arises, he breaks his own rules to offer her a deal she can’t refuse.
|
||||||
|
<br>
|
||||||
|
Every monster has their weakness. She’s his.<br>
|
||||||
|
|
||||||
|
His obsession.<br>
|
||||||
|
His addiction.<br>
|
||||||
|
His only exception.<br>
|
||||||
|
|
||||||
|
**<br>
|
||||||
|
|
||||||
|
Sweet, shy, and introverted despite her social media fame, Stella Alonso is a romantic who keeps her heart in a cage.<br>
|
||||||
|
|
||||||
|
Between her two jobs, she has little time or desire for a relationship.<br>
|
||||||
|
|
||||||
|
But when a threat from her past drives her into the arms—and house—of the most dangerous man she’s ever met, she’s tempted to let herself feel something for the first time in a long time.
|
||||||
|
<br>
|
||||||
|
Because despite Christian’s cold nature, he makes her feel everything when she’s with him.<br>
|
||||||
|
|
||||||
|
Passionate.<br>
|
||||||
|
Protected.<br>
|
||||||
|
Truly wanted.<br>
|
||||||
|
|
||||||
|
Theirs is a love twisted with secrets and tainted by lies…and when the truths are finally revealed, they could shatter everything.<br>
|
||||||
|
<a href="http://changbin.borec.cz/Zadanie/Stella & Christian - Twisted Lies.jpg"
|
||||||
|
download="Stella & Christian - Twisted Lies.jpg">Christian & Stella</a>
|
||||||
|
</p>
|
||||||
|
<!-- <div class="tenor-gif-embed" data-postid="17008207" data-share-method="host" data-aspect-ratio="1.49533" data-width="100%"><a href="https://tenor.com/view/the-sword-in-the-stone-disney-classic-books-gif-17008207">The Sword In The Stone Disney GIF</a>from <a href="https://tenor.com/search/the+sword+in+the+stone-gifs">The Sword In The Stone GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js">
|
||||||
|
--></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function rozlisenie()
|
||||||
|
{
|
||||||
|
winwidth=document.all?document.body.clientWidth:window.innerWidth;
|
||||||
|
winHeight=document.all?document.body.clientHeight:window.innerHeight;
|
||||||
|
alert(winwidth+"px, "+winHeight+" px");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer><br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
BIN
cat.gif
Normal file
BIN
cat.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
269
colleenhooveer.html
Normal file
269
colleenhooveer.html
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
<!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="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">
|
||||||
|
<link rel='stylesheet' id='site' href='http://changbin.borec.cz/druhy_polrok/javascript.css'
|
||||||
|
='text/css' media='all' />
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body style="background-color: rgb(83, 129, 83);">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-left: 0px;
|
||||||
|
overflow:auto;
|
||||||
|
display:block;
|
||||||
|
padding: 50px;
|
||||||
|
font-size: 21px;
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:8vw">Colleen Hooveer</h3>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<!-- <article>
|
||||||
|
<h1>Is booktok a good thing?</h1>
|
||||||
|
<p>Some of the positives of interacting with Booktok include easily finding recommendations for new books to check out and learn more about different authors. It also creates a community of people who love to read and that is 1000% a good thing, no doubts there.</p>
|
||||||
|
<h1>How do I get BookTok?</h1>
|
||||||
|
<p>Anyone with the TikTok app can be part of BookTok. Simply search for BookTok users or hashtags you like, then follow and interact with their content. You don’t even need a book-related account to be a part of BookTok.</p>
|
||||||
|
<h1>Why is BookTok so popular?</h1>
|
||||||
|
<p>BookTok is popular because it offers book lovers a chance to connect with like-minded readers and discuss their favorite literature. It also provides book recommendations from other users, allowing readers to discover new books and authors they may not have known about before.</p>
|
||||||
|
<h1>What is the most popular BookTok?</h1>
|
||||||
|
<p>The most popular BookTok account is @aymansbooks, which has over 892K followers! Ayman’s account combines bookish humor, book reviews, recommendations, hauls, tags, and more. It’s a great book-lovers haven!</p>
|
||||||
|
<h1>Top BookTok creators in 2023</h1>
|
||||||
|
<p>The rise of BookTok has taken the publishing industry by storm over the past few years, with influencers inspiring book lovers of all ages to pick up a book.
|
||||||
|
|
||||||
|
</article>-->
|
||||||
|
<section>
|
||||||
|
<article style="font-family: Times new Rowan; padding: 50px;" >
|
||||||
|
<h3 style="font-size: 2.5vw">It ends with us</h3><br>
|
||||||
|
<img class="img1" src="https://th.bing.com/th/id/OIP.IHhme5H7siHzNjuQcMCWMAHaLg?rs=1&pid=ImgDetMain" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Sometimes it is the one who loves you who hurts you the most.<br>
|
||||||
|
|
||||||
|
Lily hasn’t always had it easy, but that’s never stopped her from working hard for the life she wants. She’s come a long way from the small town in Maine where she grew up — she graduated from college, moved to Boston, and started her own business. So when she feels a spark with a gorgeous neurosurgeon named Ryle Kincaid, everything in Lily’s life suddenly seems almost too good to be true.
|
||||||
|
<br><br>
|
||||||
|
Ryle is assertive, stubborn, maybe even a little arrogant. He’s also sensitive, brilliant, and has a total soft spot for Lily. And the way he looks in scrubs certainly doesn’t hurt. Lily can’t get him out of her head. But Ryle’s complete aversion to relationships is disturbing. Even as Lily finds herself becoming the exception to his “no dating” rule, she can’t help but wonder what made him that way in the first place.
|
||||||
|
<br><br>
|
||||||
|
As questions about her new relationship overwhelm her, so do thoughts of Atlas Corrigan — her first love and a link to the past she left behind. He was her kindred spirit, her protector. When Atlas suddenly reappears, everything Lily has built with Ryle is threatened.
|
||||||
|
<br>
|
||||||
|
</p>
|
||||||
|
<h3 style="font-size: 2.5vw">It starts with us</h3><br>
|
||||||
|
<img class="img1" src="https://d28hgpri8am2if.cloudfront.net/book_images/onix/cvr9781668001226/it-starts-with-us-9781668001226_xlg.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Lily and her ex-husband, Ryle, have just settled into a civil coparenting rhythm when she suddenly bumps into her first love, Atlas, again. After nearly two years separated, she is elated that for once, time is on their side, and she immediately says yes when Atlas asks her on a date.
|
||||||
|
<br><br>
|
||||||
|
But her excitement is quickly hampered by the knowledge that, though they are no longer married, Ryle is still very much a part of her life—and Atlas Corrigan is the one man he will hate being in his ex-wife and daughter’s life.
|
||||||
|
<br><br>
|
||||||
|
Switching between the perspectives of Lily and Atlas, It Starts with Us picks up right where the epilogue for the “gripping, pulse-pounding” (Sarah Pekkanen, author of Perfect Neighbors) bestselling phenomenon It Ends with Us left off. Revealing more about Atlas’s past and following Lily as she embraces a second chance at true love while navigating a jealous ex-husband, it proves that “no one delivers an emotional read like Colleen Hoover” (Anna Todd, New York Times bestselling author).
|
||||||
|
<br><br><br><br><br></p>
|
||||||
|
<h3 style="font-size: 2.5vw">Verity</h3><br>
|
||||||
|
<img class="img1" src="https://i0.wp.com/www.thenerddaily.com/wp-content/uploads/2019/01/Verity-by-Colleen-Hoover.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Lowen Ashleigh is a struggling writer on the brink of financial ruin when she accepts the job offer of a lifetime. Jeremy Crawford, husband of bestselling author Verity Crawford, has hired Lowen to complete the remaining books in a successful series his injured wife is unable to finish.
|
||||||
|
<br><br>
|
||||||
|
Lowen arrives at the Crawford home, ready to sort through years of Verity's notes and outlines, hoping to find enough material to get her started. What Lowen doesn't expect to uncover in the chaotic office is an unfinished autobiography Verity never intended for anyone to read. Page after page of bone-chilling admissions, including Verity's recollection of what really happened the day her daughter died.
|
||||||
|
<br><br>
|
||||||
|
Lowen decides to keep the manuscript hidden from Jeremy, knowing its contents would devastate the already grieving father. But as Lowen's feelings for Jeremy begin to intensify, she recognizes all the ways she could benefit if he were to read his wife's words. After all, no matter how devoted Jeremy is to his injured wife, a truth this horrifying would make it impossible for him to continue to love her.
|
||||||
|
<br><br><br><br>
|
||||||
|
</p>
|
||||||
|
<h3 style="font-size: 2.5vw">Layla</h3><br>
|
||||||
|
<img class="img1" src="https://th.bing.com/th/id/OIP.8Ghqro-whDrOklZyLwJY6AHaLH?rs=1&pid=ImgDetMain" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
When Leeds meets Layla, he’s convinced he’ll spend the rest of his life with her—until an unexpected attack leaves Layla fighting for her life. After weeks in the hospital, Layla recovers physically, but the emotional and mental scarring has altered the woman Leeds fell in love with. In order to put their relationship back on track, Leeds whisks Layla away to the bed-and-breakfast where they first met. Once they arrive, Layla’s behavior takes a bizarre turn. And that’s just one of many inexplicable occurrences.
|
||||||
|
<br><br>
|
||||||
|
Feeling distant from Layla, Leeds soon finds solace in Willow—another guest of the B&B with whom he forms a connection through their shared concerns. As his curiosity for Willow grows, his decision to help her find answers puts him in direct conflict with Layla’s well-being. Leeds soon realizes he has to make a choice because he can’t help both of them. But if he makes the wrong choice, it could be detrimental for all of them.
|
||||||
|
<br><br><br><br><br><br></p>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function rozlisenie()
|
||||||
|
{
|
||||||
|
winwidth=document.all?document.body.clientWidth:window.innerWidth;
|
||||||
|
winHeight=document.all?document.body.clientHeight:window.innerHeight;
|
||||||
|
alert(winwidth+"px, "+winHeight+" px");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<!--bft
|
||||||
|
<div class="tenor-gif-embed" data-postid="5888687" data-share-method="host" data-aspect-ratio="1.78571" data-width="100%"><a href="https://tenor.com/view/archer-slap-gif-5888687">Archer Slap GIF</a>from <a href="https://tenor.com/search/archer-gifs">Archer GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
https://tenor.com/sk/view/archer-slap-gif-5888687
|
||||||
|
<div class="tenor-gif-embed" data-postid="10410407" data-share-method="host" data-aspect-ratio="0.940171" data-width="100%"><a href="https://tenor.com/view/the-grinch-hate-hate-hate-double-hate-gif-10410407">The Grinch Hate Hate Hate Double Hate GIF</a>from <a href="https://tenor.com/search/the+grinch-gifs">The Grinch GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
<div class="tenor-gif-embed" data-postid="9354260969384676221" data-share-method="host" data-aspect-ratio="1" data-width="100%"><a href="https://tenor.com/view/reaction-hot-twitch-streamer-curls-gif-9354260969384676221">Reaction Hot GIF</a>from <a href="https://tenor.com/search/reaction-gifs">Reaction GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
<div class="tenor-gif-embed" data-postid="14669780" data-share-method="host" data-aspect-ratio="1.77778" data-width="100%"><a href="https://tenor.com/view/study-freak-books-estudiantsudg-univgirona-gif-14669780">Study Freak GIF</a>from <a href="https://tenor.com/search/study-gifs">Study GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer><br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
150
dm.js
Normal file
150
dm.js
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
wzFloatAd = function() {
|
||||||
|
|
||||||
|
this.style = {
|
||||||
|
// container: 'width: 728px; height: 90px; position: fixed; bottom: 5px; left: calc(50% - 364px); background: rgba(0, 0, 0, 0.9); color: #fff; border-radius: 5px;',
|
||||||
|
container: 'width: 663px; height: 140px; bottom: 5px; position: fixed; background: rgba(0, 0, 0, 0.9); color: #fff; border-radius: 5px; z-index:101;',
|
||||||
|
// closeBtn: 'font-family: Arial,Tahoma,sans-serif; cursor: pointer; position: fixed; left: calc(50% + 339px); bottom: 65px; color: #fff;'
|
||||||
|
closeBtn: 'font-family: Arial,Tahoma,sans-serif; font-size: 20px; text-decoration: none; font-weight: bold; cursor: pointer; position: absolute;left: 645px; margin-top: 5px; color: #fff; z-index: 1005;',
|
||||||
|
|
||||||
|
text: 'background: #EFEFEF; color: #454554; font-size: 11px; line-height: 12px; text-align: center;'
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setCookie = function (name,value,seconds) {
|
||||||
|
var expires = "";
|
||||||
|
if (seconds) {
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(date.getTime() + (seconds*1000));
|
||||||
|
expires = "; expires=" + date.toUTCString();
|
||||||
|
}
|
||||||
|
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
||||||
|
};
|
||||||
|
|
||||||
|
this.getCookie = function (name) {
|
||||||
|
var nameEQ = name + "=";
|
||||||
|
var ca = document.cookie.split(';');
|
||||||
|
for(var i=0;i < ca.length;i++) {
|
||||||
|
var c = ca[i];
|
||||||
|
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
||||||
|
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
this.eraseCookie = function (name) {
|
||||||
|
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
_this = this;
|
||||||
|
|
||||||
|
this.getElement = function() {
|
||||||
|
return _this.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.show = function() {
|
||||||
|
_this.getElement().style.display = 'block';
|
||||||
|
}
|
||||||
|
this.hide = function() {
|
||||||
|
_this.getElement().style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onClose = function() {
|
||||||
|
_this.hide();
|
||||||
|
_this.setCookie('floatAdClosed', 1, 180);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onAdLoad = function(event) {
|
||||||
|
let xhr = event.target;
|
||||||
|
// _this.contentElement.innerHTML = xhr.responseText.replace('assetsWZ', 'assets');
|
||||||
|
let ad = JSON.parse(xhr.responseText);
|
||||||
|
if (ad.code) {
|
||||||
|
_this.contentElement.innerHTML = ad.code;
|
||||||
|
}
|
||||||
|
if (ad.width) {
|
||||||
|
_this.contentElement.style.width = ad.width + 'px';
|
||||||
|
_this.element.style.width = ad.width + 'px';
|
||||||
|
_this.defaultWidth = ad.width;
|
||||||
|
}
|
||||||
|
if (ad.height) {
|
||||||
|
_this.contentElement.style.height = ad.height + 'px';
|
||||||
|
_this.element.style.height = 'auto';
|
||||||
|
_this.defaultHeight = ad.height
|
||||||
|
}
|
||||||
|
this.matchWindow();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.matchWindow = function() {
|
||||||
|
const viewportW = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
|
||||||
|
const docW = document.body.clientWidth * 10;
|
||||||
|
const vw = Math.min(viewportW, docW);
|
||||||
|
|
||||||
|
var floatAd = _this.getElement();
|
||||||
|
|
||||||
|
var dw = _this.defaultWidth;
|
||||||
|
var dh = _this.defaultHeight;
|
||||||
|
|
||||||
|
var multip = Math.min(vw / dw, 1);
|
||||||
|
var targetWidth = Math.round(dw * multip);
|
||||||
|
|
||||||
|
// floatAd.style.width = targetWidth + 'px';
|
||||||
|
// floatAd.style.height = Math.round(dh * multip) + 'px';
|
||||||
|
floatAd.style.left = Math.max(Math.round((vw - dw) / 2), 0) + 'px';
|
||||||
|
_this.closeBtn.style.left = (targetWidth - 18) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.render = function() {
|
||||||
|
var floatAd = document.createElement("div");
|
||||||
|
floatAd.setAttribute('style', this.style.container);
|
||||||
|
|
||||||
|
var floatAdContent = document.createElement("div");
|
||||||
|
floatAdContent.setAttribute('style', 'height:140px;');
|
||||||
|
floatAdContent.innerHTML = 'loading...';
|
||||||
|
|
||||||
|
var oReq = new XMLHttpRequest();
|
||||||
|
oReq.addEventListener("load", (event) => { this.onAdLoad(event); });
|
||||||
|
oReq.open("GET", "/assetsWZ/static/generatedad.php");
|
||||||
|
oReq.send();
|
||||||
|
|
||||||
|
|
||||||
|
var floatAdBtn = document.createElement("a");
|
||||||
|
floatAdBtn.setAttribute('style', this.style.closeBtn);
|
||||||
|
floatAdBtn.innerHTML = '×';
|
||||||
|
floatAdBtn.addEventListener('click', this.onClose)
|
||||||
|
floatAd.appendChild(floatAdBtn);
|
||||||
|
|
||||||
|
floatAd.appendChild(floatAdContent)
|
||||||
|
|
||||||
|
|
||||||
|
var textAd = document.createElement("div");
|
||||||
|
textAd.setAttribute('style', this.style.text);
|
||||||
|
// textAd.innerHTML = 'Tuto reklamu zobrazuje <a href="https://www.webzdarma.cz">Webzdarma.cz</a> na webech, které poskytuje zdarma. Chcete web bez reklam? → Přejděte na <a href="https://www.webzdarma.cz/hosting/" title="zaklad">Základ</a>.';
|
||||||
|
textAd.innerHTML = 'Tuto reklamu zobrazuje <a href="https://www.webzdarma.cz?utm_source=banner&utm_medium=referral&utm_campaign=bottombar">Webzdarma.cz</a> na webech, ktere poskytuje zdarma. Chcete web bez reklam? <a href="https://www.webzdarma.cz/hosting/?utm_source=banner&utm_medium=referral&utm_campaign=bottombar" target="_blank"" title="zaklad">Aktivujte si Zaklad</a>.';
|
||||||
|
floatAd.appendChild(textAd);
|
||||||
|
|
||||||
|
this.element = document.body.appendChild(floatAd);
|
||||||
|
this.contentElement = floatAdContent;
|
||||||
|
this.closeBtn = floatAdBtn;
|
||||||
|
|
||||||
|
this.defaultWidth = parseInt(floatAd.style.width.replace('px', ''));
|
||||||
|
this.defaultHeight = parseInt(floatAd.style.height.replace('px', '')) + 12; //12 je text
|
||||||
|
|
||||||
|
this.matchWindow();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
window.addEventListener("resize", this.matchWindow);
|
||||||
|
|
||||||
|
if (this.getCookie('floatAdClosed')) {
|
||||||
|
this.hide();
|
||||||
|
} else {
|
||||||
|
this.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
wzFloatAd();
|
||||||
280
ellekennedy.html
Normal file
280
ellekennedy.html
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
<!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="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">
|
||||||
|
<link rel='stylesheet' id='site' href='http://changbin.borec.cz/druhy_polrok/javascript.css'
|
||||||
|
='text/css' media='all' />
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body style="background-color: rgb(83, 129, 83);">
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-left: 0px;
|
||||||
|
overflow:auto;
|
||||||
|
display:block;
|
||||||
|
padding: 50px;
|
||||||
|
font-size: 20px;
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:8vw">Elle Kennedy</h3>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<article style="font-family: Times new Rowan; padding: 50px;" >
|
||||||
|
<h2 style="font-size: 3vw">Off-Campus series</h2>
|
||||||
|
<h3 style="font-size: 2.5vw">The deal</h3><br>
|
||||||
|
<img class="img1" src="https://images.squarespace-cdn.com/content/v1/5f15d73f54cb7b786d0b4036/1700593458472-6CLD09486MHAUVOTH2UB/The+Deal+ILLUSTRATED.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
She's about to make a deal with the college bad boy...<br>
|
||||||
|
<br>
|
||||||
|
Hannah Wells has finally found someone who turns her on. But while she might be confident in every other area of her life, she's carting around a full set of baggage when it comes to sex and seduction. If she wants to get her crush's attention, she'll have to step out of her comfort zone and make him take notice...even if it means tutoring the annoying, childish, cocky captain of the hockey team in exchange for a pretend date. ...and it's going to be oh so good All Garrett Graham has ever wanted is to play professional hockey after graduation, but his plummeting GPA is threatening everything he's worked so hard for.
|
||||||
|
<br><br>
|
||||||
|
If helping a sarcastic brunette make another guy jealous will help him secure his position on the team, he's all for it.
|
||||||
|
<br>
|
||||||
|
But when one unexpected kiss leads to the wildest sex of both their lives, it doesn't take long for Garrett to realize that pretend isn't going to cut it.
|
||||||
|
<br>
|
||||||
|
Now he just has to convince Hannah that the man she wants looks a lot like him.<br><br><br><br><br>
|
||||||
|
</p>
|
||||||
|
<h3 style="font-size: 2.5vw">The Mistake</h3><br>
|
||||||
|
<img class="img1" src="https://images.squarespace-cdn.com/content/v1/5f15d73f54cb7b786d0b4036/1700593568990-XEP2SQ90UG9XBWKPOG6D/The+Mistake+ILLUSTRATED.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
He's a player in more ways than one…<br><br>
|
||||||
|
College junior John Logan can get any girl he wants. For this hockey star, life is a parade of parties and hook-ups, but behind his killer grins and easygoing charm, he hides growing despair about the dead-end road he'll be forced to walk after graduation.
|
||||||
|
<br>
|
||||||
|
A sexy encounter with freshman Grace Ivers is just the distraction he needs, but when a thoughtless mistake pushes her away, Logan plans to spend his final year proving to her that he's worth a second chance.
|
||||||
|
<br><br>
|
||||||
|
Now he's going to need to up his game… After a less than stellar freshman year, Grace is back at Briar University, older, wiser, and so over the arrogant hockey player she nearly handed her V-card to. She's not a charity case, and she's not the quiet butterfly she was when they first hooked up.
|
||||||
|
<br>
|
||||||
|
If Logan expects her to roll over and beg like all his other puck bunnies, he can think again.
|
||||||
|
<br>
|
||||||
|
He wants her back?
|
||||||
|
<br>
|
||||||
|
He'll have to work for it.
|
||||||
|
<br>
|
||||||
|
This time around, she'll be the one in the driver's seat…and she plans on driving him wild.<br><br><br>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 style="font-size: 2.5vw">The Score</h3><br>
|
||||||
|
<img class="img1" src="https://natashaisabookjunkie.com/wp-content/uploads/The-Score_new-2.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
He knows how to score, on and off the ice...
|
||||||
|
<br><br>
|
||||||
|
Allie Hayes is in crisis mode. With graduation looming, she still doesn’t have the first clue about what she's going to do after college. To make matters worse, she’s nursing a broken heart thanks to the end of her longtime relationship. Wild rebound sex is definitely not the solution to her problems, but gorgeous hockey star Dean Di Laurentis is impossible to resist. Just once, though, because even if her future is uncertain, it sure as heck won’t include the king of one-night stands.
|
||||||
|
<br><br>
|
||||||
|
It’ll take more than flashy moves to win her over...
|
||||||
|
<br><br>
|
||||||
|
Dean always gets what he wants. Girls, grades, girls, recognition, girls…he’s a ladies man, all right, and he’s yet to meet a woman who’s immune to his charms. Until Allie. For one night, the feisty blonde rocked his entire world—and now she wants to be friends? Nope. It’s not over until he says it’s over. Dean is in full-on pursuit, but when life-rocking changes strike, he starts to wonder if maybe it’s time to stop focusing on scoring…and shoot for love.
|
||||||
|
<br><br><br>
|
||||||
|
</p>
|
||||||
|
<h3 style="font-size: 2.5vw">The Goal</h3><br>
|
||||||
|
<img class="img1" src="https://images.squarespace-cdn.com/content/v1/5f15d73f54cb7b786d0b4036/1700593598766-AOB7V1F70TI0E95JOQKE/The+Goal+ILLUSTRATED.jpg?format=1000w" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
She’s good at achieving her goals…
|
||||||
|
<br><br>
|
||||||
|
College senior Sabrina James has her whole future planned out: graduate from college, kick butt in law school, and land a high-paying job at a cutthroat firm. Her path to escaping her shameful past certainly doesn’t include a gorgeous hockey player who believes in love at first sight. One night of sizzling heat and surprising tenderness is all she’s willing to give John Tucker, but sometimes, one night is all it takes for your entire life to change.
|
||||||
|
<br><br>
|
||||||
|
But the game just got a whole lot more complicated
|
||||||
|
<br><br>
|
||||||
|
Tucker believes being a team player is as important as being the star. On the ice, he’s fine staying out of the spotlight, but when it comes to becoming a daddy at the age of twenty-two, he refuses to be a bench warmer. It doesn’t hurt that the soon-to-be mother of his child is beautiful, whip-smart, and keeps him on his toes. The problem is, Sabrina’s heart is locked up tight, and the fiery brunette is too stubborn to accept his help. If he wants a life with the woman of his dreams, he’ll have to convince her that some goals can only be made with an assist.
|
||||||
|
<br><br> </p>
|
||||||
|
<h3 style="font-size: 2.5vw">The Legacy</h3><br>
|
||||||
|
<img class="img1" src="https://images.squarespace-cdn.com/content/v1/5f15d73f54cb7b786d0b4036/1700593505307-7BKP1T01A1L3DL6SWDVA/The+Legacy+ILLUSTRATED.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Four stories. Four couples. Three years of real life after graduation…
|
||||||
|
<br><br>
|
||||||
|
A wedding.<br>
|
||||||
|
A proposal.<br>
|
||||||
|
An elopement.<br>
|
||||||
|
And a surprise pregnancy.<br><br>
|
||||||
|
|
||||||
|
Can you guess which couple is which?<br>
|
||||||
|
|
||||||
|
Come for the drama, stay for the laughs! Catch up with your favorite Off-Campus characters as they navigate the changes that come with growing up and discover that big decisions can have big consequences…and big rewards.
|
||||||
|
<br><br><br><br><br></p>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function rozlisenie()
|
||||||
|
{
|
||||||
|
winwidth=document.all?document.body.clientWidth:window.innerWidth;
|
||||||
|
winHeight=document.all?document.body.clientHeight:window.innerHeight;
|
||||||
|
alert(winwidth+"px, "+winHeight+" px");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<footer><br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
252
fantasy.html
Normal file
252
fantasy.html
Normal file
@ -0,0 +1,252 @@
|
|||||||
|
<!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="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">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body style="background-color: rgb(83, 129, 83);">
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-left: 0px;
|
||||||
|
overflow:auto;
|
||||||
|
display:block;
|
||||||
|
padding: 50px;
|
||||||
|
font-size: 23px;
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:7vw">Fantasy books</h3>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<article style="font-family: Times new Rowan; padding: 50px;" >
|
||||||
|
|
||||||
|
<h4 style="font-size: 3vw">ACOTAR series</h4>
|
||||||
|
<h3 style="font-size: 2.5vw">A Court of Thrones and Roses</h3>
|
||||||
|
|
||||||
|
<img class="img1" src="https://i5.walmartimages.com/asr/e1d13ac0-c959-43c3-bbf7-66b3c6541458.6652eee902b0f67ef62bbfe55850feb6.jpeg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
When nineteen-year-old huntress Feyre kills a wolf in the woods, a terrifying creature arrives to demand retribution. Dragged to a treacherous magical land she knows about only from legends, Feyre discovers that her captor is not truly a beast, but one of the lethal, immortal faeries who once ruled her world.
|
||||||
|
<br><br>
|
||||||
|
At least, he’s not a beast all the time.
|
||||||
|
<br><br>
|
||||||
|
As she adapts to her new home, her feelings for the faerie, Tamlin, transform from icy hostility into a fiery passion that burns through every lie she’s been told about the beautiful, dangerous world of the Fae. But something is not right in the faerie lands. An ancient, wicked shadow is growing, and Feyre must find a way to stop it, or doom Tamlin—and his world—forever.
|
||||||
|
<br><br><br> <br><br><br> </p>
|
||||||
|
|
||||||
|
<h3 style="font-size: 2.5vw">A Court of Mist and Fury</h3>
|
||||||
|
|
||||||
|
<img class="img1" src="https://i5.walmartimages.com/asr/0789bb9e-6e94-4024-bd09-88b4d9ec58f3.d068f9a1609132e2d8d45f92300d44b5.jpeg"style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Feyre has undergone more trials than one human woman can carry in her heart. Though she's now been granted the powers and lifespan of the High Fae, she is haunted by her time Under the Mountain and the terrible deeds she performed to save the lives of Tamlin and his people.
|
||||||
|
<br><br>
|
||||||
|
As her marriage to Tamlin approaches, Feyre's hollowness and nightmares consume her.
|
||||||
|
<br>She finds herself split into two different one who upholds her bargain with Rhysand, High Lord of the feared Night Court, and one who lives out her life in the Spring Court with Tamlin.
|
||||||
|
<br><br>While Feyre navigates a dark web of politics, passion, and dazzling power, a greater evil looms. She might just be the key to stopping it, but only if she can harness her harrowing gifts, heal her fractured soul, and decide how she wishes to shape her future-and the future of a world in turmoil.
|
||||||
|
<br><br><br>
|
||||||
|
|
||||||
|
<br><br> </p>
|
||||||
|
<h3 style="font-size: 2.5vw">A Court of Wings and Ruin</h3>
|
||||||
|
|
||||||
|
<img class="img1" src="https://th.bing.com/th/id/OIP.j0w1S0HfzeDSzAr8NgIPiQHaLZ?rs=1&pid=ImgDetMain"style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Feyre has returned to the Spring Court, determined to gather information on Tamlin's actions and learn what she can about the invading king threatening to bring her land to its knees. But to do so she must play a deadly game of deceit. One slip could bring doom not only for Feyre, but for everything-and everyone-she holds dear.
|
||||||
|
<br><br>
|
||||||
|
As war bears down upon them all, Feyre endeavors to take her place amongst the High Fae of the land, balancing her struggle to master her powers-both magical and political-and her love for her court and family. Amidst these struggles, Feyre and Rhysand must decide whom to trust amongst the cunning and lethal High Lords, and hunt for allies in unexpected places.
|
||||||
|
<br><br><br><br><br><br><br></p>
|
||||||
|
|
||||||
|
<h3 style="font-size: 2.5vw">A Court of Frost and Starlight</h3>
|
||||||
|
|
||||||
|
<img class="img1" src="https://images.thenile.io/r1000/9781526617187.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Feyre, Rhysand, and their friends are still busy rebuilding the Night Court and the vastly altered world beyond, recovering from the war that changed everything. But Winter Solstice is finally approaching, and with it, the joy of a hard-earned reprieve.
|
||||||
|
<br><br>
|
||||||
|
Yet even the festive atmosphere can't keep the shadows of the past from looming. As Feyre navigates her first Winter Solstice as High Lady, her concern for those dearest to her deepens. They have more wounds than she anticipated-scars that will have a far-reaching impact on the future of their court.
|
||||||
|
<br><br><br><br><br><br><br><br>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 style="font-size: 2.5vw">A Court of Silver Flames</h3>
|
||||||
|
|
||||||
|
<img class="img1" src="https://static.fnac-static.com/multimedia/Images/FR/NR/59/e7/d5/14018393/1507-1/tsp20220711110138/A-Court-of-Silver-Flames.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Nesta Archeron has always been prickly-proud, swift to anger, and slow to forgive. And ever since being forced into the Cauldron and becoming High Fae against her will, she's struggled to find a place for herself within the strange, deadly world she inhabits. Worse, she can't seem to move past the horrors of the war with Hybern and all she lost in it.
|
||||||
|
<br><br>
|
||||||
|
The one person who ignites her temper more than any other is Cassian, the battle-scarred warrior whose position in Rhysand and Feyre's Night Court keeps him constantly in Nesta's orbit. But her temper isn't the only thing Cassian ignites. The fire between them is undeniable, and only burns hotter as they are forced into close quarters with each other.
|
||||||
|
<br><br>
|
||||||
|
Meanwhile, the treacherous human queens who returned to the Continent during the last war have forged a dangerous new alliance, threatening the fragile peace that has settled over the realms. And the key to halting them might very well rely on Cassian and Nesta facing their haunting pasts.
|
||||||
|
<br><br>
|
||||||
|
Against the sweeping backdrop of a world seared by war and plagued with uncertainty, Nesta and Cassian battle monsters from within and without as they search for acceptance-and healing-in each other's arms.
|
||||||
|
<br> </p>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<footer><br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
81
formular.css
Normal file
81
formular.css
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
/*======================FORMULÁR======================================================================================================*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: rgb(115, 144, 114);
|
||||||
|
padding: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#druhy input[type=text] , #druhy input[type=number],
|
||||||
|
#druhy input[type=email], #druhy input[type=tel],
|
||||||
|
#druhy input[type=checkbox]
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
padding: 30px 20px;
|
||||||
|
margin: 8px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid rgb(50, 80, 50);
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
color: rgb(50, 80, 50);
|
||||||
|
font-family: Calibri;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#druhy input[type=text]:focus,
|
||||||
|
#druhy input[type=number]:focus,
|
||||||
|
#druhy input[type=email]:focus,
|
||||||
|
#druhy input[type=tel]:focus
|
||||||
|
|
||||||
|
{
|
||||||
|
background-color: rgb(50, 80, 50);
|
||||||
|
border: 2px solid rgb(210, 227, 200);
|
||||||
|
font-family: Arial;
|
||||||
|
width: 100%;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#druhy input[type=submit],
|
||||||
|
#druhy input[type=button]
|
||||||
|
|
||||||
|
{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
color: rgb(50, 80, 50);
|
||||||
|
padding: 16px 32px;
|
||||||
|
margin: 4px 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#treti input[type=text]
|
||||||
|
{
|
||||||
|
width: 180px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: #ff9bd0;
|
||||||
|
padding: 12px 20px 12px 50px;
|
||||||
|
transition: width 1.4s ease-in-out;
|
||||||
|
}
|
||||||
|
#treti input[type=text]:focus
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
background-color: #de78ae;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=============================================================================================================================*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
248
formular.html
Normal file
248
formular.html
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
<!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>
|
||||||
197
gif.html
Normal file
197
gif.html
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
<!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="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">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body style="background-color: rgb(83, 129, 83);">
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:8vw">GIFs</h3>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<br><br><br><br>https://tenor.com/sk/view/book-bookmeme-reader-gif-12922468
|
||||||
|
<div class="tenor-gif-embed" data-postid="15885952942087025629" data-share-method="host" data-aspect-ratio="1" data-width="100%"><a href="https://tenor.com/view/books-book-reading-booklover-bookstagram-gif-15885952942087025629">Books Reading GIF</a>from <a href="https://tenor.com/search/books-gifs">Books GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
<div class="tenor-gif-embed" data-postid="12922468" data-share-method="host" data-aspect-ratio="1.3587" data-width="100%"><a href="https://tenor.com/view/book-bookmeme-reader-gif-12922468">Book Bookmeme GIF</a>from <a href="https://tenor.com/search/book-gifs">Book GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
<div class="tenor-gif-embed" data-postid="10674954" data-share-method="host" data-aspect-ratio="1.36" data-width="100%"><a href="https://tenor.com/view/spongebob-thinking-reading-book-work-glasses-gif-10674954">Spongebob Thinking GIF</a>from <a href="https://tenor.com/search/spongebob-gifs">Spongebob GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
<div class="tenor-gif-embed" data-postid="12033367" data-share-method="host" data-aspect-ratio="0.73494" data-width="100%"><a href="https://tenor.com/view/read-book-study-funny-standing-on-one-foot-gif-12033367">看书 学习 搞笑 金鸡独立 GIF</a>from <a href="https://tenor.com/search/read+book-gifs">Read Book GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
<div class="tenor-gif-embed" data-postid="7530000" data-share-method="host" data-aspect-ratio="1.785" data-width="100%"><a href="https://tenor.com/view/frantic-studying-reading-exams-exams-week-gif-7530000">Frantic Reading GIF</a>from <a href="https://tenor.com/search/frantic-gifs">Frantic GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
<a href="http://changbin.borec.cz/Zadanie/cat.gif"
|
||||||
|
download="cat.gif">stiahni gif</a><hr>
|
||||||
|
|
||||||
|
<br><br><br><br>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer><br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
|
|
||||||
420
h1css.css
Normal file
420
h1css.css
Normal file
@ -0,0 +1,420 @@
|
|||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
border: 5px dotted rgb(22, 48, 32);
|
||||||
|
background-color: rgb(115, 144, 114);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
height: 200px;
|
||||||
|
width: 200px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.obsah{
|
||||||
|
font-family: Times new Rowan;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 400px;
|
||||||
|
padding-right: 100px;
|
||||||
|
}
|
||||||
|
/* Style the header */
|
||||||
|
header {
|
||||||
|
background-color:rgb(48, 77, 48);
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 50px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
height: 200px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create two columns/boxes that floats next to each other */
|
||||||
|
nav {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
/* height: 300px; only for demonstration, should be removed */
|
||||||
|
background:rgb(115, 144, 114);
|
||||||
|
padding: 10px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the list inside the menu */
|
||||||
|
nav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
nav ul li :hover{
|
||||||
|
color:rgb(210, 227, 200);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
/*linky formatovanie*/
|
||||||
|
a:link {
|
||||||
|
color: rgb(48, 77, 48);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: rgb(48, 77, 48);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: yellow;
|
||||||
|
background-color: transparent;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container box{
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
article{
|
||||||
|
padding: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
article {
|
||||||
|
|
||||||
|
/*float: left;*/
|
||||||
|
padding: 50px;
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clear floats after the columns */
|
||||||
|
section::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
.responsive {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 421px;
|
||||||
|
max-height: 638px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the footer */
|
||||||
|
footer {
|
||||||
|
background-color: rgb(48, 77, 48);
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
font-size: 1.5vw
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
|
||||||
|
/* @media (max-width: 600px) {
|
||||||
|
nav, article {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#tabulka2, #tabulka2 th, #tabulka2 td
|
||||||
|
{
|
||||||
|
border: 2px solid black;
|
||||||
|
border-collapse: collapse;
|
||||||
|
color:rgb(48, 77, 48);
|
||||||
|
height: 50px;
|
||||||
|
max-width: max-content;
|
||||||
|
border-top-width: 3px;
|
||||||
|
border-right-width: 3px;
|
||||||
|
border-bottom-width: 3px;
|
||||||
|
border-left-width: 3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
/* CLASS zapisujeme v css znakom . */
|
||||||
|
.podfarbenie tr
|
||||||
|
{
|
||||||
|
background-color: rgb(159, 190, 142);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a {
|
||||||
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
padding: 14px 16px;
|
||||||
|
background-color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover, .dropdown:hover .dropbtn {
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgb(98, 143, 102);
|
||||||
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content a:hover {
|
||||||
|
background-color:rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.text{
|
||||||
|
font-size: 2vw;
|
||||||
|
}
|
||||||
|
.odkazy{
|
||||||
|
font-size: 1.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img1{
|
||||||
|
border: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 2000px){
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*============================================*/
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 780px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
header{
|
||||||
|
height: 130px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
all and (max-width: 600px) {
|
||||||
|
#header {
|
||||||
|
flex-flow: column wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header .flex-item{
|
||||||
|
padding: 4px;
|
||||||
|
margin: 2px;
|
||||||
|
line-height: 0px;
|
||||||
|
height: 25px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav a:not(:first-child), .dropdown .dropbtn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.topnav a.icon {
|
||||||
|
float: right;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container_menu{
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav.responsive {position: relative;}
|
||||||
|
.topnav.responsive a.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.responsive{
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 780px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
height: 200px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.article{
|
||||||
|
padding-right: 50px;
|
||||||
|
padding-left: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1350px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
height: 260px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1700px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
height: 400px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 2500px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
height: 450px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
399
hcss.css
Normal file
399
hcss.css
Normal file
@ -0,0 +1,399 @@
|
|||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
border: 5px dotted rgb(22, 48, 32);
|
||||||
|
background-color: rgb(115, 144, 114);
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
height: 200px;
|
||||||
|
width: 200px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Style the header */
|
||||||
|
header {
|
||||||
|
background-color:rgb(48, 77, 48);
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 50px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
height: 200px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create two columns/boxes that floats next to each other */
|
||||||
|
nav {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
/* height: 300px; only for demonstration, should be removed */
|
||||||
|
background:rgb(115, 144, 114);
|
||||||
|
padding: 10px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the list inside the menu */
|
||||||
|
nav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
nav ul li :hover{
|
||||||
|
color:rgb(210, 227, 200);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
/*linky formatovanie*/
|
||||||
|
a:link {
|
||||||
|
color: rgb(48, 77, 48);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: rgb(48, 77, 48);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: yellow;
|
||||||
|
background-color: transparent;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container box{
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
article {
|
||||||
|
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
/* height: 300px; only for demonstration, should be removed */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clear floats after the columns */
|
||||||
|
section::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the footer */
|
||||||
|
footer {
|
||||||
|
background-color: rgb(48, 77, 48);
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
font-size: 1.5vw
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
|
||||||
|
/* @media (max-width: 600px) {
|
||||||
|
nav, article {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#tabulka2, #tabulka2 th, #tabulka2 td
|
||||||
|
{
|
||||||
|
border: 2px solid black;
|
||||||
|
border-collapse: collapse;
|
||||||
|
color:rgb(48, 77, 48);
|
||||||
|
height: 50px;
|
||||||
|
max-width: max-content;
|
||||||
|
border-top-width: 3px;
|
||||||
|
border-right-width: 3px;
|
||||||
|
border-bottom-width: 3px;
|
||||||
|
border-left-width: 3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
/* CLASS zapisujeme v css znakom . */
|
||||||
|
.podfarbenie tr
|
||||||
|
{
|
||||||
|
background-color: rgb(159, 190, 142);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a {
|
||||||
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
padding: 14px 16px;
|
||||||
|
background-color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover, .dropdown:hover .dropbtn {
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgb(98, 143, 102);
|
||||||
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content a:hover {
|
||||||
|
background-color:rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.text{
|
||||||
|
font-size: 2vw;
|
||||||
|
}
|
||||||
|
.odkazy{
|
||||||
|
font-size: 1.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
@media screen and (max-width: 2000px){
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
height: 130px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
all and (max-width: 600px) {
|
||||||
|
#header {
|
||||||
|
flex-flow: column wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header .flex-item{
|
||||||
|
padding: 4px;
|
||||||
|
margin: 2px;
|
||||||
|
line-height: 0px;
|
||||||
|
height: 25px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav a:not(:first-child), .dropdown .dropbtn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.topnav a.icon {
|
||||||
|
float: right;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container_menu{
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav.responsive {position: relative;}
|
||||||
|
.topnav.responsive a.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.responsive{
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 900px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
height: 200px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.article{
|
||||||
|
padding-right: 50px;
|
||||||
|
padding-left: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1350px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
height: 260px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1700px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
height: 400px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 2500px ) {
|
||||||
|
body{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
height: 450px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
285
home.html
Normal file
285
home.html
Normal file
@ -0,0 +1,285 @@
|
|||||||
|
<!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="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);">
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin:0;font-family:Arial
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1 style="font-family: Times new Rowan; font-size:8vw">Booktok</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="odkazy">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Romance</a></li>
|
||||||
|
<li><a href="#">Fantasy</a></li>
|
||||||
|
<li><a href="#">Sci-fi</a></li>
|
||||||
|
<li><a href="#">Horor</a></li>
|
||||||
|
</ul></div>
|
||||||
|
</nav>
|
||||||
|
<article style="color: rgb(22, 48, 32); padding: 50px; font-family: Times new Rowan;" >
|
||||||
|
<h1 style="font-size:5vw">Valentine’s Day</h1>
|
||||||
|
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
For dedicated book readers, Valentine’s Day always brings to mind a specific book genre. No, not horror; we’re talking about romance! In honor of the impending holiday, we decided to pose a simple but interesting question: What are the most popular recent romance books among Goodreads regulars—let’s say, books published in the past three years?</p>
|
||||||
|
|
||||||
|
<p>Well, we crunched the numbers, and the results are below. For this collection, we determined overall popularity based on the books that Goodreads members have put on their Read and Want to Read shelves. (For book series that had multiple titles in the top 100, we included only the book with the most shelvings.)</p>
|
||||||
|
|
||||||
|
<p>Veteran romance readers will note the undeniable influence of BookTok here (Hi, Colleen! Hi, Emily! Hi, Rebecca!), as well as the encouraging presence of quite a few self-published romances. And if you click around for a bit, you’ll notice a strong showing from recent popular subgenres like dark romance, sports romance, and romantasy.</p>
|
||||||
|
|
||||||
|
<p>Speaking of subgenres, keep in mind that this list represents mass member interest on Goodreads. So if your favorite niche or beloved trope is underrepresented, or you feel too overwhelmed to know where to start here, pop on over to our curated romance recommendations article. Or check out the reading groups on Goodreads, wherein your irrepressible fellow Goodreaders get super-specific with their reading recommendations and lists.</p>
|
||||||
|
|
||||||
|
<p>Meanwhile, click on the cover images below for more details about each book, add any good leads to your Want to Read shelf, and feel free to swap further recommendations for books to love in the comments section below.</p>
|
||||||
|
<h1>Is booktok a good thing?</h1>
|
||||||
|
<p>Some of the positives of interacting with Booktok include easily finding recommendations for new books to check out and learn more about different authors. It also creates a community of people who love to read and that is 1000% a good thing, no doubts there.</p>
|
||||||
|
<!-- <div style="border: 5px dotted rgb(22, 48, 32);
|
||||||
|
background-color:rgb(115, 144, 114)">
|
||||||
|
|
||||||
|
<img alt="Obrazok" src="obrazok.jpg" type="image/x-icon" style="vertical-align: middle;" width="100px" height="100px">
|
||||||
|
<img alt="Obrazok" src="obrazok2.jpg" type="image/x-icon" style="vertical-align: middle;" width="100px" height="100px">
|
||||||
|
<img alt="Obrazok" src="obrazok4.jpg" type="image/x-icon" style="vertical-align: middle;" width="100px" height="100px">
|
||||||
|
<img alt="Obrazok" src="obrazok5.jpg" type="image/x-icon" style="vertical-align: middle;" width="100px" height="100px">
|
||||||
|
<img alt="Obrazok" src="obrazok6.jpg" type="image/x-icon" style="vertical-align: middle;" width="100px" height="100px">
|
||||||
|
-->
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<!-- <div class="container">
|
||||||
|
<div class="box" id="box1"><img alt="Obrazok" src="obrazok.jpg" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
<div class="box" id="box2"><img alt="Obrazok" src="obrazok2.jpg" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
<div class="box" id="box3"><img alt="Obrazok" src="obrazok3.jpg" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
<div class="box" id="box4"><img alt="Obrazok" src="obrazok4.jpg" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
<div class="box" id="box5"><img alt="Obrazok" src="obrazok5.jpg" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
<div class="box" id="box6"><img alt="Obrazok" src="obrazok6.jpg" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
<div class="box" id="box7"><img alt="Obrazok" src="obrazok7.jpg" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
<div class="box" id="box8"><img alt="Obrazok" src="obrazok8.jpg" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
<div class="box" id="box9"><img alt="Obrazok" src="obrazok9.jpg" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://www.tiktok.com/tag/booktok">
|
||||||
|
<div class="box" id="box10"><img alt="Obrazok" src="https://th.bing.com/th/id/OIP.GYw_apdwgxDLBoS2R9K2YwHaEM?w=305&h=180&c=7&r=0&o=5&cb=11&pid=1.7" type="image/x-icon" style="vertical-align: middle;" ></div>
|
||||||
|
</a>-->
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<p>Obrazok a odkaz:
|
||||||
|
<a href="https://www.google.com/">
|
||||||
|
<img alt="obrázok" title="logo adlerka"
|
||||||
|
style="vertical-align: middle;"
|
||||||
|
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRI2Q-vZMY4cI9vjsoo8BMKJZmauyb0NBo-sLfroPMrtA&s"
|
||||||
|
width="100px" height="100px">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<a href="https://www.tiktok.com/tag/booktok">
|
||||||
|
<div class="box" id="box10"><img alt="Obrazok" src="https://th.bing.com/th/id/OIP.GYw_apdwgxDLBoS2R9K2YwHaEM?w=305&h=180&c=7&r=0&o=5&cb=11&pid=1.7" type="image/x-icon" style="vertical-align: middle;" width="150px" height="150px"></div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<p>Odkazy na selciu v ramci dokumentu:
|
||||||
|
<a href="#section2"><img alt="obrazok"
|
||||||
|
title="logo adlerka"
|
||||||
|
style="vertical-align: middle;"
|
||||||
|
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRI2Q-vZMY4cI9vjsoo8BMKJZmauyb0NBo-sLfroPMrtA&s"
|
||||||
|
width="100px" height="100px">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Odkazy:
|
||||||
|
<hr>
|
||||||
|
<a href="https://s1.papyruspub.com/files/demos/products/ebooks/novels/romance/Ana-Huang/Twisted/Preview-Twisted-Love-by-Ana-Huang.pdf"
|
||||||
|
download="Preview-Twisted-Love-by-Ana-Huang.pdf">download book</a><hr>
|
||||||
|
<a href="http://changbin.borec.cz/3racha.jpg"
|
||||||
|
download="3racha.jpg">stiahni jpg</a><hr>
|
||||||
|
<a href="http://changbin.borec.cz/macka.docx"
|
||||||
|
download="">stiahni docx</a><hr>
|
||||||
|
<a href="http://changbin.borec.cz/bts.gif"
|
||||||
|
download="bts.gif">stiahni gif</a><hr>
|
||||||
|
<a href="http://changbin.borec.cz/sample.xml"
|
||||||
|
download="sample.xml">stiahni xml</a><hr>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
239
horror.html
Normal file
239
horror.html
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
<!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="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">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body style="background-color: rgb(83, 129, 83);">
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-left: 0px;
|
||||||
|
overflow:auto;
|
||||||
|
display:block;
|
||||||
|
padding: 50px;
|
||||||
|
font-size: 28px;
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:7.5vw">Horror books</h3>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<article style="font-family: Times new Rowan; padding: 50px;" >
|
||||||
|
<h3 style="font-size: 3.5vw">Stephen King
|
||||||
|
</h3>
|
||||||
|
<h3 style="font-size: 2.5vw">IT</h3>
|
||||||
|
|
||||||
|
<img class="img1" src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1334416842i/830502.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Welcome to Derry, Maine ...
|
||||||
|
<br><br>
|
||||||
|
It’s a small city, a place as hauntingly familiar as your own hometown. Only in Derry the haunting is real ...
|
||||||
|
<br><br>
|
||||||
|
They were seven teenagers when they first stumbled upon the horror. Now they are grown-up men and women who have gone out into the big world to gain success and happiness. But none of them can withstand the force that has drawn them back to Derry to face the nightmare without an end, and the evil without a name.
|
||||||
|
<br><br><br> <br> </p>
|
||||||
|
<h3 style="font-size: 2.5vw">Pet Sematary</h3>
|
||||||
|
<img class="img1" src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1399440710i/22047048.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
When the Creeds move into a beautiful old house in rural Maine, it all seems too good to be true: physician father, beautiful wife, charming little daughter, adorable infant son—and now an idyllic home. As a family, they’ve got it all…right down to the friendly cat.
|
||||||
|
<br><br>
|
||||||
|
But the nearby woods hide a blood-chilling truth—more terrifying than death itself...and hideously more powerful.
|
||||||
|
<br><br>
|
||||||
|
The Creeds are going to learn that sometimes dead is better.<br><br><br><br>
|
||||||
|
</p>
|
||||||
|
<h3 style="font-size: 2.5vw">Misery</h3>
|
||||||
|
<img class="img1" src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1553526700i/44589581.jpg" style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Novelist Paul Sheldon has plans to make the difficult transition from writing historical romances featuring heroine Misery Chastain to publishing literary fiction. Annie Wilkes, Sheldon's number one fan, rescues the author from the scene of a car accident. The former nurse takes care of him in her remote house, but becomes irate when she discovers that the author has killed Misery off in his latest book. Annie keeps Sheldon prisoner while forcing him to write a book that brings Misery back to life.
|
||||||
|
<br><br><br><br><br><br><br></p>
|
||||||
|
<h3 style="font-size: 2.5vw">The Shining</h3>
|
||||||
|
<img class="img1" src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1353277730i/11588.jpg" style="width:300px;">
|
||||||
|
<p>Jack Torrance's new job at the Overlook Hotel is the perfect chance for a fresh start. As the off-season caretaker at the atmospheric old hotel, he'll have plenty of time to spend reconnecting with his family and working on his writing. But as the harsh winter weather sets in, the idyllic location feels ever more remote...and more sinister. And the only one to notice the strange and terrible forces gathering around the Overlook is Danny Torrance, a uniquely gifted five-year-old. </p>
|
||||||
|
<br><br><br><br><br></article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function rozlisenie()
|
||||||
|
{
|
||||||
|
winwidth=document.all?document.body.clientWidth:window.innerWidth;
|
||||||
|
winHeight=document.all?document.body.clientHeight:window.innerHeight;
|
||||||
|
alert(winwidth+"px, "+winHeight+" px");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer><br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
BIN
icon.jpg
Normal file
BIN
icon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
9
javascript.css
Normal file
9
javascript.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/* Use a media query to add a break point at 800px: */
|
||||||
|
@media screen and (max-width:50em)
|
||||||
|
{
|
||||||
|
.img1
|
||||||
|
{
|
||||||
|
width: 50% !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
84
javascript.html
Normal file
84
javascript.html
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel='stylesheet' id='site' href='http://changbin.borec.cz/druhy_polrok/javascript.css'
|
||||||
|
='text/css' media='all' />
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
|
||||||
|
</script>
|
||||||
|
background-color:rgb(115, 144, 114);
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
$("#hide").click(function(){
|
||||||
|
$("p").hide();
|
||||||
|
});
|
||||||
|
$("#show").click(function(){
|
||||||
|
$("p").show();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
var farba;
|
||||||
|
$(document).ready(function(){
|
||||||
|
$("#button2").click(function(){
|
||||||
|
$(".img1").css("border-color", "rgb(115, 144, 114)");
|
||||||
|
$("#container1").css("border-color", "rgb(115, 144, 114)");
|
||||||
|
farba = "purple";
|
||||||
|
alert(farba);
|
||||||
|
//alert($(".img1").css("border-left-color"));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>1</h1>
|
||||||
|
|
||||||
|
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
|
||||||
|
Click me to display Date and Time.</button>
|
||||||
|
|
||||||
|
<p id="demo"></p>
|
||||||
|
|
||||||
|
|
||||||
|
<h1>2</h1>
|
||||||
|
<p id="demo1">JavaScript can change the style of an HTML element.</p>
|
||||||
|
<script>
|
||||||
|
function myFunction() {
|
||||||
|
document.getElementById("demo1").style.fontSize = "25px";
|
||||||
|
document.getElementById("demo1").style.color = "red";
|
||||||
|
document.getElementById("demo1").style.backgroundColor = "yellow";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button type="button" onclick="myFunction()">Click Me!</button>
|
||||||
|
|
||||||
|
|
||||||
|
<h1>3</h1>
|
||||||
|
|
||||||
|
<button id="hide">Hide</button>
|
||||||
|
<button id="show">Show</button>
|
||||||
|
|
||||||
|
<p>This is a paragraph with little content.</p>
|
||||||
|
<p>This is another small paragraph.</p>
|
||||||
|
|
||||||
|
<p>https://www.w3schools.com/jquery/</p>
|
||||||
|
<p>https://www.w3schools.com/html/html_scripts.asp</p>
|
||||||
|
|
||||||
|
<h1>4</h1>
|
||||||
|
|
||||||
|
<img class="img1" src="https://th.bing.com/th/id/OIP.Ipthu4QkznRjxH4oSQaPiwHaLE?rs=1&pid=ImgDetMain" style="width:300px;">
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function rozlisenie()
|
||||||
|
{
|
||||||
|
winwidth=document.all?document.body.clientWidth:window.innerWidth;
|
||||||
|
winHeight=document.all?document.body.clientHeight:window.innerHeight;
|
||||||
|
alert(winwidth+"px, "+winHeight+" px");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button id="button2">Zmen farbu</button>
|
||||||
|
<button onclick="rozlisenie()" id="button1">Rozlisenie</button>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
281
romance.html
Normal file
281
romance.html
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
<!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="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">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body style="background-color: rgb(83, 129, 83);">
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-left: 0px;
|
||||||
|
overflow:auto;
|
||||||
|
display:block;
|
||||||
|
padding: 50px;
|
||||||
|
font-size: 20px;
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:7.5vw">Romance books</h3>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<article style="font-family: Times new Rowan; padding: 50px;" >
|
||||||
|
<br><br><br><br>
|
||||||
|
<h3 style="font-size: 2.5vw">Archer's voice</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<img class="img1" src="https://th.bing.com/th/id/R.65b1a541680d3511f6267dc6b2189148?rik=TqaFwpL8Ttb1IQ&riu=http%3a%2f%2fprodimage.images-bn.com%2fpimages%2f9781538727355_p0_v3_s1200x630.jpg&ehk=%2b8ZMMoHp60nJ8Zeo9xpgnhGOvRCBB6vUCJGTUEdZSBI%3d&risl=&pid=ImgRaw&r=0"
|
||||||
|
style="width:300px;">
|
||||||
|
<p>
|
||||||
|
When Bree Prescott arrives in the sleepy, lakeside town of Pelion, Maine, she hopes against hope that this is the place where she will finally find the peace she so desperately seeks. On her first day there, her life collides with Archer Hale, an isolated man who holds a secret agony of his own. A man no one else sees.
|
||||||
|
<br><br>
|
||||||
|
Archer's Voice is the story of a woman chained to the memory of one horrifying night and the man whose love is the key to her freedom.
|
||||||
|
<br><br>It is the story of a silent man who lives with an excruciating wound and the woman who helps him find his voice.
|
||||||
|
<br><br>It is the story of suffering, fate, and the transformative power of love.
|
||||||
|
<br><br> <br><br><br><br><br> <br></p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h3 style="font-size: 2.5vw">A milion kisses in your lifetime</h3>
|
||||||
|
|
||||||
|
<img class="img1" src="https://www.bruna.nl/images/active/carrousel/fullsize/9781405955560_front.jpg"
|
||||||
|
style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Wren Beaumont is many things.<br><br>
|
||||||
|
|
||||||
|
Beautiful.<br>
|
||||||
|
Smart.<br>
|
||||||
|
Sweet.<br>
|
||||||
|
Innocent.<br>
|
||||||
|
<br>
|
||||||
|
At Lancaster Prep, the girls love her. They all want to be her friend. Only I see Wren for who she really is.
|
||||||
|
<br>
|
||||||
|
A repressed little virgin who keeps her feelings locked up so tight she’s probably close to bursting. She thinks she’s above us all.
|
||||||
|
<br>
|
||||||
|
Even me.
|
||||||
|
<br>
|
||||||
|
I shouldn’t be drawn to her. She’s not my type.
|
||||||
|
<br>
|
||||||
|
Until we’re forced to work together in class and realize we might have more things in common than we originally thought. Soon enough I find myself completely obsessed. I will do anything for this girl to make her fall in love with me.
|
||||||
|
<br><br>
|
||||||
|
Anything.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 style="font-size: 2.5vw">Icebreaker</h3>
|
||||||
|
|
||||||
|
<img class="img1" src="https://th.bing.com/th/id/OIP.qw4Yt7J89u6V7K8zqx54pQHaLd?rs=1&pid=ImgDetMain"
|
||||||
|
style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Anastasia Allen has worked her entire life for a shot at Team USA. It looks like everything is going according to plan when she gets a full scholarship to the University of California, Maple Hills and lands a place on their competitive figure skating team.
|
||||||
|
<br><br>
|
||||||
|
Nothing will stand in her way, not even the captain of the hockey team, Nate Hawkins.
|
||||||
|
<br><br>
|
||||||
|
Nate’s focus as team captain is on keeping his team on the ice. Which is tricky when a facilities mishap means they are forced to share a rink with the figure skating team—including Anastasia, who clearly can’t stand him.
|
||||||
|
<br>
|
||||||
|
But when Anastasia’s skating partner faces an uncertain future, she may have to look to Nate to take her shot.
|
||||||
|
<br><br>
|
||||||
|
Sparks fly, but Anastasia isn’t worried… because she could never like a hockey player, right?<br><br><br><br><br><br>
|
||||||
|
</p>
|
||||||
|
<h3 style="font-size: 2.5vw">The Fine print</h3>
|
||||||
|
|
||||||
|
<img class="img1" src="https://images.thalia.media/07/-/85dc8f5ceaa84d7cadd7e1cbbc30038b/the-fine-print-taschenbuch-lauren-asher-englisch.jpeg"
|
||||||
|
style="width:300px;">
|
||||||
|
<p>
|
||||||
|
Rowan<br>
|
||||||
|
I'm in the business of creating fairy tales.<br>
|
||||||
|
Theme parks. Production companies. Five-star hotels.<br>
|
||||||
|
Everything could be all mine if I renovated Dreamland.<br>
|
||||||
|
My initial idea of hiring Zahra was good in theory, but then I kissed her.<br>
|
||||||
|
Things spiraled out of control once I texted her using an alias.<br>
|
||||||
|
By the time I realized where I went wrong, it was too late.<br>
|
||||||
|
People like me don't get happy endings.<br>
|
||||||
|
Not when we're destined to ruin them.<br>
|
||||||
|
<br>
|
||||||
|
Zahra
|
||||||
|
After submitting a drunk proposal criticizing Dreamland's most expensive ride, I should have been fired.<br>
|
||||||
|
Instead, Rowan Kane offered me a dream job.<br>
|
||||||
|
The catch? I had to work for the most difficult boss I'd ever met.<br>
|
||||||
|
Rowan was rude and completely off-limits, but my heart didn't care.<br>
|
||||||
|
At least not until I discovered his secret.<br>
|
||||||
|
It was time to teach the billionaire that money couldn't fix everything.<br>
|
||||||
|
Especially not us.<br>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<footer><br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
195
scifi.html
Normal file
195
scifi.html
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
<!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="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">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body style="background-color: rgb(83, 129, 83);">
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-left: 0px;
|
||||||
|
overflow:auto;
|
||||||
|
display:block;
|
||||||
|
padding: 50px;
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:7.5vw">Sci-fi books</h3>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<br><br><br><br>...<br><br><br><br>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer><br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
BIN
stiahnuť (5).jpg
Normal file
BIN
stiahnuť (5).jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
stiahnuť (6).jpg
Normal file
BIN
stiahnuť (6).jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
264
stranka.css
Normal file
264
stranka.css
Normal file
@ -0,0 +1,264 @@
|
|||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
border: 5px dotted rgb(22, 48, 32);
|
||||||
|
background-color:rgb(115, 144, 114);
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
height: 110px;
|
||||||
|
width: 110px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Style the header */
|
||||||
|
header {
|
||||||
|
background-color:rgb(48, 77, 48);
|
||||||
|
padding: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 50px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
height: 200px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create two columns/boxes that floats next to each other */
|
||||||
|
nav {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
/* height: 300px; only for demonstration, should be removed */
|
||||||
|
background:rgb(115, 144, 114);
|
||||||
|
padding: 20px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the list inside the menu */
|
||||||
|
nav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
nav ul li :hover{
|
||||||
|
color:rgb(210, 227, 200);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
/*linky formatovanie*/
|
||||||
|
a:link {
|
||||||
|
color: rgb(48, 77, 48);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: rgb(48, 77, 48);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: yellow;
|
||||||
|
background-color: transparent;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
article {
|
||||||
|
float: left;
|
||||||
|
padding: 50px;
|
||||||
|
width: 100%;
|
||||||
|
background-color:rgb(210, 227, 200);
|
||||||
|
/* height: 300px; only for demonstration, should be removed */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clear floats after the columns */
|
||||||
|
section::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the footer */
|
||||||
|
footer {
|
||||||
|
background-color: rgb(48, 77, 48);
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
nav, article {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#tabulka2, #tabulka2 th, #tabulka2 td
|
||||||
|
{
|
||||||
|
border: 2px solid black;
|
||||||
|
border-collapse: collapse;
|
||||||
|
color:rgb(48, 77, 48);
|
||||||
|
height: 50px;
|
||||||
|
max-width: max-content;
|
||||||
|
border-top-width: 3px;
|
||||||
|
border-right-width: 3px;
|
||||||
|
border-bottom-width: 3px;
|
||||||
|
border-left-width: 3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
/* CLASS zapisujeme v css znakom . */
|
||||||
|
.podfarbenie tr
|
||||||
|
{
|
||||||
|
background-color: rgb(159, 190, 142);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
.podfarbenie tr {
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
#tabulka2 {
|
||||||
|
border-color: rgb(79, 111, 82);
|
||||||
|
border: solid 20px;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
display: table-row;
|
||||||
|
vertical-align: inherit;
|
||||||
|
border-color: inherit;
|
||||||
|
border-top-color: ;
|
||||||
|
border-right-color: ;
|
||||||
|
border-bottom-color: ;
|
||||||
|
border-left-color: ;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: separate;
|
||||||
|
text-indent: initial;
|
||||||
|
border-spacing: 2px;
|
||||||
|
-webkit-border-horizontal-spacing: ;
|
||||||
|
-webkit-border-vertical-spacing: ;
|
||||||
|
}
|
||||||
|
#tabulka2, #tabulka2 th, #tabulka2 td {
|
||||||
|
border: 1px solid black;
|
||||||
|
border-top-width: 1px;
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-right-style: solid;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-top-color: rgb(163, 31, 31);
|
||||||
|
border-right-color: rgb(73, 183, 81);
|
||||||
|
border-bottom-color: rgb(111, 41, 177);
|
||||||
|
border-left-color: rgb(215, 16, 149);
|
||||||
|
border-image-source: initial;
|
||||||
|
border-image-slice: initial;
|
||||||
|
border-image-width: initial;
|
||||||
|
border-image-outset: initial;
|
||||||
|
border-image-repeat: initial;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a {
|
||||||
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown .dropbtn {
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
padding: 14px 16px;
|
||||||
|
background-color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover, .dropdown:hover .dropbtn {
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgb(98, 143, 102);
|
||||||
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content a:hover {
|
||||||
|
background-color:rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
184
tabulka.html
Normal file
184
tabulka.html
Normal file
@ -0,0 +1,184 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="sk">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Tabulky</title>
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="http://changbin.borec.cz/h1css.css">
|
||||||
|
</head>
|
||||||
|
<body><style>#tabulka3, #tabulka3 th, #tabulka3 td
|
||||||
|
{
|
||||||
|
border: 2px solid rgb(48, 77, 48);
|
||||||
|
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabulka3 tbody
|
||||||
|
{
|
||||||
|
border : 4px solid rgb(48, 77, 48);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pofarbenie2 tr:nth-child(even)
|
||||||
|
{
|
||||||
|
background-color: rgb(115, 144, 114);
|
||||||
|
}
|
||||||
|
.podfarbenie2 tr:nth-child(odd)
|
||||||
|
{
|
||||||
|
background-color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.podfarbenie2 th
|
||||||
|
{
|
||||||
|
background-color: rgb(48, 77, 48);
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
.podfarbenie2 tr:hover
|
||||||
|
{
|
||||||
|
text-align: right;
|
||||||
|
background-color: rgb(70, 100, 70) !important;
|
||||||
|
color: rgb(210, 227, 200) !important;
|
||||||
|
transition-duration: 1s;
|
||||||
|
transition-timing-function:linear;
|
||||||
|
transition-delay: 0.3s;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table border="5px" id="tabulka3" class="podfarbenie2">
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<th><b></b></th>
|
||||||
|
<th><b>Name</b></th>
|
||||||
|
<th><b>Profession</b></th>
|
||||||
|
<th><b>Age</b></th>
|
||||||
|
<th><b>Book</b></th>
|
||||||
|
<th><b>Trophe</b></th>
|
||||||
|
<th><b>Soulmate</b></th>
|
||||||
|
<th><b>Height</b></th>
|
||||||
|
<th><b>Hair</b></th>
|
||||||
|
<th><b>Eyes</b></th>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>1</b></td>
|
||||||
|
<td>Alex Volkov</td>
|
||||||
|
<td>Businessman</td>
|
||||||
|
<td>26</td>
|
||||||
|
<td>Twisted Love</td>
|
||||||
|
<td>grupmy X sushine</td>
|
||||||
|
<td>Ava Chen</td>
|
||||||
|
<td>6'3</td>
|
||||||
|
<td>Light brown</td>
|
||||||
|
<td>Light jade green</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>2</b></td>
|
||||||
|
<td>Rhys Larsen</td>
|
||||||
|
<td>Bodyguard</td>
|
||||||
|
<td>31</td>
|
||||||
|
<td>Twisted Games</td>
|
||||||
|
<td>princess X bodyguard</td>
|
||||||
|
<td>Bridget von Ascheberg</td>
|
||||||
|
<td>6'5</td>
|
||||||
|
<td>Dark</td>
|
||||||
|
<td>Grey</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>3</b></td>
|
||||||
|
<td>Dante Russo</td>
|
||||||
|
<td>Head of jewellery empire</td>
|
||||||
|
<td>36-37</td>
|
||||||
|
<td>King of Wrath</td>
|
||||||
|
<td>arranged marriage</td>
|
||||||
|
<td>Vivian Lau</td>
|
||||||
|
<td>6'7</td>
|
||||||
|
<td>Black</td>
|
||||||
|
<td>Black</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>4</b></td>
|
||||||
|
<td>Zade Meadows</td>
|
||||||
|
<td>Z Organization</td>
|
||||||
|
<td>32</td>
|
||||||
|
<td>Haunting Adeline</td>
|
||||||
|
<td>stalker romance</td>
|
||||||
|
<td>Adeline Rielly </td>
|
||||||
|
<td>6'6</td>
|
||||||
|
<td>Black</td>
|
||||||
|
<td>Heterochromia</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>5</b></td>
|
||||||
|
<td>Nathan Hawkins</td>
|
||||||
|
<td>hockey player</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>Icebreaker</td>
|
||||||
|
<td>hockey player X ice skater</td>
|
||||||
|
<td>Anastasia Allen</td>
|
||||||
|
<td>6'4</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>6</b></td>
|
||||||
|
<td>Russ Callaghan</td>
|
||||||
|
<td>NCAA hockey player</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>Wildfire</td>
|
||||||
|
<td>hockey romance</td>
|
||||||
|
<td>Aurora Roberts</td>
|
||||||
|
<td>6'5</td>
|
||||||
|
<td>Light Brown</td>
|
||||||
|
<td>Blue</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>7</b></td>
|
||||||
|
<td>Rowan Kane</td>
|
||||||
|
<td>CEO of Dreamland</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>The Fine Print</td>
|
||||||
|
<td>boss X employe</td>
|
||||||
|
<td>Zahra Gulian</td>
|
||||||
|
<td>6'3</td>
|
||||||
|
<td>Dark brown</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>8</b></td>
|
||||||
|
<td>Atlas Corrigan</td>
|
||||||
|
<td>Restaurant owner</td>
|
||||||
|
<td>28-29</td>
|
||||||
|
<td>It Ends With Us</td>
|
||||||
|
<td>childhood friends romance</td>
|
||||||
|
<td>Lily Bloom</td>
|
||||||
|
<td>6'2</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
<td>Blue</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>9</b></td>
|
||||||
|
<td>Christian Harper</td>
|
||||||
|
<td>CEO of Harper Security</td>
|
||||||
|
<td>34</td>
|
||||||
|
<td>Twisted Lies</td>
|
||||||
|
<td>fake dating</td>
|
||||||
|
<td>Stella Alonso</td>
|
||||||
|
<td>6'4</td>
|
||||||
|
<td>Dark</td>
|
||||||
|
<td>Whiskey</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>10</b></td>
|
||||||
|
<td>Garrett Graham</td>
|
||||||
|
<td>Former NHL player for The Boston Bruins</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>The Deal</td>
|
||||||
|
<td>sports romance</td>
|
||||||
|
<td>Hannah Wells</td>
|
||||||
|
<td>6'3</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
<td>Grey</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
509
topbooks.html
Normal file
509
topbooks.html
Normal file
@ -0,0 +1,509 @@
|
|||||||
|
<!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="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">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body style="background-color: rgb(83, 129, 83);">
|
||||||
|
<style>
|
||||||
|
body {margin:0;font-family:Arial}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(9, 56, 27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:7.5vw">TOP books</h3>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<br><br><br><br>
|
||||||
|
<hr>
|
||||||
|
<!--<ul type="1" start="1">
|
||||||
|
<li>Yellowface by R. F. Kuang</li>
|
||||||
|
<li>Tea</li>
|
||||||
|
<li>Happy place by Emily Henry</li>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tea</li>
|
||||||
|
<li>Milk</li>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tea</li>
|
||||||
|
<li>Milk</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
|
||||||
|
<ul>ROMANCE</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Black tea</li>
|
||||||
|
<ol type="a" start="1">
|
||||||
|
<li>Black tea</li>
|
||||||
|
<li>Green tea</li>
|
||||||
|
</ol>
|
||||||
|
<ul>FANTASY</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Black tea</li>
|
||||||
|
|
||||||
|
<ol type="a" start="1">
|
||||||
|
<li>Black tea</li>
|
||||||
|
<li>Green tea</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<ul>HORROR</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Black tea</li>
|
||||||
|
<ol type="a" start="1">
|
||||||
|
<li>Black tea</li>
|
||||||
|
<li>Green tea</li>
|
||||||
|
</ol>
|
||||||
|
<ul>FICTION</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Black tea</li>
|
||||||
|
<ol type="a" start="1">
|
||||||
|
<li>Black tea</li>
|
||||||
|
<li>Green tea</li>
|
||||||
|
</ol>
|
||||||
|
<ul>HISTORICAL FICTION</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Black tea</li>
|
||||||
|
<ol type="a" start="1">
|
||||||
|
<li>Black tea</li>
|
||||||
|
<li>Green tea</li>
|
||||||
|
</ol>
|
||||||
|
<ul>MYSTERY & THRILLER</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Black tea</li>
|
||||||
|
<ol type="a" start="1">
|
||||||
|
<li>Black tea</li>
|
||||||
|
<li>Green tea</li>
|
||||||
|
</ol>
|
||||||
|
<ul>ROMANTASY</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Black tea</li>
|
||||||
|
<ol type="a" start="1">
|
||||||
|
<li>Black tea</li>
|
||||||
|
<li>Green tea</li>
|
||||||
|
</ol>
|
||||||
|
</ol>
|
||||||
|
<ul>SCI-FI</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Black tea</li>
|
||||||
|
<ol type="a" start="1">
|
||||||
|
<li>Black tea</li>
|
||||||
|
<li>Green tea</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.zoznam{
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ol type="1" start="1" class="zoznam">
|
||||||
|
<li><b>SCI-FI</b>
|
||||||
|
<ul type="disc">
|
||||||
|
<li>In the lives of puppets-TJ Klune</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><b>ROMANTASY</b>
|
||||||
|
<ul type="disc">
|
||||||
|
<li>Fourth wing-Rebecca Yarros</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><b>MYSTERY & THRILLER</b>
|
||||||
|
<ul type="disc">
|
||||||
|
<li>The housemaid's secret-Freida Mcfadden</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><b>HISTORICAL FICTION</b>
|
||||||
|
<ul type="disc">
|
||||||
|
<li>Weyward-Emilia Hart</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><b>FICTION</b>
|
||||||
|
<ul type="disc">
|
||||||
|
<li>Yellowface-R. F. Kuang</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><b>HORROR</b>
|
||||||
|
<ul type="disc">
|
||||||
|
<li>Holly-Stephen King</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><b>FANTASY</b>
|
||||||
|
<ul type="disc">
|
||||||
|
<li>Hell bent-Leigh bardugo</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><b>ROMANCE</b>
|
||||||
|
<ul type="disc">
|
||||||
|
<li>Happy place-Emily Henry</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<!--<div class="tenor-gif-embed" data-postid="26334092" data-share-method="host" data-aspect-ratio="1.13879" data-width="100%"><a href="https://tenor.com/view/yes-gif-26334092">Yes GIF</a>from <a href="https://tenor.com/search/yes-gifs">Yes GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<h3 style="font-family: Times new Rowan; font-size:3.5vw">Best book boyfriends</h3>
|
||||||
|
<style>#tabulka3, #tabulka3 th, #tabulka3 td
|
||||||
|
{
|
||||||
|
border: 2px solid rgb(48, 77, 48);
|
||||||
|
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabulka3 tbody
|
||||||
|
{
|
||||||
|
border : 4px solid rgb(48, 77, 48);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pofarbenie2 tr:nth-child(even)
|
||||||
|
{
|
||||||
|
background-color: rgb(115, 144, 114);
|
||||||
|
}
|
||||||
|
.podfarbenie2 tr:nth-child(odd)
|
||||||
|
{
|
||||||
|
background-color: rgb(190, 200, 180);
|
||||||
|
}
|
||||||
|
|
||||||
|
.podfarbenie2 th
|
||||||
|
{
|
||||||
|
background-color: rgb(48, 77, 48);
|
||||||
|
color: rgb(210, 227, 200);
|
||||||
|
}
|
||||||
|
.podfarbenie2 tr:hover
|
||||||
|
{
|
||||||
|
text-align: right;
|
||||||
|
background-color: rgb(70, 100, 70) !important;
|
||||||
|
color: rgb(210, 227, 200) !important;
|
||||||
|
transition-duration: 1s;
|
||||||
|
transition-timing-function:linear;
|
||||||
|
transition-delay: 0.3s;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table border="5px" id="tabulka3" class="podfarbenie2">
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<th><b></b></th>
|
||||||
|
<th><b>Name</b></th>
|
||||||
|
<th><b>Profession</b></th>
|
||||||
|
<th><b>Age</b></th>
|
||||||
|
<th><b>Book</b></th>
|
||||||
|
<th><b>Trophe</b></th>
|
||||||
|
<th><b>Soulmate</b></th>
|
||||||
|
<th><b>Height</b></th>
|
||||||
|
<th><b>Hair</b></th>
|
||||||
|
<th><b>Eyes</b></th>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>1</b></td>
|
||||||
|
<td>Alex Volkov</td>
|
||||||
|
<td>Businessman</td>
|
||||||
|
<td>26</td>
|
||||||
|
<td>Twisted Love</td>
|
||||||
|
<td>grupmy X sushine</td>
|
||||||
|
<td>Ava Chen</td>
|
||||||
|
<td>6'3</td>
|
||||||
|
<td>Light brown</td>
|
||||||
|
<td>Light jade green</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>2</b></td>
|
||||||
|
<td>Rhys Larsen</td>
|
||||||
|
<td>Bodyguard</td>
|
||||||
|
<td>31</td>
|
||||||
|
<td>Twisted Games</td>
|
||||||
|
<td>princess X bodyguard</td>
|
||||||
|
<td>Bridget von Ascheberg</td>
|
||||||
|
<td>6'5</td>
|
||||||
|
<td>Dark</td>
|
||||||
|
<td>Grey</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>3</b></td>
|
||||||
|
<td>Dante Russo</td>
|
||||||
|
<td>Head of jewellery empire</td>
|
||||||
|
<td>36-37</td>
|
||||||
|
<td>King of Wrath</td>
|
||||||
|
<td>arranged marriage</td>
|
||||||
|
<td>Vivian Lau</td>
|
||||||
|
<td>6'7</td>
|
||||||
|
<td>Black</td>
|
||||||
|
<td>Black</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>4</b></td>
|
||||||
|
<td>Zade Meadows</td>
|
||||||
|
<td>Z Organization</td>
|
||||||
|
<td>32</td>
|
||||||
|
<td>Haunting Adeline</td>
|
||||||
|
<td>stalker romance</td>
|
||||||
|
<td>Adeline Rielly </td>
|
||||||
|
<td>6'6</td>
|
||||||
|
<td>Black</td>
|
||||||
|
<td>Heterochromia</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>5</b></td>
|
||||||
|
<td>Nathan Hawkins</td>
|
||||||
|
<td>hockey player</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>Icebreaker</td>
|
||||||
|
<td>hockey player X ice skater</td>
|
||||||
|
<td>Anastasia Allen</td>
|
||||||
|
<td>6'4</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>6</b></td>
|
||||||
|
<td>Russ Callaghan</td>
|
||||||
|
<td>NCAA hockey player</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>Wildfire</td>
|
||||||
|
<td>hockey romance</td>
|
||||||
|
<td>Aurora Roberts</td>
|
||||||
|
<td>6'5</td>
|
||||||
|
<td>Light Brown</td>
|
||||||
|
<td>Blue</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>7</b></td>
|
||||||
|
<td>Rowan Kane</td>
|
||||||
|
<td>CEO of Dreamland</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>The Fine Print</td>
|
||||||
|
<td>boss X employe</td>
|
||||||
|
<td>Zahra Gulian</td>
|
||||||
|
<td>6'3</td>
|
||||||
|
<td>Dark brown</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>8</b></td>
|
||||||
|
<td>Atlas Corrigan</td>
|
||||||
|
<td>Restaurant owner</td>
|
||||||
|
<td>28-29</td>
|
||||||
|
<td>It Ends With Us</td>
|
||||||
|
<td>childhood friends romance</td>
|
||||||
|
<td>Lily Bloom</td>
|
||||||
|
<td>6'2</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
<td>Blue</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>9</b></td>
|
||||||
|
<td>Christian Harper</td>
|
||||||
|
<td>CEO of Harper Security</td>
|
||||||
|
<td>34</td>
|
||||||
|
<td>Twisted Lies</td>
|
||||||
|
<td>fake dating</td>
|
||||||
|
<td>Stella Alonso</td>
|
||||||
|
<td>6'4</td>
|
||||||
|
<td>Dark</td>
|
||||||
|
<td>Whiskey</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="text-align: center;">
|
||||||
|
<td><b>10</b></td>
|
||||||
|
<td>Garrett Graham</td>
|
||||||
|
<td>Former NHL player for The Boston Bruins</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>The Deal</td>
|
||||||
|
<td>sports romance</td>
|
||||||
|
<td>Hannah Wells</td>
|
||||||
|
<td>6'3</td>
|
||||||
|
<td>Brown</td>
|
||||||
|
<td>Grey</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
<br><br><br><br>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<br>
|
||||||
|
<h4>#booktok made me read it</h4>
|
||||||
|
</footer>
|
||||||
|
|
||||||
1
video
Normal file
1
video
Normal file
@ -0,0 +1 @@
|
|||||||
|
https://youtu.be/rlFjsp4BtRA?si=AS95aXJHG7Hzh-99
|
||||||
Loading…
Reference in New Issue
Block a user