Amateur here, I'm trying to add a map to complement a body section in my timeline.
How may I do so?
(I need to add more details according to post rules). (I need to add more details according to post rules). (I need to add more details according to post rules). (I need to add more details according to post rules). (I need to add more details according to post rules). (I need to add more details according to post rules). (I need to add more details according to post rules). (I need to add more details according to post rules). (I need to add more details according to post rules).
@import url('https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre:400,500,700&display=swap');
{
margin: 0;
padding: 0;
font-family: 'Frank Ruhl Libre', serif;
}
.timeline
{
position: relative;
margin: 50px auto;
padding: 40px 0;
width: 1000px;
box-sizing: border-box;
}
.timeline::before
{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
.timeline ul
{
margin: 0;
padding: 0;
}
.timeline ul li
{
list-style: none;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
}
.timeline ul li:nth-child(odd)
{
float: left;
text-align: right;
clear: both;
}
.timeline ul li:nth-child(even)
{
float: right;
text-align: left;
clear: both;
}
.content
{
padding-bottom: 150px;
}
.timeline ul li:nth-child(odd):before
{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: rgb(255, 169, 8);
border-radius: 50%;
box-shadow: 0 0 0 3px rgb(255, 169, 7);
}
.timeline ul li:nth-child(even):before
{
content: '';
position: absolute;
top: 24px;
left: -4px;
width: 10px;
height: 10px;
background: rgb(255, 180, 101);
border-radius: 50%;
box-shadow: 0 0 0 3px rgb(255, 169, 7);
}
.timeline ul li h3
{
margin: 0;
padding: 0;
font-weight: 600;
}
.timeline ul li p
{
margin: 10px 0 0;
padding: 0;
}
.timeline ul li .time h4
{
margin: 0;
padding: 0;
}
.timeline ul li:nth-child(odd) .time
{
position: absolute;
top: 12px;
right: -165px;
margin: 0;
padding: 8px 12px;
background: rgb(255, 169, 8);
color: #fff;
border-radius: 0px;
box-shadow: 0 0 0 3px rgb(255, 169, 7);
}
.timeline ul li:nth-child(even) .time
{
position: absolute;
top: 12px;
left: -165px;
margin: 0;
padding: 8px 12px;
background: rgb(255, 169, 8);
color: #fff;
border-radius: 0px;
box-shadow: 0 0 0 3px rgb(255, 169, 7);
}
h1
{
text-align: center;
font-size: 60px;
}
@media (max-width: 1000px)
{
.timeline
{
width: 100%;
}
}
@media (max-width: 767px)
{
h1
{
text-align: center;
font-size: 40px;
padding: 0 20px;
}
.timeline
{
width: 100%;
}
}<!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>timeline</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><h1>Timeline of U.S.—Iran Escalation</h1><div class="timeline"><ul><li><div class="content"><h3>Iran launches missile attacks at Iraqi airbase, killing an American contractor</h3><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum sunt maxime sapiente accusamus placeat, itaque soluta dicta eos fugiat optio atque eaque ipsum sed repellendus, quis nesciunt pariatur labore amet?</p></div><div class="time"><h4>December 2019</h4></div> </li><li><div class="content"><h3>What is Lorem Ipsum?</h3><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum sunt maxime sapiente accusamus placeat, itaque soluta dicta eos fugiat optio atque eaque ipsum sed repellendus, quis nesciunt pariatur labore amet?</p></div><div class="time"><h4>December 2019</h4></div> </li><li><div class="content"><h3>What is Lorem Ipsum?</h3><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum sunt maxime sapiente accusamus placeat, itaque soluta dicta eos fugiat optio atque eaque ipsum sed repellendus, quis nesciunt pariatur labore amet?</p></div><div class="time"><h4>December 2019</h4></div> </li><li><div class="content"><h3>What is Lorem Ipsum?</h3><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum sunt maxime sapiente accusamus placeat, itaque soluta dicta eos fugiat optio atque eaque ipsum sed repellendus, quis nesciunt pariatur labore amet?</p></div><div class="time"><h4>December 2019</h4></div> </li><li><div class="content"><h3>What is Lorem Ipsum?</h3><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum sunt maxime sapiente accusamus placeat, itaque soluta dicta eos fugiat optio atque eaque ipsum sed repellendus, quis nesciunt pariatur labore amet?</p></div><div class="time"><h4>December 2019</h4></div> </li><div style="clear: both;"></div></ul></div></body></html>