CSS help

Im trying to make sales cards but for some reason the button goes out of it. I want to get the effect which is shown below;

my code
HTML

Code:

  <div class="package2">
<p>ADVANCED PACKAGE</p>
<div class="orange">
<h2 class='dollar'>$30</h2></div>
<p>Nullam suscipit vitae</p>
<p>Etiam faucibus</p>
<p>Vivamus viverra</p>
<a href="#" class="buttons5">PURCHASE</a>
</div>
</div>

CSS

Code:

.package2 {
  background-color: #f9f9f9;
  border: 1px solid #d7d7cf;
  width: 100%;
    height: 100%;
    margin-left: 20px;

    
 
}

.orange {
  background-color: #fd7c00;


}

.buttons5 {
  background-color: #fd7c00;
  text-decoration: none;
  color: #fff;
    padding: 5% 20%;
    
}

Code:

<!doctype HTML>
<html>
<head>
<style>
.package {
	color: red;
	width: 400px;
	font-size: 20px;
}

.package > h1 {
	margin-top: 1px;
	margin-bottom: 1px;
	text-align: center;
	color: grey;
}

.package > p {
	margin-top: 1px;
	margin-bottom: 1px;
	text-align: center;
	color:blue;
	color: grey;
}

.package > h2 {
	margin-top: 1px;
	margin-bottom: 1px;
	padding-left: 10px;
	text-align: center;
	color: white;
	font-size: 60px;
	background-color: green;
}

.package > div {
	padding-top: 10px;
	text-align: center;
	display: flex;
	justify-content: center;
}

.package > div > a {
	text-align: center;
	text-decoration: none;
	background-color:green;
	color: white;
	padding: 15px;
}
</style>
</head>
<body>
<div class="package">
	<h1>BASIC PACKAGE</h1>
	<h2>20$</h2>
	<p>Nullam suscipit vitae</p>
	<p>Etiam faucibus</p>
	<p>Vivamus viverra</p>
	<div>
		<a href="#">PURCHASE</a>
	</div>
</div>
</body>
</html>

Thank you!

CSS help

Post a Reply

Similar Threads

Tags for this Thread