Index: includes/index/style.html |
=================================================================== |
--- a/includes/index/style.html |
+++ b/includes/index/style.html |
@@ -69,9 +69,66 @@ |
@media (min-width: 930px) |
{ |
#media small |
{ |
display: none; |
} |
} |
+/* |
+ * Hero section |
+ */ |
+ |
+#hero > div |
+{ |
+ position: relative; |
+ padding: 0; |
+} |
+ |
+#hero img |
+{ |
+ display: block; |
+ width: 100%; |
+} |
+ |
+#hero h1 |
+{ |
+ position: absolute; |
+ right: 0; |
+ bottom: 0; |
+ width: 100%; |
+ padding: 10px; |
+ background-color: #fff; |
+ text-transform: uppercase; |
+ font-size: 18px; |
+ font-weight: 300; |
+ box-sizing: border-box; |
+} |
+ |
+@media (min-width: 350px) |
+{ |
+ #hero h1 |
+ { |
+ width: 80%; |
+ } |
+} |
+ |
+@media (min-width: 450px) |
+{ |
+ #hero h1 |
+ { |
+ width: 60%; |
+ font-size: 20px; |
+ } |
+} |
+ |
+@media (min-width: 800px) |
+{ |
+ #hero h1 |
+ { |
+ padding: 15px; |
+ width: 39%; |
+ font-size: 22px; |
+ } |
+} |
+ |
</style> |