zeph
48 lines
2.5 KiB
HTML
48 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="hi, i'm alex!" title="og:title">
|
|
<meta content="alex!" title="site_name">
|
|
<meta content="welcome to my website! here, you can contact me & find my github account!" title="og:description">
|
|
<meta content="https://thatalex.dev" title="og:url">
|
|
<link rel="stylesheet" href="static/main.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<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=Cairo:wght@500&display=swap" rel="stylesheet">
|
|
<title>z // alex</title>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="textDiv"><p>hi, i'm <span id="name">alex</span>!</p></div><span id="box"></span>
|
|
<div id="extraInfo">
|
|
<p style="display:block; margin:auto; float:left;">i work part-time at <span style="color:yellow">medal.tv</span> & do backend development in my offtime</p><br>
|
|
<a style="display:block; margin:auto; float:left;" href="https://github.com/zevhr" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
|
<a href="#" onclick="addClass()"><i class="fa fa-address-book-o" aria-hidden="true"></i></a>
|
|
</div>
|
|
|
|
<div id="contact">
|
|
<form method="post" action="https://api.thatalex.dev/v1/web/contact">
|
|
<p>contact me !</p>
|
|
<input type="text" name="name" id="name" placeholder="your name.."><br>
|
|
<input type="text" name="email" id="email" placeholder="your email.."><br>
|
|
<input type="text" name="subject" id="subject" placeholder="subject.."><br>
|
|
<input type="text" name="message" id="message" placeholder="your message..">
|
|
<button type="submit">submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function addClass() {
|
|
var element = document.getElementById("contact");
|
|
element.classList.add("contactFade");
|
|
document.querySelector(".contactFade").style.animationPlayState = "running";
|
|
document.querySelector(".contactFade").style.display = "block";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |