Skip to content

Commit a6c2d53

Browse files
DrWattDrWatt
committed
Added WIP pages and attempt at changing header (not working well yet)
1 parent 3b8ad6f commit a6c2d53

7 files changed

+138
-51
lines changed

‎footer.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<footer>
2-
<p>&copy; 2024 Quantum4HEP. All rights reserved.</p>
3-
<ul>
2+
<p>&copy; 2024 Quantum4HEP. Created by Marco Lorusso. This work is distributed under <a href="LICENSE">MIT License</a></p>
3+
<!--<ul>
44
<li><a href="https://facebook.com"><i class="fab fa-facebook-f"></i></a></li>
55
<li><a href="https://twitter.com"><i class="fab fa-twitter"></i></a></li>
66
<li><a href="https://instagram.com"><i class="fab fa-instagram"></i></a></li>
7-
</ul>
7+
</ul>-->
88
</footer>

‎future.html

+5-13
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,15 @@
2121
<!-- Header Section -->
2222
<div id="header"></div>
2323

24-
<!-- Main Content Section
24+
<!-- Main Content Section -->
2525
<main>
2626
<section id="home">
27-
<h2>Welcome to Our Website</h2>
28-
<p>This is the introductory section of your website.</p>
29-
</section>
30-
31-
<section id="about">
32-
<h2>About Us</h2>
33-
<p>Write about your company, team, or mission here.</p>
34-
</section>
27+
<h2>Work in Progress</h2>
28+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut dapibus lacus, ut cursus diam. Pellentesque nibh sapien, fringilla quis sem et, blandit fermentum lacus. Mauris eu nunc fermentum, ultricies nunc eu, vestibulum libero. Aenean consequat lorem ac erat dignissim molestie. Duis at velit ullamcorper, iaculis urna et, egestas metus. Etiam tempor dui dui, et porttitor justo volutpat nec. Donec porta pharetra ultrices. Ut vulputate nisl sit amet turpis mattis, id lacinia nisi ultricies. In quis faucibus tellus, non efficitur elit. Quisque eu pretium nisi. Integer vestibulum molestie augue, sit amet convallis eros fermentum a.
3529

36-
<section id="services">
37-
<h2>Our Services</h2>
38-
<p>Describe the services or products you offer here.</p>
30+
Aliquam gravida congue ullamcorper. Suspendisse blandit, risus ultrices porttitor consectetur, augue odio maximus lacus, quis consectetur sapien libero sed lectus. Morbi nunc eros, finibus sed elementum ut, vehicula sed magna. Cras aliquam sapien vitae elit pellentesque imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ut bibendum risus. Nulla at ex a tellus consectetur pharetra. Ut pellentesque euismod purus. Integer efficitur faucibus facilisis. Nunc finibus diam vel placerat placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
3931
</section>
40-
</main>-->
32+
</main>
4133

4234
<!-- Footer Section -->
4335
<div id="footer"></div>

‎header.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<!-- -->
22
<header>
33
<div class="head-imgtxt">
4-
<img src="Quantum4hep_logo.png" alt="Quantum4HEP Logo" width="200" height="200" class="header-image">
5-
<div class="header-b">
6-
<h1>Quantum4HEP</h1>
7-
<h3 class="header2-title">Bringing Quantum Technologies to HEP</h3>
8-
</div>
4+
<img src="Quantum4hep_logo.png" alt="Quantum4HEP Logo"class="header-image">
5+
<div class="header-b">
6+
<h1>Quantum4HEP</h1>
7+
<h3 id="h3head" class="header2-title" >Bringing Quantum Technologies to HEP</h3>
8+
</div>
99

1010
</div>
1111
<nav>

‎peoples.html

+32-11
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,44 @@
2121
<!-- Header Section -->
2222
<div id="header"></div>
2323

24-
<!-- Main Content Section
24+
<!-- Main Content Section -->
2525
<main>
26-
<section id="home">
27-
<h2>Welcome to Our Website</h2>
28-
<p>This is the introductory section of your website.</p>
26+
<section id="simone">
27+
<div class="main-imgtxt">
28+
<a href="https://github.com/SimoneGasperini"><img src="https://avatars2.githubusercontent.com/u/71086758?s=400&v=4" width="200px;" alt="Simone Gasperini" class="main-image"></a>
29+
<div class="peoples-b">
30+
<h2>Simone Gasperini</h2>
31+
<p class = "main-p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut dapibus lacus, ut cursus diam. Pellentesque nibh sapien, fringilla quis sem et, blandit fermentum lacus. Mauris eu nunc fermentum, ultricies nunc eu, vestibulum libero. Aenean consequat lorem ac erat dignissim molestie. Duis at velit ullamcorper, iaculis urna et, egestas metus. Etiam tempor dui dui, et porttitor justo volutpat nec. Donec porta pharetra ultrices. Ut vulputate nisl sit amet turpis mattis, id lacinia nisi ultricies. In quis faucibus tellus, non efficitur elit. Quisque eu pretium nisi. Integer vestibulum molestie augue, sit amet convallis eros fermentum a.
32+
33+
Aliquam gravida congue ullamcorper. Suspendisse blandit, risus ultrices porttitor consectetur, augue odio maximus lacus, quis consectetur sapien libero sed lectus. Morbi nunc eros, finibus sed elementum ut, vehicula sed magna. Cras aliquam sapien vitae elit pellentesque imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ut bibendum risus. Nulla at ex a tellus consectetur pharetra. Ut pellentesque euismod purus. Integer efficitur faucibus facilisis. Nunc finibus diam vel placerat placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
34+
</div>
35+
</div>
2936
</section>
3037

