Hello Everyone,
I’ve pass this Build Tribute page project. However, visually I’m not satisfied with it. There are 2 problems:
- the right side of the whole page isn’t giving the same gap/space as the left side.
- when the screen is smaller, it shows that the right side of the image exceed it’s container.
below is the screenshot of it
Here’s The Code of this project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="description" content="Tribute page of Nikola Tesla"/>
<title>Tribute Page of Nikola Tesla</title>
<link rel="stylesheet" value="text/css" href="styles.css"/>
</head>
<body>
<div class="canvas">
<header>
<h1 id="title">Nikola Tesla</h1>
<p>The man who invented the Twentieth Century</p>
</header>
<main id="main">
<section>
<div id="img-div" class="img-div">
<img id="image" src="https://imageio.forbes.com/blogs-images/davidbressan/files/2019/07/TESLA_.jpg?format=jpg&width=960" alt="Tesla Death Ray" />
<figcaption id="img-caption">A double-exposed photograph showing Tesla in his Colorado Springs laboratory with his “magnifying transmitter”.</figcaption>
</div>
</section>
<section>
<div id="info" class="info">
<h2 id="tribute-info">Here's a time line of Nikola Tesla life:</h2>
<ul>
<li><span class="bold">1859</span> - Born in Smiljan, Croatia</li>
<li><span class="bold">1870</span> - Contracted cholera. He was in hospital for close to one year, and faced near-death circumstances.</li>
<li><span class="bold">1875</span> - Enrolled to a Polytechnic based on a military scholarship. He was a disciplined student and achieved the highest grades possible while passing various exams. More so, he also started a cultural club and received a letter of commendation from the dean of the Technical Department. </li>
<li><span class="bold">1880</span>- Relocate to Prague to finish his studies. He arrived late to enroll for classes, and his lack of competence in Greek and Czech meant that he did not qualify for the classes he wanted to take. Instead, he took up classes in Philosophy at the university, though he did not receive grades for the courses.</li>
<li><span class="bold">1881</span> - Move to Budapest, Hungary and begin his career as Chief Electrical Engineer</li>
<li><span class="bold">1882</span> - found another job in Paris with a company referred to as the Continental Edison Company. </li>
<li><span class="bold">1885</span> - Submits some of his first patents, including developing enhanced DC motor</li>
<li><span class="bold">1887</span> - Came up with an induction motor that was operated by alternating current, a form of power that was becoming common in Europe and the USA. This innovative electric motor was patented in May 1988</li>
<li><span class="bold">1890</span> - Begin his work on wireless power transmission. Through the use of AC voltages that were produced by his famous `Tesla coil.`</li>
<li><span class="bold">1891</span> - At the age of 35, he became a naturalized citizen of the US. In the same year, he also patented his famous Tesla Coil.</li>
<li><span class="bold">1943</span> - Dies alone at the age of 86 in a Hotel Room in New York. The cause of death was related to coronary complications.</li>
</ul>
</div>
</section>
<section>
<p><i>“If you want to find the secrets of the universe, think in terms of energy, frequency and vibration.”</br>
― Nikola Tesla</i></p>
</section>
<h3>If you have time, you should read more about this incredible human being on his <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Nikola_Tesla">Wikipedia entry</a>.</h3>
</main>
</div>
</body>
</html>
Here’s the CSS
body{
width: 100%;
background-color: white;
margin: auto;
font-family: Helvetica;
}
h1, h2, h3, p, figcaption{
text-align: center;
}
h1{
padding-top: 20px;
padding-bottom: 0;
}
h3{
padding-top: 10;
padding-bottom: 45;
}
figcaption{
margin: 10px 0 0 0;
}
.canvas{
width: 100%;
background-color: #D9DDDC;
margin: 20px 3px;
border-radius: 10px;
}
.img-div{
background-color: red;
height: auto;
display: block;
margin: 5;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: auto;
padding: 10;
}
.bold{
font-weight: 700;
}
.info{
display: block;
margin: 20;
}
li{
vertical-align: middle;
padding: 0.5rem ;
margin: auto 50;
}
Looking forward for you correction!
