Tạo Ra Page Giới Thiệu Thành Viên Chuyên Nghiệp Trên Blogspot

Tiếp tục mình sẽ chia sẻ tới các bạn cách Tạo Ra Page Giới Thiệu Thành Viên Chuyên Nghiệp Trên Blogspot chỉ bằng CSS một chút JAV. Khá hấp dẫn phải không ??

CODE & CSS

Dưới đây là đoạn CSS CSS: Thêm đoạn này dưới thẻ ]]></b:skin>

body {
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi28r3nNhBaHMRaPBCCtkMlkaGe93-T0ieN-CtVbuvZVYOVVfWk_A5PXVsMOq-C-DvvQwcMi3qcyFTKGva7t-oCSXhy7dX6zzw3DWOIIIDtezH1HGSapCSWEvbWGH89FYOTnO-19NdMGXQZ/s640/heroBg.jpg);
     background-size: cover;
}
.slider {
     width: 100%;
     position: absolute;
     top: 54%;
     trasform: translateY(-50%);
}
.slick-slide:focus {
     outline: none;
}
.slick-slide img {
     width: 52%;
}
.slick-slide {
     transition: all ease-in-out 1s;
     opacity: .2;
}
.slick-active {
     opacity: .2;
}
.slick-current {
     opacity: 1;
}
h3 {
     font-family: Poppins;
     color: #f12929;
     text-transform: uppercase;
     margin-bottom: 0;
}
p {
     margin-top: 4px;

     font-family: Poppins;

     color: grey;

     text-transform: uppercase;
}
.logo {
     position: absolute;
     margin: 2em;
     float: left;
}
.menu-btn {
     position: relative;
     float: right;
     margin: 2em;
}

.bottom {
     position: absolute;
     bottom: 1em;
     left: 2em;
}

.bottom p {
     color: #fff;
     font-weight: 400;
     background: #f12929;
}

Còn đây là CODE

<div class="navbar">

<div class="logo">

<img src="frame.png" alt="">

</div>

<div class="menu-btn">

<img src="menu.png" alt="">

</div>

</div>

<div class="bottom">

<p>OUR TEAM</p>

</div>

<section class="center slider">

<div>

<img src="#" alt="">

<h3>DESBLOG</h3>

<p>Nội Dung</p>

</div>

<div>

<img src="#" alt=""/>

<h3>DESBLOG</h3>

<p>Nội Dung</p>

</div>

<div>

<img src="#" alt=""/>

<h3>DESBLOG</h3>

<p>Nội Dung</p>

</div>

<div>

<img src="#" alt=""/>

<h3>DESBLOG</h3>

<p>Executive Manager</p>

</div>

<div>

<img src="one.jpg" alt=""/>

<h3>DESBLOG</h3>

<p>Nội Dung</p>

</div>

<div>

<img src="#" alt=""/>

<h3>DESBLOG</h3>

<p>Nội Dung</p>

</div>

</section>

     <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

     <script src="./slick/slick.min.js" type="text/javascript" charset="utf-8"></script>

     <script type="text/javascript">

     $(document).on('ready', function() {

     $(".center").slick({

     dots: false,

     infinite: false,

     centerMode: true,

     slidesToShow: 2,

     slidesToScroll: 1,

     arrows: false,

     responsive: [{

     breakpoint: 1024,

     settings: {

          slidesToShow: 2,

          infinite: true

     }

}, {

     breakpoint: 600,

     settings: {

          slidesToShow: 1,

          dots: true

     }

}, {

     breakpoint: 300,

     settings: "unslick" //destroy slick

}]

});

});

     </script>

Nhớ thêm vào trước thẻ đóng </head>

<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="master.css">