I have to make a website for school and wanted to insert a timeline as a CV. I wrote the timeline script outside the website, and the code in itself works. However, when I input it in the overall code for the entire page, things are all over the place. I think it might be because my indentation is wrong somewhere, or I'm not dividing the page into sections? Please help! I'm new to HTML. Full website can be found at ldlg.space.
This is the code of the timeline alone:
<div class="container-fluid blue-bg">
<div class="container">
<!--first section-->
<div class="row align-items-center how-it-works">
<div class="col-2 text-center bottom">
<div class="circle">2016</div>
</div>
<div class="col-6">
<h5>BSc, Concordia University, Department of Geography, Planning and Environment (Montreal, CA)</h5>
<p>As an Environmental Science student, I followed a path where geography, geology, biology, chemistry, computer science and engineering intersect. As part of my BSc, I was an intern at the South African Shark Conservancy, and worked multiple
tasks from promoting conservation and sustainable utilization of marine resources through research, education and outreach to collecting and processing samples, analysing marine debris, catching and tagging sharks, lab work and dissections.
</p>
</div>
</div>
<!--path between 1-2-->
<div class="row timeline">
<div class="col-2">
<div class="corner top-right"></div>
</div>
<div class="col-8">
<hr/>
</div>
<div class="col-2">
<div class="corner left-bottom"></div>
</div>
</div>
<!--second section-->
<div class="row align-items-center justify-content-end how-it-works">
<div class="col-6 text-right">
<h5>MSc, McGill University, Department of Earth and Planetary Sciences (Montreal, CA)</h5>
<p>Using geochemical tracers and optimization algorithms, my Masters’ thesis consisted of analyzing the water masses present in the Saguenay Fjord and their circulation, as well as the gaseous exchange taking place at the air-sea interface.
Supervised by Dr. Alfonso Mucci.
</p>
</div>
<div class="col-2 text-center full">
<div class="circle">2018</div>
</div>
</div>
<!--path between 2-3-->
<div class="row timeline">
<div class="col-2">
<div class="corner right-bottom"></div>
</div>
<div class="col-8">
<hr/>
</div>
<div class="col-2">
<div class="corner top-left"></div>
</div>
</div>
<!--third section-->
<div class="row align-items-center how-it-works">
<div class="col-2 text-center top">
<div class="circle">2020 - </div>
</div>
<div class="col-6">
<h5>PhD Student, Royal Netherlands Institute for Sea Research & Utrecht University (Texel, NL)</h5>
<p>Ocean-going, observational carbonate chemistry. My research focuses on how the ocean responds to increasing anthropogenic CO2 emissions, with an emphasis on under-sampled regions such as the southern Indian Ocean and Pacific Ocean.</p>
</div>
</div>
</div>
</p>
And it should look like this (couldn't take a screenshot of the entire thing): timeline snipet
However, it currently looks like this: what a mess The CSS just for the timeline is:
.blue-bg {
background-color: white;
color: black;
height: 100%;
}
.circle {
font-weight: bold;
padding: 15px 20px;
border-radius: 50%;
background-color: #32b4ff;
color: white;
max-height: 50px;
z-index: 2;
}
.how-it-works.row {
display: flex;
}
.how-it-works.row .col-2 {
display: inline-flex;
align-self: stretch;
align-items: center;
justify-content: center;
}
.how-it-works.row .col-2::after {
content: '';
position: absolute;
border-left: 3px solid #22e684;
z-index: 1;
}
.how-it-works.row .col-2.bottom::after {
height: 50%;
left: 50%;
top: 50%;
}
.how-it-works.row .col-2.full::after {
height: 100%;
left: calc(50% - 3px);
}
.how-it-works.row .col-2.top::after {
height: 50%;
left: 50%;
top: 0;
}
.timeline div {
padding: 0;
height: 40px;
}
.timeline hr {
border-top: 3px solid #22e684;
margin: 0;
top: 17px;
position: relative;
}
.timeline .col-2 {
display: flex;
overflow: hidden;
}
.timeline .corner {
border: 3px solid #22e684;
width: 100%;
position: relative;
border-radius: 15px;
}
.timeline .top-right {
left: 50%;
top: -50%;
}
.timeline .left-bottom {
left: -50%;
top: calc(50% - 3px);
}
.timeline .top-left {
left: -50%;
top: -50%;
}
.timeline .right-bottom {
left: 50%;
top: calc(50% - 3px);
}
The entire code for the page is here (HTML):
<!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>LD</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="loading">
<div id="spinner"></div>
</div>
<div id="magnify">
<h1 onclick="closemagnify()"><i class="fas fa-times"></i></h1>
<div id="img_here"></div>
</div>
<header id="header" class="animated slideInDown" style="animation-delay:1.8s;">
<table>
<tr>
<td id="logo">Louise Delaigue</td>
<td id="navigation">
<a href="#bio">about</a>
<a href="#work">work</a>
<a href="">blog</a>
<a href="#contact">contact</a>
</td>
</tr>
</table>
</header>
<table id="top_part">
<tr>
<td id="about" class="animated slideInLeft" style="animation-delay:2s;">
<h1>PhD Candidate</h1>
<h2>Changing marine carbon cycle in the infrequently sampled southern Indian and Pacific Oceans.</h2>
<table>
<tr>
<td class="animated zoomIn" style="animation-delay:2.2s;"><a href="https://twitter.com/louisedelaigue" target="_blank"><i class="social"><i class="fab fa-twitter"></i></a></td>
<td class="animated zoomIn" style="animation-delay:2.4s;"><a href="https://www.linkedin.com/in/louise-delaigue/" target="_blank"><i class="social"><i class="fab fa-linkedin"></i></a></td>
<td class="animated zoomIn" style="animation-delay:2.6s;"><a href="https://github.com/louisedelaigue" target="_blank"><i class="social"><i class="fab fa-github"></i></a></td>
<td class="animated zoomIn" style="animation-delay:2.8s;"><a href="https://www.researchgate.net/profile/Louise_Delaigue" target="_blank"><i class="social"><i class="fab fa-researchgate"></i></a></td>
<td class="animated zoomIn" style="animation-delay:3.0s;"><a href="mailto:louise.delaigue@nioz.nl" target="_blank"><i class="social"><i class="fas fa-envelope"></i></a></td>
</tr>
</table>
</td>
<td id="rightImage" class="animated jackInTheBox" style="animation-delay:2.2s;"></td>
</tr>
</table>
<div id="bio">
<h1>about</h1>
<p>
I am currently involved in a joint PhD programme with the NWO-NIOZ Royal Netherlands Institute for Sea Research and Utrecht University, under Dr. Matthew Humphreys.
</p>
<p>
<div class="container-fluid blue-bg">
<div class="container">
<!--first section-->
<div class="row align-items-center how-it-works">
<div class="col-2 text-center bottom">
<div class="circle">2016</div>
</div>
<div class="col-6">
<h5>BSc, Concordia University, Department of Geography, Planning and Environment (Montreal, CA)</h5>
<p>As an Environmental Science student, I followed a path where geography, geology, biology, chemistry, computer science and engineering intersect. As part of my BSc, I was an intern at the South African Shark Conservancy, and worked multiple
tasks from promoting conservation and sustainable utilization of marine resources through research, education and outreach to collecting and processing samples, analysing marine debris, catching and tagging sharks, lab work and dissections.
</p>
</div>
</div>
<!--path between 1-2-->
<div class="row timeline">
<div class="col-2">
<div class="corner top-right"></div>
</div>
<div class="col-8">
<hr/>
</div>
<div class="col-2">
<div class="corner left-bottom"></div>
</div>
</div>
<!--second section-->
<div class="row align-items-center justify-content-end how-it-works">
<div class="col-6 text-right">
<h5>MSc, McGill University, Department of Earth and Planetary Sciences (Montreal, CA)</h5>
<p>Using geochemical tracers and optimization algorithms, my Masters’ thesis consisted of analyzing the water masses present in the Saguenay Fjord and their circulation, as well as the gaseous exchange taking place at the air-sea interface.
Supervised by Dr. Alfonso Mucci.
</p>
</div>
<div class="col-2 text-center full">
<div class="circle">2018</div>
</div>
</div>
<!--path between 2-3-->
<div class="row timeline">
<div class="col-2">
<div class="corner right-bottom"></div>
</div>
<div class="col-8">
<hr/>
</div>
<div class="col-2">
<div class="corner top-left"></div>
</div>
</div>
<!--third section-->
<div class="row align-items-center how-it-works">
<div class="col-2 text-center top">
<div class="circle">2020 - </div>
</div>
<div class="col-6">
<h5>PhD Student, Royal Netherlands Institute for Sea Research & Utrecht University (Texel, NL)</h5>
<p>Ocean-going, observational carbonate chemistry. My research focuses on how the ocean responds to increasing anthropogenic CO2 emissions, with an emphasis on under-sampled regions such as the southern Indian Ocean and Pacific Ocean.</p>
</div>
</div>
</div>
</p>
</div>
<div id="work">
<h1>work</h1>
<h2>2020</h2>
<p>
<img src="figure.png" height= "150" width="235" style="float:right;"/>
<style="float:left;">
<li><b>Delaigue, L.</b>, Thomas, H., and Mucci, A.: Spatial variations in CO<sub>2</sub> fluxes in the Saguenay Fjord (Quebec, Canada) and results of a water mixing model, Biogeosciences, 17, 547–566, https://doi.org/10.5194/bg-17-547-2020, 2020.</li>
</p>
</div>
<div id="contact">
<h1>contact</h1>
<table>
<tr>
<td>
<div id="inner_div">
<table id="inner_table">
<tr>
<td><i class="fas fa-phone"></i> +31 (0)222 369 564</td>
</tr>
<tr>
<td><i class="fas fa-at"></i> louise.delaigue@nioz.nl</td>
</tr>
<tr>
<td><i class="fas fa-map-marker-alt"></i>
<div id="address">
Royal Netherlands Institute for Sea Research<br>
Landsdiep 4<br>
1797 SZ ‘t Horntje (Texel), Nederland
</div>
</td>
</tr>
</table>
</div>
</td>
<td>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1496433.0281563827!2d4.2970418827663615!3d52.239717941343464!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTPCsDAwJzEwLjIiTiA0wrA0NycxMi4wIkU!5e0!3m2!1sen!2snl!4v1588784466479!5m2!1sen!2snl" width="500" height="200" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</td>
</tr>
</table>
</div>
<div id="footer">
made at sea by a human <br> <a href="https://ldlg.space">ldlg.space</a>
</div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
And the CSS side of things is:
@import url('https://fonts.googleapis.com/css?family=Poppins');
body {
font-family: 'Poppins', sans-serif;
padding:0px;
margin:0px;
max-width:100vw;
overflow-x:hidden;
scroll-behavior: smooth;
}
#loading {
width: 100vw;
height: 100vh;
position: fixed;
background: white;
z-index: 999;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
#spinner {
animation: rotate 0.56s infinite linear;
width:50px;
height:50px;
border:12px solid rgb(50, 180, 255);
border-bottom:12px solid #fff;
border-radius:50%;
margin:0;
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
header {
width:92vw;
padding:6vh 4vw;
position:fixed;
font-weight:bold;
background:transparent;
color:#fff;
transition:0.4s ease-in-out;
z-index:2;
}
header table {
width:100%;
}
#logo {
width:20%;
}
#navigation {
width:80%;
}
#magnify {
width:100vw;
height:100vh;
background:rgba(0, 0, 0, 0.92);
position:fixed;
z-index:4;
display:none;
flex-direction: column;
justify-content:center;
}
#magnify h1 {
position:absolute;
top:0;
right:0;
margin:20px 40px;
color:#fff;
transition:0.4s ease-in-out;
}
#magnify h1:hover{
color:rgb(50, 180, 255);
cursor:pointer;
}
#img_here {
width:90%;
height:90%;
background-size:contain !important;
background-repeat:no-repeat !important;
margin:0px auto;
}
#logo {
font-size:24px;
color:rgb(50, 180, 255);
}
#navigation {
text-align:right;
}
#navigation a {
color:inherit;
text-decoration:none;
padding:5px 10px;
border-bottom:2px solid transparent;
margin-left:4vw;
transition:0.4s ease-in-out;
}
#navigation a:hover{
border-bottom:2px solid #fff;
}
#top_part {
width:100%;
border:2vh solid #fff;
}
#top_part tr td{
width:50%;
}
#about {
width:84% !important;
height:95vh;
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
padding:0px 8%;
}
#about h1 {
font-size:45px;
word-wrap:break-word;
}
#about table {
width:70%;
margin-top:4vh;
}
#about table tr td {
width:20% !important;
text-align:left;
}
.social {
color:rgb(50, 180, 255);
font-size:23px;
padding:12px 17px;
border-radius:50%;
background:transparent;
transition:0.4s ease-in-out;
font-weight:bold;
margin:0px 8px;
}
.social:hover {
cursor: pointer;
color:#fff;
background:rgb(34, 230, 132);
box-shadow:0px 10px 30px rgba(34, 230, 132, 0.8);
}
.btn_one {
font-size:18px;
font-family: 'Poppins', sans-serif;
color:rgb(50, 180, 255);
background:#fff;
border:3px solid rgb(50, 180, 255);
padding:8px 40px;
width:35%;
border-radius:80px;
font-weight:bold;
margin:2vh 0px;
transition:0.4s ease-in-out;
}
.btn_one:hover {
box-shadow:0px 10px 30px rgba(50, 180, 255, 0.8);
cursor:pointer;
color:#fff;
background:rgb(50, 180, 255);
}
#rightImage {
width:100%;
height:95vh;
background:linear-gradient(0deg,rgba(50, 180, 255, 0.8),rgba(50, 180, 255, 0.8)),url("test.jpeg") center center;
background-size:cover;
background-repeat:no-repeat;
}
#work {
width:92vw;
padding:6vh 4vw;
font-weight:bold;
}
#work h1 {
padding:5px 0px;
border-bottom:4px solid rgb(50, 180, 255);
width:6%;
}
#photos {
width:100%;
columns:3;
column-gap:4%;
z-index:1;
transition:0.4s ease-in-out;
}
#photos img {
width:100%;
height:auto;
margin:4.5% 0px;
transition:0.4s ease-in-out;
}
#photos img:hover {
transform: scale(1.1);
cursor: pointer;
}
#bio {
width:92vw;
padding:6vh 4vw;
font-weight:bold;
}
#bio h1 {
padding:5px 0px;
border-bottom:4px solid rgb(50, 180, 255);
width:8%;
}
#contact {
width:92vw;
padding:6vh 4vw;
}
#contact h1 {
padding:5px 0px;
border-bottom:4px solid rgb(50, 180, 255);
width:10%;
}
#contact table {
width:100%;
}
#contact table tr td {
width:50%;
}
#inner_div table{
width:100%;
}
#inner_div table tr td{
font-weight:bold;
}
#inner_table tr td{
padding:10px 20px !important;
}
#contact form {
width:100%;
}
#contact form input {
width:96%;
margin:20px 1%;
background:transparent;
border:0px;
border-bottom:3px solid rgba(255, 44, 90,0.5);
padding:8px 10px;
font-family: 'Poppins', sans-serif;
font-size:18px;
transition:0.4s ease-in-out;
color:#000;
font-weight:bold;
}
#contact form textarea {
width:96%;
margin:20px 1%;
padding:8px 10px;
border:0px;
border-bottom:3px solid rgba(255, 44, 90,0.5);
padding:8px 10px;
font-family: 'Poppins', sans-serif;
font-size:18px;
background:transparent;
resize:none;
transition:0.4s ease-in-out;
color:#000;
font-weight:bold;
}
#contact form input:focus {
outline:none;
border-bottom:3px solid rgba(255, 44, 90,1);
}
#contact form textarea:focus {
outline:none;
border-bottom:3px solid rgba(255, 44, 90,1);
}
#address {
position:relative;
top:-25px;
left:30px;
}
#footer {
width:100%;
padding:10vh 0px;
text-align:center;
font-weight:bold;
}
#footer a {
color:rgb(255, 44, 90);
text-decoration:none;
}
::placeholder {
color:#000;
}
button:focus {
outline:none;
}
::-webkit-scrollbar {
width:5px;
height:5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: rgb(0, 0, 0);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0,0.8);
}
@media (max-width: 1000px){
#photos {
columns:1;
column-gap:0%;
}
#photos img {
margin:2% 0px;
}
#photos img:hover {
transform: scale(1);
cursor: pointer;
}
#rightImage {
display:none;
}
#top_part {
border:0px;
}
#top_part tr td{
width:100%;
text-align:center;
}
#about {
width:92% !important;
height:75vh;
padding-top:20vh !important;
text-align:center;
padding:0px 4%;
}
#about table {
width:100%;
margin-top:6vh;
}
#about table tr td {
text-align:center;
}
.btn_one {
padding:6px 30px;
width:60%;
margin:4vh auto;
box-shadow:0px 10px 20px rgba(255, 44, 90, 0.8);
background:rgb(255, 44, 90);
color:#fff;
}
.btn_one:hover {
box-shadow:0px 10px 40px rgba(255, 44, 90, 0.8);
cursor:pointer;
}
#contact table tr td {
width:100%;
display:block;
}
#inner_table tr td{
padding:10px 0px !important;
}
#contact form input {
width:90%;
}
#contact form textarea {
width:90%;
}
#work h1 {
width:19%;
}
#bio h1 {
width:25%;
}
#contact h1 {
width:33%;
}
header {
width:96vw;
background:#fff;
padding:4vh 2vw;
position:absolute;
}
#header table tr td {
width:100%;
display:block;
text-align:center;
padding:15px 0px;
}
#navigation a {
color:#000;
}
}
.blue-bg {
background-color: white;
color: black;
height: 100%;
}
.circle {
font-weight: bold;
padding: 15px 20px;
border-radius: 50%;
background-color: #32b4ff;
color: white;
max-height: 50px;
z-index: 2;
}
.how-it-works.row {
display: flex;
}
.how-it-works.row .col-2 {
display: inline-flex;
align-self: stretch;
align-items: center;
justify-content: center;
}
.how-it-works.row .col-2::after {
content: '';
position: absolute;
border-left: 3px solid #22e684;
z-index: 1;
}
.how-it-works.row .col-2.bottom::after {
height: 50%;
left: 50%;
top: 50%;
}
.how-it-works.row .col-2.full::after {
height: 100%;
left: calc(50% - 3px);
}
.how-it-works.row .col-2.top::after {
height: 50%;
left: 50%;
top: 0;
}
.timeline div {
padding: 0;
height: 40px;
}
.timeline hr {
border-top: 3px solid #22e684;
margin: 0;
top: 17px;
position: relative;
}
.timeline .col-2 {
display: flex;
overflow: hidden;
}
.timeline .corner {
border: 3px solid #22e684;
width: 100%;
position: relative;
border-radius: 15px;
}
.timeline .top-right {
left: 50%;
top: -50%;
}
.timeline .left-bottom {
left: -50%;
top: calc(50% - 3px);
}
.timeline .top-left {
left: -50%;
top: -50%;
}
.timeline .right-bottom {
left: 50%;
top: calc(50% - 3px);
}
Aucun commentaire:
Enregistrer un commentaire