HTML & CSS Practice

/*Downloaded from https://www.codeseek.co/13lank-null/html-andamp-css-practice-vEPMLQ */
body {
	background: #FFFADD;
}
#wrapper{
	position: relative;
}

/* circles */
#circle {
  margin: 20% auto;
	width: 50%;
	padding-bottom: 50%;
	height: 0;
	background-color: #FE722E;
	border-radius: 50%;
	border: 5px solid #4A0437;
}
#circle::before {
  content: '';
	display: block;
	position: relative;
	width: 88%;
	height: 0;
	padding-bottom: 88%;
	border-radius: 50%;
	margin: 6% auto;
	background: radial-gradient(circle, transparent 20%, #FF935A 69.5%, #FCD42A 2%);
	-webkit-filter: blur(4.5px);
}
#circle::after {
  content: '';
	display: block;
	position: relative;
	width: 20%;
	height: 0;
	padding-bottom: 20%;
	border-radius: 50%;
	background-color: #FCD42A;
	border: 5px solid #4A0437;
	margin: -82% 15%;
}
.in-circle {
  position: absolute;
  width: 5%;
	height: 0;
	padding-bottom: 5%;
	border: 4px dotted #4A0437;
	border-radius: 50%;
	left: 35%;
	top: 24%;
}

/* line */
.ln1 {
  display: box;
  position: absolute;
  width: 42%;
	height: 20%;
	border-top: 5.5px solid #4A0437;
	top: 19.3%;
	left: 39.9%;
	border-radius: 0 3px 3px;
}
.ln1:after {
  content: '';
  position: absolute;
  width: 100%;
	border: 3px solid #4A0437;
	top: 40%;
	left: 8%;
	border-radius: 5px 20px 20px;
}
.ln1:before {
  content: '';
  position: absolute;
  width: 65%;
	border-top-width: 3px;
	border-top-style: solid;
  border-image: -webkit-linear-gradient(left,rgba(44,2,53,1),rgba(74,4,55,1),rgba(74,4,55,.3),rgba(252, 214, 44, .1),rgba(0, 0, 0, 0))20% round;
	top: 14%;
	left: 6%;
	border-radius: 5px 20px 20px;
}
.ln2 {
  display: box;
  position: absolute;
  width: 33%;
	height: 20%;
	border-top: 5.5px solid #4A0437;
	top: 30%;
	left: 0;
	border-radius: 5px 3px 3px;
}
.ln2:after {
  content: '';
  position: absolute;
  width: 100%;
	border: 3px solid #4A0437;
	top: 38%;
	left:8%;
	border-radius: 20px 20px 20px;
}
.ln2:before {
  content: '';
  position: absolute;
  width: 30%;
	border-top-width: 3px;
	border-top-style: solid;
  border-image: -webkit-linear-gradient(right,rgba(44,2,53,1),rgba(74,4,55,.5),rgba(254,114,46,.2), rgba(254,114,46,0))20% round;
	top: 14%;
	left: 69.5%;
	border-radius: 20px 20px 20px;
}
.ln3 {
  display: box;
  position: absolute;
  width: 60%;
	height: 20%;
	border-top: 5.5px solid #4A0437;
	top: 70%;
	left: 20%;
	border-radius: 5px 3px 3px;
	z-index: 3;
}
.ln3:after {
  content: '';
  position: absolute;
  width: 30%;
		border-top-width: 3px;
	border-top-style: solid;
  border-image: -webkit-linear-gradient(right,rgba(44,2,53,1),rgba(74,4,55,1),rgba(74,4,55,.3),rgba(252, 214, 44, .2),rgba(252, 214, 44, 0))20% round;
	top: 40%;
	left: 25%;
	border-radius: 20px 20px 20px;
}
.ln3:before {
  content: '';
  position: absolute;
  width: 30%;
	border-top-width: 3px;
	border-top-style: solid;
  border-image: -webkit-linear-gradient(left,rgba(44,2,53,1),rgba(74,4,55,1),rgba(74,4,55,.3),rgba(252, 214, 44, .2),rgba(252, 214, 44, 0))20% round;
	top: 14%;
	left: 47%;
	border-radius: 20%;
}
.ln4 {
  width: 40%;
  position: absolute;
	border: 3px solid #4A0437;
	border-radius: 36px;
	top: 85%;
	left: 58%;
} 

/* triangle */
.tr1 {
  position: absolute;
	width: 16%;
	height: 0;    
	padding-left:16%;
	padding-bottom: 16%;
	overflow: hidden;
	top: 39%;
	left: 39.5%;
	z-index: 1;
}
.tr1:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left:-400px;
	border-left: 400px solid transparent;
	border-right: 400px solid transparent;
	border-bottom: 500px solid #4A0437;
}
.in-tr1 {
  position: absolute;
	width: 15%;
	height: 0;    
	padding-left:15%;
	padding-bottom: 14%;
	overflow: hidden;
	top: 43%;
	left: 40.5%;
	z-index: 1;
}
.in-tr1:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left:-400px;
	border-left: 400px solid transparent;
	border-right: 400px solid transparent;
	border-bottom: 500px solid #FF9772;
}
.tr2 {
  position: absolute;
	width: 10%;
	height: 0;    
	padding-left:10%;
	padding-bottom: 10%;
	overflow: hidden;
	top: 51%;
	left: 33%;
}
.tr2:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left:-400px;
	border-left: 400px solid transparent;
	border-right: 400px solid transparent;
	border-bottom: 500px solid #4A0437;
}
.in-tr2 {
  position: absolute;
	width: 8%;
	height: 0;    
	padding-left:8%;
	padding-bottom: 8%;
	overflow: hidden;
	top: 55%;
	left: 35%;
	z-index: 0;
}
.in-tr2:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left:-400px;
	border-left: 400px solid transparent;
	border-right: 400px solid transparent;
	border-bottom: 500px solid #FF9772;
}

/* Dots */
ul {
	position: absolute;
	transform: rotate(-40deg);
	top: 44%;
	left: 55%;
	z-index: 5;
	float: left;
}

/* Footer */
footer {
  margin: 0 auto;
  text-align: center;
	left: 50%;
	color: #FE722E;
}
a {
	color: #4A0437;
	text-decoration: none;
}