bootstrap 4 carousel
A Pen by Zeynep Özbek Eryılmaz on CodePen.
Created
December 8, 2022 10:40
-
-
Save Vitalik-Hakim/22511db373844117371bd5fe2ec8da75 to your computer and use it in GitHub Desktop.
the value for you
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Start Section --> | |
| <section class="section theme-features theme-default"> | |
| <div class=container> | |
| <div class="row"> | |
| <div class="col-md-12 col-sm-12 col-xs-12"> | |
| <h5 class="title">The Value for You</h5> | |
| </div> | |
| <div class="col-md-12 col-sm-12 col-xs-12 text-center"> | |
| <p class=sub-title>VirtualMetric cares for improving the efficiency within your organization. Stop wasting time and focus on your core activities. We will care for your infrastructure health! </p> | |
| </div> | |
| <div class="col-md-12 col-sm-12 col-xs-12"> | |
| <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> | |
| <!-- Indicators --> | |
| <ol class="carousel-indicators"> | |
| <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="1"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="2"></li> | |
| </ol> | |
| <!-- Wrapper for slides --> | |
| <div class="carousel-inner"> | |
| <div class="item active"> | |
| <div class="row"> | |
| <div class="col-xs-12"> | |
| <div class="col-md-7 col-sm-6 col-xs-12"> | |
| <div class="caption"> | |
| <p class="text-info adjust2"> | |
| Prevent performance issues thanks to VirtualMetric Hyper-V monitoring | |
| </p> | |
| <p> | |
| A good Hyper-V tracking solution helps you to take the right decisions and boost the performance of your Hyper-V environment. By using VirtualMetric you will ensure the health and uptime of your virtualization, where you usually store most of the critical virtual machines. Issues like heavy utilized CPU, high storage latency, high storage I/O usage, heavy network utilization and high memory usage can easily result into low performance of your Hyper-V server. VirtualMetric tracks all these counter and makes correlation between their values to ensure easy and fast troubleshooting. In addition, thanks to the sophisticated inventory and change tracking features, you will be able to prevent undesired changes. Avoid business problems and dissatisfied customers due to performance issues and security threads by implementing smart real-time Hyper-V monitoring software by VirtualMetric. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="col-md-5 col-sm-6 col-xs-12"> | |
| <svg width="250" height="160" x="0" y="0" style="opacity: 1;"><defs></defs><rect x="0" y="0" rx="0" ry="0" width="250" height="160" stroke-width="0" stroke="none" stroke-dasharray="none" fill="rgb(255,182,85)"></rect><svg x="31.742857142857147" y="16" width="186.5142857142857" height="128"><path d="M186.60833126512148 30.608695652173918C186.60833126512148 47.30434782608696 172.57762966624017 61.217391304347835 155.74078774758257 61.217391304347835 138.90394582892498 61.217391304347835 126.27631438993181 45.913043478260875 126.27631438993181 30.608695652173918 126.27631438993181 13.913043478260871 138.903945828925 0 155.74078774758257 0 172.57762966624014 0 186.60833126512148 13.913043478260871 186.60833126512148 30.608695652173918 186.60833126512148 30.608695652173918 186.60833126512148 30.608695652173918 186.60833126512148 30.608695652173918M116.45482327071491 64C109.43947247127424 52.869565217391305 98.2149111921692 52.869565217391305 91.19956039272853 64 91.19956039272853 64 89.79649023284041 65.3913043478261 89.79649023284041 65.3913043478261 84.18420959328787 57.04347826086956 78.57192895373535 47.30434782608696 74.36271847407096 38.95652173913044 64.54122735485403 22.260869565217394 49.1074555960846 22.260869565217394 39.285964476867676 38.95652173913044 29.46447335765076 55.652173913043484 14.030701598881313 82.08695652173914 4.209210479664394 98.78260869565217-5.612280639552526 115.47826086956523 2.806140319776263 128 22.449122558210103 128 22.449122558210103 128 130.48552486959622 128 130.48552486959622 128 144.51622646847753 128 150.12850710803005 119.65217391304348 143.1131563085894 107.1304347826087 136.0978055091487 94.60869565217392 124.8732442300437 76.5217391304348 116.45482327071491 64 116.45482327071491 64 116.45482327071491 64 116.45482327071491 64" fill="rgb(179,179,179)" fill-rule="evenOdd"></path></svg></svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> | |
| <svg width="46" height="23" x="0.5" y="0.5" style="opacity: 1;"><defs></defs><path d="M 23 0 L 0 23 L 46 23L23 0 Z" stroke-width="1" stroke="rgb(0,200,248)" stroke-dasharray="none" fill="rgb(0,200,248)" fill-rule="evenOdd"></path><foreignObject width="46" height="23" x="0" y="0" style="font-style: normal; color: rgb(0, 0, 0);"><div data-gramm="false" spellcheck="false" style="color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0px; text-align: center; text-decoration: none; vertical-align: middle; line-height: 1.3; width: 46px; height: 23px; padding: 0px; min-width: 1px; min-height: 1px; word-wrap: break-word; display: table-cell;"></div></foreignObject></svg> | |
| </a> | |
| <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> | |
| <svg width="46" height="23" x="0.5" y="0.5" style="opacity: 1;"><defs></defs><path d="M 23 0 L 0 23 L 46 23L23 0 Z" stroke-width="1" stroke="rgb(0,200,248)" stroke-dasharray="none" fill="rgb(0,200,248)" fill-rule="evenOdd"></path><foreignObject width="46" height="23" x="0" y="0" style="font-style: normal; color: rgb(0, 0, 0);"><div data-gramm="false" spellcheck="false" style="color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0px; text-align: center; text-decoration: none; vertical-align: middle; line-height: 1.3; width: 46px; height: 23px; padding: 0px; min-width: 1px; min-height: 1px; word-wrap: break-word; display: table-cell;"></div></foreignObject></svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- End Section --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .theme-features{ | |
| padding: 32px 0; | |
| } | |
| .theme-features .title{ | |
| color: rgb(0, 200, 248); | |
| font-weight: bold; | |
| font-style: normal; | |
| font-size: 18px; | |
| text-align: center; | |
| letter-spacing: 0px; | |
| text-decoration: underline; | |
| vertical-align: middle; | |
| padding: 0px 5px; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .theme-features.theme-default .title{ | |
| color: rgb(57, 73, 79); | |
| } | |
| .theme-features .sub-title{ | |
| margin: auto; | |
| margin-bottom: 10px; | |
| color: rgb(0, 200, 248); | |
| font-size: 14px; | |
| font-style: italic; | |
| font-weight: 400; | |
| letter-spacing: 0px; | |
| text-align: center; | |
| text-decoration: none; | |
| vertical-align: top; | |
| line-height: 1.3; | |
| max-width: 601px; | |
| padding: 4px; | |
| min-width: 1px; | |
| min-height: 1px; | |
| word-wrap: break-word; | |
| } | |
| .theme-features.theme-default .sub-title{ | |
| color: rgb(57, 73, 79); | |
| } | |
| .theme-features.theme-default .carousel{ | |
| margin-top: 60px; | |
| } | |
| .theme-features.theme-default .carousel-control.left{ | |
| background-image: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .theme-features.theme-default .carousel-control.right{ | |
| background-image: none; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .theme-features.theme-default .carousel-control.left svg{ | |
| transform: rotate(-90deg); | |
| } | |
| .theme-features.theme-default .carousel-control.right svg{ | |
| transform: rotate(90deg); | |
| } | |
| .theme-features.theme-default .carousel .caption{ | |
| max-width: 500px; | |
| float: right; | |
| } | |
| .theme-features.theme-default .carousel .caption .text-info{ | |
| color: rgb(57, 73, 79); | |
| font-weight: bold; | |
| font-style: normal; | |
| font-size: 18px; | |
| text-align: left; | |
| padding: 0px 5px; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-start; | |
| } | |
| .theme-features.theme-default .carousel .caption p{ | |
| color: rgb(57, 73, 79); | |
| font-size: 14px; | |
| font-style: normal; | |
| font-weight: 400; | |
| letter-spacing: 0px; | |
| text-align: left; | |
| text-decoration: none; | |
| vertical-align: top; | |
| line-height: 1.3; | |
| padding: 4px; | |
| min-width: 1px; | |
| min-height: 1px; | |
| word-wrap: break-word; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment