From 75f3d6579d04cd881fba70189fb3bfa0990e1122 Mon Sep 17 00:00:00 2001
From: Oliver Schneider <oli@student.ethz.ch>
Date: Thu, 7 Apr 2016 15:30:59 +0200
Subject: [PATCH] Cards on Mainpage
---
public/css/cards.css | 60 +++++++++++++++++++++++++++
public/{bs => }/css/logo-nav.css | 2 +-
public/index.html | 69 ++++++++++++++++++++++++++++++--
3 files changed, 127 insertions(+), 4 deletions(-)
create mode 100644 public/css/cards.css
rename public/{bs => }/css/logo-nav.css (96%)
diff --git a/public/css/cards.css b/public/css/cards.css
new file mode 100644
index 0000000..f258e38
--- /dev/null
+++ b/public/css/cards.css
@@ -0,0 +1,60 @@
+.card {
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.card {
+ margin-top: 10px;
+ box-sizing: border-box;
+ border-radius: 2px;
+ background-clip: padding-box;
+}
+.card span.card-title {
+ color: #fff;
+ font-size: 24px;
+ font-weight: 300;
+ text-transform: uppercase;
+}
+
+.card .card-image {
+ position: relative;
+ overflow: hidden;
+}
+.card .card-image img {
+ border-radius: 2px 2px 0 0;
+ background-clip: padding-box;
+ position: relative;
+ z-index: -1;
+}
+.card .card-image span.card-title {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ padding: 16px;
+}
+.card .card-content {
+ padding: 16px;
+ border-radius: 0 0 2px 2px;
+ background-clip: padding-box;
+ box-sizing: border-box;
+}
+.card .card-content p {
+ margin: 0;
+ color: inherit;
+}
+.card .card-content span.card-title {
+ line-height: 48px;
+}
+.card .card-action {
+ border-top: 1px solid rgba(160, 160, 160, 0.2);
+ padding: 16px;
+}
+.card .card-action a {
+ color: #ffab40;
+ margin-right: 16px;
+ transition: color 0.3s ease;
+ text-transform: uppercase;
+}
+.card .card-action a:hover {
+ color: #ffd8a6;
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/public/bs/css/logo-nav.css b/public/css/logo-nav.css
similarity index 96%
rename from public/bs/css/logo-nav.css
rename to public/css/logo-nav.css
index 6048e39..99c822c 100644
--- a/public/bs/css/logo-nav.css
+++ b/public/css/logo-nav.css
@@ -22,6 +22,6 @@ body {
}
.navbar-fixed-top .navbar-brand {
- padding: 0px 0;
+ padding: 20px 0;
}
}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 7e87e7f..ebbcfef 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,10 +7,12 @@
<title>AMIV</title>
<link href="bs/css/bootstrap.min.css" rel="stylesheet">
- <link href="bs/css/logo-nav.css" rel="stylesheet">
+ <link href="css/logo-nav.css" rel="stylesheet">
+ <link href="css/cards.css" rel="stylesheet">
</head>
+
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
@@ -24,7 +26,7 @@
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
- <img src="https://www.amiv.ethz.ch/sites/all/themes/amiv15/logo.png" alt="AMIV">
+ <img src="https://www.amiv.ethz.ch/sites/all/themes/amiv15/logo.png" alt="AMIV" height="80%">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
@@ -59,11 +61,72 @@
</nav>
<!-- Page Content -->
- <div class="container">
+ <div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Fluid Containers full of Events floating around</h1>
<p>Note: AMIV is awesome</p>
+
+ <!-- A Card -->
+ <div class="col-xs-12 col-md-6">
+ <div class="card">
+ <div class="card-image">
+ <img class="img-responsive" src="http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png">
+ <span class="card-title">Jarcakebakery @ FoodLab</span>
+ </div>
+
+ <div class="card-content">
+ <p>This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself. </p>
+ </div>
+
+ <div class="card-action">
+ <a href="#" target="new_blank">Zum Event</a>
+ <a href="#" target="new_blank">Anmeldung</a>
+ <a href="#" target="new_blank">Im kalender speichern</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-xs-6 col-md-4">
+ <div class="card">
+ <div class="card-image">
+ <img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
+ <span class="card-title">Eishockey mit OpenSystems</span>
+ </div>
+
+ <div class="card-content">
+ <p>The Playoffs have begun. ANo tooth will stay at its place! </p>
+ </div>
+
+ <div class="card-action">
+ <a href="#" target="new_blank">Zum Event</a>
+ <a href="#" target="new_blank">Anmeldung</a>
+ <a href="#" target="new_blank">Im kalender speichern</a>
+ <a href="#" target="new_blank">OpenSystems</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-xs-6 col-md-4">
+ <div class="card">
+ <div class="card-image">
+ <img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
+ <span class="card-title">Eishockey mit OpenSystems</span>
+ </div>
+
+ <div class="card-content">
+ <p>The Playoffs have begun. ANo tooth will stay at its place! </p>
+ </div>
+
+ <div class="card-action">
+ <a href="#" target="new_blank">Zum Event</a>
+ <a href="#" target="new_blank">Anmeldung</a>
+ <a href="#" target="new_blank">Im Kalender speichern</a>
+ <a href="#" target="new_blank">OpenSystems</a>
+ </div>
+ </div>
+ </div>
+
</div>
</div>
</div>
--
GitLab