Skip to content

Instantly share code, notes, and snippets.

@smuniza1

smuniza1/dada-tribute-page.markdown

Created December 30, 2024 05:41
Show Gist options
  • Save smuniza1/054ed5305a8ec7efddb9ae35320f58af to your computer and use it in GitHub Desktop.
Save smuniza1/054ed5305a8ec7efddb9ae35320f58af to your computer and use it in GitHub Desktop.
Download ZIP
Dada Tribute Page
Raw
dada-tribute-page.markdown
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main id="main">
<div class="container"><img id="blurred-image" src="https://i.ibb.co/v1Hygqw/IMG-6722.jpg" alt="Dada holding Abeer and Muniza">
<img id="unblurred-image" src="https://i.ibb.co/v1Hygqw/IMG-6722.jpg" alt="Dada holding Abeer and Muniza">
<h1 id="title">Khalil Ahmed Siddiqui</h1>
<p id="tribute-info">Khalil Ahmed Siddiqui was a beloved father, grandfather, and husband. With his love for food and his intelligence, he inspired us to be good people. </p>
</div>
<!--Photo grid-->
<div id="gallery">
<figure id="img-div">
<img src="https://i.ibb.co/R3zd3RX/IMG-5680.jpg" alt="Dada and family" style="width:100%" id="image">
<figcaption id="img-caption">Dada and family</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/BNtRYMb/IMG-5677.jpg" alt="Dada eating a popsicle" style="width:100%" id="image">
<figcaption id="img-caption">Dada at our family picnic</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/CVFHpbh/IMG-5681.jpg" alt="IMG-5681" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/ZBWc5NL/IMG-5683.jpg" alt="IMG-5683" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/phBbbfH/IMG-5675.jpg" alt="Dada and Mustafa at a wedding" style="width:100%" id="image">
<figcaption id="img-caption">Dada and Mustafa at a wedding</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/kMKzqfN/IMG-5679.jpg" alt="IMG-5679" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/NKS5cZf/57fa6361-9eae-423c-943d-026743f56024.jpg" alt="57fa6361-9eae-423c-943d-026743f56024" style="width:100%" id="image">
<figcaption id="img-caption">Dada playing Bridge</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/1fkQZbL/765bb812-2686-4567-b691-d05ad3ff93a6.jpg" alt="765bb812-2686-4567-b691-d05ad3ff93a6" style="width:100%" id="image">
<figcaption id="img-caption">Dada at the Bridge meetup</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/JCFbRm1/3669fa4d-5265-4bfb-8dd8-8ca5eb1b2cb7.jpg" alt="3669fa4d-5265-4bfb-8dd8-8ca5eb1b2cb7" style="width:100%" id="image">
<figcaption id="img-caption">Dada and Dadi's anniversary in 2023</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/RgQNss2/IMG-5684.jpg" alt="IMG-5684" style="width:100%" id="image">
<figcaption id="img-caption">Alyaan and Aarij's graduation party</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/7RDLMYS/IMG-5685.jpg" alt="IMG-5685" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/Kym86my/2d325cd4-a531-429c-8593-1e4d5d257f6c.jpg" alt="2d325cd4-a531-429c-8593-1e4d5d257f6c" style="width:100%" id="image">
<figcaption id="img-caption">Dada after Aakif Bhai's graduation</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/VmPnWKB/869a99f7-1183-4bf2-b96c-33385be7b4ae.jpg" alt="869a99f7-1183-4bf2-b96c-33385be7b4ae" style="width:100%" id="image">
<figcaption id="img-caption">Dada on Election Day</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/GvGjwR5/2012-06-07-2019-39-07-Original.jpg" alt="2012-06-07-2019-39-07-Original" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/cJH8C7P/b9358359-7238-4571-8eb0-e6f23373f453.jpg" alt="b9358359-7238-4571-8eb0-e6f23373f453" style="width:100%" id="image">
<figcaption id="img-caption">Dada on Father's Day celebration</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/crTbKkj/IMG-3517.jpg" alt="IMG-3517" style="width:100%" id="image">
<figcaption id="img-caption">Aafi showing Dada his boy scouts' medals</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/98ZGXxC/939a98c2-ffd5-4a0b-9a68-95b492ee9b17.jpg" alt="939a98c2-ffd5-4a0b-9a68-95b492ee9b17" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/X419Fp2/IMG-3876.jpg" alt="IMG-3876" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/Tt6ZzyP/IMG-7171.jpg" alt="IMG-7171" style="width:100%" id="image">
<figcaption id="img-caption">Dada, Aleza, Alena, & Manahil</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/8M3pMXp/IMG-8697.jpg" alt="IMG-8697" style="width:100%" id="image">
<figcaption id="img-caption">Abeer and Dada</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/0Kymq0f/IMG-9784.jpg" alt="IMG-9784" style="width:100%" id="image">
<figcaption id="img-caption">Abeer and Dada playing chess</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/Snm5Snh/IMG-9816.jpg" alt="IMG-9816" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/P91TQpV/674ec3ed-c4cf-4188-9d87-6f3048107c8a.jpg" alt="674ec3ed-c4cf-4188-9d87-6f3048107c8a" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/9h4pVxR/72d3927a-07ef-4fb5-a70c-eb29bc6dde94.jpg" alt="72d3927a-07ef-4fb5-a70c-eb29bc6dde94" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/t4CBbKT/63cd0573-5155-4443-8ec7-c60426322a08.jpg" alt="63cd0573-5155-4443-8ec7-c60426322a08" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/pj6N6gX/772872a1-fd9d-46cd-9ba8-56e94116f278.jpg" alt="772872a1-fd9d-46cd-9ba8-56e94116f278" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/j3my2Df/eefe3994-c79b-412e-a80b-5d63dac93e50.jpg" alt="eefe3994-c79b-412e-a80b-5d63dac93e50" style="width:100%" id="image">
<figcaption id="img-caption">Dada at Aali's graduation</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/72fWYmy/eafe174f-a0f2-47ce-bd73-fb3a76b12d6e.jpg" alt="eafe174f-a0f2-47ce-bd73-fb3a76b12d6e" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/1nnpZND/df07f866-344b-4b07-8e2c-adf158b0a8f4.jpg" alt="df07f866-344b-4b07-8e2c-adf158b0a8f4" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/q51t0dw/be082199-d48a-40d5-8111-3b2ecdbb9ff8.jpg" alt="be082199-d48a-40d5-8111-3b2ecdbb9ff8" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/sQXyWbq/b175eb24-d766-44bc-b703-01a4e660b479.jpg" alt="b175eb24-d766-44bc-b703-01a4e660b479" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/gTStR3j/a687c136-1bd1-467a-9b14-73056e07d44b.jpg" alt="a687c136-1bd1-467a-9b14-73056e07d44b" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/98VRY5Z/a081a2c5-9d32-459a-b5f1-a932d5abf4ae.jpg" alt="a081a2c5-9d32-459a-b5f1-a932d5abf4ae" style="width:100%" id="image">
<figcaption id="img-caption">Dada and family in front of Taj Mahal</figcaption>
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/hg6bBwW/5866363b-6592-455c-bcaf-bb5d647a0c1e.jpg" alt="5866363b-6592-455c-bcaf-bb5d647a0c1e" style="width:100%" id="image">
</figure>
<figure id="img-div">
<img src="https://i.ibb.co/87r0g7q/25361bdc-5117-48fb-91e0-b42bd1f4b8b3.jpg" alt="25361bdc-5117-48fb-91e0-b42bd1f4b8b3" style="width:100%" id="image">
</figure>
</div>
<p id="footer">Website made by <a id="tribute-link" target="_blank" href="https://munizasiddiqui.cargo.site/">Muniza Siddiqui</a></p>
</main>
</body>
</html>
Raw
style.css
.container {
position: relative;
}
#unblurred-image {
position: absolute;
width: 65%;
height: auto;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(0px 0px 15px black);
}
#blurred-image {
width: 100%;
height: auto;
padding: 0;
margin-bottom: 30px;
filter: blur(4px);
}
body, html {
padding: 0;
margin: 0;
}
h1 {
font-size: 60px;
color: white;
font-family: "Arial";
text-align: center;
position: absolute;
top: 79%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.8));
white-space: nowrap;
}
#tribute-info {
font-family: Arial;
text-align: center;
vertical-align: center;
color: white;
position: absolute;
top: 88%;
left: 50%;
transform: translateX(-50%);
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.8));
}
#gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 3px;
}
img {
display: block;
}
#gallery figure {
margin: 20px;
vertical-align: middle;
width: max-width;
max-width: 200px;
display: inline-block;
text-align: center;
}
#image {
max-width: 100%;
height: auto;
vertical-align: middle;
}
figcaption {
font-family: Verdana;
margin-top: 10px;
font-size: 13px;
text-align: center;
color: rgb(33, 33, 33);
display: inline-block;
}
#footer {
font-family: Arial;
color: rgb(33, 33, 33);
margin-left: 10px;
margin-bottom: 10px;
font-size: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment