Init sample code training chapter 16

This commit is contained in:
Nezumi
2023-06-22 12:10:44 +07:00
parent 3c40ecb572
commit 5b0e762b39
4 changed files with 97 additions and 0 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 237 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

+97
View File
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body {
color: #665544;
background-color: #d4d0c6;
background-image: url("./assets/images/4907157.jpg");
font-family: Georgia, "Times New Roman", serif;
text-align: center;
}
.wrapper {
width: 720px;
margin: 0px auto;
}
.header {
margin: 40px 0px 20px 0px;
}
.entry {
width: 220px;
float: left;
margin: 10px;
height: 198px;
background-repeat: no-repeat;
background-position: bottom;
}
figure {
display: block;
width: 202px;
height: 170px;
background-color: #e7e3d8;
padding: 9px;
text-align: left;
}
figure img {
width: 200px;
height: 150px;
border: 1px solid #d6d6d6;
}
figcaption {
padding-left: 20px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="./assets/images/images.jpg" alt="Galerie Botanique" width="456" height="122" />
<p>Here is a selection of antique botanical prints held in our collection.</p>
</div>
<div class="entry">
<figure><img src="./assets/images/0266554465.jpeg" alt="Helianthus" />
<figcaption>Helianthus</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="./assets/images/0266554465.jpeg" alt="Passiflora" />
<figcaption>Passiflora</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="./assets/images/0266554465.jpeg" alt="Nyctocalos" />
<figcaption>Nyctocalos</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="./assets/images/0266554465.jpeg" alt="Polianthes" />
<figcaption>Polianthes</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="./assets/images/0266554465.jpeg" alt="Ficus" />
<figcaption>Ficus</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="./assets/images/0266554465.jpeg" alt="Dendrobium" />
<figcaption>Dendrobium</figcaption>
</figure>
</div>
</div>
</body>
</html>