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

JavaScript


Imasmi web loading