HTML
<section id="home" class="relative padding-20 border-box">
<div class="background"><img id="home-background" class="image" src="https://web.imasmi.com/plugin/WebCss/file/jose-vazquez-db0yt-Qgifw-unsplash.jpg"/></div>
<div class="clear">
<div class="column-6 padding-80">
<div class="column-8">
<h1>PRIVATE ISLAND HOLIDAYS</h1>
<div class="separator color-1-bg"></div>
<div>Enjoy your seaside vacation at island resort</div>
<button class="button">BOOK NOW</button>
</div>
</div>
<div class="column-6">
<div class="column-10 right">
<div id="news">
<div class="news-item">
<img class="image" src="https://web.imasmi.com/plugin/WebCss/file/sandra-seitamaa-akwA-GPF710-unsplash.jpg">
<div class="news-content">
<h3>Bars</h3>
<div>Enjoy our specially mixed cocktails while enjoying the tropical breeze</div>
<a class="color-1">View more</a>
</div>
</div>
<div class="news-item">
<img class="image" src="https://web.imasmi.com/plugin/WebCss/file/casey-lee-awj7sRviVXo-unsplash.jpg">
<div class="news-content">
<h3>Restaurants</h3>
<div>Freshly prepared seafood and selected wines await you at sunset</div>
<a class="color-1">View more</a>
</div>
</div>
<div class="news-item">
<img class="image" src="https://web.imasmi.com/plugin/WebCss/file/sandra-seitamaa-akwA-GPF710-unsplash.jpg">
<div class="news-content">
<h3>Bars</h3>
<div>Enjoy our specially mixed cocktails while enjoying the tropical breeze</div>
<a class="color-1">View more</a>
</div>
</div>
<div class="news-item">
<img class="image" src="https://web.imasmi.com/plugin/WebCss/file/casey-lee-awj7sRviVXo-unsplash.jpg">
<div class="news-content">
<h3>Restaurants</h3>
<div>Freshly prepared seafood and selected wines await you at sunset</div>
<a class="color-1">View more</a>
</div>
</div>
<div class="news-item">
<img class="image" src="https://web.imasmi.com/plugin/WebCss/file/sandra-seitamaa-akwA-GPF710-unsplash.jpg">
<div class="news-content">
<h3>Bars</h3>
<div>Enjoy our specially mixed cocktails while enjoying the tropical breeze</div>
<a class="color-1">View more</a>
</div>
</div>
<div class="news-item">
<img class="image" src="https://web.imasmi.com/plugin/WebCss/file/casey-lee-awj7sRviVXo-unsplash.jpg">
<div class="news-content">
<h3>Restaurants</h3>
<div>Freshly prepared seafood and selected wines await you at sunset</div>
<a class="color-1">View more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="credit" class="text-center relative white">
<div>Created with <a href="https://web.imasmi.com/webcss" target="blank">WebCss</a></div>
<div>Photo by <a href="https://unsplash.com/@jess33mx?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jose Vazquez</a> on <a href="https://unsplash.com/s/photos/beach-bar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
<div>Photo by <a href="https://unsplash.com/@seitamaaphotography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sandra Seitamaa</a> on <a href="https://unsplash.com/s/photos/drink?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
<div>Photo by <a href="https://unsplash.com/@simplethemes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Casey Lee</a> on <a href="https://unsplash.com/s/photos/restaurant?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
</div>
</section>
CSS
.color-1{color: #00ffcf;}
.color-1-bg{background-color: #00ffcf;}
#home{color: #ffffff; font-family: sans-serif, helvetica;}
#home-background{filter: brightness(0.5);}
.separator{width: 60px; height: 2px; margin: 20px 0;}
.button{background: none; outline: none; border: 2px solid #00ffcf; padding: 13px 25px; letter-spacing: 1px; font-size: 0.8em; display: block; margin: 20px 0; cursor: pointer; transition: 0.5s;}
.button:hover, .button:active{background-color: #00ffcf; color: #ffffff;}
#news{overflow-x: auto; white-space: nowrap; font-size: 0; margin-top: 50px; padding-bottom: 10px;}
.news-item{width: 30%; display: inline-block; font-size: initial; white-space: normal; vertical-align: top; margin: 0 1.5%;}
.news-item .image{height: 100px;}
.news-content{padding: 15px; box-sizing: border-box; background-color: #ffffff; color: #555555; font-size: 0.8em;}
.news-content h3{margin: 10px 0;}
.news-content a{margin-top: 10px; font-weight: bold; display: block;}
#news {scrollbar-width: thin;scrollbar-color: #00ffcf #555555;}
#news::-webkit-scrollbar {height: 6px;}
#news::-webkit-scrollbar-track {background: #555555;}
#news::-webkit-scrollbar-thumb {background-color: #00ffcf; border-radius: 20px;}
#credit a{color: #00ffcf; text-decoration: none;}
@media(max-width: 1080px){.news-item{width: 47%;}}