|
|
Line 145: |
Line 145: |
| Home-page | | Home-page |
| ========================================================================== */ | | ========================================================================== */ |
− | .hero .carousel-indicators {
| |
− | bottom: -10px;
| |
− | left: 0;
| |
− | margin-left: 0;
| |
− | width: 100%;
| |
− | }
| |
− | .hero .carousel-indicators li {
| |
− | border: none;
| |
− | border-radius: inherit;
| |
− | cursor: pointer;
| |
− | display: inline-block;
| |
− | height: 80px;
| |
− | margin: 0px;
| |
− | padding: 25px 0;
| |
− | opacity: .9;
| |
− | text-indent: 0;
| |
− | }
| |
− | .hero .carousel-indicators li .caption {
| |
− | font-size: 20px;
| |
− | font-weight: bold;
| |
− | height: 100%;
| |
− | text-transform: uppercase;
| |
− | width: 100%;
| |
− | }
| |
− | .hero .carousel-indicators .col-sm-4 {
| |
− | width: 33.33333333333333%;
| |
− | }
| |
− |
| |
− |
| |
| #carousel-home { | | #carousel-home { |
| padding-top: 30px; | | padding-top: 30px; |
Line 179: |
Line 150: |
| .carousel-inner { | | .carousel-inner { |
| text-align: center; | | text-align: center; |
− | @media (max-width: 767px) {
| |
− | .hero .carousel-indicators .col-sm-3 {
| |
− | width: 10px;
| |
− | }
| |
− | .hero .carousel-indicators {
| |
− | bottom: 250px;
| |
− | }
| |
− | /* no change from bootstrap code */
| |
− | .hero .carousel-indicators li {
| |
− | background-color: #000 \9;
| |
− | background-color: rgba(0, 0, 0, 0);
| |
− | border: 1px solid #fff;
| |
− | border-radius: 10px;
| |
− | cursor: pointer;
| |
− | display: inline-block;
| |
− | height: 10px;
| |
− | margin: 1px;
| |
− | padding: 0;
| |
− | text-indent: -999px;
| |
− | width: 10px;
| |
− | }
| |
− | .hero .carousel-indicators .active {
| |
− | background-color: #fff;
| |
− | height: 12px;
| |
− | margin: 0;
| |
− | width: 12px;
| |
− | }
| |
− | .hero .carousel-indicators li .caption {
| |
− | display: none;
| |
− | }
| |
− | }
| |
− | .hero .carousel-inner .item .carousel-card {
| |
− | height: 500px;
| |
− | width: 100%;
| |
− | }
| |
− | .hero.container-fluid {
| |
− | padding: 0;
| |
− | }
| |
− | .hero .message-1 {
| |
− | background: #356DBF;
| |
− | color: #333;
| |
− | }
| |
− | .hero .message-2 {
| |
− | background: #3BBF6A;
| |
− | color: #333;
| |
− | }
| |
− | .hero .message-3 {
| |
− | background: #BF4042;
| |
− | color: #333;
| |
− | }
| |
− | .hero .message-4 {
| |
− | background: #BF2012;
| |
− | color: #333;
| |
− | }
| |
− | .hero .message-1:hover,
| |
− | .hero .message-2:hover,
| |
− | .hero .message-3:hover,
| |
− | .hero .message-4:hover {
| |
− | color: #fff;
| |
− | }
| |
− | .hero .message-1:active,
| |
− | .hero .message-2:active,
| |
− | .hero .message-3:active,
| |
− | .hero .message-4:active {
| |
− | color: #fff;
| |
− | opacity: 1;
| |
− | }
| |
− | .hero .btn.message-1,
| |
− | .hero .btn.message-2,
| |
− | .hero .btn.message-3,
| |
− | .hero .btn.message-4 {
| |
− | color: #fff;
| |
− | font-size: 16px;
| |
− | font-weight: bold;
| |
− | }
| |
− | .hero .btn.message-1:hover {
| |
− | background: #23497F;
| |
− | }
| |
− | .hero .btn.message-2:hover {
| |
− | background: #277F46;
| |
− | }
| |
− | .hero .btn.message-3:hover {
| |
− | background: #7F2B2C;
| |
− | }
| |
− | .hero .btn.message-4:hover {
| |
− | background: #BF2012;
| |
− | }
| |
− | .hero h1.message-1,
| |
− | .hero h1.message-1:hover,
| |
− | .hero h1.message-2,
| |
− | .hero h1.message-2:hover,
| |
− | .hero h1.message-3,
| |
− | .hero h1.message-3:hover
| |
− | .hero h1.message-4,
| |
− | .hero h1.message-4:hover {
| |
− | background: none;
| |
− | color: #fff;
| |
− | }
| |
− | .hero .carousel-indicators {
| |
− | bottom: -10px;
| |
− | left: 0;
| |
− | margin-left: 0;
| |
− | width: 100%;
| |
− | }
| |
− | .hero .carousel-indicators li {
| |
− | border: none;
| |
− | border-radius: inherit;
| |
− | cursor: pointer;
| |
− | display: inline-block;
| |
− | height: 80px;
| |
− | margin: 0px;
| |
− | padding: 25px 0;
| |
− | opacity: .9;
| |
− | text-indent: 0;
| |
− | }
| |
− | .hero .carousel-indicators .col-sm-4 {
| |
− | width: 33.33333333333333%;
| |
− | }
| |
− | .hero .carousel-indicators .col-sm-3 {
| |
− | width: 25%;
| |
− | }
| |
− | .hero .carousel-indicators .active {
| |
− | height: 80px;
| |
− | opacity: 1;
| |
− | }
| |
− | .hero .carousel-indicators li .caption {
| |
− | font-size: 20px;
| |
− | font-weight: bold;
| |
− | height: 100%;
| |
− | text-transform: uppercase;
| |
− | width: 100%;
| |
− | }
| |
− | .hero .carousel-indicators li.active .caption {
| |
− | background: inherit;
| |
− | box-shadow: 0.157px 2.996px 4px 0px #5a5a5a;
| |
− | color: #fff;
| |
− | height: 110px;
| |
− | padding: 40px 20px;
| |
− | position: absolute;
| |
− | opacity: 1;
| |
− | top: -15px;
| |
− | z-index: 100;
| |
− | }
| |
− | .hero .carousel-inner .item {
| |
− | height: 500px;
| |
− | }
| |
− | .hero .carousel-inner .item .carousel-card {
| |
− | height: 500px;
| |
− | width: 100%;
| |
− | }
| |
− | .hero .carousel-caption {
| |
− | bottom: 100px;
| |
− | }
| |
− | .hero .carousel-caption h1 {
| |
− | font-size: 45px;
| |
− | margin-bottom: 30px;
| |
− | }
| |
− | @media (max-width: 991px) {
| |
− | .hero .carousel-indicators li .caption {
| |
− | font-size: 17px;
| |
− | }
| |
− | }
| |
− | @media (max-width: 767px) {
| |
− | .hero .carousel-indicators .col-sm-4 {
| |
− | width: 10px;
| |
− | }
| |
− | .hero .carousel-indicators .col-sm-3 {
| |
− | width: 10px;
| |
− | }
| |
− | .hero .carousel-indicators {
| |
− | bottom: 250px;
| |
− | }
| |
− | /* no change from bootstrap code */
| |
− | .hero .carousel-indicators li {
| |
− | background-color: #000 \9;
| |
− | background-color: rgba(0, 0, 0, 0);
| |
− | border: 1px solid #fff;
| |
− | border-radius: 10px;
| |
− | cursor: pointer;
| |
− | display: inline-block;
| |
− | height: 10px;
| |
− | margin: 1px;
| |
− | padding: 0;
| |
− | text-indent: -999px;
| |
− | width: 10px;
| |
− | }
| |
− | .hero .carousel-indicators .active {
| |
− | background-color: #fff;
| |
− | height: 12px;
| |
− | margin: 0;
| |
− | width: 12px;
| |
− | }
| |
− | .hero .carousel-indicators li .caption {
| |
− | display: none;
| |
− | }
| |
− | .hero .carousel-inner .item {
| |
− | height: 600px;
| |
− | }
| |
− | .hero .carousel-inner .item .carousel-card {
| |
− | background-position: 50% 0;
| |
− | height: 400px;
| |
− | width: 100%;
| |
− | }
| |
− | .hero .carousel-caption {
| |
− | bottom: 0px;
| |
− | }
| |
− | .hero h1.message-1,
| |
− | .hero h1.message-1:hover {
| |
− | background: none;
| |
− | color: #23497F;
| |
− | }
| |
− | .hero h1.message-2,
| |
− | .hero h1.message-2:hover {
| |
− | background: none;
| |
− | color: #277F46;
| |
− | }
| |
− | .hero h1.message-3,
| |
− | .hero h1.message-3:hover {
| |
− | background: none;
| |
− | color: #7F2B2C;
| |
− | }
| |
| } | | } |
− | @media (max-width: 500px) {
| + | .carousel-control { |
− | .hero .carousel-caption h1 {
| + | background-color: none; |
− | font-size: 35px;
| + | |
− | }
| + | |
| } | | } |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
| #Tour-section { | | #Tour-section { |
| padding-top: 30px; | | padding-top: 30px; |