CS50_Labs/Lab8/homepage/contact.html

85 lines
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
document.addEventListener('DOMContentLoaded', async function() {
while (true){
// get date
var date = new Date();
// convert date to string
var n = date.toDateString();
// get time as string
var time = date.toLocaleTimeString();
document.getElementById('time').innerHTML = n + ' ' + time;
await sleep(999)
};
});
</script>
<link href="styles.css" rel="stylesheet">
<title>Jiri Karlik - Contact</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron text-center">
<h1>Contact Me</h1>
<p>If you want to contact me, you can use one of the following options.</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<a href="mailto:karlikjirka@gmail.com"><div class="contact">
<svg width="10%" height="10%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 12.5H87.5C92.1023 12.5 95.8333 16.231 95.8333 20.8333V79.1667C95.8333 83.769 92.1023 87.5 87.5 87.5H12.5C7.89759 87.5 4.16663 83.769 4.16663 79.1667V20.8333C4.16663 16.231 7.89759 12.5 12.5 12.5ZM12.5 40.0754V79.1666H87.5V40.0771L49.9999 58.8272L12.5 40.0754ZM12.5 30.7583L50 49.5102L87.5 30.7602V20.8333H12.5V30.7583Z" fill="black"/>
</svg>
</div></a>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a href="https://www.linkedin.com/in/jiri-karlik/"><div class="contact">
<svg width="10%" height="10%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H90C95.5229 0 100 4.47715 100 10V90C100 95.5229 95.5229 100 90 100H10C4.47715 100 0 95.5229 0 90V10C0 4.47715 4.47715 0 10 0ZM10 10V90H90V10H10ZM55 35C52.4113 35 49.6763 35.7913 47.2607 37.2607L45 35H40V70H50V50C50 47.1213 52.9698 45 55 45H60C62.0302 45 65 47.1213 65 50V70H75V50C75 40.7359 66.9698 35 60 35H55ZM30 30C32.7614 30 35 27.7614 35 25C35 22.2386 32.7614 20 30 20C27.2386 20 25 22.2386 25 25C25 27.7614 27.2386 30 30 30ZM25 35V70H35V35H25Z" fill="black"/>
</svg>
</div></a>
</div>
</div>
<div class="row row_last">
<div class="col-sm-12">
<a href="https://github.com/karlji"><div class="contact">
<svg width="10%" height="10%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.7385 83.3484C41.7601 83.8603 41.7049 84.3597 41.5971 84.8653C41.4077 85.7537 41.042 86.6937 40.5242 87.5622C39.0525 90.0313 36.5523 91.6788 33.3333 91.6788C25.7504 91.6788 22.7743 87.9587 19.048 78.6429C16.5243 72.3337 15.3337 70.8455 12.5 70.8455L12.5 62.5121C20.0829 62.5121 23.059 66.2322 26.7853 75.548C29.309 81.8572 30.4996 83.3455 33.3333 83.3455C33.3333 82.1364 33.3168 81.0655 33.2819 79.6152C33.2003 76.2161 33.1909 75.5221 33.3392 74.6134C33.3984 72.6297 33.9106 71.2222 34.9375 69.8251C25.6383 67.8008 19.3663 63.6201 15.7666 56.8391L14.4181 53.6679C13.1044 49.8924 12.5 45.6146 12.5 40.6742C12.5 34.9844 14.2348 29.897 17.4751 25.6444C16.4643 21.6021 16.6027 16.6633 18.8346 11.0858L19.5639 9.26324L21.4336 8.66517C21.6839 8.58509 21.9883 8.51277 22.3458 8.45666C25.9865 7.88524 31.1671 9.24858 37.9398 13.5868C41.9324 12.6613 46.1369 12.194 50.3699 12.194C54.1526 12.194 57.9144 12.5753 61.5068 13.3272C68.0961 9.20078 73.1343 7.90658 76.6771 8.45739C77.0305 8.51234 77.3317 8.58327 77.58 8.662L79.4613 9.25861L80.1915 11.0922C82.144 15.9953 82.4791 20.5139 81.7686 24.4678C85.4936 28.9374 87.5 34.4323 87.5 40.6742C87.5 45.9364 87.123 49.8934 86.0393 53.7428L84.8954 56.8818C81.9012 63.6556 75.2978 67.8832 65.1147 69.8968C66.1731 71.3623 66.6667 72.85 66.6667 75.0121V79.1788C66.6667 81.198 66.6667 81.2602 66.6621 83.3455C66.6715 83.4952 66.684 83.5685 66.6977 83.6142C66.6943 83.6154 66.6667 91.6788 66.6667 91.6788C63.1175 91.6788 60.4786 89.948 59.1807 87.2177C58.5078 85.8021 58.3068 84.4504 58.3333 83.2863V75.0121C58.3333 74.6628 58.3212 74.6426 57.4704 73.7917C55.1962 71.5176 54.1667 69.8017 54.1667 66.6788V62.9096L57.917 62.533C69.0806 61.4118 75.1522 58.3116 77.1653 53.7826L78.1061 51.2108C78.8547 48.5217 79.1667 45.2468 79.1667 40.6742C79.1667 35.8155 77.4704 31.8019 74.2625 28.5952L72.4992 26.8326L73.2189 24.4456C73.8582 22.325 74.0101 19.8157 73.3338 16.9537C73.2214 16.9821 73.1045 17.0132 72.9833 17.0469C70.7523 17.668 67.9668 19.0008 64.6102 21.2445L63.0792 22.2678L61.2919 21.8246C57.8349 20.9674 54.1202 20.5273 50.3699 20.5273C46.1994 20.5273 42.0769 21.0579 38.2686 22.0962L36.41 22.6028L34.8201 21.5152C31.3484 19.1402 28.4644 17.7279 26.1518 17.0681C25.9866 17.021 25.8293 16.9788 25.6799 16.9413C24.873 20.2537 25.1921 22.9752 26.0093 25.0173L26.9891 27.4658L25.1954 29.3992C22.3371 32.4799 20.8333 36.229 20.8333 40.6742C20.8333 44.744 21.3098 48.1164 22.1828 50.6567L23.2732 53.2377C25.9989 58.3523 31.7884 61.4294 42.1107 62.5359L45.8333 62.9349V66.6788C45.8333 69.8017 44.8038 71.5176 42.5296 73.7917C41.6788 74.6426 41.6667 74.6628 41.6667 75.0121L41.5948 75.7824C41.5473 76.035 41.5473 76.6874 41.6129 79.415C41.643 80.6695 41.6602 81.6625 41.6651 82.7001C41.7149 82.9149 41.7225 83.0534 41.7385 83.3484Z" fill="black"/>
</svg>
</div></a>
</div>
</div>
<div class="row">
<div class="col-sm-3 menu">
<h3><button onclick="location.href='index.html'" type="button">Home</button></h3>
</div>
<div class="col-sm-3 menu">
<h3><button onclick="location.href='about.html'" type="button">About Me</button></h3>
</div>
<div class="col-sm-3 menu">
<h3><button onclick="location.href='interests.html'" type="button">Interests</button></h3>
</div>
<div class="col-sm-3 menu">
<h3><button onclick="location.href='contact.html'" type="button">Contact</button></h3>
</div>
</div>
</div>
<footer>
<p id="time"></p>
</footer>
</body>
</html>