diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..bd4a846 --- /dev/null +++ b/css/style.css @@ -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); + } +} \ No newline at end of file diff --git a/images/bg1.jpg b/images/bg1.jpg new file mode 100644 index 0000000..6a332b3 Binary files /dev/null and b/images/bg1.jpg differ diff --git a/index.html b/index.html index fc27686..bfad519 100644 --- a/index.html +++ b/index.html @@ -9,24 +9,33 @@ + + - + Nothing to see here. -
- +
+
+

TEST

-
+
-
- Featured + Card image cap +
+
Web-Ocean
+

Ein Typescript-Port des Ocean C++ Projekts. Herausfordernd ist die Begrenzung von OpenGL auf webgl wodurch keine compute Shader zur Verfügung stehen.

+ + + +
diff --git a/style.css b/style.css deleted file mode 100644 index 5c6365c..0000000 --- a/style.css +++ /dev/null @@ -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; -} \ No newline at end of file