Struggling to create a banner with a radial gradient background? I'm almost there, but my code isn't matching the design. Any assistance would be greatly appreciated as I can't seem to get the right colors and only part of the first circle is displaying.
This is the design I'm trying to achieve: View image here
Below is the link to my CodePen:
https://codepen.io/aneelk/pen/JjaeNqO
<template>
<div id="app">
<div class= "header3">
<div class = "header-circles"></div>
<p class="welcome-to-your-dash2">Welcome to your dashboard</p>
<p class="left-text2">SCHOOL SMART GOALS : <span class='color-green'> 183 </span> SET <span class='color-green'> 96</span> ARCHIVED</p>
</div>
</div>
</template>
<script>
export default {
data() {
},
methods: {
}
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.color-green{
height: 24px;
width: 61px;
color: #37B729;
font-family: ".SF NS Display";
font-size: 21px;
letter-spacing: 0;
line-height: 24px;
}
.header3 {
height : 200px;
width: 100%;
background-color: #032D36;
overflow:hidden;
position: relative;
}
.welcome-to-your-dash2 {
color: #FFFFFF;
font-family: "Open Sans";
font-size: 24px;
letter-spacing: 0;
margin-top: 10%;
margin-left: 10%;
z-index: 5;
position: absolute;
}
.left-text2 {
color: #FFFFFF;
font-family: ".SF NS Display";
font-size: 12px;
color: #FFFFFF;
margin-top: 10%;
margin-right: 10%;
position: absolute;
z-index: 5;
right: 0;
}
.header-circles {
width:100%;
height: 100%;
background-image: radial-gradient(circle at -25% 50%,#fff 0%, #0D414D 0%, #0C5D70 0.1%, transparent),radial-gradient(circle at 60% 10%, #0C5D70 20%, #0D414D 5%, transparent), radial-gradient(circle at 10% 10%, #0C5D70 9%, #0D414D 1%, transparent) ;
opacity:50%;
position: absolute;
z-index: 0;
}
</style>
As someone new to CSS gradients and still learning, any guidance on how to improve my design would be invaluable. I've outlined my issues and current progress in the description above. View image here