landing-page: display docker-con videos section

Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>
This commit is contained in:
Jérémie Drouet 2020-06-08 14:28:35 +02:00
parent 2e214411bc
commit d12154311b
5 changed files with 133 additions and 51 deletions

View File

@ -139,7 +139,7 @@
<section class="container">
<div class="row">
<div class="col-xs-12 col-lg-8 card-holder">
<div class="cardlet container-fluid">
<div class="cardlet container-fluid" style="min-height:307px">
<div class="row">
<div class="col-xs-12 col-lg-8">
<h5 class="title">How do I?</h5>
@ -199,43 +199,7 @@
</div>
</div>
</div>
<div class="col-xs-12 col-lg-4 card-holder">
<div class="cardlet container-fluid">
<div class="row">
<div class="col-xs-12">
<h5 class="title">Develop with Docker</h5>
<p>Learn how to develop language-specific apps using Docker.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="https://github.com/docker/labs/tree/master/developer-tools/java/" target="_blank">
Docker for Java developers
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="https://github.com/docker/labs/tree/master/developer-tools/nodejs/porting/" target="_blank">
Port a node.js app to Docker
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="https://github.com/docker/labs/tree/master/developer-tools/ruby" target="_blank">
Ruby on Rails app on Docker
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="/engine/examples/dotnetcore/">
Dockerize a .Net Core application
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="/compose/aspnet-mssql-compose/" target="_blank">
Dockerize an ASP.NET Core application with SQL Server on Linux
</a>
</div>
</div>
</div>
</div>
{% include landing-page/popular-videos.html %}
</div>
</section>
@ -649,29 +613,31 @@
</p>
</div>
<div class="col-xs-12 col-md-6">
<h2 class="title">Troubleshooting</h2>
<h2 class="title">Develop with Docker</h2>
<p>Learn how to develop language-specific apps using Docker.</p>
<p>
Refer to our troubleshooting topics to learn how to diagnose and
troubleshoot common issues.
</p>
<p>
<a href="/config/daemon/">
Troubleshoot the Docker daemon
<a href="https://github.com/docker/labs/tree/master/developer-tools/java/" target="_blank">
Docker for Java developers
</a>
</p>
<p>
<a href="/storage/troubleshooting_volume_errors/">
Troubleshoot volumes or bind mount errors
<a href="https://github.com/docker/labs/tree/master/developer-tools/nodejs/porting/" target="_blank">
Port a node.js app to Docker
</a>
</p>
<p>
<a href="https://success.docker.com/article/troubleshooting-container-networking" target="_blank">
Troubleshoot container networking errors
<a href="https://github.com/docker/labs/tree/master/developer-tools/ruby" target="_blank">
Ruby on Rails app on Docker
</a>
</p>
<p>
<a href="/docker-for-windows/troubleshoot/">
Docker Desktop logs and troubleshooting
<a href="/engine/examples/dotnetcore/">
Dockerize a .Net Core application
</a>
</p>
<p>
<a href="/compose/aspnet-mssql-compose/" target="_blank">
Dockerize an ASP.NET Core application with SQL Server on Linux
</a>
</p>
</div>
@ -727,6 +693,33 @@
</a>
</p>
</div>
<div class="col-xs-12 col-md-6">
<h2 class="title">Troubleshooting</h2>
<p>
Refer to our troubleshooting topics to learn how to diagnose and
troubleshoot common issues.
</p>
<p>
<a href="/config/daemon/">
Troubleshoot the Docker daemon
</a>
</p>
<p>
<a href="/storage/troubleshooting_volume_errors/">
Troubleshoot volumes or bind mount errors
</a>
</p>
<p>
<a href="https://success.docker.com/article/troubleshooting-container-networking" target="_blank">
Troubleshoot container networking errors
</a>
</p>
<p>
<a href="/docker-for-windows/troubleshoot/">
Docker Desktop logs and troubleshooting
</a>
</p>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,37 @@
<div class="col-xs-12 col-lg-4 card-holder">
<div class="cardlet container-fluid">
<div class="row">
<div class="col-xs-12">
<h5 class="title">Develop with Docker</h5>
<p>Learn how to develop language-specific apps using Docker.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="https://github.com/docker/labs/tree/master/developer-tools/java/" target="_blank">
Docker for Java developers
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="https://github.com/docker/labs/tree/master/developer-tools/nodejs/porting/" target="_blank">
Port a node.js app to Docker
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="https://github.com/docker/labs/tree/master/developer-tools/ruby" target="_blank">
Ruby on Rails app on Docker
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="/engine/examples/dotnetcore/">
Dockerize a .Net Core application
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a href="/compose/aspnet-mssql-compose/" target="_blank">
Dockerize an ASP.NET Core application with SQL Server on Linux
</a>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,30 @@
<div class="col-xs-12 col-lg-4 card-holder">
<div class="cardlet container-fluid">
<div class="row">
<div class="col-xs-12">
<h5 class="title">Popular videos</h5>
<p>Watch the most popular videos from DockerCon.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<a class="video-item" href="https://docker.events.cube365.net/docker/dockercon/content/Videos/hgMFTyX5kYKmTPWZo" target="_blank">
<img class="video-image" src="/images/video.svg" />
<div class="video-title">How to get started with Docker</div>
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a class="video-item" href="https://docker.events.cube365.net/docker/dockercon/content/Videos/NjnEcHsq29HMDbMRn" target="_blank">
<img class="video-image" src="/images/video.svg" />
<div class="video-title">How to build and test your Docker images in the Cloud</div>
</a>
</div>
<div class="col-xs-12 col-md-6 col-lg-12">
<a class="video-item" href="https://docker.events.cube365.net/docker/dockercon/content/Videos/AG9iBqW3BdXTR9Zfh" target="_blank">
<img class="video-image" src="/images/video.svg" />
<div class="video-title">Simplify all the things with Docker Compose</div>
</a>
</div>
</div>
</div>
</div>

View File

@ -127,6 +127,22 @@ body#landing {
padding: 7.5px;
}
.video-item {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 6.5px;
margin-bottom: 6.5px;
.video-image {
margin-right: 13px;
}
.video-title {
flex: 1;
}
}
%icon-card {
background-image: none;
background-origin: content-box;

6
images/video.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65" height="44" viewBox="0 0 65 44">
<rect width="65" height="44" fill="#768491"/>
<circle cx="33" cy="22" r="15" fill="#2854A1"/>
<path d="M39.8184 21.5454L28.9093 27.8438L28.9093 15.2471L39.8184 21.5454Z" fill="#71CFFF"/>
</svg>

After

Width:  |  Height:  |  Size: 382 B