31-
<section id="about">
32-
<h2>About Us</h2>
33-
<p>Write about your company, team, or mission here.</p>
38+
<section id="marco">
39+
<div class="main-imgtxt">
40+
<a href="https://github.com/DrWatt"><img src="https://avatars.githubusercontent.com/u/33673848?v=4" width="200px;" alt="Marco Lorusso" class="main-image"></a>
41+
<div class="peoples-b">
42+
<h2>Marco Lorusso</h2>
43+
<p class = "main-p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut dapibus lacus, ut cursus diam. Pellentesque nibh sapien, fringilla quis sem et, blandit fermentum lacus. Mauris eu nunc fermentum, ultricies nunc eu, vestibulum libero. Aenean consequat lorem ac erat dignissim molestie. Duis at velit ullamcorper, iaculis urna et, egestas metus. Etiam tempor dui dui, et porttitor justo volutpat nec. Donec porta pharetra ultrices. Ut vulputate nisl sit amet turpis mattis, id lacinia nisi ultricies. In quis faucibus tellus, non efficitur elit. Quisque eu pretium nisi. Integer vestibulum molestie augue, sit amet convallis eros fermentum a.
44+
45+
Aliquam gravida congue ullamcorper. Suspendisse blandit, risus ultrices porttitor consectetur, augue odio maximus lacus, quis consectetur sapien libero sed lectus. Morbi nunc eros, finibus sed elementum ut, vehicula sed magna. Cras aliquam sapien vitae elit pellentesque imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ut bibendum risus. Nulla at ex a tellus consectetur pharetra. Ut pellentesque euismod purus. Integer efficitur faucibus facilisis. Nunc finibus diam vel placerat placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
46+
</div>
47+
</div>
3448
</section>
3549

36-
<section id="services">
37-
<h2>Our Services</h2>
38-
<p>Describe the services or products you offer here.</p>
50+
<section id="gianluca">
51+
<div class="main-imgtxt">
52+
<a href="https://justwhit3.github.io/"><img src="https://avatars.githubusercontent.com/u/48323961?v=4" width="200px;" alt="Gianluca Bianco" class="main-image"></a>
53+
<div class="peoples-b">
54+
<h2>Gianluca Bianco</h2>
55+
<p class = "main-p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut dapibus lacus, ut cursus diam. Pellentesque nibh sapien, fringilla quis sem et, blandit fermentum lacus. Mauris eu nunc fermentum, ultricies nunc eu, vestibulum libero. Aenean consequat lorem ac erat dignissim molestie. Duis at velit ullamcorper, iaculis urna et, egestas metus. Etiam tempor dui dui, et porttitor justo volutpat nec. Donec porta pharetra ultrices. Ut vulputate nisl sit amet turpis mattis, id lacinia nisi ultricies. In quis faucibus tellus, non efficitur elit. Quisque eu pretium nisi. Integer vestibulum molestie augue, sit amet convallis eros fermentum a.
56+
57+
Aliquam gravida congue ullamcorper. Suspendisse blandit, risus ultrices porttitor consectetur, augue odio maximus lacus, quis consectetur sapien libero sed lectus. Morbi nunc eros, finibus sed elementum ut, vehicula sed magna. Cras aliquam sapien vitae elit pellentesque imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ut bibendum risus. Nulla at ex a tellus consectetur pharetra. Ut pellentesque euismod purus. Integer efficitur faucibus facilisis. Nunc finibus diam vel placerat placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
58+
</div>
59+
</div>
3960
</section>
40-
</main>-->
61+
</main>
4162

4263
<!-- Footer Section -->
4364
<div id="footer"></div>

‎projects.html

+10-12
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,21 @@
2121
<!-- Header Section -->
2222
<div id="header"></div>
2323

24-
<!-- Main Content Section
24+
<!-- Main Content Section -->
2525
<main>
26-
<section id="home">
27-
<h2>Welcome to Our Website</h2>
26+
<section id="qunfold">
27+
<h2>Unfolding with Quantum Annealers - <a href="https://github.com/Quantum4HEP/QUnfold">QUnfold</a></h2>
28+
29+
2830
<p>This is the introductory section of your website.</p>
2931
</section>
30-
31-
<section id="about">
32-
<h2>About Us</h2>
33-
<p>Write about your company, team, or mission here.</p>
32+
<section id="quantdenoiser">
33+
<h2>Quantum Error Mitigation with Autoencoders - <a href="https://github.com/Quantum4HEP/QdAEnoiser">QdAEnoiser</a></h2>
34+
35+
<p>This is the introductory section of your website.</p>
3436
</section>
3537

