285 lines
11 KiB
HTML
285 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="sk">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Books</title>
|
||
<meta name="description" content="Books">
|
||
<meta name="keywords" content="books, booktok, bookstagram, author, romance, fantasy, sci-fi, characters, love ">
|
||
<!-- namapovanie css -->
|
||
<link rel="stylesheet" href="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> |