Chadwik Boseman Tribute

September 02, 2020

Download Files

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Libre%20Baskerville" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A tribute page dedicated to Chadwick Boseman. Created By Anshu Kumar Yadav.">
<title>Chadwick Boseman</title>
</head>

<body>
<main id="main">
<section class="first-row">
<div class="container">
<div class="column-header">
<h1 id="title">Chadwick Boseman</h1>
<p id="subheader">Actor</p>
<article>
<p>Chadwick Aaron Boseman (November 29, 1976 – August 28, 2020) was an American actor. He played several historical figures, such as Jackie Robinson in 42 (2013), James Brown in Get on Up (2014), and Thurgood Marshall in Marshall (2017). His role as the superhero Black Panther in the Marvel Cinematic Universe films, including Black Panther (2018), made him an international star, winning him an NAACP Image Award and a Screen Actors Guild Award.</p>
</article>
</div>
<div class="column-image">
<div id="image-div">
<img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTU0ODc4NDQ5OTM5MzkyMTkz/gettyimages-931925994-square.jpg" alt="Chadwick Boseman" width="472" height="495">
</div>
</div>
</div>
</section>
<section class="second-row" id="tribute-info">
<article id="second-row-container">
<h2>Biography</h2>
<p>Chadwick Boseman was born on 30 March 1853 in Zundert in the southern Netherlands, the son of a pastor. In 1869, he took his first job, working in the Hague branch of an international art dealing firm. He began to write to his younger brother Theo, a correspondence which continued for the rest of Van Gogh's life.</p>
<p>Chadwick Boseman's job took him to London and Paris, but he was not interested in the work and was dismissed in 1876. He briefly became a teacher in England, and then, deeply interested in Christianity, a preacher in a mining community in southern Belgium.</p>
<p>Boseman passed away on August 28, 2020, from colon cancer. "It is with immeasurable grief that we confirm the passing of Chadwick Boseman," a statement posted on his social media accounts read. "Chadwick was diagnosed with stage III colon cancer in 2016, and battled with it these last 4 years as it progressed to stage IV. A true fighter, Chadwick persevered through it all, and brought you many of the films you have come to love so much."</p>
</article>
</section>
<section class="third-row">
<blockquote cite="https://vangoghmuseum.nl/en/highlights/quotes">
<p id="quote"> “The Best about getting older? Just Be Thankful You are Not Dead” </p>
</blockquote>
<a href="https://en.wikipedia.org/wiki/Chadwick_Boseman" target="_blank" id="tribute-link"><u id="tribute-link-dash"> Learn more about Chadwick Boseman</u></a>
</section>

