-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
103 lines (93 loc) · 5.41 KB
/
contact.html
File metadata and controls
103 lines (93 loc) · 5.41 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
<!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">
<script type="text/javascript" src="script.js"></script>
<script src="https://kit.fontawesome.com/f1c27a6a68.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/jpg" href="Images/Favicon.png"/>
<title> Contact Form | Fizza Ahmed </title>
<meta name="description" content="Portfolio website for Fizza Ahmed">
<meta name="keywords" content="portfolio, artist, toronto, web designer, student, game design">
<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; flex-flow: column nowrap; align-items: center;">
<a href="#contact-f-skip" class="skip"> Skip to Contact Form </a>
<a href="index.html" class="logo-img" > <img src="Images/logosized.png" alt="Fizza Ahmed Logo - Home" style="max-height:2.5em"> </a>
<h1 class="intouch" id="nameChange" style="font-size: 1.5em; margin-bottom: 0px; ">.fizzara</h1>
</header>
<main class="contact-works-content">
<div class="contact-content">
<div class="contact-tester">
<p class="contact-links"><a href="https://fizzara.github.io"><i class="fa-solid fa-window-maximize"></i>View My Portfolio Website </a></p>
<p class="contact-links"><i class="fa-regular fa-paper-plane"></i><a href="mailto:[email protected]">[email protected] </a></p>
<p class="contact-links" ><i class="fa fa-phone"></i><a href="#" id="myPhone">(647) 866 - 1315</a></p>
<p class="contact-links"><i class="fa-brands fa-linkedin"></i><a href="linkedin.com/in/fizzara">My LinkedIn </a></p>
<p class="contact-links"><i class="fa-regular fa-address-card"></i><a href="#" onclick="window.open('Additional Files/AhmedF_Resume.pdf')">My Resumé </a></p>
</div>
<div id="contact-f-skip" class="contact-form-holder">
<h2 style="padding-top: 2vh"> Let's Talk! </h2>
<p> I'd love to connect with you! Use the form below to send me a message. <br><br>Your details will be used solely for professional communication purposes.</p>
<form class="contact-form gform" method="POST" action="https://script.google.com/macros/s/AKfycbzOnOSca0EfgkKGoyzyuRnvn5tphxgBCaOSHOBcFilBCUI8pTsFg4lMaTC6CyqpsnlS6g/exec">
<label for="name"> Name </label>
<input type="text" id="name" name="name" placeholder="Your Name">
<label for="company"> Company </label>
<input type="text" id="company" name="company" placeholder="Your Company">
<label for="email"> Email <span style="font-size: 0.8em">(required)</span> </label>
<input type="email" id="email" name="email" placeholder="Your Email" required>
<!-- <div>
<input type="checkbox" id="linked" name="linked" value="Yes"><label for="linked">Would you like to connect on LinkedIn? </label>
</div> -->
<label style="margin-top: 10px;" for="infoQ"> What's on your mind?</label>
<textarea name="infoQ" id="infoQ" placeholder=""></textarea>
<input type="submit" id="submit" value="Send Message">
<div style="display: none;" class="thankyou_message">
<p style="text-align: center;line-height: 1.2em; font-size: 1em; border: 5px double #fecb34; padding: 5px; border-radius: 10px;"> Thanks for reaching out! I appreciate your interest and look forward to connecting with you. </p>
</div>
</form>
</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><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>
jokeArr = ["Tell me your favourite joke!", "What is your superpower?", "If you could be a character in any movie, what character and what movie would it be?", "Where do you find inspiration?", "Do you consider yourself a lemon or a lime?", "Tell me about your dream job as a kid!"];
jo = "Not sure what to write? "
function randJoke(){
ke = jokeArr[Math.floor(Math.random() * (jokeArr.length-1))];
joke = jo.concat(ke);
document.getElementById("infoQ").setAttribute("placeholder", joke);
}
function funky(){
let hold = document.querySelector("#nameChange");
if(hold.textContent == ".fizzara"){
hold.textContent = "Fizza Ahmed";
}else{
hold.textContent = ".fizzara";
}
setTimeout(funky, 2000);
}
funky();
randJoke();
</script>
</body>
</html>