Here is the html markup and css I was expecting two circle using div tag on that page
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="outer-box">
<div class="inner-box">
<header class="signup_header">
<h1>Signup!!!</h1>
<p>It will only takes 30 seconds</p>
</header>
<main class="signup_body">
<form action="#">
<p>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" placeholder="ABC">
</p>
<p>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" placeholder="XYZ">
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="ABC.XYZ@anything.com">
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" placeholder="at least 8 characters" required>
</p>
<p>
<input type="submit" id="submit" value="create account">
</p>
</form>
</main>
<footer class="signup_footer">
<p>
Already have an account?
<a href="#login">login</a>
</p>
</footer>
</div>
<div class="circle c1"></div>
<div class="circle c1"></div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
.outer-box{
width: 100vw;
height: 100vh;
background: linear-gradient(to top left,rgb(49, 220, 166),rgb(165, 195, 236));
}
.inner-box{
width: 400px;
margin: 0 auto;
position: relative;
top: 40%;
transform: translateY(-50%);
padding: 20px 40px;
background-color: white;
border-radius: 20px;
box-shadow: 2px 2px 5px #2773a5;
z-index: 2;
}
.signup_header h1{
font-size: 2.5rem;
color: black;
}
.signup_header p{
font-size:0.8rem;
color: #555;
margin-top:5px;
}
.signup_body{
margin:20px 0;
}
.signup_body p{
margin:10px 0;
}
.signup_body p label{
display: block;
font-weight: bold;
}
.signup_body p input{
width: 100%;
padding: 1px;
border: 1px solid black;
border-radius: 4px;
font-size: 1rem;
/* margin-top: 4px; */
}
.signup_body p input[type="submit"]{
background-color: #3498db;
color: #ffffff;
padding-bottom: 5px;
cursor: pointer;
border:none;
}
.signup_body p input[type="submit"]:hover{
background-color: #23628c;
}
.signup_footer p {
color: #555;
text-align: center;
}
.signup_footer p a{
color:#1c0ee3;
}
.circle{
width: 200px;
height: 200px;
border-radius: 100px;
background: linear-gradient(to top right #ffffffaa,#ffffffff);
position: absolute;
}
.c1 {
top: 100px;
left: 30%;
}
.c2 {
bottom: 200px;
right: 40%;
}
I have tried many different way to both "circle div", but can't do it properly... For your reference here is the page link, that i was saying about signup page I was expecting Two circle on that page using div tag
As @Harrison said, you have a typo in your background property: hex codes are 6 digits, and you need a comma after "to top right". You also have two .c1 elements instead of one .c1 and one .c2 element. If you make these changes the two circles appear
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
.outer-box{
width: 100vw;
height: 100vh;
background: linear-gradient(to top left,rgb(49, 220, 166),rgb(165, 195, 236));
}
.inner-box{
width: 400px;
margin: 0 auto;
position: relative;
top: 40%;
transform: translateY(-50%);
padding: 20px 40px;
background-color: white;
border-radius: 20px;
box-shadow: 2px 2px 5px #2773a5;
z-index: 2;
}
.signup_header h1{
font-size: 2.5rem;
color: black;
}
.signup_header p{
font-size:0.8rem;
color: #555;
margin-top:5px;
}
.signup_body{
margin:20px 0;
}
.signup_body p{
margin:10px 0;
}
.signup_body p label{
display: block;
font-weight: bold;
}
.signup_body p input{
width: 100%;
padding: 1px;
border: 1px solid black;
border-radius: 4px;
font-size: 1rem;
/* margin-top: 4px; */
}
.signup_body p input[type="submit"]{
background-color: #3498db;
color: #ffffff;
padding-bottom: 5px;
cursor: pointer;
border:none;
}
.signup_body p input[type="submit"]:hover{
background-color: #23628c;
}
.signup_footer p {
color: #555;
text-align: center;
}
.signup_footer p a{
color:#1c0ee3;
}
.circle{
width: 200px;
height: 200px;
border-radius: 100px;
background: linear-gradient(to top right, #ffffaa,#ffffff);
position: absolute;
}
.c1 {
top: 100px;
left: 30%;
}
.c2 {
bottom: 200px;
right: 40%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="outer-box">
<div class="inner-box">
<header class="signup_header">
<h1>Signup!!!</h1>
<p>It will only takes 30 seconds</p>
</header>
<main class="signup_body">
<form action="#">
<p>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" placeholder="ABC">
</p>
<p>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" placeholder="XYZ">
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="ABC.XYZ@anything.com">
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" placeholder="at least 8 characters" required>
</p>
<p>
<input type="submit" id="submit" value="create account">
</p>
</form>
</main>
<footer class="signup_footer">
<p>
Already have an account?
<a href="#login">login</a>
</p>
</footer>
</div>
<div class="circle c1"></div>
<div class="circle c2"></div>
</div>
</body>
</html>