36-
<section id="services">
37-
<h2>Our Services</h2>
38-
<p>Describe the services or products you offer here.</p>
39-
</section>
40-
</main>-->
38+
</main>
4139

4240
<!-- Footer Section -->
4341
<div id="footer"></div>

‎script.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,22 @@ async function loadHeader() {
99

1010
const data = await response.text();
1111
document.getElementById("header").innerHTML = data;
12+
const h3head = document.getElementById("h3head");
13+
const h3headcopy = document.getElementById("h3head");
14+
let lastScrollTop = 0;
15+
16+
window.addEventListener("scroll", function () {
17+
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
18+
19+
// Add or remove class based on scroll direction
20+
if (scrollTop > lastScrollTop) {
21+
header.classList.add("header-small");
22+
} else if (scrollTop === 0) {
23+
header.classList.remove("header-small");
24+
}
25+
26+
lastScrollTop = scrollTop;
27+
});
1228
} catch (error) {
1329
console.error("Error loading header:", error);
1430
}
@@ -35,4 +51,5 @@ async function loadfooter() {
3551
}
3652

3753
// Call the function to load the footer
38-
loadfooter();
54+
loadfooter();
55+

‎styles.css

+65-6
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,39 @@ body {
1515

1616
/* Header Section */
1717
header {
18-
background: #0a0316;
18+
top: 0;
19+
width: 100%;
20+
padding: 20px 10px;
21+
background-color: #0a0316;
1922
color: #fff;
20-
padding: 1rem 0;
2123
text-align: center;
24+
justify-content: space-between;
25+
align-items: center;
26+
transition: padding 0.3s ease, font-size 0.3s ease;
27+
z-index: 1000;
28+
2229

30+
}
31+
.header-small {
32+
position: fixed;
33+
width: 100%;
34+
background-color: #0a0316;
35+
color: #fff;
36+
text-align: center;
37+
justify-content: space-between;
38+
align-items: center;
39+
transition: padding 0.3s ease, font-size 0.3s ease;
40+
z-index: 56;
41+
padding: 10px 10px;
42+
}
43+
.header-small h1 {
44+
font-size: 18px;
45+
}
46+
.header-small .header-image{
47+
width: 50px; /* Set a fixed width for the image */
48+
height: 50px; /* Maintain aspect ratio */
49+
margin-right: 10px; /* Space between image and heading */
50+
padding: 0.3rem 0;
2351
}
2452
.head-imgtxt{
2553
max-width: 1200px;
@@ -30,11 +58,12 @@ header {
3058

3159
}
3260
.header-image {
33-
width: 200; /* Set a fixed width for the image */
34-
height: 200; /* Maintain aspect ratio */
61+
width: 200px; /* Set a fixed width for the image */
62+
height: 200px; /* Maintain aspect ratio */
3563
margin-right: 10px; /* Space between image and heading */
3664
padding: 0.3rem 0;
3765
}
66+
3867
.header-b {
3968
margin: auto;
4069
margin-left: 0;
@@ -75,7 +104,7 @@ nav ul li a {
75104
}
76105

77106
nav ul li a:hover {
78-
color: #ffd700;
107+
color: #ffb000;
79108
}
80109

81110
/* Main Content Section */
@@ -84,7 +113,24 @@ main {
84113
max-width: 1200px;
85114
margin: auto;
86115
}
116+
.main-imgtxt{
117+
margin-left: 0;
118+
display: flex;
119+
flex-direction: row;
120+
flex-wrap: nowrap;
121+
}
122+
.main-image {
123+
margin-right: 10px; /* Space between image and heading */
124+
padding: 0.3rem 0;
125+
}
126+
.main-p {
87127

128+
}
129+
.peoples-b {
130+
margin: auto;
131+
margin-left: 10px;
132+
/* Remove default margin for h1 */
133+
}
88134
main section {
89135
margin-bottom: 2rem;
90136
}
@@ -100,10 +146,14 @@ p {
100146

101147
/* Footer Section */
102148
footer {
149+
position: fixed;
150+
bottom: 0;
151+
width: 100%;
103152
background: #0a0316;
104153
color: #fff;
105154
text-align: center;
106155
padding: 1rem;
156+
107157
}
108158

109159
footer p {
@@ -128,9 +178,18 @@ footer ul li a {
128178
}
129179

130180
footer ul li a:hover {
131-
color: #ffd700;
181+
color: #ffb000;
182+
}
183+
184+
185+
a {
186+
color: #00b0e8;
187+
132188
}
189+
a:hover {
190+
color: #ffb000;
133191

192+
}
134193
/* Responsive Design */
135194
@media (max-width: 768px) {
136195
nav ul {

0 commit comments

Comments
 (0)