bcalvillo.github.io/index.html at main · bcalvillo/bcalvillo.github.io · GitHub

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
107
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benjami Calvillo | Research</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#research">Research</a></li>
                <li><a href="#publications">Publications</a></li>
                <li><a href="#data">Data and Code</a></li>
                <li><a href="#media">Media</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section id="hero">
        <div class="overlay">
            <h1>Benjami Calvillo</h1>
            <h2>PhD Student at UPC</h2>
        </div>
    </section>
    <section id="research">
        <h2>Research</h2>
        <div class="underline"></div>
        <p>We study how tides, waves, and sea level shape coastal environments. We focus on the past and future of barrier islands and river deltas, and apply our research to investigate coastal hazards and adaptation.</p>
    </section>
    <script src="script.js"></script>
</body>
</html>

/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background: #f4f4f4;
}

header {
    background: #00274D;
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
}

#hero {
    background: url('header-image.jpg') no-repeat center;
    background-size: cover;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
}

.overlay {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 5px;
}

#research {
    padding: 50px;
    background: white;
    margin-top: -50px;
}

.underline {
    width: 50px;
    height: 3px;
    background: #E95420;
    margin: 10px auto;
}

/* script.js */
document.addEventListener("DOMContentLoaded", function() {
    console.log("Page loaded!");
});