API tools faq
paste
Advertisement
TheiPhoneFan

New My Photography Page

TheiPhoneFan
Feb 11th, 2024
57
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 47.91 KB | None | 0 0
raw download clone embed print report
  1. <!-- Created by TheiPhoneFan on 2024-02-08 -->
  2. <!-- My Photography 6.0.2, 2021-2024 -->
  3. <!DOCTYPE HTML>
  4. <html>
  5.  
  6. <head>
  7.     <style>
  8.         .photography {
  9.             width: 350px;
  10.             border-radius: 16px;
  11.         }
  12.         .caption-txt {
  13.             margin-top: 5px;
  14.             width: 350px;
  15.         }
  16.         h3 {
  17.             text-align: center;
  18.         }
  19.     </style>
  20.     <!-- External Font -->
  21.     <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,900" rel="stylesheet" type="text/css">
  22.     <!-- Stylesheet Link -->
  23.     <link rel="stylesheet" href="./theme/style.css">
  24.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  25.     <!-- Page Title -->
  26.     <title>My Photography</title>
  27.     <!-- Favicon Image Link -->
  28.     <link rel="icon" type="image/x-png" href="./logos/tif-logo.png">
  29.     <!-- Scales Website Content -->
  30.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  31.     <!-- Enables Unicode Characters To Be Displayed -->
  32.     <meta charset="UTF-8">
  33. </head>
  34.  
  35. <body>
  36. <!-- Page Top -->
  37. <div id="page-top"></div>
  38.  
  39. <!-- Top Bar -->
  40. <div class="navbar">
  41.     <!-- Site Title -->
  42.     <a href="./index.html" style="background-color:transparent;cursor:pointer;color:black;"><b>TheiPhoneFan.com</b></a>
  43.  
  44.     <!-- Home -->
  45.     <a href="./index.html">Home <img src="./theme/glyphs/home.png" height="15" alt="home"></a>
  46.  
  47.     <!-- Channel Related Dropdown -->
  48.     <div class="dropdown">
  49.       <button class="dropbtn" title="dropdown">Channel Related <i class="fa fa-caret-down"></i></button>
  50.       <div class="dropdown-content">
  51.         <a href="./channel-related.html" style="border-radius: 16px 16px 0px 0px;"><b>Channel Related</b> <img src="./theme/glyphs/triangle.png" height="15" alt="channel related"></a>
  52.         <a href="https://www.youtube.com/@theiphonefan761/about">Channel Info <img src="./theme/glyphs/channel-info.png" height="15" alt="channel info"></a>
  53.         <a href="./music-i-use.html">Music I Use <img src="./theme/glyphs/music-i-use.png" height="15" alt="music i use"></a>
  54.         <a href="./my-playlists.html">My Playlists <img src="./theme/glyphs/triangle.png" height="15" alt="my playlists"></a>
  55.         <a href="./my-top-5-vids.html">My Top 5 Vids <img src="./theme/glyphs/triangle.png" height="15" alt="top 5 vids"></a>
  56.         <a href="./my-videos.html">My Videos <img src="./theme/glyphs/triangle.png" height="15" alt="my videos"></a>
  57.         <a href="./thumbnail-design.html" style="border-radius: 0px 0px 16px 16px;">Thumbnail Design <img src="./theme/glyphs/thumbnail-design.png" height="15" alt="thumbnail design"></a>
  58.       </div>
  59.     </div>
  60.  
  61.     <!-- Content Dropdown -->
  62.     <div class="dropdown" title="dropdown">
  63.       <button class="dropbtn">Content <i class="fa fa-caret-down"></i></button>
  64.       <div class="dropdown-content">
  65.         <a href="./content.html" style="border-radius: 16px 16px 0px 0px;"><b>Content</b></a>
  66.         <a href="./apple-archive.html">Apple Archive <img src="./theme/glyphs/apple.png" height="15" alt="apple archive"></a>
  67.         <a href="./apple-concepts.html">Apple Concepts <img src="./theme/glyphs/apple.png" height="15" alt="apple concepts"></a>
  68.         <a href="./articles.html">Articles <img src="./theme/glyphs/articles.png" height="15" alt="articles"></a>
  69.         <a href="./blog.html">Blog <img src="./theme/glyphs/blog.png" height="15" alt="blog"></a>
  70.         <a href="./clipart.html">Clipart <img src="./theme/glyphs/clipart.png" height="15" alt="clipart"></a>
  71.         <a href="./my-photography.html">My Photography <img src="./theme/glyphs/my-photography.png" height="15" alt="my photography"></a>
  72.         <a href="./wallpapers.html" style="border-radius: 0px 0px 16px 16px;">Wallpapers <img src="./theme/glyphs/wallpapers.png" height="20" alt="wallpapers"></a>
  73.       </div>
  74.     </div>
  75.  
  76.     <!-- Scam Avoidance Dropdown -->
  77.     <div class="dropdown" title="dropdown">
  78.       <button class="dropbtn">Scam Avoidance <i class="fa fa-caret-down"></i></button>
  79.       <div class="dropdown-content">
  80.         <a href="./scam-avoidance.html" style="border-radius: 16px 16px 0px 0px;"><b>Scam Avoidance</b></a>
  81.         <a href="./common-scams.html">Common Scams <img src="./theme/glyphs/common-scams.png" height="15" alt="common scams"></a>
  82.         <a href="./report-a-scam.html">Report a Scam <img src="./theme/glyphs/report.png" height="15" alt="report a scam"></a>
  83.         <a href="./scam-avoidance-blog.html">Scam Avoidance Blog <img src="./theme/glyphs/blog.png" height="15" alt="scam avoidance blog"></a>
  84.         <a href="./scam-avoidance-tips.html">Scam Avoidance Tips</a>
  85.         <a href="./scam-info-updates.html" style="border-radius: 0px 0px 16px 16px;">Scam Info Updates <img src="./theme/glyphs/updates.png" height="15" alt="scam info updates"></a>
  86.       </div>
  87.     </div>
  88.  
  89.     <!-- Site Related Dropdown -->
  90.     <div class="dropdown" title="dropdown">
  91.       <button class="dropbtn">Site Related <i class="fa fa-caret-down"></i></button>
  92.       <div class="dropdown-content">
  93.         <a href="./site-related.html" style="border-radius: 16px 16px 0px 0px;"><b>Site Related</b></a>
  94.         <a href="./all-pages.html">All Pages <img src="./theme/glyphs/all-pages.png" height="12" style="vertical-align:baseline;" alt="all pages"></a>
  95.         <a href="./changelog.html">Changelog</a>
  96.         <a href="./downloads.html">Downloads <img src="./theme/glyphs/downloads.png" height="15" alt="downloads"></a>
  97.         <a href="./get-help.html">Get Help <img src="./theme/glyphs/get-help.png" height="15" alt="get help"></a>
  98.         <a href="./previews.html">Previews</a>
  99.         <a href="./report-an-issue.html">Report an Issue <img src="./theme/glyphs/report.png" height="15" alt="report an issue"></a>
  100.         <a href="./saved-site-revisions.html" style="border-radius: 0px 0px 16px 16px;">Saved Site Revisions <img src="./theme/glyphs/floppy.png" height="15"></a>      </div>
  101.     </div>
  102.  
  103.     <!-- Help & Contact Dropdown -->
  104.     <div class="dropdown" title="dropdown">
  105.       <button class="dropbtn">Help & Contact <i class="fa fa-caret-down"></i></button>
  106.      <div class="dropdown-content">
  107.          <a href="./help-contact.html" style="border-radius: 16px 16px 0px 0px;"><b>Help & Contact</b></a>
  108.          <a href="./contact-me.html">Contact Me  <img src="./theme/glyphs/contact-me.png" height="15" alt="contact me"></a>
  109.          <a href="./website-survey.html">Site Survey  <img src="./theme/glyphs/survey.png" height="15" alt="site survey"></a>
  110.          &nbsp;
  111.           <a href="https://m.youtube.com/channel/UC_xMgHdzp5AWR7rVZ89-sYg">YouTube <img src="./theme/glyphs/triangle.png" height="15" alt="youtube"></a>
  112.           <a href="https://twitter.com/theiphonefan"> 𝕏</a>
  113.           <a href="https://www.instagram.com/theiphonefan_/">Instagram πŸ“·</a>
  114.           <a href="mailto:jordan.theiphonefan@gmail.com" style="border-radius: 0px 0px 16px 16px;">Mail βœ‰οΈ</a>
  115.       </div>
  116.     </div>
  117.     </div>
  118.   </div>
  119.  
  120.   <!-- Sidebar Button -->
  121.   <button class="openbtn" onclick="toggleSidebar()" title="sidebar button">☰</button>
  122.  
  123.   <div class="sidebar" id="mySidebar">
  124.       <h3 style="color:black;margin-top:40px;">TheiPhoneFan.com</h3>
  125.       <a href="./index.html">Home <img src="./theme/glyphs/home.png" height="15" alt="home"></a>
  126.       <details>
  127.           <summary>Channel Related</summary>
  128.           <a href="./channel-related.html"><b>Channel Related</b></a>
  129.           <a href="https://www.youtube.com/@theiphonefan761/about">Channel Info  <img src="./theme/glyphs/channel-info.png" height="15" alt="channel info"></a>
  130.           <a href="./music-i-use.html">Music I Use <img src="./theme/glyphs/music-i-use.png" height="15" alt="music i use"></a>
  131.           <a href="./my-playlists.html">My Playlists <img src="./theme/glyphs/triangle.png" height="15" alt="my playlists"></a>
  132.           <a href="./my-top-5-vids.html">My Top 5 Vids <img src="./theme/glyphs/triangle.png" height="15" alt="top 5 vids"></a>
  133.           <a href="./my-videos.html">My Videos <img src="./theme/glyphs/triangle.png" height="15" alt="my videos"></a>
  134.           <a href="./thumbnail-design.html">Thumbnail Design <img src="./theme/glyphs/thumbnail-design.png" height="15" alt="thumbnail design"></a>
  135.           <hr>
  136.       </details>
  137.       <details>
  138.           <summary>Content</summary>
  139.           <a href="./content.html"><b>Content</b></a>
  140.           <a href="./apple-archive.html">Apple Archive <img src="./theme/glyphs/apple.png" height="15" alt="apple archive"></a>
  141.           <a href="./apple-concepts.html">Apple Concepts <img src="./theme/glyphs/apple.png" height="15" alt="apple concepts"></a>
  142.           <a href="./articles.html">Articles <img src="./theme/glyphs/articles.png" height="15" alt="articles"></a>
  143.           <a href="./blog.html">Blog <img src="./theme/glyphs/blog.png" height="15" alt="blog"></a>
  144.           <a href="./clipart.html">Clipart <img src="./theme/glyphs/clipart.png" height="15" alt="clipart"></a>
  145.           <a href="./my-photography.html">My Photography <img src="./theme/glyphs/my-photography.png" height="15" alt="my photography"></a>
  146.           <a href="./wallpapers.html">Wallpapers <img src="./theme/glyphs/wallpapers.png" height="20" alt="wallpapers"></a>
  147.           <hr>
  148.       </details>
  149.       <details>
  150.           <summary>Scam Avoidance</summary>
  151.           <a href="./scam-avoidance.html"><b>Scam Avoidance</b></a>
  152.           <a href="./common-scams.html">Common Scams <img src="./theme/glyphs/common-scams.png" height="15" alt="common scams"></a>
  153.           <a href="./report-a-scam.html">Report a Scam <img src="./theme/glyphs/report.png" height="15" alt="report a scam"></a>
  154.           <a href="./scam-avoidance-blog.html">Scam Avoidance Blog <img src="./theme/glyphs/blog.png" height="15" alt="scam avoidance blog"></a>
  155.           <a href="./scam-avoidance-tips.html">Scam Avoidance Tips</a>
  156.           <a href="./scam-info-updates.html">Scam Info Updates <img src="./theme/glyphs/updates.png" height="15" alt="scam info updates"></a>
  157.           <hr>
  158.       </details>
  159.       <details>
  160.           <summary>Site Related</summary>
  161.               <a href="./site-related.html"><b>Site Related</b></a>
  162.               <a href="./all-pages.html">All Pages <img src="./theme/glyphs/all-pages.png" height="12" style="vertical-align:baseline;" alt="all pages"></a>
  163.               <a href="./changelog.html">Changelog</a>
  164.               <a href="./downloads.html">Downloads <img src="./theme/glyphs/downloads.png" height="15" alt="downloads"></a>
  165.               <a href="./get-help.html">Get Help <img src="./theme/glyphs/get-help.png" height="15" alt="get help"></a>
  166.               <a href="./previews.html">Previews</a>
  167.               <a href="./report-an-issue.html">Report an Issue <img src="./theme/glyphs/report.png" height="15" alt="report an issue"></a>
  168.               <a href="./saved-site-revisions.html">Saved Site Revisions <img src="./theme/glyphs/floppy.png" height="15" alt="saved site revisions"></a>
  169.           <hr>
  170.       </details>
  171.       <details>
  172.           <summary>Help & Contact</summary>
  173.          <a href="./help-contact.html"><b>Help & Contact</b></a>
  174.          <a href="./contact-me.html">Contact Me  <img src="./theme/glyphs/contact-me.png" height="15" alt="contact me"></a>
  175.          <a href="./website-survey.html">Site Survey  <img src="./theme/glyphs/survey.png" height="15" alt="site survey"></a>
  176.          <hr>
  177.      </details>
  178.  
  179.      <div class="mydiv" style="margin-bottom:20px;">
  180.         <a href="https://www.youtube.com/channel/UC_xMgHdzp5AWR7rVZ89-sYg" style="padding:0px;background-color:transparent;display:inline;">
  181.             <img src="./theme/social-icons/youtube-social.png" alt="My YouTube Channel" width="40">
  182.         </a>
  183.         <a href="https://twitter.com/theiphonefan" style="padding:0px;background-color:transparent;display:inline;">
  184.             <img src="./theme/social-icons/x-social.png" alt="My X Account" width="40">
  185.         </a>
  186.         <a href="https://instagram.com/theiphonefan_/" style="padding:0px;background-color:transparent;display:inline;">
  187.             <img src="./theme/social-icons/instagram-social.png" alt="My Instagram Account" width="40">
  188.         </a>
  189.         <a href="mailto:jordan.theiphonefan@gmail.com" style="padding:0px;background-color:transparent;display:inline;">
  190.             <img src="./theme/social-icons/mail-social.png" alt="Email Me" width="40">
  191.         </a>
  192.     </div>
  193.   </div>
  194.  
  195.     <!-- Displays If JavaScript Is Disabled -->
  196.     <noscript>
  197.         <img src="./theme/critical-error.png" style="border-radius:4px;" width="30px">
  198.         Your browser does not support JavaScript or it is disabled. To use all site features, please enable JavaScript or try another browser.
  199.     </noscript>
  200.     <div class="header">
  201.         <div class="mydiv">
  202.             <!-- Page Title & Info -->
  203.             <h1>My Photography</h1>
  204.             <p>On this page, I have included some of my better pictures that I have taken, I'm not a professional photographer, these are just some photos that turned out well. Click on an image to enlarge it.</p>
  205.             <p><b>Note:</b> Most of these images are unedited, if they are, I have added a note under the image. I have also upscaled some images with AI, so I included that.
  206.             <br>Some black & white photos have also been <a href="https://www.img2go.com/colorize-image">colorized</a>, I have added a note to those images too</p>
  207.            <!-- Twitter Share Button -->
  208.            <div class="myDiv">
  209.                <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-related="theiphonefan" data-show-count="false">Tweet</a>
  210.                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  211.            </div>
  212.        </div>
  213.    </div>
  214.    <!-- Page Content -->
  215.    <!-- Jump To Sections -->
  216.    <div class="mydiv">
  217.        <p><b>Jump To A Section</b></p>
  218.        <button><a href="#nature-photos"><b>Nature Photos🌻</b></a></button>
  219.        <button><a href="#lake-erie"><b>Lake Erie🌊</b></a></button>
  220.        <button><a href="#spring-flowers"><b>Spring Flowers🌸</b></a></button>
  221.        <button><a href="#farm"><b>Farm🚜</b></a></button>
  222.        <button><a href="#poloroids"><b>PoloroidsπŸ“Ή</b></a></button>
  223.        <button><a href="#movie-theater"><b>Movie Theater🎭</b></a></button>
  224.    </div>
  225.  
  226.    <!-- Nature Photos -->
  227.    <h3 id="nature-photos">Nature Photos</h3>
  228.    <div class="slideshow-container">
  229.        <div class="slide-img">
  230.          <img src="./assets/my-photography/nature/nature-1.png">
  231.          <figcaption class="caption-txt">Tree Leaves In The Summer</figcaption>
  232.          <figcaption class="caption-txt">Taken July 14, 2021</figcaption>
  233.        </div>
  234.  
  235.        <div class="slide-img">
  236.            <img src="./assets/my-photography/nature/nature-2.png" style="max-width:350px;" class="photography" alt="Sun rays piercing through fluffy clouds against a serene blue sky.">
  237.             <figcaption class="caption-txt">Summer Sun In The Sky (Edited)</figcaption>
  238.             <figcaption class="caption-txt">Taken July 14, 2021</figcaption>
  239.         </div>
  240.  
  241.         <div class="slide-img">
  242.             <img src="./assets/my-photography/nature/nature-3.png" style="max-width:350px;" class="photography" alt="Clouds in the summer sky illuminated by the bright sun. ">
  243.             <figcaption class="caption-txt">Clouds Illuminated By The Summer Sun <br>(Edited, AI Upscaled)</br></figcaption>
  244.             <figcaption class="caption-txt">Taken July 14, 2021</figcaption>
  245.         </div>
  246.  
  247.         <div class="slide-img">
  248.             <img src="./assets/my-photography/nature/nature-4.png" style="max-width:350px;" class="photography" alt="A lush green tree standing tall amidst a serene woodland, adorned with vibrant leaves.">
  249.             <figcaption class="caption-txt">Image Of A Tree (Edited)</figcaption>
  250.             <figcaption class="caption-txt">Taken June 5, 2021</figcaption>
  251.         </div>
  252.  
  253.         <div class="slide-img">
  254.             <img src="./assets/my-photography/nature/nature-5.png" class="photography" alt="A tree standing in front of a brick apartment building, creating a serene and urban landscape.">
  255.             <figcaption class="caption-txt">Tree In Front Of A House</figcaption>
  256.             <figcaption class="caption-txt">Taken May 31, 2021</figcaption>
  257.         </div>
  258.  
  259.         <div class="slide-img">
  260.             <img src="./assets/my-photography/nature/leaf.png" class="photography" alt="Image of plant leaves with yellow spots, known as Gold dust croton.">
  261.             <figcaption class="caption-txt">Gold Dust Croton Leaf</figcaption>
  262.             <figcaption class="caption-txt">Taken February 20, 2023</figcaption>
  263.         </div>
  264.            
  265.         <div class="slide-img">
  266.             <img src="./assets/my-photography/nature/butterfly.png" class="photography" alt="Banded orange heliconian butterfly perched on a plant with orange stripes on its wings.">
  267.             <figcaption class="caption-txt">Butterfly (AI Upscaled)</figcaption>
  268.             <figcaption class="caption-txt">Taken February 20, 2023</figcaption>
  269.         </div>
  270.     </div>
  271.    
  272.  
  273.         <div class="preview-container">
  274.             <img class="preview-img" src="./assets/my-photography/nature/nature-1.png" onclick="currentSlide(1)" alt="Preview 1">
  275.             <img class="preview-img" src="./assets/my-photography/nature/nature-2.png" onclick="currentSlide(2)" alt="Preview 2">
  276.             <img class="preview-img" src="./assets/my-photography/nature/nature-3.png" onclick="currentSlide(3)" alt="Preview 3">
  277.             <img class="preview-img" src="./assets/my-photography/nature/nature-4.png" onclick="currentSlide(4)" alt="Preview 4">
  278.             <img class="preview-img" src="./assets/my-photography/nature/nature-5.png" onclick="currentSlide(5)" alt="Preview 5">
  279.             <img class="preview-img" src="./assets/my-photography/nature/leaf.png" onclick="currentSlide(6)" alt="Preview 6">
  280.             <img class="preview-img" src="./assets/my-photography/nature/butterfly.png" onclick="currentSlide(7)" alt="Preview 7">
  281.             <!-- Add more previews as needed -->
  282.         </div>
  283.     </div>
  284.  
  285.     <!-- Divider -->
  286.     <hr>
  287.  
  288.     <!-- Nature Photos -->
  289.     <h3 id="nature-photos">Nature Photos</h3>
  290.     <div class="slideshow-container">
  291.         <div class="slide-img" id="lake-1">
  292.           <img src="./assets/my-photography/lake-erie/lake-1.png">
  293.           <figcaption class="caption-txt">A Bird Onlooking Lake Erie</figcaption>
  294.           <figcaption class="caption-txt">Taken July 28, 2022</figcaption>
  295.         </div>
  296.  
  297.         <div class="slide-img" id="lake-2">
  298.             <img src="./assets/my-photography/lake-erie/lake-2.png">
  299.             <figcaption class="caption-txt">The Bird Looks To The Side</figcaption>
  300.             <figcaption class="caption-txt">Taken July 28, 2022</figcaption>
  301.         </div>
  302.  
  303.         <div class="slide-img" id="lake-3">
  304.             <img src="./assets/my-photography/lake-erie/lake-3.png">
  305.             <figcaption class="caption-txt">The Blue Foamy Water</figcaption>
  306.             <figcaption class="caption-txt">Taken July 28, 2022</figcaption>
  307.         </div>
  308.  
  309.         <div class="slide-img" id="lake-4">
  310.             <img src="./assets/my-photography/lake-erie/lake-4.png">
  311.             <figcaption class="caption-txt">The Blue Foamy Water</figcaption>
  312.             <figcaption class="caption-txt">Taken July 28, 2022</figcaption>
  313.         </div>
  314.  
  315.         <div class="slide-img" id="lake-5">
  316.             <img src="./assets/my-photography/lake-erie/lake-5.png">
  317.             <figcaption class="caption-txt">The Lake Right Before Nightfall</figcaption>
  318.             <figcaption class="caption-txt">Taken July 28, 2022</figcaption>
  319.         </div>
  320.    
  321.  
  322.         <div class="preview-container">
  323.             <img class="preview-img" src="./assets/my-photography/lake-erie/lake-1.png" onclick="currentSlide(1)" alt="Preview 1">
  324.             <img class="preview-img" src="./assets/my-photography/lake-erie/lake-2.png" onclick="currentSlide(2)" alt="Preview 2">
  325.             <img class="preview-img" src="./assets/my-photography/lake-erie/lake-3.png" onclick="currentSlide(3)" alt="Preview 3">
  326.             <img class="preview-img" src="./assets/my-photography/lake-erie/lake-4.png" onclick="currentSlide(4)" alt="Preview 4">
  327.             <img class="preview-img" src="./assets/my-photography/lake-erie/lake-5.png" onclick="currentSlide(5)" alt="Preview 5">
  328.             <!-- Add more previews as needed -->
  329.         </div>
  330.     </div>
  331.  
  332.     <!-- Divider -->
  333.     <hr>
  334.  
  335.     <!-- Sping Flowers -->
  336.     <h3 id="spring-flowers">Spring Flowers</h3>
  337.     <div class="flex-container">
  338.         <div>
  339.             <a href="./assets/my-photography/spring-flowers/spring-flowers-1.png">
  340.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-1.png" class="photography" alt="A tree with white flowers in front of a building, creating a serene and picturesque scene.">
  341.             </a>
  342.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  343.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  344.         </div>
  345.  
  346.         <div>
  347.             <a href="./assets/my-photography/spring-flowers/spring-flowers-2.png">
  348.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-2.png" class="photography" alt="A tree with white flowers in front of a building, creating a serene and picturesque scene.">
  349.             </a>
  350.             <figcaption class="caption-txt">Blossoming Tree Flowers (Edited)</figcaption>
  351.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  352.         </div>
  353.  
  354.         <div>
  355.             <a href="./assets/my-photography/spring-flowers/spring-flowers-3.png">
  356.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-3.png" class="photography">
  357.             </a>
  358.             <figcaption class="caption-txt">Blossoming Tree Flowers (Edited)</figcaption>
  359.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  360.         </div>
  361.  
  362.         <div>
  363.             <a href="./assets/my-photography/spring-flowers/spring-flowers-4.png">
  364.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-4.png" class="photography">
  365.             </a>
  366.             <figcaption class="caption-txt">Blossoming Tree Flowers (Edited)</figcaption>
  367.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  368.         </div>
  369.  
  370.         <div>
  371.             <a href="./assets/my-photography/spring-flowers/spring-flowers-5.png">
  372.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-5.png" class="photography">
  373.             </a>
  374.             <figcaption class="caption-txt">Blossoming Tree Flowers (Edited)</figcaption>
  375.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  376.         </div>
  377.  
  378.         <div>
  379.             <a href="./assets/my-photography/spring-flowers/spring-flowers-6.png">
  380.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-6.png" class="photography">
  381.             </a>
  382.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  383.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  384.         </div>
  385.  
  386.         <div>
  387.             <a href="./assets/my-photography/spring-flowers/spring-flowers-7.png">
  388.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-7.png" class="photography">
  389.             </a>
  390.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  391.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  392.         </div>
  393.  
  394.         <div>
  395.             <a href="./assets/my-photography/spring-flowers/spring-flowers-8.png">
  396.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-8.png" class="photography">
  397.             </a>
  398.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  399.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  400.         </div>
  401.  
  402.         <div>
  403.             <a href="./assets/my-photography/spring-flowers/spring-flowers-9.png">
  404.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-9.png" class="photography">
  405.             </a>
  406.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  407.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  408.         </div>
  409.  
  410.         <div>
  411.             <a href="./assets/my-photography/spring-flowers/spring-flowers-10.png">
  412.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-10.png" class="photography">
  413.             </a>
  414.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  415.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  416.         </div>
  417.  
  418.         <div>
  419.             <a href="./assets/my-photography/spring-flowers/spring-flowers-11.png">
  420.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-11.png" class="photography">
  421.             </a>
  422.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  423.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  424.         </div>
  425.  
  426.         <div>
  427.             <a href="./assets/my-photography/spring-flowers/spring-flowers-12.png">
  428.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-12.png" class="photography">
  429.             </a>
  430.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  431.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  432.         </div>
  433.  
  434.         <div>
  435.             <a href="./assets/my-photography/spring-flowers/spring-flowers-13.png">
  436.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-13.png" class="photography">
  437.             </a>
  438.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  439.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  440.         </div>
  441.  
  442.         <div>
  443.             <a href="./assets/my-photography/spring-flowers/spring-flowers-14.png">
  444.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-14.png" class="photography">
  445.             </a>
  446.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  447.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  448.         </div>
  449.  
  450.         <div>
  451.             <a href="./assets/my-photography/spring-flowers/spring-flowers-15.png">
  452.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-15.png" class="photography">
  453.             </a>
  454.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  455.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  456.         </div>
  457.  
  458.         <div>
  459.             <a href="./assets/my-photography/spring-flowers/spring-flowers-16.png">
  460.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-16.png" class="photography">
  461.             </a>
  462.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  463.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  464.         </div>
  465.  
  466.         <div>
  467.             <a href="./assets/my-photography/spring-flowers/spring-flowers-17.png">
  468.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-17.png" class="photography">
  469.             </a>
  470.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  471.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  472.         </div>
  473.  
  474.         <div>
  475.             <a href="./assets/my-photography/spring-flowers/spring-flowers-17.png">
  476.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-18.png" class="photography">
  477.             </a>
  478.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  479.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  480.         </div>
  481.  
  482.         <div>
  483.             <a href="./assets/my-photography/spring-flowers/spring-flowers-19.png">
  484.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-19.png" class="photography">
  485.             </a>
  486.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  487.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  488.         </div>
  489.  
  490.         <div>
  491.             <a href="./assets/my-photography/spring-flowers/spring-flowers-20.png">
  492.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-20.png" class="photography">
  493.             </a>
  494.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  495.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  496.         </div>
  497.  
  498.         <div>
  499.             <a href="./assets/my-photography/spring-flowers/spring-flowers-21.png">
  500.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-21.png" class="photography">
  501.             </a>
  502.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  503.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  504.         </div>
  505.  
  506.         <div>
  507.             <a href="./assets/my-photography/spring-flowers/spring-flowers-21.png">
  508.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-21.png" class="photography">
  509.             </a>
  510.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  511.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  512.         </div>
  513.  
  514.         <div>
  515.             <a href="./assets/my-photography/spring-flowers/spring-flowers-22.png">
  516.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-22.png" class="photography">
  517.             </a>
  518.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  519.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  520.         </div>
  521.  
  522.         <div>
  523.             <a href="./assets/my-photography/spring-flowers/spring-flowers-23.png">
  524.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-23.png" class="photography">
  525.             </a>
  526.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  527.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  528.         </div>
  529.  
  530.         <div>
  531.             <a href="./assets/my-photography/spring-flowers/spring-flowers-24.png">
  532.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-24.png" class="photography">
  533.             </a>
  534.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  535.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  536.         </div>
  537.  
  538.         <div>
  539.             <a href="./assets/my-photography/spring-flowers/spring-flowers-25.png">
  540.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-25.png" class="photography">
  541.             </a>
  542.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  543.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  544.         </div>
  545.  
  546.         <div>
  547.             <a href="./assets/my-photography/spring-flowers/spring-flowers-26.png">
  548.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-26.png" class="photography">
  549.             </a>
  550.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  551.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  552.         </div>
  553.  
  554.         <div>
  555.             <a href="./assets/my-photography/spring-flowers/spring-flowers-27.png">
  556.                 <img src="./assets/my-photography/spring-flowers/spring-flowers-27.png" class="photography">
  557.             </a>
  558.             <figcaption class="caption-txt">Blossoming Tree Flowers</figcaption>
  559.             <figcaption class="caption-txt">Taken April 2022</figcaption>
  560.         </div>
  561.     </div>
  562.  
  563.     <!-- Divider -->
  564.     <hr>
  565.  
  566.     <!-- Farm -->
  567.     <h3 id="farm">Farm</h3>
  568.     <div class="flex-container">
  569.         <div>
  570.             <a href="./assets/my-photography/farm/farm-1.png">
  571.                 <img src="./assets/my-photography/farm/farm-1.png" class="photography">
  572.             </a>
  573.             <figcaption class="caption-txt">The Farm In The Morning</figcaption>
  574.             <figcaption class="caption-txt">Taken on June 13, 2023</figcaption>
  575.         </div>
  576.  
  577.         <div>
  578.             <a href="./assets/my-photography/farm/farm-2.png">
  579.                 <img src="./assets/my-photography/farm/farm-2.png" class="photography">
  580.             </a>
  581.             <figcaption class="caption-txt">The Farm On A Cloudy Day</figcaption>
  582.             <figcaption class="caption-txt">Taken on June 19, 2023</figcaption>
  583.         </div>
  584.  
  585.         <div>
  586.             <a href="./assets/my-photography/farm/farm-3.png">
  587.                 <img src="./assets/my-photography/farm/farm-3.png" class="photography">
  588.             </a>
  589.             <figcaption class="caption-txt">The Farm On A Sunny Day</figcaption>
  590.             <figcaption class="caption-txt">Taken on June 24, 2023</figcaption>
  591.         </div>
  592.  
  593.         <div>
  594.             <a href="./assets/my-photography/farm/farm-4.png">
  595.                 <img src="./assets/my-photography/farm/farm-4.png" class="photography">
  596.             </a>
  597.             <figcaption class="caption-txt">The Farm On A Sunny Day</figcaption>
  598.             <figcaption class="caption-txt">Taken on June 24, 2023</figcaption>
  599.         </div>
  600.  
  601.         <div>
  602.             <a href="./assets/my-photography/farm/farm-5.png">
  603.                 <img src="./assets/my-photography/farm/farm-5.png" class="photography">
  604.             </a>
  605.             <figcaption class="caption-txt">The Farm On A Sunny Day</figcaption>
  606.             <figcaption class="caption-txt">Taken on June 24, 2023</figcaption>
  607.         </div>
  608.        
  609.         <div>
  610.             <a href="./assets/my-photography/farm/farm-6.png">
  611.                 <img src="./assets/my-photography/farm/farm-6.png" class="photography">
  612.             </a>
  613.             <figcaption class="caption-txt">The Farm On A Windy Day</figcaption>
  614.             <figcaption class="caption-txt">Taken on August 29, 2023</figcaption>
  615.         </div>
  616.  
  617.         <div>
  618.             <a href="./assets/my-photography/farm/farm-7.png">
  619.                 <img src="./assets/my-photography/farm/farm-7.png" class="photography">
  620.             </a>
  621.             <figcaption class="caption-txt">The Farm During Sunset</figcaption>
  622.             <figcaption class="caption-txt">Taken on September 2, 2023</figcaption>
  623.         </div>
  624.  
  625.         <div>
  626.             <a href="./assets/my-photography/farm/farm-8.png">
  627.                 <img src="./assets/my-photography/farm/farm-8.png" class="photography">
  628.             </a>
  629.             <figcaption class="caption-txt">The Farm During Sunset</figcaption>
  630.             <figcaption class="caption-txt">Taken on September 2, 2023</figcaption>
  631.         </div>
  632.  
  633.         <div>
  634.             <a href="./assets/my-photography/farm/farm-9.png">
  635.                 <img src="./assets/my-photography/farm/farm-9.png" class="photography">
  636.             </a>
  637.             <figcaption class="caption-txt">The Farm During Sunset</figcaption>
  638.             <figcaption class="caption-txt">Taken on September 2, 2023</figcaption>
  639.         </div>
  640.  
  641.         <div>
  642.             <a href="./assets/my-photography/farm/farm-10.png">
  643.                 <img src="./assets/my-photography/farm/farm-10.png" class="photography">
  644.             </a>
  645.             <figcaption class="caption-txt">The Farm During Sunset</figcaption>
  646.             <figcaption class="caption-txt">Taken on September 2, 2023</figcaption>
  647.         </div>
  648.  
  649.         <div>
  650.             <a href="./assets/my-photography/farm/farm-11.png">
  651.                 <img src="./assets/my-photography/farm/farm-11.png" class="photography">
  652.             </a>
  653.             <figcaption class="caption-txt">The Farm During Sunset</figcaption>
  654.             <figcaption class="caption-txt">Taken on September 2, 2023</figcaption>
  655.         </div>
  656.  
  657.         <div>
  658.             <a href="./assets/my-photography/farm/farm-12.png">
  659.                 <img src="./assets/my-photography/farm/farm-12.png" class="photography">
  660.             </a>
  661.             <figcaption class="caption-txt">The Farm During Sunset</figcaption>
  662.             <figcaption class="caption-txt">Taken on September 15, 2023</figcaption>
  663.         </div>
  664.     </div>
  665.     <!-- Divider -->
  666.     <hr>
  667.  
  668.     <!-- Polaroids -->
  669.     <h3 id="poloroids">Polaroids</h3>
  670.     <div class="flex-container">
  671.         <div>
  672.             <a href="./assets/my-photography/polaroids/field-1.png">
  673.                 <img src="./assets/my-photography/polaroids/field-1.png" class="photography">
  674.             </a>
  675.             <figcaption class="caption-txt">Field At A Park</figcaption>
  676.             <figcaption class="caption-txt">Taken April 04, 2021</figcaption>
  677.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  678.         </div>
  679.  
  680.         <div>
  681.             <a href="./assets/my-photography/polaroids/field-2.png">
  682.                 <img src="./assets/my-photography/polaroids/field-2.png" class="photography">
  683.             </a>
  684.             <figcaption class="caption-txt">Field At A Park</figcaption>
  685.             <figcaption class="caption-txt">Taken April 04, 2021</figcaption>
  686.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  687.         </div>
  688.  
  689.         <div>
  690.             <a href="./assets/my-photography/polaroids/farm-field-1.png">
  691.                 <img src="./assets/my-photography/polaroids/farm-field-1.png" class="photography">
  692.             </a>
  693.             <figcaption class="caption-txt">Field On A Farm</figcaption>
  694.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  695.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  696.         </div>
  697.  
  698.         <div>
  699.             <a href="./assets/my-photography/polaroids/farm-field-1-colorized.png">
  700.                 <img src="./assets/my-photography/polaroids/farm-field-1-colorized.png" class="photography">
  701.             </a>
  702.             <figcaption class="caption-txt">Field On A Farm (Colorized)</figcaption>
  703.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  704.             <figcaption class="caption-txt">Digitized December 17, 2023</figcaption>
  705.         </div>
  706.  
  707.         <div>
  708.             <a href="./assets/my-photography/polaroids/frame-shed.png">
  709.                 <img src="./assets/my-photography/polaroids/frame-shed.png" class="photography">
  710.             </a>
  711.             <figcaption class="caption-txt">Frame Shed</figcaption>
  712.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  713.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  714.         </div>
  715.  
  716.         <div>
  717.             <a href="./assets/my-photography/polaroids/frame-shed-colorized.png">
  718.                 <img src="./assets/my-photography/polaroids/frame-shed-colorized.png" class="photography">
  719.             </a>
  720.             <figcaption class="caption-txt">Frame Shed (Colorized)</figcaption>
  721.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  722.             <figcaption class="caption-txt">Digitized December 17, 2023</figcaption>
  723.         </div>
  724.  
  725.         <div>
  726.             <a href="./assets/my-photography/polaroids/frame-shed-interior.png">
  727.                 <img src="./assets/my-photography/polaroids/frame-shed-interior.png" class="photography">
  728.             </a>
  729.             <figcaption class="caption-txt">Frame Shed Interior</figcaption>
  730.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  731.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  732.         </div>
  733.  
  734.         <div>
  735.             <a href="./assets/my-photography/polaroids/frame-shed-interior-colorized.png">
  736.                 <img src="./assets/my-photography/polaroids/frame-shed-interior-colorized.png" class="photography">
  737.             </a>
  738.             <figcaption class="caption-txt">Frame Shed Interior (Colorized)</figcaption>
  739.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  740.             <figcaption class="caption-txt">Digitized December 17, 2023</figcaption>
  741.         </div>
  742.  
  743.         <div>
  744.             <a href="./assets/my-photography/polaroids/barn-interior.png">
  745.                 <img src="./assets/my-photography/polaroids/barn-interior.png" class="photography">
  746.             </a>
  747.             <figcaption class="caption-txt">Barn Interior</figcaption>
  748.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  749.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  750.         </div>
  751.  
  752.         <div>
  753.             <a href="./assets/my-photography/polaroids/barn-interior-colorized.png">
  754.                 <img src="./assets/my-photography/polaroids/barn-interior-colorized.png" class="photography">
  755.             </a>
  756.             <figcaption class="caption-txt">Barn Interior (Colorized)</figcaption>
  757.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  758.             <figcaption class="caption-txt">Digitized December 17, 2023</figcaption>
  759.         </div>
  760.  
  761.         <div>
  762.             <a href="./assets/my-photography/polaroids/farm-house.png">
  763.                 <img src="./assets/my-photography/polaroids/farm-house.png" class="photography">
  764.             </a>
  765.             <figcaption class="caption-txt">Farm House</figcaption>
  766.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  767.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  768.         </div>
  769.  
  770.         <div>
  771.             <a href="./assets/my-photography/polaroids/farm-house-colorized.png">
  772.                 <img src="./assets/my-photography/polaroids/farm-house-colorized.png" class="photography">
  773.             </a>
  774.             <figcaption class="caption-txt">Farm House (Colorized)</figcaption>
  775.             <figcaption class="caption-txt">Taken June 21, 2023</figcaption>
  776.             <figcaption class="caption-txt">Digitized December 17, 2023</figcaption>
  777.         </div>
  778.  
  779.         <div>
  780.             <a href="./assets/my-photography/polaroids/walking-trail.png">
  781.                 <img src="./assets/my-photography/polaroids/walking-trail.png" class="photography">
  782.             </a>
  783.             <figcaption class="caption-txt">Walking Trail</figcaption>
  784.             <figcaption class="caption-txt">Taken June 23, 2023</figcaption>
  785.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  786.         </div>
  787.  
  788.         <div>
  789.             <a href="./assets/my-photography/polaroids/walking-trail-colorized.png">
  790.                 <img src="./assets/my-photography/polaroids/walking-trail-colorized.png" class="photography">
  791.             </a>
  792.             <figcaption class="caption-txt">Walking Trail (Colorized)</figcaption>
  793.             <figcaption class="caption-txt">Taken June 23, 2023</figcaption>
  794.             <figcaption class="caption-txt">Digitized December 17, 2023</figcaption>
  795.         </div>
  796.  
  797.         <div>
  798.             <a href="./assets/my-photography/polaroids/farm-field-2.png">
  799.                 <img src="./assets/my-photography/polaroids/farm-field-2.png" class="photography">
  800.             </a>
  801.             <figcaption class="caption-txt">Farm Field</figcaption>
  802.             <figcaption class="caption-txt">Taken June 24, 2023</figcaption>
  803.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  804.         </div>
  805.  
  806.         <div>
  807.             <a href="./assets/my-photography/polaroids/farm-field-2-colorized.png">
  808.                 <img src="./assets/my-photography/polaroids/farm-field-2-colorized.png" class="photography">
  809.             </a>
  810.             <figcaption class="caption-txt">Farm Field (Colorized)</figcaption>
  811.             <figcaption class="caption-txt">Taken June 24, 2023</figcaption>
  812.             <figcaption class="caption-txt">Digitized December 17, 2023</figcaption>
  813.         </div>
  814.  
  815.         <div>
  816.             <a href="./assets/my-photography/polaroids/barbed-wire-fence.png">
  817.                 <img src="./assets/my-photography/polaroids/barbed-wire-fence.png" class="photography">
  818.             </a>
  819.             <figcaption class="caption-txt">Barbed Wire Fence</figcaption>
  820.             <figcaption class="caption-txt">Taken July 04, 2023</figcaption>
  821.             <figcaption class="caption-txt">Digitized December 13, 2023</figcaption>
  822.         </div>
  823.  
  824.         <div>
  825.             <a href="./assets/my-photography/polaroids/barbed-wire-fence-colorized.png">
  826.                 <img src="./assets/my-photography/polaroids/barbed-wire-fence-colorized.png" class="photography">
  827.             </a>
  828.             <figcaption class="caption-txt">Barbed Wire Fence (Colorized)</figcaption>
  829.             <figcaption class="caption-txt">Taken July 04, 2023</figcaption>
  830.             <figcaption class="caption-txt">Digitized December 17, 2023</figcaption>
  831.         </div>
  832.     </div>
  833.  
  834.  
  835.     <!-- Divider -->
  836.     <hr>
  837.  
  838.     <!-- Movie Theater -->
  839.     <h3 id="movie-theater">Movie Theater</h3>
  840.     <div class="flex-container">
  841.         <div>
  842.             <a href="./assets/my-photography/movie-theater/movie-theater-1.png">
  843.                 <img src="./assets/my-photography/movie-theater/movie-theater-1.png" class="photography">
  844.             </a>
  845.             <figcaption class="caption-txt">The Movie Theater Sign Up Close</figcaption>
  846.             <figcaption class="caption-txt">Taken September 18, 2021</figcaption>
  847.         </div>
  848.  
  849.         <div>
  850.             <a href="./assets/my-photography/movie-theater/movie-theater-2.png">
  851.                 <img src="./assets/my-photography/movie-theater/movie-theater-2.png" class="photography">
  852.             </a>
  853.             <figcaption class="caption-txt">The Movie Theater Sign Further Away</figcaption>
  854.             <figcaption class="caption-txt">Taken September 18, 2021</figcaption>
  855.         </div>
  856.  
  857.         <div>
  858.             <a href="./assets/my-photography/movie-theater/movie-theater-3.png">
  859.                 <img src="./assets/my-photography/movie-theater/movie-theater-3.png" class="photography">
  860.             </a>
  861.             <figcaption class="caption-txt">The Movie Theater Sign Far Away</figcaption>
  862.             <figcaption class="caption-txt">Taken September 18, 2021</figcaption>
  863.         </div>
  864.     </div>
  865.  
  866.     <!-- Divider -->
  867.     <hr>
  868.  
  869.  
  870.     <!-- Back To Top Button -->
  871.     <div class="mydiv">
  872.         <a href="#page-top">
  873.             <img src="./theme/action-icons/to-top.png" alt="back to the top of the page button" style="border-radius:20%;" width="40px">
  874.         </a>
  875.     </div>
  876.  
  877.     <script>
  878.         // JavaScript function to toggle the sidebar
  879.         function toggleSidebar() {
  880.             var sidebar = document.getElementById('mySidebar');
  881.             if (sidebar.style.left === '0px') {
  882.                 sidebar.style.left = '-310px';
  883.                 document.getElementsByClassName('openbtn')[0].innerHTML = '☰';
  884.             } else {
  885.                 sidebar.style.left = '0px';
  886.                 document.getElementsByClassName('openbtn')[0].innerHTML = 'Γ—';
  887.             }
  888.         }
  889.  
  890.         // Slideshow
  891.         let slideIndex = 1;
  892.  
  893.         function showSlides(n) {
  894.         let i;
  895.         const slides = document.getElementsByClassName("slide-img");
  896.         const previews = document.getElementsByClassName("preview-img");
  897.  
  898.         if (n > slides.length) {
  899.             slideIndex = 1;
  900.         }
  901.  
  902.         if (n < 1) {
  903.            slideIndex = slides.length;
  904.        }
  905.  
  906.        for (i = 0; i < slides.length; i++) {
  907.            slides[i].style.display = "none";
  908.        }
  909.  
  910.        for (i = 0; i < previews.length; i++) {
  911.            previews[i].classList.remove("active");
  912.        }
  913.  
  914.        slides[slideIndex - 1].style.display = "block";
  915.        previews[slideIndex - 1].classList.add("active");
  916.        }
  917.  
  918.        function currentSlide(n) {
  919.        showSlides(slideIndex = n);
  920.        }
  921.  
  922.        // Initial slide display
  923.        showSlides(slideIndex);
  924.    </script>
  925. </body>
  926.  
  927. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!