113 lines
1.5 KiB
CSS
113 lines
1.5 KiB
CSS
:root{
|
|
--bg:#f7f7f7;
|
|
--accent:#2d6a4f;
|
|
--text:#333;
|
|
--card:#fff;
|
|
}
|
|
|
|
*{
|
|
box-sizing:border-box;
|
|
font-family:system-ui,Arial,sans-serif;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
body{
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
line-height:1.4;
|
|
}
|
|
|
|
header{
|
|
background:var(--accent);
|
|
color:#fff;
|
|
padding:12px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size:18px;
|
|
}
|
|
|
|
nav{
|
|
margin-top:8px;
|
|
}
|
|
|
|
nav a {
|
|
color:#d3d3d3;
|
|
margin-right:10px;
|
|
text-decoration:none;
|
|
font-weight:600;
|
|
}
|
|
|
|
main{
|
|
max-width:900px;
|
|
margin:18px auto;
|
|
padding:12px;
|
|
}
|
|
|
|
section, article, .facts, .conservation {
|
|
background:var(--card);
|
|
padding:12px;
|
|
border-radius:6px;
|
|
margin-bottom:12px;
|
|
}
|
|
|
|
.hero{
|
|
display:flex;
|
|
gap:12px;
|
|
align-items:center;
|
|
}
|
|
|
|
.hero img {
|
|
width:180px;
|
|
height:120px;
|
|
object-fit:cover;
|
|
border-radius:6px;
|
|
}
|
|
|
|
.image-about,
|
|
.behaviour-image{
|
|
width:100%;
|
|
max-width:420px;
|
|
height:auto;
|
|
overflow:hidden;
|
|
border-radius:6px;
|
|
background:#eee;
|
|
display:block;
|
|
margin:8px 0;
|
|
}
|
|
|
|
.image-about img,
|
|
.behaviour-image img {
|
|
width:100%;
|
|
height:100%;
|
|
object-fit:cover;
|
|
display:block;
|
|
}
|
|
|
|
.grid {
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
|
|
gap:10px;
|
|
}
|
|
|
|
figure {
|
|
background:var(--card);
|
|
padding:8px;
|
|
border-radius:6px;
|
|
text-align:center;
|
|
}
|
|
|
|
figure img {
|
|
width:100%;
|
|
height:120px;
|
|
object-fit:cover;
|
|
border-radius:4px;
|
|
}
|
|
|
|
footer {
|
|
text-align:center;
|
|
color:#666;
|
|
padding:12px;
|
|
font-size:14px;
|
|
} |