Training page in the top nav (#19214)

* Create new page and add to top nav Signed-off-by: Celeste Horgan <celeste@cncf.io> * The basics Signed-off-by: Celeste Horgan <celeste@cncf.io> * A bit of inline css Signed-off-by: Celeste Horgan <celeste@cncf.io> * Fix CSS Signed-off-by: Celeste Horgan <celeste@cncf.io> * Fix link + Add to bottom row Signed-off-by: Celeste Horgan <celeste@cncf.io> * Address feedback in PR * Address feedback from elsewhere * Fix button alignment * Add training partners * Simplify css * Apply suggestions from review Co-Authored-By: Zach Corleissen <zacharysarah@users.noreply.github.com> * Fix landscape + text block widths Co-authored-by: Zach Corleissen <zacharysarah@users.noreply.github.com>
2020-03-04 11:01:48 -08:00
parent 2f2c924292
commit 67c0fb987e
8 changed files with 225 additions and 8 deletions
@@ -0,0 +1,105 @@
+#hero {
+  text-align: left;
+  padding-bottom: 20px;
+}
+
+.section {
+  clear: both;
+  padding: 0px;
+  margin-bottom: 2em;
+}
+
+.col {
+  display: block;
+  float:left;
+  margin: 1% 0 1% 1.6%;
+  background-color: #f9f9f9;
+}
+.col:first-child { margin-left: 0; }
+
+.col-container {
+  display: table; /* Make the container element behave like a table */
+  width: 100%; /* Set full-width to expand the whole page */
+  padding-bottom: 30px;
+}
+
+.col-nav {
+  display: table-cell; /* Make elements inside the container behave like table cells */
+  width: 18%;
+  background-color: #f9f9f9;
+  padding: 20px;
+  border: 5px solid white;
+}
+
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+  .col { margin: 1% 0 1% 0%;}
+}
+
+@media only screen and (max-width: 650px) {
+  .col-nav {
+    display: block;
+    width: 100%;
+  }
+}
+
+.button{
+  max-width: 100%;
+  box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
+  margin: 1em 0;
+  display: inline-block;
+  border-radius: 6px;
+  padding: 0 20px;
+  line-height: 40px;
+  color: #ffffff;
+  font-size: 16px;
+  background-color: #3371e3;
+  text-decoration: none;
+}
+
+h5 {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5em;
+  margin-bottom: 2em;
+}
+
+.white-text {
+  color: #fff;
+}
+
+.padded {
+  padding-top: 100px;
+  padding-bottom: 100px;
+}
+
+.blue-bg {
+  background-color: #3371e3;
+}
+
+.lighter-gray-bg {
+  background-color: #f4f4f4;
+}
+
+.two-thirds-centered {
+  width: 66%;
+  max-width: 950px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.landscape-section {
+  margin-left: auto;
+  margin-right: auto;
+  width: 1200px;
+}
+
+#landscape {
+  opacity: 1;
+  visibility: visible;
+  overflow: hidden;
+  width: 1200px;
+}