WEB by ImaSmi

HTML


<section id="shooting" class="clear black-bg">
    <div class="shooting-content column-7 padding-100">
        <h1>SHOOTING RANGE</h1>
        <div class="shooting-text color-3">Are you ready to hit a few dozen? The shooting range offers you different weapons to improve your shooting skills</div>
        <div class="separator color-3-bg"></div>
        <ul>
            <li>
                <i class="fas fa-bullseye color-2"></i>
                <h2>EXCELLENT CONDITIONS</h2>
                <div class="shooting-text color-3">We offer you a wide selection of weapons and ammunition to choose from.</div>
            </li>
            <li>
                <i class="fas fa-handshake color-2"></i>
                <h2>TRUSTED PARTNER</h2>
                <div class="shooting-text color-3">We have passed all certificates and strictly follow safety measures to ensure the peace of mind of our customers.</div>
            </li>
        </ul>
    </div>
    <div class="column-5"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/logan-weaver-nXYGViDhUd4-unsplash.jpg"/></div>
</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/@lgnwvr?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">LOGAN WEAVER</a> on <a href="https://unsplash.com/s/photos/shooting-range?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
</div>

CSS


body{font-family: helvetica, sans-serif;}
.color-1{color: #ffffff;}
.color-3-bg{background-color: #777777;}
.color-2{color: #921016;}
.color-3{color: #777777;}
#shooting{background-color: #000000; color: #ffffff;}
#shooting h1{font-size: 1.8em;}
.shooting-text{letter-spacing: 1px; font-size: 0.9em; line-height: 1.5em; width: 60%;}
.separator{height: 1px; margin: 30px 0;}
#shooting ul{list-style-type: none; padding-left: 60px;}
#shooting ul li{position: relative;}
#shooting ul i{position: absolute; top: 0; left: -60px; font-size: 28px;}
#credit a{color: #921016; text-decoration: none;}
@media (max-width: 1080px){
    .shooting-content{padding: 30px;}
    .shooting-text{width: 100%;}
}

JavaScript


Imasmi web loading