forked from amarjeetrao/Tribute-Page-FreeCodeCamp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (98 loc) · 7.98 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tribute Page - FreeCodeCamp</title>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
<link rel="stylesheet" href="src/css/style.css">
</head>
<body class="font-body font-medium bg-white text-custom-gray">
<header class="header">
<h1 class="heading" id="title">Katie Bouman</h1>
</header>
<main class="mx-8 md:mx-auto md:max-w-xl xl:max-w-5xl" id="main">
<div class="image-box" data-aos="fade-up" data-aos-duration="600">
<div class="image-box-border"></div>
<figure class="katie-bouman-image" id="img-div">
<img class="katie-image m-auto" id="image" src="./src/assets/katie-image.png"
alt="Katie Bouman Computer scientist">
<figcaption class="h-0 opacity-0" id="img-caption">katie bouman CHIRP algorithm designer lead
</figcaption>
</figure>
</div>
<section class="mb-16 xl:mb-64" id="tribute-info" data-aos="fade-up" data-aos-duration="600">
<p class="blockquote-1 relative">
Katherine Louise Bouman a
computer scientist who leads
the development of algorithm
that results to capture first
black hole image.
</p>
</section>
<div class="image-box" data-aos="fade-up" data-aos-duration="600">
<img class="black-hole-image" src="./src/assets/Black_hole.jpg"
alt="Supermassive black hole at the center of Messier87 galaxy">
</div>
<section class="mb-16 xl:mb-64" data-aos="fade-up" data-aos-duration="600">
<p class="blockquote-2 relative">
10th April 2019 - the first ever image
of a supermassive black hole at the
centre of Messier 87 is release for public.
image was captured by the Event
Horizon Telescope a large
array of telescope.
</p>
</section>
</main>
<footer>
<div class="gray-background">
</div>
<div class="footer">
<div class="links">
<a href="https://en.wikipedia.org/wiki/Katie_Bouman" target="_blank" class="source"
id="tribute-link">Wikipedia</a>
<div class="connections md:w-auto">
<a href="https://www.behance.net/amarjeetrao" class="behance">
<svg class="fill-current text-white w-6 md:w-10 md:mx-2" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 25.358">
<path class="a"
d="M9.991,46.773c0,1.092-.75,1.438-1.671,1.438H5.9V45.217H8.368c1,.006,1.623.441,1.623,1.557Zm-.412-4.658c0-1-.734-1.24-1.548-1.24H5.909v2.536H8.2c.809,0,1.382-.374,1.382-1.3Zm7.087,1.313a1.637,1.637,0,0,0-1.7,1.681H18.3c-.091-1.047-.605-1.681-1.634-1.681ZM24,34.717V54.641a2.648,2.648,0,0,1-2.571,2.717H2.571A2.648,2.648,0,0,1,0,54.641V34.717A2.648,2.648,0,0,1,2.571,32H21.429A2.648,2.648,0,0,1,24,34.717ZM14.555,40.66h4.168V39.59H14.555Zm-2.3,6.243a2.813,2.813,0,0,0-1.875-2.921,2.109,2.109,0,0,0,1.4-2.094c0-2.162-1.527-2.689-3.289-2.689H3.643V50.067H8.63C10.5,50.056,12.252,49.111,12.252,46.9Zm8.105-.838c0-2.326-1.291-4.268-3.621-4.268a3.857,3.857,0,0,0-3.809,4.166c0,2.451,1.463,4.132,3.809,4.132a3.344,3.344,0,0,0,3.487-2.649H18.418A1.686,1.686,0,0,1,16.8,48.471c-1.2,0-1.827-.741-1.827-2h5.368c.005-.13.016-.272.016-.408Z"
transform="translate(0 -32)" />
</svg>
</a>
<a href="https://codepen.io/amarjeetrao/" class="codepen">
<svg class="fill-current text-white w-6 md:w-10 md:mx-2" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 22.834">
<path class="a"
d="M17.531,0H6.469A6.318,6.318,0,0,0,0,6.155V16.68a6.318,6.318,0,0,0,6.469,6.155H17.531A6.318,6.318,0,0,0,24,16.68V6.155A6.318,6.318,0,0,0,17.531,0Zm-.141,13a.827.827,0,0,1-.4.691l-4.552,2.859a.918.918,0,0,1-.966,0L7.008,13.745a.827.827,0,0,1-.4-.691V9.923a.832.832,0,0,1,.384-.682l4.387-2.908a.914.914,0,0,1,.984-.013l4.627,2.912a.827.827,0,0,1,.4.691Z" />
</svg>
</a>
<a href="https://github.com/Amarjeetrao" class="github">
<svg class="fill-current text-white w-6 md:w-10 md:mx-2" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 23.428">
<path class="a"
d="M22.4,11.378a11.942,11.942,0,0,0-4.369-4.369A11.73,11.73,0,0,0,12.005,5.4,11.75,11.75,0,0,0,5.978,7.009a11.942,11.942,0,0,0-4.369,4.369A11.745,11.745,0,0,0,0,17.4a11.661,11.661,0,0,0,2.288,7.057,11.724,11.724,0,0,0,5.918,4.336.689.689,0,0,0,.624-.109.606.606,0,0,0,.2-.471c0-.033,0-.312-.005-.843s-.005-1-.005-1.391l-.361.06a4.406,4.406,0,0,1-.865.055,6.863,6.863,0,0,1-1.084-.109,2.376,2.376,0,0,1-1.046-.471,1.99,1.99,0,0,1-.69-.964l-.159-.361a3.965,3.965,0,0,0-.493-.8,1.886,1.886,0,0,0-.679-.591l-.109-.077a1.3,1.3,0,0,1-.2-.186.993.993,0,0,1-.142-.219c-.033-.071-.005-.131.077-.181a1.015,1.015,0,0,1,.454-.06l.312.049a2.232,2.232,0,0,1,.772.378,2.552,2.552,0,0,1,.755.81,2.756,2.756,0,0,0,.865.974,1.834,1.834,0,0,0,1.024.334,4.672,4.672,0,0,0,.892-.077,3.2,3.2,0,0,0,.7-.235A2.518,2.518,0,0,1,9.81,22.7a11.169,11.169,0,0,1-1.6-.279,6.424,6.424,0,0,1-1.467-.608A4.217,4.217,0,0,1,5.48,20.767a5.005,5.005,0,0,1-.821-1.642,7.794,7.794,0,0,1-.323-2.343,4.549,4.549,0,0,1,1.237-3.219,4.2,4.2,0,0,1,.109-3.186,2.2,2.2,0,0,1,1.347.214,9.423,9.423,0,0,1,1.3.6c.274.164.5.307.662.422a11.311,11.311,0,0,1,6,0l.591-.372a8.215,8.215,0,0,1,1.44-.69,2.008,2.008,0,0,1,1.265-.17,4.158,4.158,0,0,1,.126,3.186,4.573,4.573,0,0,1,1.237,3.219,7.894,7.894,0,0,1-.323,2.354,4.8,4.8,0,0,1-.827,1.642,4.379,4.379,0,0,1-1.265,1.04,6.282,6.282,0,0,1-1.467.608,10.341,10.341,0,0,1-1.6.279,2.785,2.785,0,0,1,.81,2.217v3.3a.628.628,0,0,0,.2.471.67.67,0,0,0,.619.109,11.787,11.787,0,0,0,5.918-4.336A11.661,11.661,0,0,0,24,17.411,11.7,11.7,0,0,0,22.4,11.378Z"
transform="translate(0 -5.4)" />
</svg>
</a>
<a href="https://www.linkedin.com/in/amarjeetrao" class="linkedIn">
<svg class="fill-current text-white w-6 md:w-10 md:mx-2" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 23.994">
<path class="a"
d="M21.82,0H2.173A2.174,2.174,0,0,0,0,2.173V21.827a2.173,2.173,0,0,0,2.173,2.167H21.827A2.174,2.174,0,0,0,24,21.82V2.173A2.183,2.183,0,0,0,21.82,0ZM7.424,20.715a.633.633,0,0,1-.634.634H4.1a.633.633,0,0,1-.634-.634V9.447A.633.633,0,0,1,4.1,8.812H6.79a.633.633,0,0,1,.634.634V20.715ZM5.446,7.751A2.556,2.556,0,1,1,8,5.194,2.555,2.555,0,0,1,5.446,7.751ZM21.475,20.772a.576.576,0,0,1-.578.578H18.014a.576.576,0,0,1-.578-.578V15.483c0-.791.232-3.455-2.06-3.455-1.778,0-2.142,1.828-2.211,2.644v6.1a.576.576,0,0,1-.578.578H9.8a.576.576,0,0,1-.578-.578V9.4A.576.576,0,0,1,9.8,8.819h2.789a.576.576,0,0,1,.578.578v.986A3.955,3.955,0,0,1,16.89,8.63c4.623,0,4.591,4.315,4.591,6.689l-.006,5.452Z" />
</svg>
</a>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>