<section class="fourth-row">
<h2>Filmography</h2>
<div class="gallery-grid">
<figure class="img-container" id="img-div">
<img class="project-image" id="image" src="https://www.syracuse.com/resizer/a2n-9wD_-BdvMR4jILMvsL7SICo=/1280x0/smart/advancelocal-adapter-image-uploads.s3.amazonaws.com/image.syracuse.com/home/syr-media/width2048/img/entertainment_impact/photo/chadwick-boseman-the-express-28c6a152797aac8b.jpg" alt="The Express: The Ernie Davis Story" />
<figcaption class="caption" id="img-caption">
<p class="name-caption">The Express: The Ernie Davis Story</p>
<p class="date-caption">2008</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://ca-times.brightspotcdn.com/dims4/default/7cd6262/2147483647/strip/true/crop/1280x720+0+0/resize/840x473!/quality/90/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2F91%2F87%2Fdba8a0961d2eca3b2626a585bcd9%2Fla-xpm-photo-2013-mar-21-la-et-mn-kill-hole-review-20130322" alt="The Kill Hole" />
<figcaption class="caption">
<p class="name-caption">The Kill Hole</p>
<p class="date-caption">2012</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://cdn.wionews.com/sites/default/files/2020/08/29/157183-untitled-design-65.jpg" alt="42" />
<figcaption class="caption">
<p class="name-caption">42</p>
<p class="date-caption">2013</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://img.particlenews.com/img/id/2d2PI7_0WnqOZQT00?type=thumbnail_512x288" alt="Draft Day" />
<figcaption class="caption">
<p class="name-caption">Draft Day</p>
<p class="date-caption">2014</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://www.indiewire.com/wp-content/uploads/2020/08/get-on-up.png?w=780" alt="Get on Up" />
<figcaption class="caption">
<p class="name-caption">Get on Up</p>
<p class="date-caption">2014</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/12/09/08/Chadwick-boseman-gods-of-egypt.jpg" alt="Gods of Egypt" />
<figcaption class="caption">
<p class="name-caption">Gods of Egypt</p>
<p class="date-caption">2016</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://www.gannett-cdn.com/-mm-/b85c525b5df7d67b86522b27a8931a3c6c875abb/c=0-91-2996-1784/local/-/media/2016/05/04/USATODAY/USATODAY/635979730501348212-SP-27131-R.jpg?width=660&height=373&fit=crop&format=pjpg&auto=webp" alt="Captain America: Civil War" />
<figcaption class="caption">
<p class="name-caption">Captain America: Civil War</p>
<p class="date-caption">2016</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://i2.wp.com/getreelmovies.com/wp-content/uploads/2016/09/Message-from-the-King-1.jpg?fit=1200%2C600&ssl=1" alt="Message from the King" />
<figcaption class="caption">
<p class="name-caption">Message from the King</p>
<p class="date-caption">2016</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://i.ytimg.com/vi/dQjlsrr49Yc/maxresdefault.jpg" alt="Marshall" />
<figcaption class="caption">
<p class="name-caption">Marshall</p>
<p class="date-caption">2017</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://a57.foxnews.com/static.foxnews.com/foxnews.com/content/uploads/2018/11/931/524/Chadwick-Boseman-Black-Panther-Marvel.jpg?ve=1&tl=1" alt="Black Panther" />
<figcaption class="caption">
<p class="name-caption">Black Panther</p>
<p class="date-caption">2018</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://img.cinemablend.com/filter:scale/quill/6/1/9/2/7/9/6192790dbea55014ca103b9a6977746180eb4ba3.jpg?mw=600" alt="Black Panther" />
<figcaption class="caption">
<p class="name-caption">Avengers: Infinity Warr</p>
<p class="date-caption">2018</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://static2.srcdn.com/wordpress/wp-content/uploads/2020/08/Chadwick-Boseman-as-TChalla-in-Avengers-Endgame.jpg" alt="Endgame" />
<figcaption class="caption">
<p class="name-caption">Avengers: Endgame</p>
<p class="date-caption">2019</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://pmcvariety.files.wordpress.com/2019/12/chadwick-boseman-21-bridges.jpg?w=681&h=383&crop=1" alt="21 bridges" />
<figcaption class="caption">
<p class="name-caption">21 bridges</p>
<p class="date-caption">2019</p>
</figcaption>
</figure>
<figure class="img-container">
<img class="project-image" src="https://img.cinemablend.com/filter:scale/quill/6/9/1/a/b/f/691abf161039a4f9026f2083f89bf8605638c15a.jpg?mw=600" alt="Da 5 Bloods" />
<figcaption class="caption">
<p class="name-caption">Da 5 Bloods</p>
<p class="date-caption">2020</p>
</figcaption>
</figure>
</div>
</section>
<section class="fifth-row">

<h2>Sources</h2>
<ul>
<li>
<a href="https://en.wikipedia.org/wiki/Chadwick_Boseman" target="_blank">Wikipedia: Chadwick Boseman</a>
</li>
<li>
<a href="https://www.biography.com/actor/chadwick-boseman" target="_blank">Biography.com: Chadwick Boseman</a>
</li>
</ul>
</section>
<section class="footer">
<p> Design & Development - Anshu Kumar Yadav </p>
</section>
</main>
</body>
</html>

style.css
html {
font-size: 10px;
}

body {
font-family: Lato, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
margin: 0;
background-color: #fbfaf8;
color: #37383a;
}

h1 {
font-size: 6rem;
font-family: "Libre Baskerville", serif;
font-weight: bold;
}

#subheader {
font-weight: 300;
color: #948C57;
text-transform: uppercase;
}

@media (max-width: 400px) {
h1 {
font-size: 4rem;
}
}

h2 {
font-size: 3rem;
font-family: "Libre Baskerville", serif;
text-align: center;
padding-bottom: 5rem;
}

blockquote {
font-size: 2rem;
font-style: italic;
font-family: "Libre Baskerville", serif;
text-align: center;
margin-bottom: 5rem;
}

ul {
list-style: none;
padding-left: 0;
line-height: 2;
}

a {
text-decoration: none;
color: #37383a
}

a:hover {
text-decoration: underline;
color: #37383a
}

a:visited {
color: #948C57;
}

#tribute-link {
font-size: 1.5rem;
font-weight: 500;
color: #fefefe;
text-transform: uppercase;
line-height: 2;
}

#tribute-link:visited {
color: #fefefe;
}

#tribute-link:hover {
text-decoration: none;
}

#tribute-link-dash {
text-decoration: none;
}

#tribute-link:hover #tribute-link-dash {
animation-name: tribute-link-dash-move;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

@keyframes tribute-link-dash-move {
0% {
border-bottom: 0.4rem solid rgba(254, 254, 254, 0);
padding-bottom: 0.6rem;
}
100% {
border-bottom: 0.4rem solid rgba(254, 254, 254, 1);
padding-bottom: 0.6rem;
}
}

/* Images */

img {
max-width: 100%;
height: auto;
display: block;
box-shadow: 0 1rem 1rem -0.7rem rgba(55, 56, 58, 0.3);
}

/* Gallery */

.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 3rem;
margin: 0 auto;
}

@media (max-width: 400px) {
.gallery-grid {
grid-template-columns: 1fr;
}
}

.img-container {
position: relative;
}

.caption{
padding-top: 1.2rem;
font-family: "Libre Baskerville", serif;
}

.date-caption {
font-size: 1rem;
font-style: italic;
position: relative;
top: -1rem;
}

.name-caption {
font-size: 1.5rem;
font-weight: bold;
}

/* First row columns */

.column-header {
float: left;
width: 65%;
padding: 2.5%;
box-sizing: border-box;
}

.column-image {
float: left;
padding: 2.5%;
width: 35%;
box-sizing: border-box;
}

.container::after {
content: "";
display: table;
clear: both;
}

@media screen and (max-width: 1000px) {
.column-header,
.column-image {
width: 100%;
float: none;
}
#image-div img {
margin: auto;
}
}

/* Sections */

.first-row {
padding: 5rem 5rem 10rem 5rem;
top: 0;
}

.second-row {
color: #37383a;
padding: 0 5rem 4rem 5rem;
margin-bottom: 5rem;
}

.third-row {
background-color: #37383a;
color: #fefefe;
padding: 5rem;
text-align: center;
}

.fourth-row {
padding: 4rem 5rem 2rem 5rem;
margin-top: 4rem;
}

.fifth-row {
padding: 4rem;
text-align: center;
margin-bottom: 6rem;
}

.footer {
background-color: #37383a;
color: #fefefe;
padding: 0.2rem;
text-align: center;
}

#second-row-container {
margin: auto;
padding: 2.5%;
}

0 Comments

Please Do not add any spam link

Chadwik Boseman Tribute

Download Files

0 Comments

ABOUT ME

SUBSCRIBE & FOLLOW

POPULAR POSTS

Categories

Advertisement

Contact Form

About

Featured Posts

Report Abuse

Featured Posts

Featured Posts

About Me

Featured post

Audio Player In HTML

Followers

Floating Text Using HTML And CSS

Search This Blog

How To Create a Search Screen

Chadwik Boseman Tribute

Popular Posts

Popular Posts

coding._.zone

Random Products

Chadwik Boseman Tribute

Download Files

Related Articles

0 Comments

ABOUT ME

SUBSCRIBE & FOLLOW

POPULAR POSTS

Categories

Advertisement

Contact Form

About

Featured Posts

Report Abuse

Featured Posts

Featured Posts

About Me

Featured post

Audio Player In HTML

Followers

Floating Text Using HTML And CSS

Search This Blog

How To Create a Search Screen

Chadwik Boseman Tribute

Popular Posts

Popular Posts

coding._.zone

Random Products