Skip to content
Snippets Groups Projects
Commit 75f3d657 authored by Oliver Schneider's avatar Oliver Schneider
Browse files

Cards on Mainpage

parent addd36f4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/css/cards.css 0 → 100644
+ 60
− 0
View file @ 75f3d657
.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
public/bs/css/logo-nav.css → public/css/logo-nav.css
+ 1
− 1
View file @ 75f3d657
......@@ -22,6 +22,6 @@ body {
}
.navbar-fixed-top .navbar-brand {
padding: 0px 0;
padding: 20px 0;
}
}
\ No newline at end of file
public/index.html
+ 66
− 3
View file @ 75f3d657
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment