# HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<p>Test</p>
<!-- header -->
<div style="display:inline-block;width:100%;">
<div style="float:right;align:right;">
<div class="header_left_text">Tuesday, February 13, 2018, 2343 (<a href="https://en.wikipedia.org/wiki/Coordinated_Universal_Time" class="extiw" title="w:Coordinated Universal Time">UTC</a>)</div>
<div class="header_left_text"><a href="/wiki/Wikinews:Reusing_Wikinews_content" title="Wikinews:Reusing Wikinews content"><span title="Anyone can use articles from Wikinews. Just read and follow these simple rules">Copy us</span></a> • <a href="/wiki/Wikinews:Newsroom" title="Wikinews:Newsroom"><span title="The Wikinews Newsroom. See the latest stories written and being worked on; contribute to them, start your own article if the story you're interested in isn't covered. Wikinews always needs new contributors.">Newsroom</span></a> • <a href="/wiki/Wikinews:Mission_statement" title="Wikinews:Mission statement"><span title="Discover why Wikinews contributors work on the project. Read the Mission Statement and see why you should perhaps contribute">Mission statement</span></a> • <a href="/wiki/Wikinews:Breaking_news" title="Wikinews:Breaking news"><span title="Wikinews always needs new stories. This rather outdated guide might help you get started.">Report breaking news</span></a> • <span class="plainlinks"><a class="external text" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikinews.org&uselang=en"><span title="Suport Wikinews®. Donate to the Wikimedia Foundation. A 501(c) charity with a mission to provide free access to knowledge.">Donate</span></a></span></div>
<div class="header_left_text"><a href="/wiki/Wikinews:Audio_Wikinews" title="Wikinews:Audio Wikinews"><span title="Listen to the latest news with Audio Wikinews.">Audio Wikinews</span></a> • <a href="/wiki/Wikinews:Social_networking" title="Wikinews:Social networking"><span title="Wikinews is on Facebook! And Twitter. And, you can easily share any Wikinews story you like and think your friends might enjoy.">Social networking</span></a> • <a href="/wiki/Wikinews:Internet_Relay_Chat" title="Wikinews:Internet Relay Chat"><span title="Reach out and make contact. Find Wikinews regulars lurking in IRC and able to give you help and advice.">Chat</span></a> • <a href="/wiki/Wikinews:Featured_articles" title="Wikinews:Featured articles"><span title="Some articles are a source of pride to the Wikinews community. Review what is considered some of the project's best works. Can you do well enough to get an article listed here?">Best of Wikinews</span></a></div>
</div>
<div class="welcome_to_wn">Welcome to Wikinews</div>
<div class="freenews">The free news source <b><a href="/wiki/Wikinews:Wikinews_needs_you!" title="Wikinews:Wikinews needs you!">you can write!</a></b></div>
</div>
<div> <!-- countries and topics -->
<center><big><b><a href="/wiki/Africa" class="mw-redirect" title="Africa">Africa</a> • <a href="/wiki/Asia" class="mw-redirect" title="Asia">Asia</a> • <a href="/wiki/South_America" class="mw-redirect" title="South America">South</a> / <a href="/wiki/Central_America" class="mw-redirect" title="Central America">Central</a> / <a href="/wiki/North_America" class="mw-redirect" title="North America">North America</a> • <a href="/wiki/Europe" class="mw-redirect" title="Europe">Europe</a> • <a href="/wiki/Middle_East" class="mw-redirect" title="Middle East">Middle East</a> • <a href="/wiki/Oceania" class="mw-redirect" title="Oceania">Oceania</a> • <a href="/wiki/Antarctica" class="mw-redirect" title="Antarctica">Antarctica</a></b></big></center>
<hr>
<center><b><a href="/wiki/Crime_and_law" class="mw-redirect" title="Crime and law">Crime and law</a> • <a href="/wiki/Culture_and_entertainment" class="mw-redirect" title="Culture and entertainment">Culture and entertainment</a> • <a href="/wiki/Disasters_and_accidents" class="mw-redirect" title="Disasters and accidents">Disasters and accidents</a> • <a href="/wiki/Economy_and_business" class="mw-redirect" title="Economy and business">Economy and business</a> • <a href="/wiki/Education" class="mw-redirect" title="Education">Education</a> • <a href="/wiki/Environment" class="mw-redirect" title="Environment">Environment</a><br>
<a href="/wiki/Health" class="mw-redirect" title="Health">Health</a> • <a href="/wiki/Obituaries" class="mw-redirect" title="Obituaries">Obituaries</a> • <a href="/wiki/Politics_and_conflicts" class="mw-redirect" title="Politics and conflicts">Politics and conflicts</a> • <a href="/wiki/Science_and_technology" class="mw-redirect" title="Science and technology">Science and technology</a> • <a href="/wiki/Sports" class="mw-redirect" title="Sports">Sports</a> • <a href="/wiki/Wackynews" class="mw-redirect" title="Wackynews">Wackynews</a> • <a href="/wiki/Weather" class="mw-redirect" title="Weather">Weather</a></b></center>
</div>
<div class="container"> <!-- news topics here -->
<div class="item">
<div class="main-title" style="background-color:rgb(240,240,255); width:100%;height:80px; padding:0px;margin:0px;"><b>Dhaka court sentences former Bangladeshi Prime Minister Khaleda Zia to five years on corruption charges</b></div>
<div class="thumb tleft">
<div class="thumbinner" style="width:102px;"><a href="/wiki/File:Khaleda_Zia_former_Prime_Minister_of_Bangladesh_cropped.jpg" class="image"><img alt="Khaleda Zia former Prime Minister of Bangladesh cropped.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Khaleda_Zia_former_Prime_Minister_of_Bangladesh_cropped.jpg/100px-Khaleda_Zia_former_Prime_Minister_of_Bangladesh_cropped.jpg" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Khaleda_Zia_former_Prime_Minister_of_Bangladesh_cropped.jpg/150px-Khaleda_Zia_former_Prime_Minister_of_Bangladesh_cropped.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Khaleda_Zia_former_Prime_Minister_of_Bangladesh_cropped.jpg/200px-Khaleda_Zia_former_Prime_Minister_of_Bangladesh_cropped.jpg 2x" data-file-width="941" data-file-height="1255" width="100" height="133"></a>
<div class="thumbcaption">
<div class="magnify"><a href="/wiki/File:Khaleda_Zia_former_Prime_Minister_of_Bangladesh_cropped.jpg" class="internal" title="Enlarge"></a></div>
</div>
</div>
</div>
<small>Thu, Dhaka high court sentenced former Bangladeshi Prime Minister Khaleda Zia to a five year prison term for corruption. Her son Tarique Rahman, four others involved in the case were each sentenced to 10 years.</small></div>
<div class="item">
<div class="main-title" style="background-color:rgb(240,240,255); width:100%; height:80px;"><b>Former Irish footballer Liam Miller dies at 36</b></div>
<div class="thumb tleft">
<div class="thumbinner" style="width:102px;"><a href="/wiki/File:Liam_Miller.jpg" class="image"><img alt="Liam Miller.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/98/Liam_Miller.jpg/100px-Liam_Miller.jpg" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/98/Liam_Miller.jpg/150px-Liam_Miller.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/98/Liam_Miller.jpg/200px-Liam_Miller.jpg 2x" data-file-width="2814" data-file-height="2412" width="100" height="86"></a>
<div class="thumbcaption">
<div class="magnify"><a href="/wiki/File:Liam_Miller.jpg" class="internal" title="Enlarge"></a></div>
</div>
</div>
</div>
<small>Fri, former Irish footballer Liam Miller died aged 36, his first professional club Celtic FC said. According to reports in November, Miller was suffering from pancreatic cancer.</small></div>
<div class="item">
<div class="main-title" style="background-color:rgb(240,240,255); width:100%; height:80px;"><b>Russia: ex-governor of Sakhalin region Alexander Khoroshavin sentenced to thirteen years for bribery</b></div>
<div class="thumb tleft">
<div class="thumbinner" style="width:102px;"><a href="/wiki/File:Alexander_Khoroshavin,_October_2011.jpeg" class="image"><img alt="Alexander Khoroshavin, October 2011.jpeg" src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Alexander_Khoroshavin%2C_October_2011.jpeg/100px-Alexander_Khoroshavin%2C_October_2011.jpeg" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Alexander_Khoroshavin%2C_October_2011.jpeg/150px-Alexander_Khoroshavin%2C_October_2011.jpeg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Alexander_Khoroshavin%2C_October_2011.jpeg/200px-Alexander_Khoroshavin%2C_October_2011.jpeg 2x" data-file-width="3652" data-file-height="2692" width="100" height="74"></a>
<div class="thumbcaption">
<div class="magnify"><a href="/wiki/File:Alexander_Khoroshavin,_October_2011.jpeg" class="internal" title="Enlarge"></a></div>
</div>
</div>
</div>
<small>On Friday, a court in the Sakhalin region of Russia sentenced former governor Alexander Khoroshavin to thirteen years prison term and a fine of ₽500 million (US$8.6 million) on corruption charges.</small></div>
<div class="item">
<div class="main-title" style="background-color:rgb(240,240,255); width:100%; height:80px;"><b>Lorem Ipsum</b></div>
<div class="thumb tleft">
<div class="thumbinner" style="width:102px;"><a href="/wiki/File:Liam_Miller.jpg" class="image"><img alt="Liam Miller.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/98/Liam_Miller.jpg/100px-Liam_Miller.jpg" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/98/Liam_Miller.jpg/150px-Liam_Miller.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/98/Liam_Miller.jpg/200px-Liam_Miller.jpg 2x" data-file-width="2814" data-file-height="2412" width="100" height="86"></a>
<div class="thumbcaption">
<div class="magnify"><a href="/wiki/File:Liam_Miller.jpg" class="internal" title="Enlarge"></a></div>
</div>
</div>
</div>
<small>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</small></div>
<div class="item">
<div class="main-title" style="background-color:rgb(240,240,255); width:100%; height:80px;"><b>Former Irish footballer Liam Miller dies at 36</b></div>
<div class="thumb tleft">
<div class="thumbinner" style="width:102px;"><a href="/wiki/File:Liam_Miller.jpg" class="image"><img alt="Liam Miller.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/98/Liam_Miller.jpg/100px-Liam_Miller.jpg" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/98/Liam_Miller.jpg/150px-Liam_Miller.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/98/Liam_Miller.jpg/200px-Liam_Miller.jpg 2x" data-file-width="2814" data-file-height="2412" width="100" height="86"></a>
<div class="thumbcaption">
<div class="magnify"><a href="/wiki/File:Liam_Miller.jpg" class="internal" title="Enlarge"></a></div>
</div>
</div>
</div>
<small>Fri, former Irish footballer Liam Miller died aged 36, his first professional club Celtic FC said. According to reports in November, Miller was suffering from pancreatic cancer.</small></div>
<div class="item">
<div class="main-title"><b>Write an article!</b></div>
<div class="thumb tleft">
<div class="thumbinner" style="width:102px;"><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Write.svg/113px-Write.svg.png" class="image"><img alt="Liam Miller.jpg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Add_document_icon_%28the_Noun_Project_27896%29_blue.svg/150px-Add_document_icon_%28the_Noun_Project_27896%29_blue.svg.png" class="thumbimage" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Write.svg/113px-Write.svg.png" data-file-width="2814" data-file-height="2412" width="100" height="86"></a>
<div class="thumbcaption">
<div class="magnify"><a href="/wiki/File:Liam_Miller.jpg" class="internal" title="Enlarge"></a></div>
</div>
</div>
</div>
<small><a href="">Wikinews needs you</a>! We want to create a diverse community around the globe who collaborate to report on a wide variety of current news events. Please read the <a href="">guide</a> or <a href="">how-to</a> before starting.</small>
<div class="mw-inputbox-centered" style="">
<form name="createbox" class="createbox" action="/w/index.php" method="get" id="createbox">
<p><input value="edit" name="action" type="hidden"><input value="Template:New_page" name="preload" type="hidden"><input value="Template:New_article_intro" name="editintro" type="hidden"><input name="title" class="mw-inputbox-input mw-ui-input mw-ui-input-inline createboxInput" value="" placeholder="" size="30" dir="ltr" type="text"><br>
<input name="create" class="mw-ui-button mw-ui-progressive createboxButton" value="Create page" disabled="" type="submit"></p>
</form>
<i>Never edited a wiki before? See our <a href="/wiki/Help:Editing" title="Help:Editing">editing help page</a>.</i>
</div>
</div>
</body>
</html>
# CSS
body{font-family:Arial;
}
div.container{
display: flex;
flex-direction: columns;
flex-wrap: wrap;
justify-content: space-evenly;
border:1px solid green;
}
div.item{
display:inline-block;
max-width:300px;
vertical-align:bottom;
opacity:0.8;
padding:5px !important;
}
div.item:hover{
opacity:1;
cursor:pointer;
}
div.item{
flex: 1 1 auto;display:inline-block; border:1px solid grey; min-width:200px;vertical-align:bottom; padding:0px;margin:5px;transparency:50%;
border:1px solid blue !important;
}
div.main-title{
background-color:rgb(240,240,255); width:100%; height:80px;
}
.tleft{float:left;}
div.item-top{
width:100%;
}
