Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- .items{
- font-size:14px;
- list-style-type: none;
- margin:0px;
- padding:0px;
- display:flex;
- flex-direction: row;
- }
- .item{
- width:140px;
- text-align:center;
- /*height:365px;*/
- padding:15px 11px 45px 11px;
- }
- .item:nth-of-type(1){
- background:#a2d6d9;
- }
- .item:nth-of-type(2){
- background:#f48871;
- }
- .item:nth-of-type(3){
- background:#b9d694;
- }
- .item:nth-of-type(4){
- background:#fae17c;
- }
- .item:nth-of-type(5){
- background:#f6b56b;
- }
- .bg-darkblue{
- background:#51a7ac;
- }
- .bg-firebrick{
- background:#e8301d;
- }
- .bg-darkgreen{
- background:#89b453;
- }
- .bg-darkyellow{
- background:#f6c640;
- }
- .bg-darkorange{
- background:#f07f30
- }
- .item > span:nth-of-type(1){
- padding:5px;
- width:30px;
- display:inline-block;
- border-radius:20px;
- box-shadow:0px 1px 2px 0px rgb(0 0 0 / 80%);
- }
- .item > span > img{
- height:30px;
- }
- .item > h5{
- text-transform: uppercase;
- text-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.9);
- }
- .item:nth-of-type(1) > h5{
- color:#51a7ac;
- }
- .item:nth-of-type(2) > h5{
- color:#e8301d;
- }
- .item:nth-of-type(3) > h5{
- color:#89b453;
- }
- .item:nth-of-type(4) > h5{
- color:#f6c640;
- }
- .item:nth-of-type(5) > h5{
- color:#f07f30;
- }
- .item > span:nth-of-type(2){
- color:white;
- }
- </style>
- </head>
- <body>
- <ul class="items">
- <li class="item">
- <span class="bg-darkblue">
- <img src="https://static.thenounproject.com/png/89200-200.png" alt="">
- </span>
- <h5>
- HTML
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- <li class="item">
- <span class="bg-firebrick">
- <img src="https://static.thenounproject.com/png/3803708-200.png" alt="">
- </span>
- <h5>
- CSS
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- <li class="item">
- <span class="bg-darkgreen">
- <img src="https://static.thenounproject.com/png/3532081-200.png" alt="">
- </span>
- <h5>
- Snippets
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- <li class="item">
- <span class="bg-darkyellow">
- <img src="https://static.thenounproject.com/png/3805888-200.png" alt="">
- </span>
- <h5>
- Tags
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- <li class="item">
- <span class="bg-darkorange">
- <img src="https://static.thenounproject.com/png/1489354-200.png" alt="">
- </span>
- <h5>
- Hyperlinks
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- </ul>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement