HTML Card List

Written by @kerixa 9 March 2021

Most sites use lists to display the latest contents or product categories. Now, the more beautiful these lists are, the more attractive your site will be and the higher it will be ranked in the search engines. In the code below, we have a blue list card with a text, title, and the card number next to it.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
@import url(https://fonts.googleapis.com/css?family=Cursive New:400,700);
 h1 {
     color: #ccf;
     text-shadow: 0 0 1px #00f,2px 1px 0 #00f, 5px 5px 4px #77f;
     text-align: center;
}
 ol, li, p, h4 {
     margin: 0;
}
 body {
     background: #ccf;
     max-width: 80%;
     width: 500px;
     margin: 40px auto;
     font: normal 16px/24px "Cursive New", serif;
}
 h3 {
     font-size: 1.65rem;
     margin: 15px 0;
     text-align: center;
}
 ol {
     counter-reset: section;
}
 li {
     list-style-type: none;
     position: relative;
     font-size: 1.5rem;
     padding: 15px;
     margin-bottom: 15px;
     background: #aaf;
     color: #fff;
     outline: 3px solid #fff;
     outline-offset: -3px;
     box-shadow: 0 0 7px, 4px 4px 3px #77f;
     text-shadow: 0 0 1px #00f,2px 1px 0 #00f, 5px 5px 4px #77f;
}
 h4 {
     position: relative;
     padding-bottom: 10px;
}
 h3:after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 25px;
     height: 2px;
     background: white;
}
 p {
     font-size: .9rem;
     line-height: 1.4rem;
     margin-top: 15px;
     text-shadow: none;
     text-align: center;
}
 li::before {
     counter-increment: section;
     content: counter(section);
     text-align: center;
     display: inline-block;
     background-color: #bbf;
     color: #bbf;
     border-radius: 50%;
     position: absolute;
     left: -65px;
     top: 50%;
     transform: translateY(-50%);
     padding: 12px;
     font-size: 2rem;
     width: 25px;
     height: 25px;
     border: 3px solid #bbf;
     text-shadow: 0 0 2px #fff, 2px 1px 0 #fff;
     box-shadow: 3px 1px 2px #fff, inset 3px 1px 2px #fff, -1px -1px 1px #fff, inset -1px -1px 1px #fff 
}

</style>
<h1>CARD LIST</h1>
<ol>
    <li>
    <h3>List #Item 1</h3>
    <p>htmlfreecode.</p>
    </li>
    <li>
    <h3>List #Item 2</h3>
    <p> htmlfreecode</p>
    </li>
</ol><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: carfaoui, Ali7hry, alexnicola, Adam20, Prashanthcs11
advertisement 2