photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

index.html (5673B)

  1 <!DOCTYPE html>
  2 <!-- This program is free software: you can redistribute it and/or modify
  3      it under the terms of the GNU General Public License as published by
  4      the Free Software Foundation, either version 3 of the License, or
  5      (at your option) any later version.
  6 
  7      This program is distributed in the hope that it will be useful,
  8      but WITHOUT ANY WARRANTY; without even the implied warranty of
  9      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 10      GNU General Public License for more details.
 11 
 12      You should have received a copy of the GNU General Public License
 13      along with this program. If not, see <https://www.gnu.org/licenses/>. -->
 14 <html lang="en">
 15 <head>
 16 <title>Pablo&apos;s Photo Gallery</title>
 17 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 18 <meta name="author" content="Pablo">
 19 <meta name="copyright" content="GPLv3">
 20 <meta content="text/html; charset=utf-8" http-equiv="content-type">
 21 <link rel="icon" href="./icons/favicon.ico" type="image/x-icon" sizes="16x16 24x24 32x32">
 22 <link rel="stylesheet" href="./styles.css">
 23 </head>
 24 <body>
 25 <header>
 26 <nav>
 27 <img aria-hidden="true" alt="Website icon" width="24" height="24" src="./icons/icon.svg">
 28 <a href="./index.html">photos.pablopie.xyz</a>
 29 </nav>
 30 </header>
 31 <main>
 32 <ul id="gallery">
 33 <li>
 34 <a aria-label="dummond-adams.png" href="./dummond-adams.png.html">
 35 <img alt="A black and white picture of a tall symmetrical building of international style. The building is covered by a thin veil and a layer of graffiti. White clouds drift across the dark sky above the building." src="./photos/dummond-adams.png">
 36 </a>
 37 </li>
 38 <li>
 39 <a aria-label="9-de-julho.jpg" href="./9-de-julho.jpg.html">
 40 <img alt="A tall rundown building covered in graffiti art against a blue sky backdrop" src="./photos/9-de-julho.jpg">
 41 </a>
 42 </li>
 43 <li>
 44 <a aria-label="jaragua.jpg" href="#">
 45 <img alt="A black and white picture of a telecom tower covered in parabolic antennas. The tower stands in the mist against a dark grey sky." src="./photos/jaragua.jpg">
 46 </a>
 47 </li>
 48 <li>
 49 <a aria-label="dead-pigeon.jpg" href="#">
 50 <img alt="The decomposing body of a dead pigeon against the cold grey pavement. The bird&apos;s head and torso has been chewed away by time, yet the remainings of its wings and legs resemble the image of an angel." src="./photos/dead-pigeon.jpg">
 51 </a>
 52 </li>
 53 <li>
 54 <a aria-label="train-tracks.jpg" href="#">
 55 <img alt="A black and white photograph of a train track drifting through a mountainous region" src="./photos/train-tracks.jpg">
 56 </a>
 57 </li>
 58 <li>
 59 <a aria-label="subway.gif" href="#">
 60 <img alt="A train moving through a dark subway tunnel with green lighting. The walls of the tunnel are covered in graffiti, with one particular drawing of a bear standing out due to its bright green paint." src="./photos/subway.gif">
 61 </a>
 62 </li>
 63 <li>
 64 <a aria-label="rar.jpg" href="#">
 65 <img alt="A yellow, lizard-like sculpture with a small grey beak. The up close framing of the sculpture and the shallow depth of field gives it the appearance of a real (yet fantastic) animal." src="./photos/rar.jpg">
 66 </a>
 67 </li>
 68 <li>
 69 <a aria-label="parador-la-torre.jpg" href="#">
 70 <img alt="A rusty Pepsi billboard stands against a peaceful desert landscape with clear blue skies in the afternoon. The Pepsi billboard says &quot;Parador la Torre&quot;, spanish for &quot;La Torre Gas Station&quot;." src="./photos/parador-la-torre.jpg">
 71 </a>
 72 </li>
 73 <li>
 74 <a aria-label="beheaded.jpg" href="#">
 75 <img alt="A small religious figure depicting a man and two dogs. The man&apos;s head has broken off." src="./photos/beheaded.jpg">
 76 </a>
 77 </li>
 78 <li>
 79 <a aria-label="quartering.png" href="#">
 80 <img alt="Wax candles resembling a human head, legs, a torso and a liver are placed in a blue basket" src="./photos/quartering.png">
 81 </a>
 82 </li>
 83 <li>
 84 <a
 85   aria-label="meu-socorro-vem-de-deus-tapioca-olhe-pare-pense-coma-tapioca.jpg" href="#">
 86 <img alt="A window in a food truck with a red sign saying &quot;MEU SOCORRO VEM DE DEUS TAPIOCA OLHE PARE E PENSE COMA TAPIOCA&quot;, portuguese for &quot;MY SALVATION COMES FROM GOD TAPIOCA LOOK STOP AND THINK EAT TAPIOCA&quot;. Behind the window we can see the food truck&apos;s kitchen illuminated by bright yellow lights and a man wearing white cloths and a hat." src="./photos/meu-socorro-vem-de-deus-tapioca-olhe-pare-pense-coma-tapioca.jpg">
 87 </a>
 88 </li>
 89 <li>
 90 <a aria-label="tapioca.jpg" href="#">
 91 <img alt="A food truck&apos;s counter illuminated in a dim red light. On top of the counter there is a bright yellow sign listing multiple flavors of tapioca. Inside the truck we can see a man in white cloths working." src="./photos/tapioca.jpg">
 92 </a>
 93 </li>
 94 <li>
 95 <a aria-label="minhocao.gif" href="#">
 96 <img alt="A human figure with a blue light emanating from its head moves towards the camera through an elevated highway illuminated by dim orange light poles" src="./photos/minhocao.gif">
 97 </a>
 98 </li>
 99 <li>
100 <a aria-label="mushroom.jpg" href="#">
101 <img alt="A vibrant spining fairground ride at night. The ride&apos;s green neon lights create a striking contrast against the dark sky, while the picture&apos;s long exposure time conveys the movement of the scene." src="./photos/mushroom.jpg">
102 </a>
103 </li>
104 <li>
105 <a aria-label="cat.jpg" href="#">
106 <img alt="A golden maneki-neko sitting on top of a metal shelf" src="./photos/cat.jpg">
107 </a>
108 </li>
109 <li>
110 <a aria-label="peruvian-boy.jpg" href="#">
111 <img alt="A small boy wearing a light blue striped shirt dips is head into a water stream carved out of a rock wall" src="./photos/peruvian-boy.jpg">
112 </a>
113 </li>
114 </ul>
115 </main>
116 <footer>
117 made with 💛 by <a role="author" href="https://pablopie.xyz">@pablo</a>
118 </footer>
119 </body>
120 </html>