From 9246bcac15e5f10e6b730487c8e54cbbef0ea73f Mon Sep 17 00:00:00 2001 From: Samyak Jain Date: Thu, 31 May 2018 14:36:06 -0700 Subject: [PATCH] issue(stylecontents)#226 This commit is done to giving the style to various contents on website using style.css . --- public/assets/css/style.css | 542 ++++++++++++++++++++++++++++++++++++ 1 file changed, 542 insertions(+) create mode 100644 public/assets/css/style.css diff --git a/public/assets/css/style.css b/public/assets/css/style.css new file mode 100644 index 00000000..8ec476c2 --- /dev/null +++ b/public/assets/css/style.css @@ -0,0 +1,542 @@ +body { + overflow-x: hidden; + background-color: #232323; +} +.header +{ +padding: 0; +overflow-x:scroll visible; +background-color:white; +text-align: center; +font-size: 75px; +font-weight: bolder; +color: rgb(97, 6, 6); +font-family: apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol; +} +.subhead{ + font-family: NotoSansJP,Slack-Lato,appleLogo,sans-serif; + font-size:20px; + background: white; + overflow-x: auto; + overflow-y:auto; + scrollbar-base-color:#ffeaff; + padding-left: 45px; + padding-right: 10px; + +} + + +.navbar { + background-color: #d20001 !important; + border: none !important; + font-family: 'Montserrat'; + padding-top: 0; +} + +.navbar .navbar-nav>li>a{ + color: #fff; + line-height: 80px; + font-family: Spectral, serif; + font-size: 1.2em; + padding: 10px; +} + +.navbar .navbar-nav>li.brand{ + margin-top: 0; +} + +.navbar .navbar-nav>li.brand>a:hover { + text-decoration: none; + cursor: pointer; + border-bottom:none; +} + +.navbar-default .navbar-nav>li>a:hover { + color: #fff; + text-decoration: none; + border-bottom: #fff 2px solid; +} + +.navbar-brand{ + display: inline; + color: white !important; + font-family: "Montserrat"; + font-weight: 700; +} + +.navbar-toggler{ + background-color: white !important; + border: none !important; +} + +nav li.brand img { + background: #fff; + padding: 10px; + border-bottom-left-radius: 18px; + border-bottom-right-radius: 18px; + display: inline-block; + max-height: 100px; +} + +@media (max-width:992px){ + .navbar .navbar-nav{ + text-align: center; + } + .navbar .navbar-nav>li>a{ + line-height: 50px; + font-size: 1em; + padding: 0; + } + +} + +@media (max-width:768px){ + .donate-action{ + margin-top: 80px; + } +} + +.slider_wrapper>.row{ + margin: 0; +} + + +/* Importing brand fonts Montserrat and Spectral */ + +@import url('https://fonts.googleapis.com/css?family=Montserrat|Spectral'); + +/* footer css */ + +footer { + /* font-family: 'Montserrat', sans-serif; */ + font-family: 'Spectral', serif; + background: #111111; + padding-top: 20px; + color: #999999; + width: 100%; + position: relative; + bottom: 0; + float: left; + width: 100%; + z-index: 2; +} + +/* footer .container { + padding-left: 10% !important; + padding-right: 10% !important; +} */ + +footer ul li a, footer ul li a:visited { + color: #999999; +} + +footer ul li a:hover { + color: #eeeeee; + text-decoration: none; +} + +footer .footer-email { + color: #eeeeee; + background: #333333; + border: none; + height: 3em; + font-size: 1em; + padding-left: 1em; + margin: 0 !important; + width: 70%; +} + +footer .footer-email:active { + color: #eeeeee; +} + +footer input::placeholder { + font-size: 0.9em !important; + color: #cccccc; +} + +footer h5 { + font-size: 1em; + font-weight: bold; +} + +footer .footer-subscribe, footer .after-footer { + font-family: 'Montserrat', sans-serif; +} + +footer .footer-subscribe h5 { + display: inline; + font-size: 0.8em; + font-weight: bold; +} + +footer .email-btn-wrapper { + /* white-space: nowrap; */ + border: 1px solid #111111; + color: #cccccc; + width: 100%; +} + +footer .btn-join { + height: 3em; + margin-left: -4px; + padding-left: 1em; + padding-right: 1em; + background: #222222; + color: #cccccc; + border: 0; + cursor: pointer; + font-weight: bold; +} + +footer .email-btn-wrapper p { + font-size: 0.8em; +} + +footer .after-footer { + background: #000000; +} + +footer .after-footer a, footer .after-footer a:visited, footer .after-footer a:active { + color: #444444; + text-transform: uppercase; + vertical-align: middle; + font-weight: bold; + font-size: 0.8em; +} + +footer .after-footer a:hover { + text-decoration: none; + color: #555555; +} + +@media (max-width: 576px) { + .after-footer { + text-align: center !important; + /* padding-left: 0 !important; + padding-right: 0 !important; */ + padding: auto 0 !important; + } +} + +@media (max-width: 768px) { + .after-footer { + text-align: center !important; + /* padding-left: 0 !important; + padding-right: 0 !important; */ + margin: auto !important; + } +} + +@media (min-width: 850px) { + .after-footer { + padding-right: 10% !important; + } +} + +/*Customized plugin for slider slick.js*/ + +/* Slider */ + +.slider_wrapper { + float: left; + width: 100%; + margin-top: 50px; +} + +.slider { + z-index: 9999; +} + +.slider .single-slide { + z-index: 5; + position: relative; +} + +.single-slide img { + transition: border-radius ease 0s; +} + +.slick-arrow { + display: none !important; +} + +.slick-slider { + position: relative; + display: block; + box-sizing: border-box; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -khtml-user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} + +.slick-list { + position: relative; + display: block; + overflow: hidden; + margin: 0; + padding: 0; + z-index: 2; + border-radius: 20px; +} + +.slick-list:focus { + outline: none; +} + +.slick-list.dragging { + cursor: pointer; + cursor: hand; +} + +.slick-slider .slick-track, .slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track { + position: relative; + top: 0; + left: 0; + display: block; + margin-left: auto; + margin-right: auto; +} + +.slick-track:before, .slick-track:after { + display: table; + content: ''; +} + +.slick-track:after { + clear: both; +} + +.slick-loading .slick-track { + visibility: hidden; +} + +.slick-slide { + display: none; + float: left; + height: 100%; + min-height: 1px; + border-radius: 20px; +} + +[dir='rtl'] .slick-slide { + float: right; +} + +.slick-slide img { + display: block; + border-radius: 15px; + width: 100%; +} + +.slick-slide.slick-loading img { + display: none; +} + +.slick-slide.dragging img { + pointer-events: none; +} + +.slick-initialized .slick-slide { + display: block; +} + +.slick-loading .slick-slide { + visibility: hidden; +} + +.slick-vertical .slick-slide { + display: block; + height: auto; + border: 1px solid transparent; +} + +.slick-arrow.slick-hidden { + display: none; +} + +/* Slider */ + +.slick-loading .slick-list { + background: #fff url('./ajax-loader.gif') center center no-repeat; +} + +/* Icons */ + +@font-face { + font-family: 'slick'; + font-weight: normal; + font-style: normal; + src: url('./fonts/slick.eot'); + src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); +} + +/* Arrows */ + +.slick-prev, .slick-next { + font-size: 0; + line-height: 0; + position: absolute; + top: 50%; + display: block; + width: 20px; + height: 20px; + padding: 0; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + cursor: pointer; + color: transparent; + border: none; + outline: none; + background: transparent; +} + +.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { + color: transparent; + outline: none; + background: transparent; +} + +.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { + opacity: 1; +} + +.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { + opacity: .25; +} + +.slick-prev:before, .slick-next:before { + font-family: 'slick'; + font-size: 20px; + line-height: 1; + opacity: .75; + color: white; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.slick-prev { + left: -25px; +} + +[dir='rtl'] .slick-prev { + right: -25px; + left: auto; +} + +.slick-prev:before { + content: '←'; +} + +[dir='rtl'] .slick-prev:before { + content: '→'; +} + +.slick-next { + right: -25px; +} + +[dir='rtl'] .slick-next { + right: auto; + left: -25px; +} + +.slick-next:before { + content: '→'; +} + +[dir='rtl'] .slick-next:before { + content: '←'; +} + +/* Dots */ + +.slick-dotted.slick-slider { + margin-bottom: -30px; + max-width: 700px; + margin-left: auto; + /* margin-right: auto; */ +} + +.slick-dots { + position: absolute; + bottom: -25px; + display: block; + width: 100%; + padding: 0; + margin: 0; + list-style: none; + text-align: center; +} + +.slick-dots li { + position: relative; + display: inline-block; + width: 20px; + height: 20px; + margin: 0 5px; + padding: 0; + cursor: pointer; +} + +.slick-dots li button { + font-size: 0; + line-height: 0; + display: block; + width: 20px; + height: 20px; + padding: 5px; + cursor: pointer; + color: transparent; + border: 0; + outline: none; + background: transparent; + background-color: #fff; + border-radius: 50%; +} + +.slick-dots li button:hover, .slick-dots li button:focus { + outline: none; +} + +.slick-dots li button:hover:before, .slick-dots li button:focus:before { + opacity: 1; +} + +.slick-dots li button:before { + font-family: 'slick'; + font-size: 6px; + line-height: 20px; + position: absolute; + top: 2px; + left: 2px; + width: 16px; + height: 16px; + content: '•'; + text-align: center; + opacity: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: #d20001; + border-radius: 50%; +} + +.slick-dots li.slick-active button:before { + opacity: 0; + color: black; +}