I'm currently developing a landing page for my personal use, but I've encountered an issue. There is a div with a border-radius named .popOut. The border-radius is applied to the bottom of the div but not the header part. Why is this happening? How can I rectify this issue? Additionally, I'm looking to make the box-shadow lighter and less dark. Any suggestions on how to achieve this would be greatly appreciated. Thank you!
Code:
HTML:
*{margin:0; padding:0;}
body{
background: #CCC;
color:#000305;
font-size: 87.5%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
.body{
margin: 0 auto;
width: 70%;
background:#ebebeb;
margin:auto;
}
.mainBack{
margin:auto;
background:white;
width:600px;
height:650px;
}
.popOut{
background:white;
width:80%;
height:600px;
margin:auto;
box-shadow:0px 0px 15px 0px;
border-radius:6px;
position:relative;
top:30px;
}
.mainHeader{
background:linear-gradient(#465BF6,#3149F2);
width:100%;
height:100px;
}<html>
<head>
<meta charset="UTF-8">
<title>
Welcome!
</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="script.js">
</script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body class="body">
<div class="mainBack">
<div class="popOut">
<div class="mainHeader"></div>
<div class="mainArea"></div>
<div class="mainAreaB"></div>
<div class="mainFooter"></div>
</div>
</div>
</body>
</html>