X-Git-Url: https://gerrit.akraino.org/r/gitweb?a=blobdiff_plain;f=blueprints%2Fcommon%2Feliot-ui%2Ffrontend-src%2Fsrc%2Fapp%2Fhome%2Fhome.component.scss;fp=blueprints%2Fcommon%2Feliot-ui%2Ffrontend-src%2Fsrc%2Fapp%2Fhome%2Fhome.component.scss;h=0000000000000000000000000000000000000000;hb=434326c60fb0434bda587102b4746173fe425dea;hp=983bc8d5d88736a14cfd1c6678ebfdd0be6265f9;hpb=37827e492060182b32df67c2a538a29808fa5e17;p=eliot.git diff --git a/blueprints/common/eliot-ui/frontend-src/src/app/home/home.component.scss b/blueprints/common/eliot-ui/frontend-src/src/app/home/home.component.scss deleted file mode 100644 index 983bc8d..0000000 --- a/blueprints/common/eliot-ui/frontend-src/src/app/home/home.component.scss +++ /dev/null @@ -1,353 +0,0 @@ - - -.main { - display: block; - width: 100%; - overflow:hidden; - - .carousel{ - display:block; - color: black; - img { - width: 100% - } - } -} - -h3,h1,h5,h2 { - color: black; -} - - - - -/** -* Template Name: Flexor - v2.0.0 -* Template URL: https://bootstrapmade.com/flexor-free-multipurpose-bootstrap-template/ -* Author: BootstrapMade.com -* License: https://bootstrapmade.com/license/ -*/ - -/*-------------------------------------------------------------- -# General ---------------------------------------------------------------*/ -body { - font-family: "Open Sans", sans-serif; - color: #313030; - } - - a { - color: #ff5821; - } - - a:hover { - color: #ff7e54; - text-decoration: none; - } - - h1, h2, h3, h4, h5, h6 { - font-family: "Raleway", sans-serif; - } - - - /*-------------------------------------------------------------- - # Sections General - --------------------------------------------------------------*/ - section { - padding: 60px 0; - overflow: hidden; - } - - .section-bg { - background-color: #fff9f7; - } - - .section-title { - text-align: center; - padding-bottom: 30px; - } - - .section-title h2 { - font-size: 32px; - font-weight: 500; - margin-bottom: 20px; - padding-bottom: 0; - font-family: "Poppins", sans-serif; - color: #635551; - } - - .section-title p { - margin-bottom: 0; - } - - - - /*-------------------------------------------------------------- - # About - --------------------------------------------------------------*/ - .about .icon-boxes h4 { - font-size: 18px; - color: #7f6d68; - margin-bottom: 15px; - } - - .about .icon-boxes h3 { - font-size: 28px; - font-weight: 700; - color: #554945; - margin-bottom: 15px; - } - - .about .icon-box { - margin-top: 40px; - } - - .about .icon-box .icon { - float: left; - display: flex; - align-items: center; - justify-content: center; - width: 64px; - height: 64px; - border: 2px solid #ffcbba; - border-radius: 50px; - transition: 0.5s; - background: #fff; - } - - .about .icon-box .icon i { - color: #696969; - font-size: 32px; - } - - .about .icon-box:hover .icon { - background: #0ab8e4; - border-color: #f5f5f5; - } - - .about .icon-box:hover .icon i { - color: #fff; - } - - .about .icon-box .title { - margin-left: 85px; - font-weight: 700; - margin-bottom: 10px; - font-size: 18px; - } - - .about .icon-box .title a { - color: #343a40; - transition: 0.3s; - } - - .about .icon-box .title a:hover { - color: #07afc5; - } - - .about .icon-box .description { - margin-left: 85px; - line-height: 24px; - font-size: 14px; - } - - .about .video-box { - background: url("./../../assets/images/kubecon-1.png") no-repeat; - background-size: cover; - min-height: 500px; - } - - .about .play-btn { - width: 94px; - height: 94px; - background: radial-gradient(#ff5821 50%, rgba(255, 88, 33, 0.4) 52%); - border-radius: 50%; - display: block; - position: absolute; - left: calc(50% - 47px); - top: calc(50% - 47px); - overflow: hidden; - } - - .about .play-btn::after { - content: ''; - position: absolute; - left: 50%; - top: 50%; - transform: translateX(-40%) translateY(-50%); - width: 0; - height: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-left: 15px solid #fff; - z-index: 100; - transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - .about .play-btn::before { - content: ''; - position: absolute; - width: 120px; - height: 120px; - -webkit-animation-delay: 0s; - animation-delay: 0s; - -webkit-animation: pulsate-btn 2s; - animation: pulsate-btn 2s; - -webkit-animation-direction: forwards; - animation-direction: forwards; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-timing-function: steps; - animation-timing-function: steps; - opacity: 1; - border-radius: 50%; - border: 5px solid rgba(255, 88, 33, 0.7); - top: -15%; - left: -15%; - background: rgba(200, 94, 84, 0); - } - - .about .play-btn:hover::after { - border-left: 15px solid #ff5821; - transform: scale(20); - } - - .about .play-btn:hover::before { - content: ''; - position: absolute; - left: 50%; - top: 50%; - transform: translateX(-40%) translateY(-50%); - width: 0; - height: 0; - border: none; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-left: 15px solid #fff; - z-index: 200; - -webkit-animation: none; - animation: none; - border-radius: 0; - } - - @-webkit-keyframes pulsate-btn { - 0% { - transform: scale(0.6, 0.6); - opacity: 1; - } - 100% { - transform: scale(1, 1); - opacity: 0; - } - } - - @keyframes pulsate-btn { - 0% { - transform: scale(0.6, 0.6); - opacity: 1; - } - 100% { - transform: scale(1, 1); - opacity: 0; - } - } - - /*-------------------------------------------------------------- - # Services - --------------------------------------------------------------*/ - .services .icon-box { - padding: 50px 20px; - margin-top: 35px; - margin-bottom: 25px; - text-align: center; - height: 200px; - position: relative; - background: linear-gradient(to right, #7de4b0, #bbdfe6); - box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); - } - - .services .icon { - position: absolute; - top: -36px; - left: calc(50% - 36px); - transition: 0.2s; - border-radius: 50%; - border: 6px solid #fff; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - text-align: center; - width: 72px; - height: 72px; - background: #ff5151; - } - - .services .icon i { - color: #fff; - font-size: 24px; - } - - .services .title { - font-weight: 700; - margin-bottom: 15px; - font-size: 18px; - text-transform: uppercase; - } - - .services .title a { - color: #343a40; - } - - .services .icon-box:hover .icon { - background: #fff; - border: 2px solid #fb521a; - } - - .services .icon-box:hover .icon i { - color: #fb521a; - } - - .services .icon-box:hover .title a { - color: #fb521a; - } - - .services .description { - line-height: 24px; - font-size: 14px; - } - - /*-------------------------------------------------------------- - # Footer - --------------------------------------------------------------*/ - #footer { - color: #313030; - font-size: 14px; - background: #fff; - } - - #footer .social-links a { - font-size: 18px; - display: inline-block; - background: #ff5821; - color: #fff; - line-height: 1; - padding: 8px 0; - margin-right: 4px; - border-radius: 50%; - text-align: center; - width: 36px; - height: 36px; - transition: 0.3s; - } - - #footer .social-links a:hover { - background: #74f6ff; - color: #fff; - text-decoration: none; - } - - #footer { - background: black; - color: white; - } \ No newline at end of file