Ở lần trước NguyenGia2017 đã chia sẻ các bạn bài viết về Side Label Landing. Lần này với một Side khác tương tự nhưng được thiết kế theo một phong cách khác, đơn giản hơn, đẹp hơn !
Các bước thực hiện
Rất đơn giản, chỉ cần chèn đoạn code sau vào nơi muốn hiển thị là xong !
Hi vọng với Side đơn giản này sẽ làm đẹp thêm Blog các bạn.
Các bước thực hiện
Rất đơn giản, chỉ cần chèn đoạn code sau vào nơi muốn hiển thị là xong !
<div class="boxamp" style="font-family: Roboto">
<div class="art-amp">
<div class="nav-amp">
<span>Power Full, Responsive Layout</span>
<p>For Blogger Template</p>
<ul class="infopay">
<li>
<a class="pay" href="/" target="_blank"><p>Learn more</p></a>
<span class="number">Information</span>
<span>Payment information template in blog</span></li>
</ul>
</div>
<div class="nav-amp1">
<div class="nav_grid">
<ul class="sc_vertical">
<li class="count-nav"><a href="#"><span class="icon"></span><span class="items"><span class="label">Business</span></span></a></li>
<li class="count-nav1"><a href="#"><span class="icon"></span><span class="items"><span class="label">Fashion</span></span></a></li>
<li class="count-nav2"><a href="#"><span class="icon"></span><span class="items"><span class="label">News</span></span></a></li>
<li class="count-nav3"><a href="#"><span class="icon"></span><span class="items"><span class="label">Health</span></span></a></li>
<li class="count-nav4"><a href="#"><span class="icon"></span><span class="items"><span class="label">Tech</span></span></a></li>
<li class="count-nav5"><a href="#"><span class="icon"></span><span class="items"><span class="label">Sport</span></span></a></li>
<li class="count-nav6"><a href="#"><span class="icon"></span><span class="items"><span class="label">Music</span></span></a></li>
<li class="count-nav7"><a href="#"><span class="icon"></span><span class="items"><span class="label">Word</span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<style>
.boxamp{background:#19616f;background-size:cover;background-position:center center;margin-bottom:30px;height:calc(100%);padding:50px 0}
.boxamp{padding:10px 0}
.art-amp,.headamp{margin:0 auto}
.art-amp,.out-amp{position:relative}
.art-amp{max-width:1100px;overflow:hidden}
@media screen and (max-width:1100px){
.art-amp{position:relative;max-width:98%;margin:0 auto}
}@media screen and (max-width: 800px){
.art-amp{position:relative;width:100%;margin:0 auto}
}
.nav-amp{float:left;width:380px;margin-top:10px}
.nav-amp span{font-size:34px;line-height:1em;color:#d2790b}
.nav-amp p{color:rgba(232,232,232,0.48)}
.nav-amp1{float:right;width:700px;position:relative}
ul.infopay{margin:0;padding:0;overflow:hidden}
ul.infopay li{width:100%;float:left;list-style:none;padding:20px;margin-bottom:10px;overflow:hidden;background:rgba(202,199,200,0.62)}
ul.infopay li a{display:inline-block;text-decoration:none;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;float:right;width:140px;color:#fff;text-align:center;position:relative;line-height:20px;font-size:14px;margin-right:30px}
ul.infopay li a p{color:rgba(255,255,255,0.92)}
ul.infopay li a:after{content:''position:absolute;top:45%;margin-top:-4px;right:100%;width:0;height:0}
ul.infopay li a.pay{background:#ea2525;color:#fff;font-size:18px;font-weight:300;text-transform:uppercase;text-align:center}
ul.infopay li a.pay:after{border:8px solid #ea2525;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}
ul.infopay li{border-top:0}
ul.infopay li span{display:block;margin:5px 0 0;color:#000;padding-right:30px;font-size:12px;font-weight:300;line-height:15px}
ul.infopay li span.number{color:#000;font-size:18px;font-weight:300;text-transform:uppercase}
.nav-amp1{float:right;width:700px;position:relative}
.nav_grid:after{clear:both;content:'';display:block}
.nav_grid ul{list-style:none;margin:0;padding:0;clear:both}
.nav_grid ul li{text-align:center}
.nav_grid ul li a{padding:20px;background:#0097b1}
.trendy-counters-per-row-2 ul li{width:50%;float:left}
.trendy-counters-per-row-3 ul li{width:33.333%;float:left}
.trendy-counters-per-row-4 ul li{width:25%;float:left}
.sc_vertical a,.sc_vertical span:not(.fa){display:block;padding-top:5px;color:#fff;text-align:center;text-transform:capitalize}
.sc_horizontal a{display:flex;text-align:center;align-items:center;justify-content:center}
.sc_horizontal span{margin-right:3px}
.show-labels-No .label{display:none}
.navgrid{padding:10px;background:#f6f6f6}
.navgrid div{background:#eaeaea;display:inline-block;margin-right:5px;padding:10px}
.navgrid div:hover{cursor:move}
mark.yes{padding:5px;background:#81d742;color:#fff}
.nav_grid ul li{text-align:center;width:23%;float:right;padding:5px}
.nav_grid .fa{color:#fff}
.nav_grid .count-nav .icon:before{content:"\f0b1";font-family:FontAwesome;font-size:40px}
.nav_grid .count-nav1 .icon:before{content:"\f07a";font-family:FontAwesome;font-size:40px}
.nav_grid .count-nav2 .icon:before{content:"\f083";font-family:FontAwesome;font-size:40px}
.nav_grid .count-nav3 .icon:before{content:"\f0f1";font-family:FontAwesome;font-size:40px}
.nav_grid .count-nav4 .icon:before{content:"\f17a";font-family:FontAwesome;font-size:40px}
.nav_grid .count-nav5 .icon:before{content:"\f091";font-family:FontAwesome;font-size:40px}
.nav_grid .count-nav6 .icon:before{content:"\f001";font-family:FontAwesome;font-size:40px}
.nav_grid .count-nav7 .icon:before{content:"\f0ac";font-family:FontAwesome;font-size:40px}
</style>
Hi vọng với Side đơn giản này sẽ làm đẹp thêm Blog các bạn.
Chúc các bạn thành công !
Bài viết sưu tầm từ nhiều nguồn trên mạng, hy vọng nó sang mang đến thông tin hữu ích cho bạn. Chúc các bạn vui vẽ ngày mới!
ConversionConversion EmoticonEmoticon