HTML – szablon aukcji

Poniżej przedstawiam przydatne informacje, które pomogą utworzyć Ci własny szablon aukcji na allego lub ebay.

Uczymy się z Internetu

W sieci mamy wiele świetnych poradników uczących HTML np. w3chools.com.

W tym artykule pragnę zwrócić uwagę na aspekty problematyczne, występujące podczas nauki HTML’a.

Ikonka favicon na własnej stronie internetowej

Na stronie internetowej favicon.cc możesz wygenerować własną ikonkę.

<link rel='icon' href='favicon.ico' type='image/x-icon'/ >

Wklej powyższy kod do sekcji head.

DIV’y obok siebie

Poniżej są cztery DIV’y obok siebie. Taki układ osiągamy dzięki atrybutowi float: left;

Na końcu dajemy clear: both; Dzięki czemu kolejne elementu będą znajdowały się już poniżej. Już nie będą układać się obok siebie.

<div style="background-color:black;color:white; padding:20px; width:100px; height:100px; float: left;"></div>
<div style="background-color:red;color:white; padding:20px; width:100px; height:100px; float: left;"></div>
<div style="background-color:blue;color:white; padding:20px; width:100px; height:100px; float: left;"></div>
<div style="background-color:green;color:white; padding:20px; width:100px; height:100px; float: left;"></div>
<p style="clear: both;">lala</p>

Wysokość i szerokość

height: 200px;
width: 50%;

Bordery

border-style: solid;
border-color: green;
border-width: 2px 10px 4px 20px;

Zaokrąglanie rogów

border-radius: 5px 5px 15px 15px;

Tło

background-color: red;
background-image: url("https://przykład.pl/grafika.jpg");

Box sizing

Do szerokości divó’w zaliczamy bordery.

box-sizing: border-box;

Tło wypełnia całego diva

Porównaj efekt dwóch metod

background-size:cover;
background-size:contain;

Przycisk zmienia kolor po najechaniu na niego

.przycisk{ 
background-color: green;
height: 200px;
width: 25%;
}

.przycisk:hover { 
background-color: yellow;
}

Szablon Template

<!DOCTYPE html>
<html>
<head>
<title>Konrad Dylewski</title>
<style>
.d1 {
height: 200px;
width: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
box-sizing: border-box;
}
.d2 {
height: 50px;
width: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
box-sizing: border-box;
}
.przycisk {
height: 50px;
width: 25%;
border-style: solid;
border-color: black;
border-width: 1px;
box-sizing: border-box;
float: left;
}
.d3 {
height: 400px;
width: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
box-sizing: border-box;
}
.galeria {
height: 400px;
width: 50%;
border-style: solid;
border-color: black;
border-width: 1px;
box-sizing: border-box;
float: left;
}
.opis {
height: 400px;
width: 50%;
border-style: solid;
border-color: black;
border-width: 1px;
box-sizing: border-box;
float: left;
}
.d4 {
height: 50px;
width: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2">
<div class="przycisk"></div>
<div class="przycisk"></div>
<div class="przycisk"></div>
<div class="przycisk"></div>
</div>
<div class="d3">
<div class="galeria"></div>
<div class="opis"></div>
</div>
<div class="d4"></div>
</body>
</html>

Galeria

<style>

/* gallery */
.carousel {
position:relative;
width:600px;
border:10px solid #1a1a1a;
margin:40px auto 20px auto;
box-shadow:0px 0px 20px white;
border-radius:10px;
}
.carousel > img {
display:none;
width:100%;
}
.carousel > input {
position:absolute;
left:-9999px;
}
.carousel > input:checked + label + img {
display:block;
}
.carousel > label,
.carousel > input:checked ~ label ~ label ~ label ~ label {
display:none;
}
.carousel > input:checked + label {
display:block;
left:0;
}
.carousel > input:checked ~ label ~ label ~ label {
display:block;
right:0;
}
.carousel > label {
position:absolute;
top:0;
width:50%;
height:100%;
visibility:hidden;
}
.carousel > label:before {
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
visibility:visible;
}
.carousel > label:after {
display:block;
position:absolute;
top:50%;
width:25px;
height:25px;
line-height:22px;
margin:-15px 10px 0 10px;
background-color:black;
color:white;
font-family:'Arial';
font-weight:bold;
font-size:18px;
text-align:center;
visibility:hidden;
border:2px solid white;
border-radius:20px;
box-shadow:0 3px 4px black;
}
.carousel > label:hover:after {
visibility:visible;
}
.carousel > input:checked + label:after {
left:0;
content:'\00AB';
}
.carousel > input:checked ~ label ~ label ~ label:after {
right:0;
content:'\00BB';
}

</style>

 <div class="carousel">
<input id="image1" type="radio" name="image-selector" checked="checked" />
<label for="image4">View image 4</label>
<img src="https://www.aivanet.com/wp-content/uploads/2017/10/1509373814_2056695818901.jpg" />
<input id="image2" type="radio" name="image-selector" />
<label for="image1">View image 1</label>
<img src="https://st1.bgr.in/wp-content/uploads/2018/10/Gallery-Apple-iPad-Pro-2018-Lead-Image.jpg" />
<input id="image3" type="radio" name="image-selector" />
<label for="image2">View image 2</label>
<img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/image/AppleInc/aos/published/images/m/ac/macbook/air/macbook-air-space-gray-select-201810?wid=892&hei=820&&.v=1541713862468" />
<input id="image4" type="radio" name="image-selector" />
<label for="image3">View image 3</label>
<img src="https://image.ceneostatic.pl/data/products/44674385/i-samsung-27-s27f350fhux-ls27f350fhuxen.jpg" />
<label for="image4">View image 4</label>
<label for="image1">View image 1</label>
</div>


Szablon z galeria

 

<!DOCTYPE html>
<html>
<head>
<title>Company name</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Lobster');
*{
margin:0;
padding:0;
text-align:center;
box-sizing: border-box;
}
body {
background-image: url("https://www.pngarts.com/files/2/Black-Abstract-Lines-PNG-Image-with-Transparent-Background.png");
background-repeat: no-repeat;
background-position:50% 12px;
background-size: 55%;
background-color:#342E3B;
color: white;

}
h1 {
font-family: 'Lobster', cursive;
font-size:80px;
text-shadow: 4px 4px red;
}
h2 {
font-family: 'Lobster', cursive;
font-size:40px;
text-shadow: 2px 2px red;
text-align:left;
}
.kontener {
height:50px;
width:1000px;
margin:20px auto;
}
.przycisk {
background-color:white;
width:32%;
height:48px;
border: 2px solid white;
float:left;
border-radius:10px;
color:black;
font-size:30px;
font-family: 'Lobster', cursive;
text-shadow: 1px 1px white;
box-shadow: 5px 5px black;
margin: 20px 0 0 0;
}
.ramka {
background-color:#FF532A;
border: 1px solid black;
border-radius:10px;
width:100%;
height:100%;
box-shadow: inset 0 0 30px black;
}
.margin {
width:2%;
height:50px;
float:left;
}
p {
text-shadow: 2px 2px black;
}
.kontener p {
text-align:justify;
margin:20px 0;
text-shadow: 2px 2px black;
}
/* gallery */
.carousel {
position:relative;
width:600px;
border:10px solid white;
margin:40px auto 20px auto;
box-shadow:0px 0px 40px #000;
border-radius:10px;
}
.carousel > img {
display:none;
width:100%;
}
.carousel > input {
position:absolute;
left:-9999px;
}
.carousel > input:checked + label + img {
display:block;
}
.carousel > label,
.carousel > input:checked ~ label ~ label ~ label ~ label {
display:none;
}
.carousel > input:checked + label {
display:block;
left:0;
}
.carousel > input:checked ~ label ~ label ~ label {
display:block;
right:0;
}
.carousel > label {
position:absolute;
top:0;
width:50%;
height:100%;
visibility:hidden;
}
.carousel > label:before {
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
visibility:visible;
}
.carousel > label:after {
display:block;
position:absolute;
top:50%;
width:25px;
height:25px;
line-height:22px;
margin:-15px 10px 0 10px;
background-color:black;
color:white;
font-family:'Arial';
font-weight:bold;
font-size:18px;
text-align:center;
visibility:hidden;
border:2px solid white;
border-radius:20px;
box-shadow:0 3px 4px black;
}
.carousel > label:hover:after {
visibility:visible;
}
.carousel > input:checked + label:after {
left:0;
content:'\00AB';
}
.carousel > input:checked ~ label ~ label ~ label:after {
right:0;
content:'\00BB';
}
</style>
</head>
<body>

<h1>Company name</h1>
<div class="kontener">
<div class="przycisk"><div class="ramka">Escape Rooms</div></div>
<div class="margin"></div>
<div class="przycisk"><div class="ramka">Clubs</span></div></div>
<div class="margin"></div>
<div class="przycisk"><div class="ramka">Shops</span></div></div>
<div style="clear:both;"></div>
<div class="carousel">
<input id="image1" type="radio" name="image-selector" checked="checked" />
<label for="image4">View image 4</label>
<img src="https://lorempixel.com/400/300/sports/1" />
<input id="image2" type="radio" name="image-selector" />
<label for="image1">View image 1</label>
<img src="https://lorempixel.com/400/300/sports/2" />
<input id="image3" type="radio" name="image-selector" />
<label for="image2">View image 2</label>
<img src="https://lorempixel.com/400/300/sports/3" />
<input id="image4" type="radio" name="image-selector" />
<label for="image3">View image 3</label>
<img src="https://lorempixel.com/400/300/sports/2" />
<label for="image4">View image 4</label>
<label for="image1">View image 1</label>
</div>
<h2>Wroclove</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet mollis ex, ut commodo felis mattis id. Duis pretium sollicitudin tortor, pulvinar ultrices ipsum tempor vel. Etiam ultrices, augue ac eleifend hendrerit, justo nibh molestie massa, sed viverra sem metus ac felis. Fusce finibus nisl sed est aliquam, quis volutpat tortor lobortis. Curabitur laoreet pulvinar tellus, vitae laoreet libero mollis at. Donec et varius velit. Suspendisse potenti. Aenean condimentum auctor purus eu faucibus.
<br>
Nulla non turpis sit amet orci ornare laoreet eu sed lacus. Vestibulum dapibus enim semper purus iaculis, congue bibendum orci porta. Praesent scelerisque id risus sed posuere. Vivamus mattis elit vel condimentum iaculis. Etiam vestibulum fermentum ante a feugiat. Mauris volutpat neque et nunc rutrum facilisis. Vivamus bibendum tempus lectus a interdum. Integer mattis auctor sem fringilla elementum. Aliquam fringilla scelerisque tortor. In mattis suscipit hendrerit. Donec aliquet posuere turpis, vel dignissim justo auctor eget. Mauris condimentum velit a ex accumsan dictum. Ut nec fermentum purus. Donec luctus accumsan enim a pellentesque. Donec nec tortor tempor, convallis erat quis, condimentum orci.
<br>
Maecenas hendrerit leo a libero placerat, a congue sapien varius. Duis pellentesque sodales bibendum. Mauris non odio sed lectus mattis fringilla. Donec sed euismod ipsum. Vivamus et accumsan ipsum. Cras faucibus sem vel augue lacinia, vitae porta neque viverra. Sed eget tortor felis. Vestibulum rhoncus dolor sed libero feugiat, ultricies commodo erat ullamcorper. Vestibulum faucibus orci maximus eros eleifend commodo. Integer tempus feugiat sem, a facilisis orci ullamcorper vel. Ut eu viverra felis, luctus volutpat dui. Proin fringilla pharetra imperdiet. Etiam tincidunt urna id faucibus tempor. Aenean tincidunt quam eu cursus aliquet.
<br>
Aenean porttitor magna et magna placerat fermentum. Mauris in ullamcorper quam, ac ullamcorper odio. Nam non magna eget ipsum sagittis dignissim eu nec libero. Sed ac urna dictum, aliquam ante et, dignissim purus. Integer lacinia urna ante, ut accumsan enim mollis in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum quis lacus in nulla ullamcorper venenatis. Mauris condimentum nibh vitae mauris rhoncus, sed laoreet neque mollis. Sed ac venenatis massa. Suspendisse eget lectus in eros consectetur pretium. Fusce rutrum malesuada metus, vitae auctor augue vestibulum a. Proin eu efficitur nunc. Fusce sed imperdiet libero. Nam sapien purus, semper eu imperdiet volutpat, fermentum vitae quam. Sed pharetra faucibus nisi ac tristique. In vel molestie felis.
<br>
Integer a consectetur orci. Pellentesque finibus, quam nec vehicula pharetra, ex neque rhoncus felis, sed consequat orci orci eget dolor. Vestibulum nec turpis sed urna elementum pulvinar. Vestibulum dui lectus, auctor ultricies diam in, lacinia dictum nisl. Ut ut neque iaculis, vestibulum enim sed, luctus est. Donec eget nisi nibh. Sed porttitor pretium ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eu pretium ex. Praesent vestibulum cursus felis eget aliquet. Nunc justo eros, semper eu interdum non, mattis sed enim. Mauris semper urna vitae facilisis commodo. Quisque pretium ipsum vel tortor aliquam placerat. Vivamus sapien felis, vehicula a porta a, posuere et sapien. Donec facilisis ante sit amet nisl congue aliquam.</p>
<h2>Wroclove</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet mollis ex, ut commodo felis mattis id. Duis pretium sollicitudin tortor, pulvinar ultrices ipsum tempor vel. Etiam ultrices, augue ac eleifend hendrerit, justo nibh molestie massa, sed viverra sem metus ac felis. Fusce finibus nisl sed est aliquam, quis volutpat tortor lobortis. Curabitur laoreet pulvinar tellus, vitae laoreet libero mollis at. Donec et varius velit. Suspendisse potenti. Aenean condimentum auctor purus eu faucibus.
<br>
Nulla non turpis sit amet orci ornare laoreet eu sed lacus. Vestibulum dapibus enim semper purus iaculis, congue bibendum orci porta. Praesent scelerisque id risus sed posuere. Vivamus mattis elit vel condimentum iaculis. Etiam vestibulum fermentum ante a feugiat. Mauris volutpat neque et nunc rutrum facilisis. Vivamus bibendum tempus lectus a interdum. Integer mattis auctor sem fringilla elementum. Aliquam fringilla scelerisque tortor. In mattis suscipit hendrerit. Donec aliquet posuere turpis, vel dignissim justo auctor eget. Mauris condimentum velit a ex accumsan dictum. Ut nec fermentum purus. Donec luctus accumsan enim a pellentesque. Donec nec tortor tempor, convallis erat quis, condimentum orci.
<br>
Maecenas hendrerit leo a libero placerat, a congue sapien varius. Duis pellentesque sodales bibendum. Mauris non odio sed lectus mattis fringilla. Donec sed euismod ipsum. Vivamus et accumsan ipsum. Cras faucibus sem vel augue lacinia, vitae porta neque viverra. Sed eget tortor felis. Vestibulum rhoncus dolor sed libero feugiat, ultricies commodo erat ullamcorper. Vestibulum faucibus orci maximus eros eleifend commodo. Integer tempus feugiat sem, a facilisis orci ullamcorper vel. Ut eu viverra felis, luctus volutpat dui. Proin fringilla pharetra imperdiet. Etiam tincidunt urna id faucibus tempor. Aenean tincidunt quam eu cursus aliquet.
<br>
Aenean porttitor magna et magna placerat fermentum. Mauris in ullamcorper quam, ac ullamcorper odio. Nam non magna eget ipsum sagittis dignissim eu nec libero. Sed ac urna dictum, aliquam ante et, dignissim purus. Integer lacinia urna ante, ut accumsan enim mollis in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum quis lacus in nulla ullamcorper venenatis. Mauris condimentum nibh vitae mauris rhoncus, sed laoreet neque mollis. Sed ac venenatis massa. Suspendisse eget lectus in eros consectetur pretium. Fusce rutrum malesuada metus, vitae auctor augue vestibulum a. Proin eu efficitur nunc. Fusce sed imperdiet libero. Nam sapien purus, semper eu imperdiet volutpat, fermentum vitae quam. Sed pharetra faucibus nisi ac tristique. In vel molestie felis.
<br>
Integer a consectetur orci. Pellentesque finibus, quam nec vehicula pharetra, ex neque rhoncus felis, sed consequat orci orci eget dolor. Vestibulum nec turpis sed urna elementum pulvinar. Vestibulum dui lectus, auctor ultricies diam in, lacinia dictum nisl. Ut ut neque iaculis, vestibulum enim sed, luctus est. Donec eget nisi nibh. Sed porttitor pretium ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eu pretium ex. Praesent vestibulum cursus felis eget aliquet. Nunc justo eros, semper eu interdum non, mattis sed enim. Mauris semper urna vitae facilisis commodo. Quisque pretium ipsum vel tortor aliquam placerat. Vivamus sapien felis, vehicula a porta a, posuere et sapien. Donec facilisis ante sit amet nisl congue aliquam.</p>
<h2>Wroclove</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet mollis ex, ut commodo felis mattis id. Duis pretium sollicitudin tortor, pulvinar ultrices ipsum tempor vel. Etiam ultrices, augue ac eleifend hendrerit, justo nibh molestie massa, sed viverra sem metus ac felis. Fusce finibus nisl sed est aliquam, quis volutpat tortor lobortis. Curabitur laoreet pulvinar tellus, vitae laoreet libero mollis at. Donec et varius velit. Suspendisse potenti. Aenean condimentum auctor purus eu faucibus.
<br>
Nulla non turpis sit amet orci ornare laoreet eu sed lacus. Vestibulum dapibus enim semper purus iaculis, congue bibendum orci porta. Praesent scelerisque id risus sed posuere. Vivamus mattis elit vel condimentum iaculis. Etiam vestibulum fermentum ante a feugiat. Mauris volutpat neque et nunc rutrum facilisis. Vivamus bibendum tempus lectus a interdum. Integer mattis auctor sem fringilla elementum. Aliquam fringilla scelerisque tortor. In mattis suscipit hendrerit. Donec aliquet posuere turpis, vel dignissim justo auctor eget. Mauris condimentum velit a ex accumsan dictum. Ut nec fermentum purus. Donec luctus accumsan enim a pellentesque. Donec nec tortor tempor, convallis erat quis, condimentum orci.
<br>
Maecenas hendrerit leo a libero placerat, a congue sapien varius. Duis pellentesque sodales bibendum. Mauris non odio sed lectus mattis fringilla. Donec sed euismod ipsum. Vivamus et accumsan ipsum. Cras faucibus sem vel augue lacinia, vitae porta neque viverra. Sed eget tortor felis. Vestibulum rhoncus dolor sed libero feugiat, ultricies commodo erat ullamcorper. Vestibulum faucibus orci maximus eros eleifend commodo. Integer tempus feugiat sem, a facilisis orci ullamcorper vel. Ut eu viverra felis, luctus volutpat dui. Proin fringilla pharetra imperdiet. Etiam tincidunt urna id faucibus tempor. Aenean tincidunt quam eu cursus aliquet.
<br>
Aenean porttitor magna et magna placerat fermentum. Mauris in ullamcorper quam, ac ullamcorper odio. Nam non magna eget ipsum sagittis dignissim eu nec libero. Sed ac urna dictum, aliquam ante et, dignissim purus. Integer lacinia urna ante, ut accumsan enim mollis in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum quis lacus in nulla ullamcorper venenatis. Mauris condimentum nibh vitae mauris rhoncus, sed laoreet neque mollis. Sed ac venenatis massa. Suspendisse eget lectus in eros consectetur pretium. Fusce rutrum malesuada metus, vitae auctor augue vestibulum a. Proin eu efficitur nunc. Fusce sed imperdiet libero. Nam sapien purus, semper eu imperdiet volutpat, fermentum vitae quam. Sed pharetra faucibus nisi ac tristique. In vel molestie felis.
<br>
Integer a consectetur orci. Pellentesque finibus, quam nec vehicula pharetra, ex neque rhoncus felis, sed consequat orci orci eget dolor. Vestibulum nec turpis sed urna elementum pulvinar. Vestibulum dui lectus, auctor ultricies diam in, lacinia dictum nisl. Ut ut neque iaculis, vestibulum enim sed, luctus est. Donec eget nisi nibh. Sed porttitor pretium ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eu pretium ex. Praesent vestibulum cursus felis eget aliquet. Nunc justo eros, semper eu interdum non, mattis sed enim. Mauris semper urna vitae facilisis commodo. Quisque pretium ipsum vel tortor aliquam placerat. Vivamus sapien felis, vehicula a porta a, posuere et sapien. Donec facilisis ante sit amet nisl congue aliquam.</p>

</div>
</body>
</html>