logo

Section articles avec dates

AccueilBulmaIntégration BulmaBoxSection articles avec dates

Html

<section class="column news-section">
    <div class="auto-container">
        <div class="sec-title">
            <h2>News & Artical</h2>
            <div class="text">You read now our latest news and artical</div>
        </div>

        <div class="row-cards">
            <div class="column is-4 news-block">
                <div class="inner-box">
                    <div class="image-box">
                        <a href="blog-detail.html"><figure class="image"><img src="http://ary-themes.com/html/bold_touch/wooder/images/resource/news-1.jpg" alt=""></figure></a>
                    </div>
                    <div class="lower-content">
                        <div class="post-date"><span class="far fa-calendar"></span> Jan 01, 2020</div>
                        <ul class="post-info">
                            <li><span class="far fa-user"></span> By Admin | </li>
                            <li><a href="#">General Carpentry</a></li>
                        </ul>
                        <h4><a href="blog-detail.html">Woodworker treak truned into furniture for exhibition.</a></h4>
                        <div class="btn-box"><a href="#" class="read-more">Read More <span class="fa fa-arrow-right"></span></a></div>
                    </div>
                </div>
            </div>

            <div class="column is-4 news-block">
                <div class="inner-box">
                    <div class="image-box">
                        <figure class="image"><a href="blog-detail.html"><img src="http://ary-themes.com/html/bold_touch/wooder/images/resource/news-1.jpg" alt=""></a></figure>
                    </div>
                    <div class="lower-content">
                        <div class="post-date"><span class="far fa-calendar"></span> Jan 02, 2020</div>
                        <ul class="post-info">
                            <li><span class="far fa-user"></span> By Admin | </li>
                            <li><a href="#">General Carpentry</a></li>
                        </ul>
                        <h4><a href="blog-detail.html">Home Repair and Maintain safe now in the rantain.</a></h4>
                        <div class="btn-box"><a href="#" class="read-more">Read More <span class="fa fa-arrow-right"></span></a></div>
                    </div>
                </div>
            </div>

            <div class="column is-4 news-block">
                <div class="inner-box">
                    <div class="image-box">
                        <figure class="image"><a href="blog-detail.html"><img src="http://ary-themes.com/html/bold_touch/wooder/images/resource/news-1.jpg" alt=""></a></figure>
                    </div>
                    <div class="lower-content">
                        <div class="post-date"><span class="far fa-calendar"></span> Jan 03, 2020</div>
                        <ul class="post-info">
                            <li><span class="far fa-user"></span> By Admin | </li>
                            <li><a href="#">General Carpentry</a></li>
                        </ul>
                        <h4><a href="blog-detail.html">Good furniture is now on persale in showroom in Dec.</a></h4>
                        <div class="btn-box"><a href="#" class="read-more">Read More <span class="fa fa-arrow-right"></span></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Css

.news-section{
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 120px 0 90px;
}

.news-block{
    position: relative;
    margin-bottom: 30px;
}

.news-block .inner-box{
    position: relative;
    background-color: #ffffff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.14);
}

.news-block .image-box{
    position: relative;
}

.news-block .image{
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.news-block .image-box .image a:after{
    content: "";
    position: absolute;
    top: -110%;
    left: -210%;
    width: 200%;
    height: 200%;
    opacity: 0;
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.13) 77%,
            rgba(255, 255, 255, 0.5) 92%,
            rgba(255, 255, 255, 0.0) 100%
    );
}

.news-block .inner-box:hover .image-box .image a:after {
    opacity: 1;
    top: -20%;
    left: -30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: linear;
}

.news-block .image img{
    display: block;
    width: 100%;
}

.news-block .lower-content{
    position: relative;
    padding: 35px 30px 20px;
}

.news-block .post-date{
    position: absolute;
    left: 0;
    top: -15px;
    background-color: #ab7442;
    box-shadow: 0 0 20px rgba(0,0,0,0.10);
    padding: 5px 15px 5px 30px;
    border-radius: 0 30px 30px 0;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.news-block .post-info{
    position: relative;
    margin-bottom: 15px;
}

.news-block .post-info li{
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 24px;
    color: #353535;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

.news-block .post-info li a{
    color: #353535;
    display: inline-block;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.news-block .post-info li a:hover{
    color: #ab7442;
}

.news-block .post-info li span{
    margin-right: 5px;
    color: #ab7442;
}

.news-block h4{
    position: relative;
    display: block;
    font-size: 20px;
    line-height: 1.4em;
    color: #353535;
    font-weight: 500;
    margin-bottom: 15px;
}

.news-block h4 a{
    color: #353535;
    display: inline-block;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.news-block h4 a:hover{
    color: #ab7442;
}

.news-block .btn-box{
    position: relative;
}

.news-block .btn-box a{
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #353535;
}

.news-block .btn-box a span{
    opacity: 0;
    visibility: hidden;
    font-size: 12px;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.news-block .btn-box a:hover{
    color: #353535;
}

.news-block .inner-box:hover .btn-box a span{
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    visibility: visible;
    opacity:1;
}

.row-cards {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.sec-title h2 {
    position: relative;
    display: inline-block;
    font-size: 72px;
    color: #353535;
    line-height: 1em;
    font-weight: 600;
    cursor: default;
    -webkit-text-stroke: 1px #353535;
}

@media screen and (max-width: 768px) {
    .row-cards {
        display: block;
    }
}

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *