Add header picture and test card

This commit is contained in:
Julian
2020-01-17 00:47:52 +01:00
parent 4634f07a3b
commit 8c841a74c0
4 changed files with 68 additions and 23 deletions

View File

@@ -9,24 +9,33 @@
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- OWN CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Nothing to see here.</title>
</head>
<body>
<div class="container-fluid header">
<div class="container-fluid position-relative header">
<div class="blurred"></div>
<h4 class="position-absolute font-italic" style="bottom:5px;right:25px;">TEST</h4>
</div>
<div class="container-fluid p-5">
<div class="container-fluid p-2">
<div class="row row-cols-1 mx-auto">
<div class="col fixs">
<div class="card">
<div class="card-header">
Featured
<img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-light">Web-Ocean</h5>
<p class="card-text text-light">Ein Typescript-Port des Ocean C++ Projekts. Herausfordernd ist die Begrenzung von OpenGL auf webgl wodurch keine compute Shader zur Verfügung stehen.</p>
<i class="fa fa-2x fa-git-square"></i>
<i class="fa fa-2x fa-play text-success"></i>
<i class="fa fa-2x fa-pause text-warning"></i>
<i class="fa fa-2x fa-stop text-danger"></i>
</div>
</div>
</div>