Skip to content
163 changes: 106 additions & 57 deletions artwork.html
Original file line number Diff line number Diff line change
@@ -1,58 +1,107 @@
<table>
<tr>
<td>Logo do OpenBSD</td>
<td>
<a href="http://www.openbsd-br.org/artwork/1200px-OpenBSD_Logo_-_Cartoon_Puffy_with_textual_logo_below.svg.png">
<img src="/artwork/1200px-OpenBSD_Logo_-_Cartoon_Puffy_with_textual_logo_below.svg.png" align="left" height="100" width="100" >
</a>
</td>
</tr>
<tr>
<td>Versão 7.2<br>
<a href="https://www.openbsd.org/images/OneFishTwoFish-s.gif">
<img src="https://www.openbsd.org/images/OneFishTwoFish-s.gif" align="left" height="100" width="100" >
</a>
</td>
<td>Versão 7.1<br>
<a href="https://www.openbsd.org/images/TheGreatWaveOffCalgary.png">
<img src="https://www.openbsd.org/images/TheGreatWaveOffCalgary-s.gif" align="left" height="100" width="100" >
</a>
</td>
<td>Versão 7.0<br>
<a href="http://www.openbsd.org/images/StarryPointers.png">
<img src="/artwork/70_StarryPointers-s.png" align="left" height="100" width="100" >
</a>
</td>
<td>Versão 6.9<br>
<a href="https://www.openbsd.org/images/nice.png">
<img src="/artwork/nice-69.png" align="left" height="100" width="100" >
</a>
</td>
<td>Versão 6.8<br>
<a href="https://www.openbsd.org/images/PuffyOverride.png">
<img src="/artwork/puffyOverride-68.png" align="left" height="100" width="100" >
</a>
</td>
<td>Versão 6.7<br>
<a href="http://www.openbsd.org/images/CoralFever.gif">
<img src="/artwork/CoralFever-67.gif" align="left" height="100" width="100" >
</a>
</td>
<td>Versão 6.6<br>
<a href="http://www.openbsd.org/images/sixdotsix.gif">
<img src="/artwork/sixdotsix.gif" align="left" height="100" width="100" >
</a>
</td>
<td>Versão 6.5<br>
<a href="https://www.openbsd.org/images/Puffystock.gif">
<img src="/artwork/puffystock-65.gif" align="left" height="100" width="100" >
</a>
</td>
<td>Versão 6.4</br>
<a href="http://www.openbsd-br.org/artwork/puffoil-64.jpg">
<img src="/artwork/puffoil-64.jpg" align="left" height="100" width="100" >
</a>
</td>
</tr>
</table>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logos do OpenBSD</title>
<link rel="shortcut icon" href="img/favicon.ico" TYPE="image/x-icon">
<link rel="stylesheet" href="css/artwork.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

</head>
<body>
<h1>Logos do OpenBSD</h1>

<div class="logo-table">
<div class="logo-item">
<a href="https://www.openbsd-br.org/artwork/1200px-OpenBSD_Logo_-_Cartoon_Puffy_with_textual_logo_below.svg.png">
<img src="/artwork/1200px-OpenBSD_Logo_-_Cartoon_Puffy_with_textual_logo_below.svg.png"
alt="Logo do OpenBSD com Puffy, o mascote." loading="lazy">
<strong>Logo do OpenBSD</strong>
</a>
</div>
</div>

<h2>Logos por Versão</h2>

