Advertisement
Katsiree

highlight_css

May 1st, 2019
173
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.02 KB | None | 0 0
  1.         .main-title {
  2.             color: #2d2d2d;
  3.             text-transform: capitalize;
  4.         }
  5.  
  6.         .image {
  7.             overflow: hidden;
  8.             /* importante */
  9.             width: 300px;
  10.             height: 170px;
  11.             float: left;
  12.         }
  13.  
  14.         .image img {
  15.             transition: all 1s;
  16.             width: 100%;
  17.             height: 100%;
  18.         }
  19.  
  20.         .image:hover img {
  21.             transform: scale(1.5);
  22.         }
  23.  
  24.         .title_highlight {
  25.             z-index: 1;
  26.             top: 10px;
  27.             position: absolute;
  28.             padding: 5px;
  29.             border-top-right-radius: 5px;
  30.             border-bottom-right-radius: 5px;
  31.             left: 13px;
  32.             background: #1b7700;
  33.         }
  34.  
  35.         .title_highlight span {
  36.             color: #fff;
  37.         }
  38.  
  39.         /* date */
  40.  
  41.         .date-display {
  42.             font-size: 12px;
  43.             /* Adjust this to change size */
  44.             display: inline-block;
  45.             font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
  46.             font-weight: bold;
  47.             line-height: 1em;
  48.             width: 4.5em;
  49.             text-align: center;
  50.             margin-bottom: 1em;
  51.         }
  52.  
  53.         .date-display .date-display-cal {
  54.             box-shadow: 0 0.2em 0.3em 0 rgba(0, 0, 0, 0.5);
  55.             position: relative;
  56.         }
  57.  
  58.         .date-display .date-display-cal .date-display-month {
  59.             display: block;
  60.             padding: 0.4em 0 0.3em;
  61.             text-transform: uppercase;
  62.             color: white;
  63.             text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5);
  64.             background: linear-gradient(to bottom, #ff8389 0%, #ff3f46 100%);
  65.             box-shadow: inset 0em 0em 0.5em 0em rgba(0, 0, 0, 0.3);
  66.             border: 1px solid #B14545;
  67.             border-bottom: none;
  68.             position: relative;
  69.         }
  70.  
  71.         .date-display .date-display-cal .date-display-month:before,
  72.         .date-display .date-display-cal .date-display-month:after {
  73.             content: ' ';
  74.             display: block;
  75.             background: white;
  76.             width: 0.2em;
  77.             height: 0.4em;
  78.             margin-top: -0.3em;
  79.             position: absolute;
  80.             top: 0;
  81.             border: 1px solid rgba(0, 0, 0, 0.4);
  82.             box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.6);
  83.         }
  84.  
  85.         .date-display .date-display-cal .date-display-month:before {
  86.             left: 25%;
  87.         }
  88.  
  89.         .date-display .date-display-cal .date-display-month:after {
  90.             right: 25%;
  91.         }
  92.  
  93.         .date-display .date-display-cal .date-display-day {
  94.             font-size: 1.8em;
  95.             line-height: 1.2em;
  96.             padding: 0.2em 0em;
  97.             background: white;
  98.             border: 1px solid #BAACAC;
  99.             border-bottom-color: #555;
  100.             border-top: none;
  101.         }
  102.  
  103.         .date-display .date-display-year {
  104.             color: #444;
  105.             padding-top: 0.5em;
  106.             font-size: 1.4em;
  107.  
  108.         }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement