index.html

<!DOCTYPE html>

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Audio Player | Coding Zone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>

<h2>Welcome to Coding Zone</h2>
<div class="container-audio">
<audio controls loop autoplay>
<source src="Imagine Dragons - Believer.mp3" type="audio/mpeg">
Your browser dose not Support the audio Tag
</audio>
</div>
<div class="container-audio">
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
<div class="colum1">
<div class="row"></div>
</div>
</div>
</body>
</html>

style.css

* {
font-family: 'Allerta', arial, Tahoma;
box-sizing: border-box;
}
body {
background: linear-gradient(90deg, #77000a, #8800af);
text-align:center;
color:#fff;
}
h3{
text-shadow:1px 1px 1px #fff;
}
.container-audio {
width: 66%;
height: auto;
padding: 20px;
border-radius: 5px;
background-color: #eee;
color: #444;
margin: 20px auto;
overflow: hidden;
}
audio {
width:100%;
}
audio:nth-child(2), audio:nth-child(4), audio:nth-child(6) {
margin: 0;
}
.container-audio .colum1 {
width: 23px;
height: 5em;
border-radius: 5px;
margin: 0 10px 0 0;
display: inline-block;
position: relative;
}
.container-audio .colum1:last-child {
margin: 0;
}
.container-audio .colum1 .row {
width: 100%;
height: 100%;
border-radius: 5px;
background: linear-gradient(to up, #7700aa, #8800ff);
position: absolute;
-webkit-animation: Rofa 10s infinite ease-in-out;
animation: Rofa 10s infinite ease-in-out;
bottom: 0;
}
.container-audio .colum1:nth-of-type(1) .row {
-webkit-animation-delay: 3.99s;
animation-delay: 3.99s;
}
.container-audio .colum1:nth-of-type(2) .row {
-webkit-animation-delay: 3.80s;
animation-delay: 3.80s;
}
.container-audio .colum1:nth-of-type(3) .row {
-webkit-animation-delay: 3.70s;
animation-delay: 3.70s;
}
.container-audio .colum1:nth-of-type(4) .row {
-webkit-animation-delay: 3.60s;
animation-delay: 3.60s;
}
.container-audio .colum1:nth-of-type(5) .row {
-webkit-animation-delay: 3.50s;
animation-delay: 3.50s;
}
.container-audio .colum1:nth-of-type(6) .row {
-webkit-animation-delay: 3.40s;
animation-delay: 3.40s;
}
.container-audio .colum1:nth-of-type(7) .row {
-webkit-animation-delay: 3.30s;
animation-delay: 3.30s;
}
.container-audio .colum1:nth-of-type(8) .row {
-webkit-animation-delay: 3.20s;
animation-delay: 3.20s;
}
.container-audio .colum1:nth-of-type(9) .row {
-webkit-animation-delay: 3.10s;
animation-delay: 3.10s;
}
.container-audio .colum1:nth-of-type(10) .row {
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}
.container-audio .colum1:nth-of-type(11) .row {
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}
.container-audio .colum1:nth-of-type(12) .row {
-webkit-animation-delay: 2.10s;
animation-delay: 2.10s;
}
.container-audio .colum1:nth-of-type(13) .row {
-webkit-animation-delay: 2.20s;
animation-delay: 2.20s;
}
.container-audio .colum1:nth-of-type(14) .row {
-webkit-animation-delay: 1.30s;
animation-delay: 1.30s;
}
.container-audio .colum1:nth-of-type(15) .row {
-webkit-animation-delay: 1.40s;
animation-delay: 1.40s;
}
.container-audio .colum1:nth-of-type(16) .row {
-webkit-animation-delay: 1.50s;
animation-delay: 1.50s;
}
.container-audio .colum1:nth-of-type(17) .row {
-webkit-animation-delay: 1.60s;
animation-delay: 1.60s;
}
.container-audio .colum1:nth-of-type(18) .row {
-webkit-animation-delay: 1.70s;
animation-delay: 1.70s;
}
.container-audio .colum1:nth-of-type(19) .row {
-webkit-animation-delay: 1.80s;
animation-delay: 1.80s;
}
.container-audio .colum1:nth-of-type(20) .row {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}

@-webkit-keyframes Rofa {
0% {
height: 0%;
-webkit-transform: translatey(0);
transform: translatey(0);
background-color: yellow;
}

5% {
height: 100%;
-webkit-transform: translatey(15px);
transform: translatey(15px);
background-color: fuchsia;
}
10% {
height: 90%;
transform: translatey(0);
-webkit-transform: translatey(0);
background-color: bisque;
}

15% {
height: 80%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
20% {
height: 70%;
-webkit-transform: translatey(0);
transform: translatey(0);
background-color: cornflowerblue;
}
25% {
height: 0%;
-webkit-transform: translatey(0);
transform: translatey(0);
background-color: cornflowerblue;
}
30% {
height: 70%;
-webkit-transform: translatey(0);
transform: translatey(0);
background-color: cornflowerblue;
}
35% {
height: 0%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
40% {
height: 60%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
45% {
height: 0%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
50% {
height: 50%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
55% {
height: 0%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
60% {
height: 40%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
65% {
height: 0%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
70% {
height: 30%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
75% {
height: 0%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
80% {
height: 20%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
85% {
height: 0%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
90% {
height: 10%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
95% {
height: 5%;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
100% {
height: 0;
-webkit-transform: translatey(0);
transform: translatey(0);

background-color: cornflowerblue;
}
}

index.html
<!DOCTYPE html>
<html>
<head>
<title>Parallax Effect</title>
<link rel = "stylesheet" href ="style.css">
</head>
<body>
<div class="image"></div>
<section class="content">
<h3>Parallax Effect</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum justo, pharetra quis magna vitae, mollis posuere turpis. Cras in augue eu odio vulputate fringilla. In id nibh eu quam posuere ultricies. Donec vehicula felis rhoncus lobortis mollis. Vivamus bibendum sollicitudin ultrices. Curabitur congue lorem id accumsan convallis. Sed non libero quis tellus rutrum volutpat tempus vel tortor. Ut in euismod nibh, aliquet aliquam odio. Nunc sed augue nec arcu porttitor scelerisque. Praesent lacinia justo odio. Nulla sed diam quam. Nunc lectus odio, bibendum id convallis sed, tempor non diam. Vestibulum sodales dui vel commodo gravida. Aenean eu scelerisque turpis.

Praesent scelerisque nisl vel condimentum tincidunt. Nam in purus vitae ligula pellentesque aliquam sit amet mattis ante. Ut commodo ex a massa accumsan tristique. Aenean lectus diam, condimentum ac libero in, pulvinar auctor mi. Sed a maximus elit. Mauris at viverra lectus. Nullam non massa sagittis, aliquam neque sit amet, rutrum massa. Integer suscipit nulla nec sem facilisis elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam a aliquam erat. Nulla scelerisque accumsan elit, non tempus justo consectetur id. Nulla ac dictum lacus, auctor pharetra lectus. Duis vel odio purus.

Maecenas porta felis in lectus luctus, nec condimentum quam ornare. Mauris rhoncus leo metus, vel pellentesque est dictum sed. Nam ex orci, laoreet vitae ligula a, bibendum condimentum erat. Maecenas blandit placerat risus non accumsan. Aenean mollis lectus nec purus porta, quis hendrerit neque luctus. Quisque in condimentum ipsum, ac tincidunt nisi. Mauris mauris justo, hendrerit quis facilisis id, rhoncus in nulla. Proin ultrices ac nisi quis tincidunt. Nunc pretium arcu convallis risus accumsan fermentum. In sollicitudin, arcu ac bibendum lacinia, purus tortor sollicitudin leo, at congue ante leo vitae mauris. Aenean viverra ex sit amet risus efficitur laoreet nec vel orci. Etiam lobortis commodo dolor, eget ullamcorper tortor faucibus ac. Fusce lobortis, ligula et finibus convallis, augue dui consectetur urna, et tincidunt eros risus a urna. In fermentum ipsum ut ex maximus convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Cras nisi felis, suscipit a justo ac, pellentesque accumsan ante. Nulla convallis urna odio, nec maximus erat elementum euismod. Nullam euismod consequat ante, non hendrerit eros fringilla iaculis. Donec sagittis, sem efficitur suscipit suscipit, leo sem sagittis risus, eget vulputate diam ipsum eget augue. Vivamus congue, magna ac tempus volutpat, ligula erat venenatis nisl, eu semper nunc turpis sed nibh. Sed posuere augue a sem hendrerit vulputate fringilla feugiat erat. Fusce vestibulum felis ante, at maximus sem dictum ut. Nullam scelerisque interdum cursus. Suspendisse hendrerit purus non libero pulvinar mattis. Morbi aliquam viverra nunc, vitae accumsan nunc efficitur a. Curabitur quis ex in tortor finibus elementum. Vivamus a metus semper velit convallis pharetra nec a felis. Quisque id mi nisi. Fusce vitae libero a dui fermentum semper id id sapien. Vestibulum elementum risus et tristique consectetur. In pulvinar laoreet nulla, a tincidunt lectus elementum ac.

Nam sit amet leo consectetur, facilisis nisl non, porta eros. Nam pretium fermentum mauris sit amet tempus. In mauris odio, vestibulum sit amet velit ac, luctus dictum neque. In ex ex, pharetra vitae interdum non, egestas quis ex. Curabitur bibendum felis id eros ultricies, eu bibendum mauris pharetra. Mauris condimentum ante et blandit scelerisque. Integer tempus iaculis viverra. Morbi sem eros, elementum ac maximus ut, placerat vel lacus. Proin turpis diam, vestibulum vitae viverra laoreet, elementum a orci. Nunc sollicitudin suscipit commodo.

Phasellus ut eros eget nulla iaculis tincidunt at at arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ex lorem, imperdiet vitae facilisis at, sollicitudin quis lorem. Sed neque ex, pretium eu commodo sed, pretium ut est. Maecenas auctor lacinia sem, non rhoncus nisi vestibulum ac. Cras accumsan euismod sem, ut volutpat enim condimentum non. Donec gravida pellentesque purus, at semper odio ultrices vel. Nulla ac orci sit amet risus pharetra congue. Morbi venenatis massa nec semper placerat. Nulla consectetur egestas mauris a rutrum. Nunc nisi felis, gravida sed enim mattis, egestas gravida est. Integer ac varius magna. Morbi vitae hendrerit mauris. Sed feugiat eros sit amet sem pulvinar lacinia.

Nam ornare suscipit sem, vitae aliquam massa convallis ac. Ut ultricies luctus risus, non malesuada metus tempus quis. Praesent bibendum maximus dui, et egestas ipsum dapibus ac. Aenean sed dignissim lorem, vitae suscipit ligula. Sed imperdiet ligula arcu, sed tincidunt tortor pretium eget. Integer sollicitudin dolor sed feugiat aliquet. Aliquam pulvinar elit eu laoreet efficitur. Mauris lacinia lorem dignissim velit ultricies, eu gravida est sodales. Quisque lacus metus, facilisis at varius vel, scelerisque at lacus. Duis eu porta tellus, in placerat erat. Quisque id sollicitudin justo. Mauris fermentum finibus leo ac tincidunt. Donec vel molestie lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum mi ut leo finibus, non tincidunt leo molestie. In maximus felis ac justo egestas, ut blandit urna dictum. Aliquam erat volutpat. Vestibulum a diam tincidunt, sodales tellus eu, viverra erat. Fusce vestibulum id nisi a rutrum. Sed congue, neque id posuere varius, augue libero malesuada tellus, quis sollicitudin nunc massa eu metus. Vivamus sed metus nec justo consequat volutpat. Fusce quis elementum dui.

Morbi iaculis, nunc vitae suscipit efficitur, lorem ex bibendum mi, eget tincidunt urna purus quis nulla. Donec vel libero vitae mi sodales pharetra. Ut lorem urna, suscipit vitae nisi sit amet, tincidunt congue massa. Pellentesque luctus lectus dolor, in efficitur lacus ullamcorper vitae. Aenean porttitor nisl mi, nec fringilla neque bibendum a. Maecenas sed urna sit amet sem dictum lobortis ut non dui. Nulla enim massa, consequat porttitor dui at, euismod tempus magna.

Quisque sed erat vel justo dignissim placerat. Sed sit amet ex vel dolor placerat elementum a ut purus. Nam porttitor accumsan sapien et porttitor. Donec et rutrum ex. Cras at ullamcorper lectus. Aenean non mattis erat, nec dignissim eros. Integer turpis est, rhoncus ut erat in, tristique iaculis sem. Cras congue at neque ac malesuada.

Donec bibendum laoreet tellus, sit amet ullamcorper turpis fringilla ut. Integer mattis dolor dolor, maximus venenatis mi volutpat vitae. Praesent ac ante vitae est porta mattis vel in lacus. Mauris blandit tortor vel euismod consequat. Nam ornare mi vitae nulla convallis congue sed non turpis. Vestibulum sed viverra ex, ac porta orci. Phasellus vestibulum risus ac lacus ornare mollis. Curabitur ipsum mi, tincidunt vitae sapien eget, pretium porta eros. Pellentesque vel pellentesque dolor. Aenean velit tellus, fringilla sed risus eu, fermentum facilisis ante. Aliquam nibh dui, interdum in tortor eu, consectetur faucibus erat. Donec id mollis arcu. Nunc vehicula, nunc a laoreet pretium, lectus diam dictum dolor, non mollis mauris urna a elit. Proin ac nisl ligula. Maecenas in malesuada lacus, vitae viverra est.

Aliquam in rhoncus massa, eu eleifend felis. Duis eget purus venenatis, aliquet augue a, ullamcorper metus. Suspendisse eget pellentesque arcu, porttitor faucibus nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In hac habitasse platea dictumst. Aliquam ac euismod lacus. Vestibulum nulla massa, sagittis quis nibh dictum, convallis viverra felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas quis libero eros. In vitae lectus eget nulla congue gravida.

Nunc in tellus ac ex rutrum fermentum sit amet ac lectus. Maecenas faucibus tortor ipsum, eu maximus lacus porttitor iaculis. Ut quis dignissim mi, sed ultrices tortor. Etiam consectetur, arcu vel rutrum tempus, nisl libero ullamcorper nulla, ut vulputate leo ipsum vel ipsum. Aliquam hendrerit nisi libero, ut dignissim mi dictum nec. Nullam sit amet sem laoreet, condimentum libero at, convallis erat. Proin quis lacinia risus. Aliquam placerat justo laoreet diam imperdiet aliquet. Aliquam erat volutpat. Pellentesque at nulla tempus, suscipit erat vitae, faucibus orci. Duis euismod fermentum posuere. Curabitur dapibus dignissim rutrum.

Quisque efficitur efficitur dolor, quis consequat orci. Nulla tristique nec urna in ultrices. Cras pharetra nec ante a luctus. Proin a ex metus. Pellentesque et turpis vitae justo euismod accumsan. Sed tincidunt ex nec est faucibus, ut porttitor ex vulputate. Ut consectetur dapibus tortor nec sollicitudin. Phasellus augue nunc, sodales sed felis non, blandit vulputate lorem. Aliquam luctus sodales enim, sit amet tempus eros mattis non. Pellentesque aliquam luctus mauris, ut consequat velit pulvinar in.

Vivamus in ante pretium, sollicitudin lacus ut, scelerisque purus. Nunc ante elit, porttitor non lobortis eget, vulputate eget lorem. Donec vel luctus mi. Etiam mattis scelerisque urna, mattis viverra massa accumsan sed. Donec viverra, purus at vestibulum rhoncus, risus est feugiat lacus, nec semper urna nunc eu urna. Nulla vulputate nisl eu urna convallis posuere et volutpat lectus. Cras interdum sed turpis vel convallis. Integer id accumsan tellus.

Quisque vitae faucibus lacus. Donec lacinia turpis at enim hendrerit, eget tincidunt tellus condimentum. Suspendisse scelerisque ante tellus. Aliquam at est id sem tincidunt egestas. Maecenas blandit ipsum in condimentum aliquet. Nam non commodo ex. In finibus justo eget commodo viverra. Sed scelerisque malesuada justo vel rutrum. Duis accumsan neque id risus molestie ultricies. Sed orci ligula, rutrum vel convallis vitae, porta sed eros. Donec consectetur urna ut risus blandit, vitae aliquet turpis fringilla. Praesent eget pulvinar purus. Curabitur ac lorem metus. Donec ultricies dolor nec vehicula dictum. Curabitur malesuada ac odio eget mattis.

Fusce tincidunt velit urna, at porta tortor pretium id. Maecenas sed sem sit amet enim ullamcorper scelerisque ut ut ipsum. Integer in lacus eu ante lobortis consectetur et nec odio. Fusce bibendum nisi odio, eu ornare mauris aliquet id. Vivamus et nisi pulvinar, pellentesque sem quis, ullamcorper leo. In et nibh vel lacus congue consectetur in et turpis. Mauris mattis, magna vitae eleifend efficitur, lectus risus ullamcorper sem, nec rutrum nulla nibh sed neque. Sed congue ex diam, sit amet euismod ex finibus at. Integer posuere dignissim enim ultricies tempus.

Phasellus maximus orci massa, ut porta odio convallis eu. Proin tellus dolor, malesuada non aliquet sed, dapibus tincidunt turpis. Morbi lobortis iaculis augue, non commodo quam faucibus nec. Duis eget fringilla nisi, id pulvinar diam. Aliquam viverra, ipsum at dignissim gravida, tellus purus porttitor nulla, et consectetur purus nibh a sem. Mauris a velit laoreet, tincidunt velit eget, pharetra lorem. Maecenas vitae ornare ex, quis malesuada metus. Nullam convallis ligula tellus, eu rutrum turpis eleifend vel. Nulla facilisi. Pellentesque viverra pulvinar urna, rhoncus porta ex eleifend sit amet. Suspendisse vitae ornare diam. Sed hendrerit sapien a diam venenatis bibendum. Pellentesque sapien ipsum, sodales a posuere ut, eleifend vel odio. Ut sed enim id orci malesuada tincidunt vitae sed elit. Vestibulum iaculis, augue rhoncus porta venenatis, ligula nisl tincidunt lectus, vel volutpat nunc risus bibendum arcu.

Mauris tincidunt dui id erat mattis, ullamcorper aliquet nunc ultricies. Proin pellentesque neque nec tincidunt bibendum. Nullam at nisi tempus, malesuada eros a, feugiat massa. Sed eu lacus sapien. Quisque imperdiet porttitor felis a finibus. Praesent laoreet sollicitudin lorem, sed semper neque feugiat ac. Vestibulum nec turpis sed ipsum tempor sollicitudin at vel quam. Maecenas feugiat arcu quis mi mattis scelerisque. Phasellus interdum id est eget varius. Phasellus euismod nibh feugiat fermentum lacinia. Mauris eu odio purus.

In pharetra porttitor tortor, ullamcorper viverra libero lacinia quis. Mauris fringilla vestibulum felis non interdum. Integer suscipit ultricies tellus, a volutpat turpis. Ut at faucibus arcu. Fusce suscipit mi eget ipsum laoreet, vitae viverra eros congue. Nulla vel egestas odio, sit amet scelerisque felis. Morbi faucibus porta auctor. Donec id accumsan quam. Quisque placerat lectus at elementum pharetra. Duis in auctor urna. Mauris viverra ante eu arcu commodo condimentum at ultricies mi. Pellentesque at felis a est fringilla blandit id non orci. Nulla tempus, nisi eget rhoncus rutrum, sem ex luctus augue, ac faucibus nisl massa ut nisi. In vestibulum ligula sed leo semper volutpat. Cras quis tortor massa.

Curabitur sed malesuada dui. Maecenas viverra posuere neque, non congue est elementum hendrerit. Vivamus ut tristique est. Mauris fringilla posuere lectus at vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut vehicula lectus. Phasellus gravida, velit sit amet fringilla vulputate, sapien ex pulvinar dui, in pellentesque nisl eros id magna.

Nulla at felis non sem sodales dignissim. Pellentesque suscipit augue a ante vulputate suscipit. Fusce facilisis mollis efficitur. Donec commodo luctus luctus. Curabitur interdum id ligula vitae sodales. Maecenas ex elit, dapibus ac ligula id, iaculis pharetra neque. Ut felis mauris, sollicitudin eget tincidunt quis, rutrum non nisi. Sed cursus, eros vitae sollicitudin venenatis, dolor purus congue ipsum, et pretium felis ligula id tellus. Sed efficitur lorem at diam faucibus commodo. Duis tempor leo sed nisi varius, et lobortis mi gravida. Mauris et turpis sed risus sodales dapibus. Donec semper pellentesque dui at sagittis. In urna est, posuere id fermentum ac, egestas placerat quam.

Phasellus placerat diam sed lobortis dictum. Maecenas ultricies elementum varius. Nullam non arcu non velit tristique pretium et nec magna. Vivamus convallis, turpis molestie lobortis tristique, risus ligula rutrum velit, sed sodales lorem leo vitae ante. Quisque posuere nisi in feugiat rhoncus. Vestibulum eget efficitur nibh. Mauris fermentum nec est vitae volutpat. Maecenas at nisl mattis, elementum sapien vitae, fringilla est. Cras a nibh a eros porta malesuada condimentum vel massa. Pellentesque malesuada blandit pulvinar. Nulla tincidunt sed neque eget blandit. Integer ut mauris quis turpis ultrices semper nec a enim. Cras consectetur enim eu sapien consectetur consectetur. Aenean ac fermentum felis.

Donec a lorem lorem. Praesent pulvinar leo quis ex vestibulum maximus. Duis quis sollicitudin neque, nec facilisis eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin in facilisis lectus. Morbi eu accumsan diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam vitae ante lorem. Donec molestie cursus metus, at commodo dolor. Suspendisse ut elit eget nunc ultricies placerat. Duis faucibus consectetur lacus non venenatis. Etiam ante purus, semper et feugiat ut, vehicula nec tortor. Nulla faucibus commodo facilisis. Aliquam at sagittis erat. Duis eget ipsum ipsum. Etiam lacus nunc, fermentum id turpis non, sagittis fringilla odio.

Vestibulum sed eleifend lectus. Phasellus sit amet porttitor dui. Cras molestie lorem tellus, eu ullamcorper tortor rhoncus eu. Pellentesque et finibus sapien. Quisque consectetur justo convallis, ornare dolor vitae, fermentum libero. Maecenas in lacus a nulla dictum bibendum. Integer laoreet commodo nisl, in mollis quam pretium non. Vivamus euismod erat nec arcu hendrerit, eu rhoncus nibh varius. Suspendisse commodo augue risus, sed sagittis quam tempus at. Suspendisse porttitor nec dolor in varius.

Nunc quis sem tincidunt, egestas libero a, semper nisi. Suspendisse potenti. Donec in finibus purus, non consequat tellus. Duis at accumsan nisl, sit amet tempus est. Mauris posuere ut mauris at imperdiet. Donec eleifend mi tortor, nec feugiat nisl viverra ac. Donec molestie rutrum efficitur. Pellentesque blandit vitae neque et dapibus. Sed sed interdum justo, pellentesque tincidunt lorem. Donec sit amet mauris mi. Mauris ullamcorper diam at risus hendrerit venenatis eu et erat. Etiam sit amet nunc eu mauris ultrices elementum. Integer tincidunt turpis sed imperdiet faucibus. Cras maximus, est non volutpat facilisis, odio neque porttitor augue, in congue quam leo ac odio. Proin bibendum nec leo aliquet convallis. Curabitur blandit et ligula venenatis viverra.

Maecenas hendrerit varius mauris id facilisis. Mauris posuere nunc at vehicula sagittis. Suspendisse pretium efficitur nunc egestas aliquam. Suspendisse vulputate, diam in tempor eleifend, ante nisi mattis libero, eu maximus magna mi vel massa. Nullam bibendum, sapien ac faucibus pulvinar, libero est pellentesque quam, in dapibus felis metus non turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac massa vitae tellus eleifend fermentum ac non dolor. Duis efficitur eleifend lorem, sagittis euismod sem malesuada ac. Integer lorem orci, ultrices eget est eu, vestibulum ultrices tellus. Aenean tempor massa in sem auctor, eu sollicitudin magna laoreet.

Nullam vulputate mauris et est laoreet, nec porta turpis elementum. Integer sed molestie mauris. Nullam sit amet rutrum urna. Integer non elementum est. Mauris egestas, nisl nec lobortis gravida, ipsum mi congue lorem, non commodo est nulla eget dui. Mauris tristique at lectus id maximus. Sed at nisl eu neque aliquet pharetra eu laoreet quam. In fringilla faucibus magna, at efficitur justo tincidunt in. Sed lacinia eget nisl a maximus. Sed ultricies dolor id eros luctus volutpat. Duis est purus, euismod at vestibulum eget, convallis commodo urna. Aliquam rutrum auctor velit, viverra lobortis libero consectetur et. Aenean metus ligula, viverra vel ligula egestas, ultricies laoreet mauris. Sed sit amet luctus leo. Maecenas at nisi ac magna sodales eleifend. Duis iaculis pellentesque ultrices.

Sed in dolor vel metus feugiat tristique. Suspendisse id consectetur urna. Ut varius cursus tortor, sit amet sagittis eros laoreet nec. Mauris venenatis neque nisi, ac malesuada velit rhoncus quis. Quisque est tortor, scelerisque et erat ac, porta mollis enim. Duis faucibus et elit vel egestas. Nullam ante dolor, feugiat et ipsum a, maximus mollis est. Pellentesque laoreet est tellus, eget rhoncus purus porttitor fringilla. Aenean dapibus neque aliquet nulla fringilla, at hendrerit elit placerat. Vestibulum orci nibh, finibus at condimentum ut, ultrices a lectus. Duis at nulla ac nibh pulvinar dictum non eu tellus. Pellentesque sagittis orci mi, sit amet mattis enim venenatis ultricies. Curabitur facilisis, risus eu convallis luctus, nisi ligula tincidunt lacus, eu vulputate est nisi vitae nulla.

Duis erat magna, feugiat eu nulla sed, porta accumsan tortor. Aenean eget elementum risus. Nunc enim sem, lacinia ac laoreet in, bibendum non orci. Donec blandit risus lectus, nec rhoncus sem porta quis. Aenean sit amet interdum dui. Cras luctus leo et gravida semper. Nulla rutrum fermentum orci, laoreet aliquam augue pulvinar volutpat. Proin dapibus lectus dui. Nullam sodales vestibulum malesuada. Fusce hendrerit ligula et viverra tristique. Phasellus sed purus vel urna vehicula sollicitudin. Curabitur cursus blandit velit, interdum dictum ante ullamcorper sed.

Integer tincidunt sem eget ipsum ornare, id ultrices neque porttitor. Ut non orci dolor. Fusce ornare erat at ultricies vehicula. Vivamus vestibulum auctor elit vitae suscipit. Sed rhoncus nec nisi mattis egestas. Phasellus dapibus mi a velit ultrices faucibus. Ut fringilla mi quis est posuere, eget pulvinar nisi lacinia. Quisque porta, justo ut ullamcorper dictum, diam est pellentesque ligula, et iaculis diam ante in est.

Morbi ullamcorper rutrum efficitur. Sed auctor arcu id egestas laoreet. Morbi a nisl a nisi condimentum euismod vitae vitae augue. Pellentesque nibh est, pharetra eget elit a, tempus sollicitudin nisl. Nunc non enim quis augue mattis pellentesque. Proin cursus magna eu ante bibendum laoreet. Integer volutpat elementum lorem et bibendum. Donec non pretium diam. Fusce in tempor ex. Phasellus a ligula ac lacus volutpat eleifend quis at nulla. Donec semper quam sed elit facilisis egestas. Suspendisse feugiat cursus iaculis.

Donec vel viverra odio. Suspendisse potenti. Nam aliquam tincidunt sem eu finibus. Vestibulum eu porta tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eleifend erat vel cursus posuere. Maecenas a sapien nisi. Maecenas ante arcu, aliquet ut bibendum id, ornare nec sapien. Vestibulum id pretium tellus. Cras aliquet posuere sapien, et sagittis nunc mollis sed. Pellentesque sed mollis augue. Morbi sit amet sem tincidunt, blandit sapien sed, rhoncus diam. Nunc placerat elementum metus, id ultricies nisl suscipit a. Nullam volutpat tristique ante, in convallis risus tempor sed. Suspendisse rutrum, nisi eget tempus elementum, mauris turpis gravida tortor, vel cursus velit elit at mi.

In hac habitasse platea dictumst. Quisque eu vulputate urna. Praesent nulla mi, hendrerit eu rutrum nec, lobortis sit amet erat. Integer efficitur tortor bibendum elit condimentum, blandit porttitor magna molestie. Cras vestibulum enim ac ullamcorper faucibus. Aenean dapibus rhoncus nibh, a ultricies eros dignissim quis. Praesent nisi erat, condimentum id sodales luctus, sodales at enim.

Mauris et sapien sed tortor accumsan imperdiet. Fusce a rhoncus lorem. In hac habitasse platea dictumst. Nunc sagittis posuere est. Nam posuere tincidunt diam ac pellentesque. Mauris nec bibendum arcu. Quisque a ex tortor. Ut quis nulla in lacus porta rhoncus et porttitor neque. Aliquam erat volutpat. Duis placerat risus enim, sit amet tincidunt lacus posuere et. Fusce porta sed leo quis ultrices. Ut ipsum ipsum, vehicula ut diam et, mollis placerat libero. Integer felis lectus, ornare sed nisi nec, suscipit placerat neque. Nam eget feugiat justo.

Integer porttitor mattis magna, nec vehicula arcu venenatis et. Curabitur sagittis cursus est, non viverra velit. Vestibulum vel accumsan libero. Fusce ultricies, risus ut euismod venenatis, dui quam sollicitudin sapien, ac rutrum augue felis non purus. Donec eu massa enim. Vivamus pulvinar odio in dolor faucibus, sed egestas tellus tincidunt. Suspendisse vel eros et ipsum vehicula ultrices. Vestibulum sed justo blandit, mattis justo eget, facilisis ligula. Suspendisse sagittis in urna at pretium. Nulla facilisi. Maecenas pretium libero mauris, sit amet consequat nisl interdum non. Quisque viverra iaculis tempus. Donec nec dui vehicula, scelerisque justo sit amet, posuere urna. Cras nisi erat, hendrerit id gravida at, mollis at ligula. Integer porttitor nisi eget lobortis auctor.

Cras venenatis metus eu velit blandit feugiat. Nunc id blandit ante. Maecenas ullamcorper iaculis risus, sed elementum est sagittis eu. Nullam malesuada maximus dui ac sodales. Proin sit amet lacus dapibus, viverra arcu at, rutrum ipsum. Donec vehicula ac urna et faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In sed auctor tortor, ornare vehicula urna. Ut eleifend enim erat, id aliquet massa lacinia eleifend. Aliquam ac aliquet tellus. Maecenas ac leo ipsum. Vestibulum dapibus auctor nulla blandit aliquet. Integer dictum nisl id lectus ultrices vulputate.

Pellentesque a massa in leo tincidunt lacinia. Cras vel eros sit amet massa tempus facilisis. Quisque vestibulum pellentesque consequat. Aenean ultricies orci ut libero viverra semper. Aliquam elementum urna diam, quis tempor nisl tincidunt non. Donec convallis est quis tempor venenatis. In varius tempor ultrices. Nunc non ultricies orci. Nunc molestie tempor erat quis condimentum. Vestibulum gravida ac est eu vulputate. Aliquam dictum, dolor ac mattis cursus, lorem nisl pulvinar arcu, quis malesuada erat tortor et ipsum. In porttitor dictum accumsan. Donec vel est sed eros rhoncus varius non pulvinar diam. Nulla tristique ligula id nisi pharetra laoreet. Quisque ultricies eros eget magna iaculis, luctus auctor est pharetra.

Quisque vel lorem eros. Maecenas quis diam vel augue porttitor placerat sed et ante. Maecenas ac tortor eleifend, mattis justo sed, faucibus nulla. Etiam et hendrerit lacus. Nunc laoreet mollis iaculis. Pellentesque condimentum porta tellus, sit amet fringilla lectus euismod eu. Nulla facilisi.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque quis vestibulum augue. Sed ut tortor non enim maximus laoreet. Etiam ut leo aliquet, aliquam ante nec, ultrices turpis. Phasellus molestie magna vitae fermentum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque tempor mi et accumsan accumsan. Fusce maximus eu mauris tempor sagittis. Praesent posuere bibendum elit vitae egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas finibus leo ut ante feugiat, vitae bibendum eros finibus. Mauris iaculis odio at sodales iaculis.

Proin ut tortor et nulla mattis maximus a at mauris. Morbi a scelerisque risus. Fusce libero tortor, ultrices sed interdum at, dignissim eget metus. Duis vestibulum sem vel est feugiat aliquam. Proin semper vulputate fringilla. Nullam nec fermentum orci. Maecenas a elit vitae sem maximus pretium. Nam posuere, dolor non molestie fermentum, orci odio blandit ipsum, non finibus magna felis quis metus.

Nunc aliquet sapien orci, nec fringilla erat scelerisque sodales. Quisque eget ex et ante eleifend auctor id nec orci. Praesent euismod accumsan neque, in ullamcorper massa lobortis dapibus. Maecenas ullamcorper mattis rhoncus. Vivamus ut consequat massa. Curabitur quis dui vel quam porttitor pharetra. Duis ullamcorper feugiat velit, ac pretium turpis bibendum in. Nulla tempus diam id ipsum interdum, vitae bibendum quam imperdiet. Nulla vitae eros eu felis interdum fermentum sed lobortis erat. Proin magna orci, faucibus sit amet metus eget, egestas porta lectus. Vivamus mollis dolor eu tellus mollis, non sollicitudin neque mattis. Suspendisse ut ipsum vestibulum, accumsan lacus non, cursus enim. Mauris nec leo interdum, convallis enim ut, ultricies ligula. Suspendisse non tempor nunc, non congue lectus. Etiam vestibulum, nulla cursus convallis commodo, augue purus vehicula lectus, sed venenatis turpis ex ut eros. Vestibulum vestibulum orci eget dignissim blandit.

Nullam non ornare neque. Integer sit amet risus condimentum, porta nibh sit amet, pulvinar urna. Nullam dignissim eros ac est facilisis, sit amet tempor nisl vulputate. Maecenas consectetur vel erat et finibus. Donec sed arcu nec est elementum lobortis. Nulla maximus augue vitae mauris porta condimentum. Curabitur ullamcorper ullamcorper sapien, a hendrerit risus commodo sed.

Nunc pretium cursus velit, vel porttitor dolor imperdiet sed. Phasellus tincidunt elit augue, a elementum erat ultricies ac. Vestibulum condimentum dolor lacinia, sagittis erat ut, consectetur elit. Aenean auctor mi eu dui ultricies semper. Phasellus sem dolor, vestibulum et imperdiet sed, ultricies fringilla libero. Integer sollicitudin enim sit amet odio gravida, at viverra diam faucibus. Sed in pretium leo, et sodales odio. Phasellus fringilla felis id est pharetra, nec commodo odio ornare. Maecenas ac lorem et lacus elementum varius sed id nisl. Duis gravida tortor ut convallis maximus. Nullam congue id quam eget tincidunt. Suspendisse quis massa et purus mattis congue. Quisque euismod felis eu justo posuere rutrum.

Duis nec nisl orci. Etiam a justo convallis, eleifend tellus pretium, pellentesque dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id tortor aliquet nibh lacinia posuere. Integer eget arcu justo. Vivamus vitae sapien diam. Nam venenatis velit vel bibendum ultrices. Fusce neque augue, facilisis porttitor egestas condimentum, sollicitudin vitae odio. Fusce augue tortor, consequat a mauris eu, maximus accumsan est. Ut ut augue sit amet erat auctor vehicula. Quisque ac posuere ipsum. Praesent pharetra nec est et tempus. Aenean ultrices leo ut augue aliquam finibus. Donec pulvinar massa at ligula fermentum malesuada.

Sed cursus egestas arcu, ut sollicitudin velit pulvinar ut. Aenean a sapien imperdiet, tristique ipsum eget, aliquet libero. Nullam posuere massa metus, non volutpat sapien bibendum ullamcorper. Phasellus porta elit quis orci sagittis facilisis. Cras efficitur augue sapien, ac finibus justo volutpat id. Ut rutrum sit amet risus id pulvinar. Vivamus ornare velit non eleifend ultricies. Vivamus non euismod leo, quis posuere mi. Suspendisse consectetur efficitur eros nec ultricies. Donec semper ipsum vitae nibh mattis, auctor auctor velit interdum.

Aliquam eget euismod nisl, sed imperdiet enim. Nulla facilisi. Aliquam sed malesuada massa. Vivamus libero elit, tempus non suscipit quis, tempus sed nibh. Proin arcu dolor, auctor eget maximus in, sodales eget sapien. Cras leo libero, scelerisque id scelerisque nec, placerat sed ex. Nulla ut varius nisl. Etiam ac libero at lectus hendrerit iaculis. Maecenas lacinia nisi augue, ultricies sollicitudin erat tempor et. Aliquam scelerisque vel turpis at luctus. Quisque lacinia nulla a libero lobortis, finibus tincidunt odio aliquam. Vestibulum mollis enim et ex dignissim, at facilisis sapien cursus. Vivamus tincidunt sapien ut ante pellentesque, at gravida diam convallis. Cras velit purus, consectetur sed efficitur eu, accumsan suscipit justo. Aliquam iaculis dui a tortor sollicitudin fermentum. Aliquam consequat lobortis odio, non commodo lorem tristique id.

Morbi venenatis at nibh in accumsan. Aenean hendrerit metus nunc. Cras urna diam, dignissim id iaculis a, congue quis diam. Vestibulum accumsan arcu molestie metus maximus dictum. Etiam scelerisque in velit vel efficitur. Donec sodales ipsum at orci convallis, quis consectetur nulla fermentum. Aenean quis leo justo.

Etiam accumsan in augue id commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc id mi a quam condimentum elementum. In congue justo at quam interdum aliquam. Mauris id risus convallis, gravida neque ut, ultrices tellus. Etiam dignissim egestas lacus et maximus. Suspendisse fringilla, velit sed finibus gravida, ipsum sapien hendrerit tellus, sed dignissim mauris enim ut justo. Donec lacinia urna vel sapien ullamcorper porttitor. Maecenas iaculis ultrices nisi, vel scelerisque odio feugiat a. Pellentesque id vehicula enim. Praesent consequat justo eget nisi condimentum, at tincidunt enim facilisis. Nulla auctor turpis neque.

Nunc eu nisi urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean in est vitae lectus faucibus dapibus eget in tellus. In sollicitudin neque in augue bibendum, eu sollicitudin elit placerat. Duis pretium dapibus dolor. Mauris nec risus sed tellus condimentum vestibulum at facilisis neque. In augue ante, sollicitudin vitae rhoncus sed, vulputate non mauris. Maecenas a elit elit. Proin tempor aliquam augue, sagittis accumsan magna efficitur id. Sed mollis in massa lacinia luctus.

</p>
<h1>Don't Forget To Like 👍 and Follow 🤖<h1>
</body>

</html>

style.css
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
* {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; }
body {
background-color: #f4f4f4;
font-weight: normal;
font-style: normal;
margin: 0;
padding: 0;
border: 0; }
h3 {
font-family: 'Noto Sans', serif;
font-size: 2em;
color: #333;
}
p {
font-family: 'Noto Sans', sans-serif;
font-size: 1.3em;
line-height: 1.5em;
color: #666;
margin: 30px 0;
}
.image {
background: url('image.jpg') no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
}
.content {
max-width: 960px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
z-index: 2;
height: 100%;
}

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%;
}