Guest User

itfixit.com tutorial styling html sitemap in blogger

a guest
May 16th, 2021
52
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet"></link>
  2. <style type="text/css">
  3.     .post-archive {
  4.         width: 100%;
  5.         padding: 20px 0;
  6.         font-family: "Lato", sans-serif;
  7.     }
  8.    
  9.     .post-archive h4 {
  10.         border-bottom: 2px solid #E3E3E3;
  11.         color: #333333;
  12.         font-size: 20px;
  13.         margin: 0 0 10px 2px;
  14.         padding: 0 0 10px;
  15.         font-family: "Montserrat", sans-serif;
  16.         font-weight: 700;
  17.     }
  18.    
  19.     .ct-columns {
  20.         -moz-column-count: 2;
  21.         -moz-column-gap: 20px;
  22.         -moz-column-rule: none;
  23.         -webkit-column-count: 2;
  24.         -webkit-column-gap: 20px;
  25.         -webkit-column-rule: none;
  26.         column-count: 2;
  27.         column-gap: 20px;
  28.         column-rule: none;
  29.     }
  30.    
  31.     .ct-columns p {
  32.         padding: 5px 0px;
  33.         -moz-column-break-inside: avoid;
  34.         -webkit-column-break-inside: avoid;
  35.         -o-column-break-inside: avoid;
  36.         -ms-column-break-inside: avoid;
  37.         column-break-inside: avoid;
  38.         display: inline-block;
  39.         width: 100%;
  40.     }
  41.    
  42.     .ct-columns p a {
  43.         background: #25a186;
  44.         color: #fff;
  45.         display: block;
  46.         font-size: 14px;
  47.         line-height: normal;
  48.         border-radius: 5px;
  49.         padding: 10px 15px;
  50.         -webkit-transition: all .25s ease-in-out;
  51.         -moz-transition: all .25s ease-in-out;
  52.         -o-transition: all .25s ease-in-out;
  53.         transition: all .25s ease-in-out;
  54.     }
  55.    
  56.     .ct-columns p a:hover {
  57.         background: #61ceb6;
  58.         color: #fff;
  59.         text-decoration: none;
  60.     }
  61.    
  62.     .ct-columns p a span {
  63.         color: rgb(18, 32, 238);
  64.     }
  65.    
  66.     @media screen and (max-width: 768px) {
  67.         .ct-columns {
  68.             -moz-column-count: 2;
  69.             -moz-column-gap: 10px;
  70.             -moz-column-rule: none;
  71.             -webkit-column-count: 2;
  72.             -webkit-column-gap: 10px;
  73.             -webkit-column-rule: none;
  74.             column-count: 2;
  75.             column-gap: 10px;
  76.             column-rule: none;
  77.         }
  78.     }
  79.    
  80.     @media screen and (max-width: 550px) {
  81.         .ct-columns {
  82.             -moz-column-count: 1;
  83.             -moz-column-gap: 0px;
  84.             -moz-column-rule: none;
  85.             -webkit-column-count: 1;
  86.             -webkit-column-gap: 0px;
  87.             -webkit-column-rule: none;
  88.             column-count: 1;
  89.             column-gap: 0px;
  90.             column-rule: none;
  91.         }
  92.     }
  93. </style>
RAW Paste Data