<div class="version-logos">
<div class="logo-item">
<a href="https://www.openbsd.org/images/King_of_Kings-s.gif">
<img src="https://www.openbsd.org/images/King_of_Kings-s.gif" alt="Logo da versão 7.5 do OpenBSD."
loading="lazy">
<strong>Versão 7.5</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/ImHappyBecauseEveryoneLovesMe-s.gif">
<img src="https://www.openbsd.org/images/ImHappyBecauseEveryoneLovesMe-s.gif"
alt="Logo da versão 7.4 do OpenBSD." loading="lazy">
<strong>Versão 7.4</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/DryGarden-s.gif">
<img src="https://www.openbsd.org/images/DryGarden-s.gif" alt="Logo da versão 7.3 do OpenBSD."
loading="lazy">
<strong>Versão 7.3</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/OneFishTwoFish-s.gif">
<img src="https://www.openbsd.org/images/OneFishTwoFish-s.gif" alt="Logo da versão 7.2 do OpenBSD."
loading="lazy">
<strong>Versão 7.2</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/TheGreatWaveOffCalgary.png">
<img src="https://www.openbsd.org/images/TheGreatWaveOffCalgary-s.gif" alt="Logo da versão 7.1 do OpenBSD."
loading="lazy">
<strong>Versão 7.1</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/StarryPointers.png">
<img src="/artwork/70_StarryPointers-s.png" alt="Logo da versão 7.0 do OpenBSD." loading="lazy">
<strong>Versão 7.0</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/nice.png">
<img src="/artwork/nice-69.png" alt="Logo da versão 6.9 do OpenBSD." loading="lazy">
<strong>Versão 6.9</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/PuffyOverride.png">
<img src="/artwork/puffyOverride-68.png" alt="Logo da versão 6.8 do OpenBSD." loading="lazy">
<strong>Versão 6.8</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/CoralFever.gif">
<img src="/artwork/CoralFever-67.gif" alt="Logo da versão 6.7 do OpenBSD." loading="lazy">
<strong>Versão 6.7</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/sixdotsix.gif">
<img src="/artwork/sixdotsix.gif" alt="Logo da versão 6.6 do OpenBSD." loading="lazy">
<strong>Versão 6.6</strong>
</a>
</div>
<div class="logo-item">
<a href="https://www.openbsd.org/images/Puffystock.gif">
<img src="/artwork/puffystock-65.gif" alt="Logo da versão 6.5 do OpenBSD." loading="lazy">
<strong>Versão 6.5</strong>
</a>
</div>
<div class="logo-item">
<a href="https://openbsd-br.org/artwork/puffoil-64.jpg">
<img src="/artwork/puffoil-64.jpg" alt="Logo da versão 6.4 do OpenBSD." loading="lazy">
<strong>Versão 6.4</strong>
</a>
</div>
</div>
</body>
</html>
32 changes: 16 additions & 16 deletions artwork/artwork.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,55 +11,55 @@ details:
<tr>
<td>Logo do OpenBSD</td>
<td>
<a href="http://www.openbsd-br.org/artwork/1200px-OpenBSD_Logo_-_Cartoon_Puffy_with_textual_logo_below.svg.png">
<img src="/artwork/1200px-OpenBSD_Logo_-_Cartoon_Puffy_with_textual_logo_below.svg.png" align="left" height="100" width="100" >
<a href="https://openbsd-br.org/artwork/1200px-OpenBSD_Logo_-_Cartoon_Puffy_with_textual_logo_below.svg.png">
<img src="/artwork/1200px-OpenBSD_Logo_-_Cartoon_Puffy_with_textual_logo_below.svg.png" height="100" width="100" alt="Logo do OpenBSD">
</a>
</td>
</tr>
<tr>
<td>Versão 7.2<br>
<a href="https://www.openbsd.org/images/OneFishTwoFish-s.gif">
<img src="https://www.openbsd.org/images/OneFishTwoFish-s.gif" align="left" height="100" width="100" >
<img src="https://www.openbsd.org/images/OneFishTwoFish-s.gif" height="100" width="100" alt="Logo da versão 7.2 do OpenBSD">
</a>
</td>
<td>Versão 7.1<br>
<a href="https://www.openbsd.org/images/TheGreatWaveOffCalgary.png">
<img src="https://www.openbsd.org/images/TheGreatWaveOffCalgary-s.gif" align="left" height="100" width="100" >
<img src="https://www.openbsd.org/images/TheGreatWaveOffCalgary-s.gif" height="100" width="100" alt="Logo da versão 7.1 do OpenBSD">
</a>
</td>
<td>Versão 7.0<br>
<a href="http://www.openbsd.org/images/StarryPointers.png">
<img src="/artwork/70_StarryPointers-s.png" align="left" height="100" width="100" >
<a href="https://www.openbsd.org/images/StarryPointers.png">
<img src="/artwork/70_StarryPointers-s.png" height="100" width="100" alt="Logo da versão 7.0 do OpenBSD">
</a>
</td>
<td>Versão 6.9<br>
<a href="https://www.openbsd.org/images/nice.png">
<img src="/artwork/nice-69.png" align="left" height="100" width="100" >
<img src="/artwork/nice-69.png" height="100" width="100" alt="Logo da versão 6.9 do OpenBSD">
</a>
</td>
<td>Versão 6.8<br>
<a href="https://www.openbsd.org/images/PuffyOverride.png">
<img src="/artwork/puffyOverride-68.png" align="left" height="100" width="100" >
<img src="/artwork/puffyOverride-68.png" height="100" width="100" alt="Logo da versão 6.8 do OpenBSD">
</a>
</td>
<td>Versão 6.7<br>
<a href="http://www.openbsd.org/images/CoralFever.gif">
<img src="/artwork/CoralFever-67.gif" align="left" height="100" width="100" >
<a href="https://www.openbsd.org/images/CoralFever.gif">
<img src="/artwork/CoralFever-67.gif" height="100" width="100" alt="Logo da versão 6.7 do OpenBSD">
</a>
</td>
<td>Versão 6.6<br>
<a href="http://www.openbsd.org/images/sixdotsix.gif">
<img src="/artwork/sixdotsix.gif" align="left" height="100" width="100" >
<a href="https://www.openbsd.org/images/sixdotsix.gif">
<img src="/artwork/sixdotsix.gif" height="100" width="100" alt="Logo da versão 6.6 do OpenBSD">
</a>
</td>
<td>Versão 6.5<br>
<a href="https://www.openbsd.org/images/Puffystock.gif">
<img src="/artwork/puffystock-65.gif" align="left" height="100" width="100" >
<img src="/artwork/puffystock-65.gif" height="100" width="100" alt="Logo da versão 6.5 do OpenBSD">
</a>
</td>
<td>Versão 6.4</br>
<a href="http://www.openbsd-br.org/artwork/puffoil-64.jpg">
<img src="/artwork/puffoil-64.jpg" align="left" height="100" width="100" >
<td>Versão 6.4<br>
<a href="https://openbsd-br.org/artwork/puffoil-64.jpg">
<img src="/artwork/puffoil-64.jpg" height="100" width="100" alt="Logo da versão 6.4 do OpenBSD">
</a>
</td>
</tr>
Expand Down
101 changes: 101 additions & 0 deletions css/artwork.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/* Resetando alguns estilos padrão do navegador */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Roboto', sans-serif;
background-color: #f0f2f5;
color: #333;
margin: 0;
padding: 20px;
}

h1 {
text-align: center;
color: #222;
font-size: 3em;
margin-bottom: 30px;
font-weight: 700;
}

h2 {
color: #333;
font-size: 2em;
text-align: center;
margin: 60px 0 20px;
font-weight: 700;
}

.logo-table, .version-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
max-width: 1200px;
}

.logo-item {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 15px;
padding: 20px;
text-align: center;
flex: 1 1 calc(25% - 30px);
box-sizing: border-box;
}

.logo-item img {
width: 100%;
max-width: 200px;
height: auto;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-item img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.logo-item a {
text-decoration: none;
color: inherit;
}

.logo-item strong {
display: block;
margin-top: 15px;
font-size: 1.2em;
color: #555;
}

/* Design Responsivo */
@media (max-width: 1024px) {
.logo-item {
flex: 1 1 calc(33.333% - 30px);
}
}

@media (max-width: 768px) {
.logo-item {
flex: 1 1 calc(50% - 30px);
}
}

@media (max-width: 480px) {
.logo-item {
flex: 1 1 calc(100% - 30px);
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.5em;
}
}
Binary file added img/puffy75.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading