Pure code adds four column recommendation module on the home page for DUX theme Second beautification version

The previous blogger wrote an article Pure code adds four columns of the home page to the DUX theme to recommend the repair version of the module Because some of my friends said whether there were some good looking styles, the blogger looked for them here, and the style code was captured from Enpi.com! The code is very simple. The options.php and index.php files can be directly used from the previous article. Just modify the html code and css code! Here is a modified effect picture of the blogger. If you think it's OK, let's do something about it!

1. html code

Copy the following code to the code box of "Customize the four columns on the home page" in the background DUX theme setting options (this option is available in the background only after the options.php code in the previous article has been added)!

 <!-- Four columns on the first page --> <div class="home-firstitems"> <div class="containerphl"> <ul> <li> <a href=" https://www.wenzika.com " target="_blank" rel="nofollow"> <i class="fa fa-bell" aria-hidden="true"></i> <strong>Viewpoints</strong> <p>I don't agree with you, but I defend your right to speak</p> <span class="btn btn primary">Views</span> </a> </li> <li> <a href=" https://www.wenzika.com " target="_blank" rel="nofollow"> <i class="fa fa-picture-o" aria-hidden="true"></i> <strong>Micro discussion</strong> <p>The purpose of discussion is to exchange ideas, not to measure the advantages and disadvantages of different views</p> <span class="btn btn primary">Micro discussion</span> </a> </li> <li> <a href=" https://www.wenzika.com " target="_blank" rel="nofollow"> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <strong>Write poems for you</strong> <p>Some beauty is rooted in the heart, some poetry becomes a part of life</p> <span class="btn btn primary">Write poems for you</span> </a> </li> <li> <a href=" https://www.wenzika.com " target="_blank" rel="nofollow"> <i class="fa fa-tree" aria-hidden="true"></i> <strong>Mixed workplace for young people</strong> <p>In the workplace or love field, your core competitiveness is always your own value</p> <span class="btn btn primary">Direct link</span> </a> </li> </ul> </div> </div>

2. Add css code

Replace the css code of the previous article with the following css code:

 /*Four columns on the first page*/ .home-firstitems{margin-top:3px; border:1px solid #eaeaea;padding:10px 0px 10px 0px;overflow:hidden;background-color:#fff;margin-bottom:15px;border-radius:4px;} .home-firstitems ul{text-align:center; border-right:1px solid #eee;overflow:hidden} .home-firstitems ul li{float:left; width:25%;border-left:1px solid #eee;padding:20px 20px;height:135px;overflow:hidden} .home-firstitems ul li a{display:block; position:relative;top:0;-webkit-transition:top .28s ease-in-out;transition:top .28s ease-in-out} .home-firstitems ul li a .fa{font-size:3rem; font-weight:200;margin-bottom:10px;color:#55595c;opacity:1;-webkit-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out} .home-firstitems ul li a strong{display:block;color:#55595c} .home-firstitems ul li a p{color:#999;margin:5px 0 20px} .home-firstitems ul li a:hover{top:-60px} .home-firstitems ul li a:hover .fa{opacity:0} @media (max-width: 991px){.home-firstitems{display:none}}

End of the tutorial! My friends can refresh and see the effect. It's really beautiful!