knes381finalproject.github.io/project3.html at main · mahnoor-mc/knes381finalproject.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Drawings">
    <meta name="keywords" content="words">
    <meta name="author" content="Mahnoor Chaudhry">
    <title>Artwork</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="style-project.css">
    <!-- font for the quote embed code from google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&display=swap" rel="stylesheet">
    <!-- font for the body -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <!-- font for headings -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
</head>

<body>
  <!-- navigation bar -->
    <nav class="sticky">
        <label for="drop" class="toggle" id="main-toggle">
            <span class="nav-icon"></span>
        </label>
        <input type="checkbox" id="drop">
        <ul class="main-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about-me.html">About Me</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="resume.html">Resume/CV</a></li>
            <li><a href="index.html#contact-me">Contact Me</a></li>
        </ul>
    </nav>

    <!-- project name -->
    <section class="w-900 padding center">
        <h2 class="medium-spacing-halfsize">Artwork</h2>
        <p class="center italic">Procreate</p>
    </section>

    <!-- about this project -->
    <section class="w-900 padding center">
        <h3 class="main-title">My Drawings!</h3>
        <section>
            <p class="justify">Drawing has always been one of my favorite ways to unwind and express myself. Whether it’s sketching something spontaneous or carefully crafting a concept, I love how drawing lets me slow down and focus on the details. I usually work digitally using Procreate, which gives me the freedom to experiment with color, texture, and lighting in ways that traditional mediums can’t. It’s also super satisfying to see a piece evolve from a rough idea into something polished and expressive.

</p>
          <p class="justify">What I enjoy most is how drawing can capture a mood or tell a story without needing any words. Sometimes I’ll start with a song or a feeling and try to translate that into an image. I love playing with atmosphere—stormy skies, glowing light, or bold shadows—to create something immersive. Every drawing feels like a little creative experiment, and no matter the result, the process itself is what keeps me coming back.

</p>
        </section>
    </section>

    <section class="w-900 padding">
        <h3 class="main-title center">Some Digital Drawings/Scenery!</h3>
        <p class="center">Below I'll show some photos and time-lapses of my drawings!</p>
        </section>
    <section class="wrapper">
        <section class="column card justify flex">
            <p class="bold center">Grass Drawing</p>
            <a href="assets/grass.png" target="_blank">
            <img class="box project-img" src="assets/grass.png" alt="project4">
            </a>
        </section>
        <section class="column card justify flex">
            <p class="bold center">Grass Drawing Time-Lapse</p>
<div style="text-align: center;">
  <a href="assets/grass.mp4" target="_blank">
    <video width="353" height="265" controls>
      <source src="assets/grass.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </a>
</div>

        </section>
        </section>
    <section class="wrapper">
        <section class="column card justify flex">
            <p class="bold center">Boat Drawing</p>
            <a href="assets/boat.png" target="_blank">
            <img class="box project-img" src="assets/boat.png" alt="project4">
            </a>
        </section>
        <section class="column card justify flex">
            <p class="bold center">Boat Drawing Time-Lapse</p>
<div style="text-align: center;">
  <a href="assets/boat.mp4" target="_blank">
    <video width="353" height="265" controls>
      <source src="assets/boat.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </a>
</div>
        </section>
        </section>

    <section class="w-900 padding">
        <h3 class="main-title center">Photography</h3>
        <p class="center">Below I'll show some photos I took by changing my camera settings and playing around with colour! As well as some photo editing I've done!</p>
        </section>

    <section class="wrapper">
        <section class="column card justify flex">
            <p class="bold center">Photo 1</p>
            <a href="assets/photo.JPG" target="_blank">
            <img class="box project-img" src="assets/photo.JPG" alt="project4">
            </a>
        </section>
                <section class="column card justify flex">
            <p class="bold center">Photo 2</p>
            <a href="assets/photo1.JPG" target="_blank">
            <img class="box project-img" src="assets/photo1.JPG" alt="project4">
            </a>
        </section>
       </section>

       <section class="wrapper">
        <section class="column card justify flex">
            <p class="bold center">Before Edited in GIMP</p>
            <a href="assets/colorcast1.jpg" target="_blank">
            <img class="box project-img" src="assets/colorcast1.jpg" alt="project4">
            </a>
        </section>
                <section class="column card justify flex">
            <p class="bold center">After Editing in GIMP!</p>
            <a href="assets/colorcastfixed.jpg" target="_blank">
            <img class="box project-img" src="assets/colorcastfixed.jpg" alt="project4">
            </a>
        </section>
       </section>

    <p class="wrapper justify-content"><a href="portfolio.html" class="link-no-scale colorful-letter">Back to Portfolio</a></p>

   <!-- footer -->
    <article class="darkerblue">
    <footer class="small center bold">@mahnoorKNES381 ©2025</footer>
</body>

</html>