<section id="cocktail" class="clear">
    <div id="cocktail-image" class="column-6"><img class="image fullscreen" src="https://web.imasmi.com/plugin/WebCss/file/sandra-seitamaa-akwA-GPF710-unsplash.jpg"></div>
    <div id="cocktail-content" class="column-6 padding-80 text-center">
        <div class="background color-2-bg">
            <svg id="backgroun-svg" class="absolute desktop" viewBox="0 0 61.232143 163.28572">
                <g transform="translate(-25.702381,-77.017855)">
                    <path d="M 45.702381,77.017855 86.934523,240.30357 V 77.017855 Z"/>
                </g>
            </svg>
        </div>
        <div class="relative">
            <h1 class="color-1">HAPPY H<i class="far fa-clock"></i>UR</h1>
            <div class="cocktail-text color-3">Just a few sips of our cocktail of the day will be enough to make your day better</div>
            <button class="button color-1">VIEW</button>
            <i id="cocktail-icon" class="fas fa-cocktail color-3"></i>
        </div>
    </div>
    <i id="coctail-over-icon" class="fas fa-glass-cheers absolute color-1"></i>
</section>

<div id="credit" class="text-center">
    <div>Created with <a href="https://web.imasmi.com/webcss" target="blank">WebCss</a></div>
    <div>Created with <a href="https://fontawesome.com/" target="blank">Font Awesome</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>

body{font-family: helvetica, sans-serif;}
.color-1{color: #ffffff;}
.color-2-bg{background-color: #921016;}
.color-3{color: #e2a773;}
.button{background: none; outline: none; border: 2px solid; padding: 7px 25px; letter-spacing: 1px; font-size: 0.8em; display: table; margin: 40px auto; cursor: pointer; transition: 0.5s;}
.button:hover, .button:active{background-color: #000000; color: #ffffff;}
#coctail #cocktail-image, #cocktail #cocktail-content{height: 100%;}
#backgroun-svg{ left: 0; height: 100%; width: auto; transform: translateX(-100%); margin-left: 1px;}
#backgroun-svg path{fill: #921016;}
#cocktail .image{height: 80%; margin-top: 10%;}
#cocktail-content h1{font-size: 2em;}
.cocktail-text{letter-spacing: 2px; line-height: 1.6em;}
#cocktail-icon{font-size: 3.5em;}
#coctail-over-icon{top: 50%; left: 50%; font-size: 8em; transform: translate(-80%, -50%);}
#credit a{color: #921016; text-decoration: none;}
@media (max-width: 1080px){
    #cocktail .image{height: 400px; margin-top: 0;}
    #coctail-over-icon{display: none;}
}