deep_learning/ultralytics
1
0
Fork 0
mirror of https://github.com/ultralytics/ultralytics.git synced 2025-09-15 15:48:41 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Docs banner for https://ultralytics.com/yolo-vision (#16338)

Browse Source 
Co-authored-by: Muhammad Rizwan Munawar <muhammadrizwanmunawar123@gmail.com>
This commit is contained in:
Sergiu Waxmann 2024-09-18 14:42:25 +03:00 committed by GitHub
parent 2173c37238
commit e2e6eb4fb0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 124 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
docs/overrides/main.html
View File

@ -1,30 +1,38 @@
<!--Ultralytics YOLO 🚀, AGPL-3.0 license-->
{% extends "base.html" %}
{% block announce %}
<a
href="https://github.com/ultralytics/ultralytics/releases/tag/v8.2.0"
target="_blank"
class="banner-wrapper"
>
<img
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb78d08408c438e54a6f2f_yolov82_release.avif"
loading="lazy"
alt="Ultralytics YOLOv8.2 Release"
class="banner-content desktop"
/>
<img
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb7a122db51139d6c0b4a8_yolov82_release_mobile.avif"
loading="lazy"
alt="Ultralytics YOLOv8.2 Release Mobile"
class="banner-content mobile"
/>
<img
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb779fc2ff285f3efceea1_arrow_effects.avif"
loading="lazy"
alt="Ultralytics YOLOv8.2 Release Arrow"
class="banner-arrow"
/>
</a>
{% extends "base.html" %} {% block announce %}
<div class="banner-wrapper">
<div class="banner-content-wrapper">
<p>YOLO Vision 2024 is here!</p>
<div class="banner-info-wrapper">
<img
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cfc78245ffa51d6f0_w_yv24.svg"
loading="lazy"
width="20"
height="20"
alt="YOLO Vision 24"
/>
<p>September 27, 2024</p>
</div>
<div class="banner-info-wrapper">
<img
src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cdfbd25e409560ed8_l_yv24.svg"
loading="lazy"
width="20"
height="20"
alt="YOLO Vision 24"
/>
<p>Free hybrid event</p>
</div>
</div>
<div class="banner-button-wrapper">
<div class="banner-button-wrapper large">
<button
onclick="window.open('https://www.ultralytics.com/events/yolovision', '_blank')"
>
Register now
</button>
</div>
</div>
</div>
{% endblock %}

113
docs/overrides/stylesheets/style.css
View File

@ -51,7 +51,7 @@ div.highlight {
/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
.md-banner {
background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/6627a0cab2de939ad35939ed_banner_82.webp);
background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a211bf6831d112fd6ce3_banner_yv24.avif);
background-size: cover;
background-position: center;
}
@ -61,44 +61,109 @@ div.highlight {
margin-bottom: 0 !important;
}
.banner-wrapper {
.banner-wrapper,
.banner-wrapper > .banner-content-wrapper,
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 64px;
overflow: hidden;
}
.banner-content {
max-height: 64px;
.banner-wrapper,
.banner-wrapper > .banner-content-wrapper {
flex-direction: column;
}
.banner-content.desktop {
display: none;
.banner-wrapper {
justify-content: space-between;
gap: 16px;
padding: 16px;
}
.banner-arrow {
display: none;
max-height: 80px;
margin-left: -16px;
transition: transform ease-in-out 0.5s;
.banner-wrapper > .banner-content-wrapper,
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
justify-content: center;
}
.banner-wrapper:hover > .banner-arrow {
transform: translateX(8px);
.banner-wrapper > .banner-content-wrapper {
gap: 8px;
}
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
gap: 4px;
}
.banner-wrapper > .banner-content-wrapper > p,
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
margin: 0;
}
.banner-wrapper > .banner-content-wrapper > p {
font-size: 20px;
font-weight: 500;
}
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
font-size: 14px;
}
.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
color: #f3f3f3;
}
.banner-wrapper > .banner-button-wrapper,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
border-radius: 100px;
}
.banner-wrapper > .banner-button-wrapper,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper {
padding: 2px;
background-color: rgba(222, 255, 56, 0.2);
}
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper.large {
padding: 4px;
}
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
cursor: pointer;
min-width: 132px;
padding: 10px;
font-weight: 500;
color: #111f68;
background-color: rgb(222, 255, 56);
}
.banner-wrapper
> .banner-button-wrapper
> .banner-button-wrapper
> button:hover {
background-color: rgba(222, 255, 56, 0.85);
}
@media screen and (min-width: 768px) {
.banner-content.mobile {
display: none;
.banner-wrapper,
.banner-wrapper > .banner-content-wrapper {
flex-direction: row;
}
.banner-content.desktop {
display: revert;
.banner-wrapper {
gap: 32px;
padding: 12px;
}
.banner-arrow {
display: revert;
.banner-wrapper > .banner-content-wrapper {
gap: 24px;
margin: 0 auto;
}
}
/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */