-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (103 loc) · 6.17 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
102
103
104
105
106
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Fabien Zucchet</title>
<!-- 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=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Common Custom CSS -->
<link rel="stylesheet" href="styles/common.css">
<!-- Home Custom CSS -->
<link rel="stylesheet" href="styles/home.css">
</head>
<body>
<header id="header" class="bold-text secondary-text">
<div id="name-header-button">
<span class="header-button">Fabien Zucchet</span>
</div>
<div id="header-buttons-container">
<span class="header-button" id="home-header-button">
<a href="#home" class="link">Home</a>
</span>
<span class="header-button" id="about-header-button">
<a href="#about" class="link">About</a>
</span>
<span class="header-button" id="projects-header-button">
<a href="#projects" class="link">Projects</a>
</span>
<span class="header-button" id="contact-header-button">
<a href="#contact" class="link">Contact</a>
</span>
</div>
</header>
<div id="body-container">
<div class="page-container light-theme" id="home">
<div class="page-content">
<div id="me-picture-container">
<img src="images/me.jpg" alt="me" id="me-picture">
</div>
<div id="me-text-container">
<h2 class="bold-text">Hello, I'm <span class="secondary-text">Fabien</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac purus vel nisi egestas lacinia at in purus. Phasellus sit amet lorem dignissim nisl eleifend tristique imperdiet sed eros. Vivamus venenatis cursus tortor vel cursus. Ut in condimentum ante. Integer ornare gravida diam, id viverra dui laoreet a. Aenean tincidunt cursus orci, vitae convallis dolor fermentum at. Nam facilisis, orci eget lacinia imperdiet, tellus enim commodo urna, quis ultricies nibh libero a odio. Proin ut facilisis augue.
</p>
</div>
</div>
</div>
<div class="page-container dark-theme" id="about">
<div class="page-content">
<div id="me-text-container">
<h2 class="bold-text">Hello, I'm <span class="secondary-text">Fabien</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac purus vel nisi egestas lacinia at in purus.
Phasellus sit amet lorem dignissim nisl eleifend tristique imperdiet sed eros. Vivamus venenatis cursus
tortor vel cursus. Ut in condimentum ante. Integer ornare gravida diam, id viverra dui laoreet a. Aenean
tincidunt cursus orci, vitae convallis dolor fermentum at. Nam facilisis, orci eget lacinia imperdiet,
tellus enim commodo urna, quis ultricies nibh libero a odio. Proin ut facilisis augue.
</p>
</div>
<div id="me-picture-container">
<img src="images/me.jpg" alt="me" id="me-picture">
</div>
</div>
</div>
<div class="page-container light-theme" id="projects">
<div class="page-content">
<div id="me-picture-container">
<img src="images/me.jpg" alt="me" id="me-picture">
</div>
<div id="me-text-container">
<h2 class="bold-text">Hello, I'm <span class="secondary-text">Fabien</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac purus vel nisi egestas lacinia at in purus.
Phasellus sit amet lorem dignissim nisl eleifend tristique imperdiet sed eros. Vivamus venenatis cursus
tortor vel cursus. Ut in condimentum ante. Integer ornare gravida diam, id viverra dui laoreet a. Aenean
tincidunt cursus orci, vitae convallis dolor fermentum at. Nam facilisis, orci eget lacinia imperdiet,
tellus enim commodo urna, quis ultricies nibh libero a odio. Proin ut facilisis augue.
</p>
</div>
</div>
</div>
<div class="page-container dark-theme" id="contact">
<div class="page-content">
<div id="me-text-container">
<h2 class="bold-text">Hello, I'm <span class="secondary-text">Fabien</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac purus vel nisi egestas lacinia at in purus.
Phasellus sit amet lorem dignissim nisl eleifend tristique imperdiet sed eros. Vivamus venenatis cursus
tortor vel cursus. Ut in condimentum ante. Integer ornare gravida diam, id viverra dui laoreet a. Aenean
tincidunt cursus orci, vitae convallis dolor fermentum at. Nam facilisis, orci eget lacinia imperdiet,
tellus enim commodo urna, quis ultricies nibh libero a odio. Proin ut facilisis augue.
</p>
</div>
<div id="me-picture-container">
<img src="images/me.jpg" alt="me" id="me-picture">
</div>
</div>
</div>
</div>
</body>
</html>