blueprints/common/eliot-ui/frontend-src/src/app/home/home.component.scss

   1
   2
   3 .main {
   4     display: block;
   5     width: 100%;
   6     overflow:hidden;
   7
   8     .carousel{
   9         display:block;
  10         color: black;
  11         img {
  12           width: 100%
  13         }
  14     }
  15 }
  16
  17 h3,h1,h5,h2 {
  18     color: black;
  19 }
  20
  21
  22
  23
  24 /**
  25 * Template Name: Flexor - v2.0.0
  26 * Template URL: https://bootstrapmade.com/flexor-free-multipurpose-bootstrap-template/
  27 * Author: BootstrapMade.com
  28 * License: https://bootstrapmade.com/license/
  29 */
  30
  31 /*--------------------------------------------------------------
  32 # General
  33 --------------------------------------------------------------*/
  34 body {
  35     font-family: "Open Sans", sans-serif;
  36     color: #313030;
  37   }
  38
  39   a {
  40     color: #ff5821;
  41   }
  42
  43   a:hover {
  44     color: #ff7e54;
  45     text-decoration: none;
  46   }
  47
  48   h1, h2, h3, h4, h5, h6 {
  49     font-family: "Raleway", sans-serif;
  50   }
  51
  52
  53   /*--------------------------------------------------------------
  54   # Sections General
  55   --------------------------------------------------------------*/
  56   section {
  57     padding: 60px 0;
  58     overflow: hidden;
  59   }
  60
  61   .section-bg {
  62     background-color: #fff9f7;
  63   }
  64
  65   .section-title {
  66     text-align: center;
  67     padding-bottom: 30px;
  68   }
  69
  70   .section-title h2 {
  71     font-size: 32px;
  72     font-weight: 500;
  73     margin-bottom: 20px;
  74     padding-bottom: 0;
  75     font-family: "Poppins", sans-serif;
  76     color: #635551;
  77   }
  78
  79   .section-title p {
  80     margin-bottom: 0;
  81   }
  82
  83
  84
  85   /*--------------------------------------------------------------
  86   # About
  87   --------------------------------------------------------------*/
  88   .about .icon-boxes h4 {
  89     font-size: 18px;
  90     color: #7f6d68;
  91     margin-bottom: 15px;
  92   }
  93
  94   .about .icon-boxes h3 {
  95     font-size: 28px;
  96     font-weight: 700;
  97     color: #554945;
  98     margin-bottom: 15px;
  99   }
 100
 101   .about .icon-box {
 102     margin-top: 40px;
 103   }
 104
 105   .about .icon-box .icon {
 106     float: left;
 107     display: flex;
 108     align-items: center;
 109     justify-content: center;
 110     width: 64px;
 111     height: 64px;
 112     border: 2px solid #ffcbba;
 113     border-radius: 50px;
 114     transition: 0.5s;
 115     background: #fff;
 116   }
 117
 118   .about .icon-box .icon i {
 119     color: #696969;
 120     font-size: 32px;
 121   }
 122
 123   .about .icon-box:hover .icon {
 124     background: #0ab8e4;
 125     border-color: #f5f5f5;
 126   }
 127
 128   .about .icon-box:hover .icon i {
 129     color: #fff;
 130   }
 131
 132   .about .icon-box .title {
 133     margin-left: 85px;
 134     font-weight: 700;
 135     margin-bottom: 10px;
 136     font-size: 18px;
 137   }
 138
 139   .about .icon-box .title a {
 140     color: #343a40;
 141     transition: 0.3s;
 142   }
 143
 144   .about .icon-box .title a:hover {
 145     color: #07afc5;
 146   }
 147
 148   .about .icon-box .description {
 149     margin-left: 85px;
 150     line-height: 24px;
 151     font-size: 14px;
 152   }
 153
 154   .about .video-box {
 155     background: url("./../../assets/images/kubecon-1.png") no-repeat;
 156     background-size: cover;
 157     min-height: 500px;
 158   }
 159
 160   .about .play-btn {
 161     width: 94px;
 162     height: 94px;
 163     background: radial-gradient(#ff5821 50%, rgba(255, 88, 33, 0.4) 52%);
 164     border-radius: 50%;
 165     display: block;
 166     position: absolute;
 167     left: calc(50% - 47px);
 168     top: calc(50% - 47px);
 169     overflow: hidden;
 170   }
 171
 172   .about .play-btn::after {
 173     content: '';
 174     position: absolute;
 175     left: 50%;
 176     top: 50%;
 177     transform: translateX(-40%) translateY(-50%);
 178     width: 0;
 179     height: 0;
 180     border-top: 10px solid transparent;
 181     border-bottom: 10px solid transparent;
 182     border-left: 15px solid #fff;
 183     z-index: 100;
 184     transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
 185   }
 186
 187   .about .play-btn::before {
 188     content: '';
 189     position: absolute;
 190     width: 120px;
 191     height: 120px;
 192     -webkit-animation-delay: 0s;
 193     animation-delay: 0s;
 194     -webkit-animation: pulsate-btn 2s;
 195     animation: pulsate-btn 2s;
 196     -webkit-animation-direction: forwards;
 197     animation-direction: forwards;
 198     -webkit-animation-iteration-count: infinite;
 199     animation-iteration-count: infinite;
 200     -webkit-animation-timing-function: steps;
 201     animation-timing-function: steps;
 202     opacity: 1;
 203     border-radius: 50%;
 204     border: 5px solid rgba(255, 88, 33, 0.7);
 205     top: -15%;
 206     left: -15%;
 207     background: rgba(200, 94, 84, 0);
 208   }
 209
 210   .about .play-btn:hover::after {
 211     border-left: 15px solid #ff5821;
 212     transform: scale(20);
 213   }
 214
 215   .about .play-btn:hover::before {
 216     content: '';
 217     position: absolute;
 218     left: 50%;
 219     top: 50%;
 220     transform: translateX(-40%) translateY(-50%);
 221     width: 0;
 222     height: 0;
 223     border: none;
 224     border-top: 10px solid transparent;
 225     border-bottom: 10px solid transparent;
 226     border-left: 15px solid #fff;
 227     z-index: 200;
 228     -webkit-animation: none;
 229     animation: none;
 230     border-radius: 0;
 231   }
 232
 233   @-webkit-keyframes pulsate-btn {
 234     0% {
 235       transform: scale(0.6, 0.6);
 236       opacity: 1;
 237     }
 238     100% {
 239       transform: scale(1, 1);
 240       opacity: 0;
 241     }
 242   }
 243
 244   @keyframes pulsate-btn {
 245     0% {
 246       transform: scale(0.6, 0.6);
 247       opacity: 1;
 248     }
 249     100% {
 250       transform: scale(1, 1);
 251       opacity: 0;
 252     }
 253   }
 254
 255   /*--------------------------------------------------------------
 256   # Services
 257   --------------------------------------------------------------*/
 258   .services .icon-box {
 259     padding: 50px 20px;
 260     margin-top: 35px;
 261     margin-bottom: 25px;
 262     text-align: center;
 263     height: 200px;
 264     position: relative;
 265     background: linear-gradient(to right, #7de4b0, #bbdfe6);
 266     box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
 267   }
 268
 269   .services .icon {
 270     position: absolute;
 271     top: -36px;
 272     left: calc(50% - 36px);
 273     transition: 0.2s;
 274     border-radius: 50%;
 275     border: 6px solid #fff;
 276     display: flex;
 277     justify-content: center;
 278     align-items: center;
 279     flex-direction: column;
 280     text-align: center;
 281     width: 72px;
 282     height: 72px;
 283     background: #ff5151;
 284   }
 285
 286   .services .icon i {
 287     color: #fff;
 288     font-size: 24px;
 289   }
 290
 291   .services .title {
 292     font-weight: 700;
 293     margin-bottom: 15px;
 294     font-size: 18px;
 295     text-transform: uppercase;
 296   }
 297
 298   .services .title a {
 299     color: #343a40;
 300   }
 301
 302   .services .icon-box:hover .icon {
 303     background: #fff;
 304     border: 2px solid #fb521a;
 305   }
 306
 307   .services .icon-box:hover .icon i {
 308     color: #fb521a;
 309   }
 310
 311   .services .icon-box:hover .title a {
 312     color: #fb521a;
 313   }
 314
 315   .services .description {
 316     line-height: 24px;
 317     font-size: 14px;
 318   }
 319
 320   /*--------------------------------------------------------------
 321   # Footer
 322   --------------------------------------------------------------*/
 323   #footer {
 324     color: #313030;
 325     font-size: 14px;
 326     background: #fff;
 327   }
 328
 329   #footer .social-links a {
 330     font-size: 18px;
 331     display: inline-block;
 332     background: #ff5821;
 333     color: #fff;
 334     line-height: 1;
 335     padding: 8px 0;
 336     margin-right: 4px;
 337     border-radius: 50%;
 338     text-align: center;
 339     width: 36px;
 340     height: 36px;
 341     transition: 0.3s;
 342   }
 343
 344   #footer .social-links a:hover {
 345     background: #74f6ff;
 346     color: #fff;
 347     text-decoration: none;
 348   }
 349
 350   #footer {
 351       background: black;
 352       color: white;
 353   }