Gulum/PageProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add header picture and test card

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

53
css/style.css Normal file
View File

@@ -0,0 +1,53 @@
body {
background-color: #051923;
min-width: 300px;
}
.card {
background-color: #006494;
margin-top: 5%;
}
.fixs {
-ms-flex: 0 0 400px;
flex: 0 0 400px;
}
.header {
background-image: url(../images/bg1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 500px;
overflow: hidden;
padding-left: 0px;
padding-right: 0px;
}
.blurred {
border-radius: 25px;
width: 350px;
height: 350px;
position: absolute;
left:10%;
top:10%;
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(5px);
-webkit-box-shadow: 9px 6px 29px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 9px 6px 29px -3px rgba(0,0,0,0.75);
box-shadow: 9px 6px 29px -3px rgba(0,0,0,0.75);
}
@media (max-width: 576px) {
.blurred {
border-radius: 25px;
width: 80%;
height: 350px;
position: absolute;
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(5px);
-webkit-box-shadow: 9px 6px 29px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 9px 6px 29px -3px rgba(0,0,0,0.75);
box-shadow: 9px 6px 29px -3px rgba(0,0,0,0.75);
}
}

BIN
images/bg1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

21
index.html
View File

@@ -9,24 +9,33 @@
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.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"> 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 --> <!-- 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> <title>Nothing to see here.</title>
</head> </head>
<body> <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>
<div class="container-fluid p-5"> <div class="container-fluid p-2">
<div class="row row-cols-1 mx-auto"> <div class="row row-cols-1 mx-auto">
<div class="col fixs"> <div class="col fixs">
<div class="card"> <div class="card">
<div class="card-header"> <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
Featured <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> </div>
</div> </div>

17
style.css
View File

@@ -1,17 +0,0 @@
body {
background-color: #333339;
}
.card {
margin-top: 5%;
}
.fixs {
-ms-flex: 0 0 400px;
flex: 0 0 400px;
}
.header {
background-color: #ffffff;
min-height: 300px;
}