ponozky/old/index.html

274 lines
9.6 KiB
HTML
Raw Normal View History

2024-06-05 18:37:04 +02:00
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="keywords" content="Bambusove ponozky, ponozky, bambusove ponozky za dobru cenu" viewport="">
<title>Bambusové ponožky</title>
2024-06-05 20:57:51 +02:00
<link rel="icon" type="image/x-icon" href="ponozka.png">
2024-06-05 18:37:04 +02:00
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #b9b9b9;
}
header {
background-image: url(bambus.jpg);
2024-06-05 18:37:04 +02:00
color: #fff;
text-shadow: #363636 5px 4px;
2024-06-05 18:37:04 +02:00
padding: 20px;
text-align: center;
}
nav {
background-color: #444444b7;
padding: 10px;
text-align: center;
}
nav a {
color: #dfd07a;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
color: rgb(189, 189, 42);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #585a59;
min-width: 100px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #363636;
}
section {
padding: 20px;
}
footer {
background-color: #333333c7;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<header id="top">
<h1>Bambusové ponožky od majstra</h1>
</header>
<nav>
<a href="#" class="socklink" data-idcko="homeLinkCont" id="homeLink">Domov</a>
<div class="dropdown">
<a href="#" class="dropdown">Podľa ceny</a>
<div class="dropdown-content">
<a href="#cheap-socks" class="socklink" data-idcko="cheap-socks" id="lacnejsieLink">Lacnejšie</a>
<a href="#mid-socks" class="socklink" data-idcko="mid-socks" id="drahsieLink">Drahšie</a>
<a href="#expensive-socks" class="socklink" data-idcko="expensive-socks" id="najdrahsieLink">Najdrahšie</a>
<a href="#specialities" class="socklink" data-idcko="specs" id="specialityLink">Špeciality</a>
</div>
</div>
<a href="#" class="socklink" data-idcko="contactLinkCont" id="contactLink">Kontakty</a>
<a href="#" class="socklink" data-idcko="formularLinkCont" id="formularLink">Formular</a>
</nav>
<section id="homeLinkCont" class="sockvolaco">
<h2>O nás</h2>
<p>Vitajte na našej stránke s najlepšími bambusovými ponožkami.</p>
</section>
<section id="contactLinkCont" class="sockvolaco" style="display: none;">
<h2>Kontakty</h2>
<p>Tu nás môžete kontaktovať:</p>
Email: BambusPonozky@gmail.com <br>
Ig: BambusovePonozky.majstrovke<br>
TT: Majster_a_ponozky
</section>
<section id="formularLinkCont" class="sockvolaco" style="display: none;">
<form method="get">
<br>
<label for="email">Tu si môžete zadať email:</label><br>
<br>
<input type="email" id="email" name="email">
<input type="submit" value="Odoslať">
<hr>
</form>
<form action="/action_page.php" method="get" name="prihlasenie">
<!-- method moze naberat dve hodnoty post alebo algebricky, default je get-->
<br>
<label>Tu si zadajte meno a priezvisko</label>
<br>
<br>
<label for="name">Meno</label><br>
<input type="text" id="name" name="fname" value="Fero"><br>
<br>
<label for="name1">Priezvisko</label><br>
<input type="text" id="name1" name="1name" value="Mrkvicka"><br><br>
<input type="submit" value="Odoslať">
<hr>
<br>
<label for="gender">Pohlavie</label><br><br>
<input type="radio" id="idmale" name="gender" value="male">
<label for="idmale">Muž</label><br>
<input type="radio" id="idfemale" name="gender" value="female">
<label for="idfemale">Žena</label><br>
<input type="radio" id="idother" name="gender" value="other">
<label for="idother">Iné</label><br><br>
<input type="submit" value="Odoslať">
<hr>
<laber for="roknarodenia">Rok narodenia</laber>
<br><br>
<input type="date" id="datemin" name="datemin" min="1000-01-01"><br><br>
<input type="submit" value="Odoslať">
<hr>
</form> <br>
<form>
<label for="favcolor">Select your favorite color:</label><br>
<br>
<input type="color" id="favcolor" name="favcolor">
<br><br>
<input type="submit" value="Odoslať">
</form>
</section>
<section id="cheap-socks" class="sockvolaco" style="display: none;">
<h2>Lacnejšie</h2>
<p>Tu môžete nájsť Lacnejšie ponožky:</p>
<ul>
2024-06-05 20:57:51 +02:00
<li><a href="https://ecobamboo.sk/sk-SK/product/82003P-W/Bambusove-klasicke-ponozky-damske">Lacnejšie ponožky</a></li>
2024-06-05 18:37:04 +02:00
</ul>
</section>
<section id="mid-socks" class="sockvolaco" style="display: none;">
<h2>Drahšie</h2>
<p>Tu môžete nájsť Drahšie ponožky:</p>
<ul>
2024-06-05 20:57:42 +02:00
<li> <a href="https://www.trenirkaren.sk/panske-ponozky/163729-10pack-ponozky-styx-nizke-bambusove-cierne-10hbn960.html?gad_source=1&gclid=CjwKCAjwmYCzBhA6EiwAxFwfgExqTdhD8HGqHI4OafdxnkXdGbxlYoJLlT5uy__0LdTcjw8IjrTvrBoC7fgQAvD_BwE#/22-velkost-m">Drahšie ponožky</a></li>
2024-06-05 18:37:04 +02:00
</ul>
</section>
<section id="expensive-socks" class="sockvolaco" style="display: none;">
<h2>Najdrahšie</h2>
<p>Tu môžete nájsť Najdrahšie ponožky:</p>
<ul>
2024-06-05 20:57:51 +02:00
<li><a href="https://www.trenirkaren.sk/panske-ponozky/162497-10pack-ponozky-styx-clenkove-bambusove-cierne-10hbk960.html?gad_source=1&gclid=CjwKCAjwmYCzBhA6EiwAxFwfgFD14oeQOxriGY8n4Gd-7CbWGguXAlA81t3KvUPqpVvP25RXSlahQxoC9dsQAvD_BwE#/21-velkost-l">Najdrahšie ponožky</a></li>
2024-06-05 18:37:04 +02:00
</ul>
</section>
<section id="specialityLink" class="sockvolaco" style="display: none;">
<h2>Špeciality</h2>
<p>Tu môžete nájsť Špeciality:</p>
<ul>
<li><a href="https://example.com/Special-bamboo-socks-1">Špeciality</a></li>
</ul>
</section>
<footer>
2024-06-05 20:57:51 +02:00
© 2024 Moje bambusove ponožky. Copyright rezervovaný.
2024-06-05 18:37:04 +02:00
</footer>
<script>
// Get all elements with class "socklink"
var socklinks = document.getElementsByClassName("socklink");
// Iterate over each element with class "socklink" and add click event listener
for (var i = 0; i < socklinks.length; i++) {
socklinks[i].addEventListener("click", function (event) {
event.preventDefault();
// Hide all elements with class "sockvolaco"
var sockvolacos = document.getElementsByClassName("sockvolaco");
for (var j = 0; j < sockvolacos.length; j++) {
if (sockvolacos[j].id == event.target.getAttribute("data-idcko")) {
sockvolacos[j].style.display = "block";
}
else {
sockvolacos[j].style.display = "none";
}
}
});
}
// Get all elements with class "socklink"
var socklinks = document.getElementsByClassName("socklink");
// Iterate over each element with class "socklink" and add click event listener
for (var i = 0; i < socklinks.length; i++) {
socklinks[i].addEventListener("click", function (event) {
event.preventDefault();
// Hide all elements with class "sockvolaco"
var sockvolacos = document.getElementsByClassName("sockvolaco");
for (var j = 0; j < sockvolacos.length; j++) {
if (sockvolacos[j].id == event.target.getAttribute("data-idcko")) {
sockvolacos[j].style.display = "block";
}
else {
sockvolacos[j].style.display = "none";
}
}
});
}
</script>
<div class="wrapper">
<form action="">
2024-06-05 20:57:51 +02:00
<h1>Prihlásenie do účtu</h1>
2024-06-05 18:37:04 +02:00
<div class="input-box">
2024-06-05 20:57:51 +02:00
<input type="text" placeholder="Používateľské meno">
2024-06-05 18:37:04 +02:00
</div>
<div class="input-box">
<input type="password"
2024-06-05 20:57:51 +02:00
placeholder="Heslo" required>
2024-06-05 18:37:04 +02:00
</div>
<div class="remember-forgot">
2024-06-05 20:57:51 +02:00
<label><input type="checkbox">Zapamätať si ma </label>
<a href="#">Zabudli ste heslo? </a>
<button type="submit" class="btn">Prihlásiť sa</button>
2024-06-05 18:37:04 +02:00
<div class="register-link">
2024-06-05 20:57:51 +02:00
<p>Nemáte účet? <a href="#">Zaregistrovať sa</a></p>
2024-06-05 18:37:04 +02:00
</div>
</div>
</form>
</body></html>