[text] css

Viewer

  1. $bg: darken(white, 10%);
  2. $shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  3.  
  4. *{
  5.         margin:0;
  6.         padding:10px;
  7.         box-sizing:border-box;
  8. }
  9.  
  10. img{
  11.         max-width:100%;
  12. }
  13.  
  14. body{
  15.         background-color:$bg;
  16.         display:flex;
  17.         height:100vh;
  18.         width:100vw;
  19.         font-family:'Montserrat';
  20. }
  21.  
  22. .container{
  23.         width:1200px;
  24.         max-width:100%;
  25.         margin:auto;
  26. }
  27.  
  28. .display{      
  29.         display:flex;
  30.         flex-wrap:wrap;
  31.         justify-content:space-around;
  32.         .display-item{         
  33.                 flex-grow:1;
  34.                 padding:15px;
  35.                 >span{
  36.                         display:block;
  37.                         text-align:center;
  38.                         padding:10px;
  39.                         font-size:2em;
  40.                 }
  41.         }
  42. }
  43.  
  44. .business-card, .flippable-business-card{
  45.         width:340px;
  46.         height:230px;
  47.         max-width:100%;
  48.         border-radius:4px;     
  49.         margin:0 auto;
  50. }
  51.  
  52. .business-card{
  53.         display:flex;
  54.         flex-direction:column; 
  55.         background: linear-gradient(135deg, #fff 0%,#fff 50%,rgba(0,200,200,.4) 50.5%,rgba(0,200,200, .6) 100%); 
  56.         color:rgba(0,0,0,.8);  
  57.         box-shadow:$shadow;
  58.         .profile{
  59.                 display:flex;
  60.                 flex-basis:150px;
  61.                 width:100%;
  62.                 border-bottom:1px solid rgba(0,0,0,.2);
  63.                 padding:15px;          
  64.                 .profile-title{
  65.                         padding-left:15px;
  66.                         display:flex;
  67.                         flex-direction:column;
  68.                         justify-content:space-around;
  69.                         h2{
  70.                                 font-size:1.4em;
  71.                         }
  72.                 }
  73.         }
  74.         .info{
  75.                 display:flex;
  76.                 flex-grow:1;
  77.                 .info-contact{
  78.                         padding:15px;
  79.                         display:flex;
  80.                         flex-shrink:1;
  81.                         flex-direction:column;
  82.                         justify-content:space-around;
  83.                         a{
  84.                                 color:rgba(0,0,0,.8);
  85.                         }
  86.                         i{
  87.                                 font-size:1.2em;
  88.                                 width:25px;
  89.                         }
  90.                 }
  91.  
  92.         }
  93. }
  94.  
  95. /* Style all font awesome icons */
  96. .fa {
  97.   padding: 10px;
  98.   font-size: 30px;
  99.   width: 10px;
  100.   text-align: center;
  101.   text-decoration: none;
  102.   border-radius: 20%;
  103. }
  104.  
  105. /* Add a hover effect if you want */
  106. .fa:hover {
  107.   opacity: 0.7;
  108. }
  109.  
  110. /* Set a specific color for each brand */
  111.  
  112. /* Facebook */
  113. .fa-facebook {
  114.   background: #3B5998;
  115.   color: white;
  116. }
  117.  

Editor

You can edit this paste and save as new:


File Description
  • css
  • Paste Code
  • 18 Oct-2022
  • 1.85 Kb
You can Share it: