Skip to content
Snippets Groups Projects
Commit 0bf8abd8 authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

background bubbles fixed

parent 0cefabfd
No related branches found
No related tags found
1 merge request!1Adding css
......@@ -4,6 +4,7 @@
:root {
--primary: #AC42FF;
--secondary: #F15154;
--accent: #7DEFFF;
--linear-gradient: linear-gradient(to bottom, var(--secondary), var(--primary));
--radial-gradient: radial-gradient(100% 115% at 0% 0%, var(--primary) 0%, var(--secondary) 100%);
--weight-light: 300;
......@@ -19,7 +20,7 @@ html {
}
.content-container {
max-width: 1100px;
max-width: 1280px;
width: 100%;
margin: 0 auto;
padding: 20px;
......@@ -27,21 +28,18 @@ html {
body {
font-family: 'Poppins', sans-serif;
background-image: url('../img/background.svg');
background-size: 400vw;
background-position: center;
background-color: #f9f9f9;
background-repeat: repeat;
background-attachment: fixed;
position: relative;
color: var(--body-color);
background: linear-gradient(to left, #F9F9F9 0%, #FBFBFB 100%);
}
.page-container {
width: 100%;
max-width: 1240px;
max-width: 1440px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(30px);
}
h1 {
......@@ -262,6 +260,7 @@ h4 {
flex-direction: column;
align-items: center;
}
.contact-section .contact-fields {
flex-direction: row;
flex-wrap: wrap;
......@@ -474,4 +473,59 @@ nav a {
.hero-section .hero-container {
height: calc(100vh - 100px);
}
}
.background-container {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
overflow: hidden;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(15%, -20%) scale(1.2);
}
100% {
transform: translate(0, 0);
}
}
.background-container .bubble {
width: 250px;
height: 250px;
position: absolute;
filter: blur(100px);
opacity: 0.5;
animation: move 10s ease infinite;
}
@media screen and (min-width: 1280px) {
.background-container .bubble {
width: 500px;
height: 500px;
filter: blur(200px);
opacity: 0.75;
}
}
.bubble.secondary {
background: var(--secondary);
}
.bubble.primary {
background: var(--primary);
}
.bubble.accent {
background: var(--accent);
}
\ No newline at end of file
......@@ -190,6 +190,13 @@
</div>
</footer>
</div>
<div class="background-container">
<div class="bubble secondary" style="top: 0; right: 0;"></div>
<div class="bubble primary" style="top: 20%; left: 0;"></div>
<div class="bubble accent" style="top: 40%; right: 0;"></div>
<div class="bubble secondary" style="top: 70%; right: 40%;"></div>
<div class="bubble primary" style="top: 50%; left: 10;"></div>
</div>
</body>
</html>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment