mirror of
https://github.com/saymrwulf/onnxruntime.git
synced 2026-07-13 18:08:13 +00:00
Video carousel on website (#14223)
### Description Moved video resources up on page and makes them into a carousel. Implements videos as iframe for embedded playing Staged at https://prasanthpul.github.io/onnxruntime/ Co-authored-by: Cassie Breviu <46505951+cassiebreviu@users.noreply.github.com>
This commit is contained in:
Prasanth Pulavarthi
GitHub
parent
65dbfe1907
commit
87275aca53
2 changed files with 87 additions and 41 deletions
|
|
@ -146,10 +146,13 @@ a.link:active .link-arrow{
|
|||
.get-started-section h2{
|
||||
font-size:34px;
|
||||
}
|
||||
.carousel, .tab-wrapper{
|
||||
.tab-wrapper{
|
||||
margin: 3rem auto;
|
||||
padding: 0 70px;
|
||||
}
|
||||
.carousel{
|
||||
padding: 0 70px;
|
||||
}
|
||||
.carousel .item,
|
||||
.tab-wrapper .item{
|
||||
color: #000;
|
||||
|
|
@ -165,6 +168,10 @@ a.link:active .link-arrow{
|
|||
.carousel .testimonial, .tab-wrapper .testimonial{
|
||||
position: relative;
|
||||
}
|
||||
.video{
|
||||
max-width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
.carousel p, .tab-wrapper p{
|
||||
font-size:26px;
|
||||
font-weight: bold;
|
||||
|
|
@ -174,7 +181,20 @@ a.link:active .link-arrow{
|
|||
margin-bottom: 30px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.carousel-control-prev {
|
||||
width: 5%;
|
||||
justify-content: left;
|
||||
}
|
||||
.carousel-control-next {
|
||||
width: 5%;
|
||||
justify-content: right;
|
||||
}
|
||||
.carousel-control-prev-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e")
|
||||
}
|
||||
.carousel .carousel-indicators {
|
||||
bottom: -40px;
|
||||
}
|
||||
|
|
@ -706,6 +726,7 @@ a .abbr[data-original-title], a abbr[title]{
|
|||
}
|
||||
.row.blue-title-columns{
|
||||
margin-bottom:5px;
|
||||
text-align: center;
|
||||
}
|
||||
.blue-title-columns div.quote-attribution{
|
||||
font-size: 18px;
|
||||
|
|
|
|||
103
index.html
103
index.html
|
|
@ -337,6 +337,67 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-md-5 pb-4 pt-4 border-top">
|
||||
<div class="container-fluid">
|
||||
<div class="row ml-0">
|
||||
<div class="col mb-4">
|
||||
<div class="text-center pb-3">
|
||||
<h2 class="section-heading">ONNX Runtime YouTube Videos</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="row blue-title-columns">
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<iframe class="video" src="https://www.youtube.com/embed/lRBsmnBE9ZA" title="Convert Models to ONNX" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<iframe class="video" src="https://www.youtube.com/embed/LX1w_etaftY" title="Unreal Engine ORT Plugin" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<iframe class="video" src="https://www.youtube.com/embed/imjqRdsm2Qw" title="C++ and OnnxRuntime" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<iframe class="video" src="https://www.youtube.com/embed/vo9vlR-TRK4" title="v1.13 Release Review" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="row blue-title-columns">
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<iframe class="video" src="https://www.youtube.com/embed/vYzWrT3A7wQ" title="JavaScript with ONNX Runtime Web!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<iframe class="video" src="https://www.youtube.com/embed/Z8SX5oXF7dM" title="Computer vision C# with ONNX Runtime!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0" >
|
||||
<iframe class="video" src="https://www.youtube.com/embed/W_lUGPMW_Eg" title="Deploy Transformer Models in the Browser with #ONNXRuntime" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<iframe class="video" src="https://www.youtube.com/embed/7gDrt-SQZc8" title="BERT NLP with C# ONNX Runtime" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-md-5 pb-4 pt-4 border-top" id="logos">
|
||||
<div class="container-fluid">
|
||||
<div class="row ml-0">
|
||||
|
|
@ -421,7 +482,8 @@
|
|||
<div class="row equalHeight-3 blue-title-columns">
|
||||
<div class="col-4 col-md-2 mb-4 mb-md-0">
|
||||
<div class="customer-logo text-center">
|
||||
<a href="community.html#navitaire"><img src="./images/logos/navitaire-amadeus-logo.png" alt="Navitaire Amadeus logo"></a> </div>
|
||||
<a href="community.html#navitaire"><img src="./images/logos/navitaire-amadeus-logo.png" alt="Navitaire Amadeus logo"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 col-md-2 mb-4 mb-md-0">
|
||||
<div class="customer-logo text-center">
|
||||
|
|
@ -518,44 +580,7 @@
|
|||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="py-md-5 pb-4 pt-4 border-top">
|
||||
<div class="container-fluid">
|
||||
<div class="row ml-0">
|
||||
<div class="col mb-4">
|
||||
<div class="text-center pb-3">
|
||||
<h2 class="section-heading">Resources</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row blue-title-columns">
|
||||
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<a class="resources-img text-center p-0 border-0" target="_blank" href="https://www.youtube.com/playlist?list=PLqPV7GJuaUV9a_ikjn4QqWMKHjGKdjPjb" aria-label="Review the most recent ONNX Runtime Release!">
|
||||
<img src="./images/youtube-release.png" alt="Open Source" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<a class="resources-img text-center p-0 border-0" href="https://youtu.be/lRBsmnBE9ZA" target="_blank" aria-label="Converting Models to ONNX Format">
|
||||
<img src="./images/youtube-convert.png" alt="Open Source" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-4 mb-md-0">
|
||||
<a class="resources-img text-center p-0 border-0" href="https://youtu.be/imjqRdsm2Qw" target="_blank" aria-label="Inference with C++">
|
||||
<img src="./images/youtube-cpp.png" alt="Open Source" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3">
|
||||
<a class="resources-img text-center p-0 border-0" href="https://youtu.be/oWYphpV6A40" target="_blank" aria-label="Inference in Unreal Engine">
|
||||
<img src="./images/youtube-ue5.png" alt="Open Source" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue