X-Git-Url: https://gerrit.akraino.org/r/gitweb?a=blobdiff_plain;f=example-apps%2FPDD%2Ffrontend-src%2Fsrc%2Fapp%2Fhome%2Fhome.component.scss;fp=example-apps%2FPDD%2Ffrontend-src%2Fsrc%2Fapp%2Fhome%2Fhome.component.scss;h=13419281a8cceb0999b7104b433dbbe8e8748940;hb=93556d64f8727eb386792f412ed85170cb70e48d;hp=0000000000000000000000000000000000000000;hpb=5f7e757b5f667f7d9e4f3fbccaabae91ffd0feec;p=ealt-edge.git diff --git a/example-apps/PDD/frontend-src/src/app/home/home.component.scss b/example-apps/PDD/frontend-src/src/app/home/home.component.scss new file mode 100644 index 0000000..1341928 --- /dev/null +++ b/example-apps/PDD/frontend-src/src/app/home/home.component.scss @@ -0,0 +1,289 @@ + + +.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; + } + } + + + /*-------------------------------------------------------------- + # 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