-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathphotography.html
More file actions
183 lines (161 loc) · 8.71 KB
/
photography.html
File metadata and controls
183 lines (161 loc) · 8.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;400;600;800&display=swap" rel="stylesheet">
<link rel="icon" type="image/jpg" href="Images/Favicon.png"/>
<script src="https://kit.fontawesome.com/f1c27a6a68.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
<title> Photography | Fizza Ahmed </title>
<meta name="description" content="Portfolio website for Fizza Ahmed">
<meta name="keywords" content="portfolio, artist, toronto, web designer, student">
<meta name="author" content="Fizza Ahmed">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header" style="padding: 0.5em 7vw 0.7em 7vw">
<a href="#main" class="skip"> Skip to Main Content </a>
<span class="name"> <a href="index.html"> fizza ahmed </a></span>
<a href="index.html" class="logo-img"> <img src="Images/logosized.png" alt="Fizza Ahmed Logo - Home" style="max-height:2.5em"> </a>
<nav id="navigation" class="site-navigation" role="navigation">
<ul style="margin: 0px;">
<li class="headLinks">
<div class="dropdown">
<button class="header-category dropdown-button" > Works </button>
<ul class="dropdown-content">
<li><a href="https://fizzara.github.io/art"> Art & Design </a></li>
<li><a href="https://fizzara.github.io/code"> Code </a></li>
<li><a href="https://fizzara.github.io/figma"> Figma Design </a></li>
<li><a href="https://fizzara.github.io/game"> Game Design </a></li>
<li><a href="https://fizzara.github.io/thesis"> Master's Thesis </a><li>
<li><a href="https://fizzara.github.io/photography"> Photography </a></li>
<li><a href="https://fizzara.github.io/video"> Video </a></li>
</ul>
</div>
<span style="border-right: 1px solid white; padding-right: 0.5em;"></span>
<button class="header-category dropdown-button" style="padding-left: 0.5em;" onclick="location.href = 'https://fizzara.github.io/resume';"> Resumé </button>
</li>
</ul>
</nav>
</header>
<main id="main" class="works-content" style="min-height: 80vh">
<h1> Photography Works </h1>
<div class="photoholder" id="story">
<div class="photo">
<div class="slideshow-containter">
<div class="slides1">
<img src="Images/StoryImages/story1.png" alt="A student's desk at night, covered in textbooks and snacks, with a sticky note that reads Finance Midterm at 9 AM" style="width:100%">
</div>
<div class="slides1">
<img src="Images/StoryImages/story2.png" alt="From the doorway a girl is seen walking away from her desk and laptop" style="width:100%">
</div>
<div class="slides1">
<img src="Images/StoryImages/story3.png" alt="Close up of a girl in the dark, her face lit only by her phone as she lies in bed" style="width:100%">
</div>
<div class="slides1">
<img src="Images/StoryImages/story4.png" alt="The girl sleeps in her bed, turned away from her phone which is left on" style="width:100%">
</div>
<div class="slides1">
<img src="Images/StoryImages/story5.png" alt="A close up of the phone shows the girl's alarms for the next day, set for 8 PM" style="width:100%">
</div>
<div style="text-align:center">
<button class="prev" onclick="plusSlides(-1, 0)">❮</button>
<span class="dot1" onclick="currentSlide(1, 0)"></span>
<span class="dot1" onclick="currentSlide(2, 0)"></span>
<span class="dot1" onclick="currentSlide(3, 0)"></span>
<span class="dot1" onclick="currentSlide(4, 0)"></span>
<span class="dot1" onclick="currentSlide(5, 0)"></span>
<button class="next" onclick="plusSlides(1, 0)">❯</button>
</div>
</div>
</div>
<div class="photo-text">
<h2> A Story in Five Images </h2>
<p> Images taken for an assignment where we had to tell a story in five pictures, with no other text or info provided. These images tell the story of a university student up late studying for her midterm the next day. She goes to sleep, confident her alarm is set to wake her up the next day. What she doesn't notice is her alarm isn't set for 8am... but 8pm.
</div>
</div>
<hr style="margin: 30px 0px; border: dashed; border-width: 1px; border-color: #219ebc;">
<div class="photoholder" id="drowning">
<div class="photo">
<div class="slideshow-containter">
<div class="slides2">
<img src="Images/DrowningVoices/DrowningVoices-0422.png" alt="Drowning Voices set piece, a large swooping sheet of flexible styrofoam with garbage stuck to it, lit in purple and blue, from a distance" style="width:100%">
</div>
<div class="slides2">
<img src="Images/DrowningVoices/DrowningVoices-0425.png"alt="Drowning Voices set piece, a large swooping sheet of flexible styrofoam with garbage stuck to it, lit in purple and blue, from a medium distance" style="width:100%">
</div>
<div class="slides2">
<img src="Images/DrowningVoices/DrowningVoices-0427.png"alt="Close up of Drowning Voices set piece, showing details of all the garbage stuck to the sheet, such as plastic cups, fishing net, plastic bags, and more" style="width:100%">
</div>
<div class="slides2">
<img src="Images/DrowningVoices/DrowningVoices-0437.png" alt="Close up of Drowning Voices set piece from a different angle, showing details of the garbage stuck to the sheet such sa netting, foil, rope, and more" style="width:100%">
</div>
<div class="slides2">
<img src="Images/DrowningVoices/DrowningVoices-0440.png"
alt="Drowning Voices set piece, a large swooping sheet of flexible styrofoam with garbage stuck to it, lit in purple and blue, from a medium distance" style="width:100%">
</div>
<div style="text-align:center">
<button class="prev" onclick="plusSlides(-1, 1)">❮</button>
<span class="dot2" onclick="currentSlide(1, 1)"></span>
<span class="dot2" onclick="currentSlide(2, 1)"></span>
<span class="dot2" onclick="currentSlide(3, 1)"></span>
<span class="dot2" onclick="currentSlide(4, 1)"></span>
<span class="dot2" onclick="currentSlide(5, 1)"></span>
<button class="next" onclick="plusSlides(1, 1)">❯</button>
</div>
</div>
</div>
<div class="photo-text">
<h2> Drowning Voices </h2>
<p> Promotional images for the show "Drowning Voices", <i>an environmental based show that dives into the problems we face on a daily basis.</i> These are images taken of the large set piece that was suspended above
the floor with the set lights on, and were used on various social media platforms to drum up interest for the show.
</p>
</div>
</div>
<!-- <h1> Landscape Photography </h1>
<div class="land-photos">
<div class="land-column">
<img src="Images/landscape_photography/_MG_5613.jpg">
<img src="Images/landscape_photography/_MG_5852.jpg">
<img src="Images/landscape_photography/_MG_5935.jpg">
</div>
<div class="land-column">
<img src="Images/landscape_photography/_MG_5912.jpg">
<img src="Images/landscape_photography/_MG_6307.jpg">
<img src="Images/landscape_photography/_MG_6353.jpg">
</div>
<div class="land-column">
<img src="Images/landscape_photography/_MG_4438.jpg">
<img src="Images/landscape_photography/_MG_1946.jpg">
<img src="Images/landscape_photography/_MG_1950.jpg">
</div>
</div> -->
</main>
<footer class="footer">
<div class="footer_name" style="display: flex; gap: 10px; font-size: 2em; align-self: center; align-items: center; font-size: 2em"> <img src="Images/logosized.png" style="max-width: 50px" alt="Fizza Ahmed Logo"> fizza ahmed </div>
<div class="footer_jump">
<p style="margin: 0px;"> Jump To </p>
<ul>
<li><a href="resume.html">My Resume</a></li>
<li><a href="" onclick="footerJump()">A Random Project</a></li>
<li><a href="thesis.html">My Master's Thesis</a></li>
</ul>
</div>
<div class="footer_reach">
<p style="margin: 0px;"> Reach out by </p>
<ul>
<li id="foot_email"><a href="mailto:fizzaahmed2000@hotmail.com"> ✉ Email</a></li>
<li><a href="linkedin.com/in/fizzara"><i class="fa-brands fa-linkedin"></i> LinkedIn</a></li>
<li><a href="https://fizzara.github.io/contact"><i class="fa-regular fa-note-sticky"></i> Contact Form</a></li>
</ul>
</div>
</footer>
<script>
var slideIndex = [1,1];
var slideId = ["slides1", "slides2"]
var dotsId = ["dot1", "dot2"]
showSlides(1, 0);
showSlides(1, 1);
</script>
</body>
</html>