Jump to content

Having problem with using css in div

m.s_shohan

By m.s_shohan
in CSS

 Share

Recommended Posts

m.s_shohan Newbie

m.s_shohan

Posted
Posted

Hi, here is a code. In this code, I want to give a border around the .characteristics-wrapper class but the border is only with 10px padding. it's not around that class. Please tell me where is the problem in my css or markup. 

<!DOCTYPE html>
<html>
	<head>
		<link rel= "stylesheet" type= "text/css" href= "font-awesome-4.7.0/css/font-awesome.min.css"/>
		<style>
			body {
				margin: 0;
				padding: 0;
				color: white;
				background-color: black;
				overflow: auto;
			}
			.about {
				max-width: 100%;
				height: 200px;
				background-color: black;
				color: white;
				text-align: center;
			    padding-left: 10%;
				padding-right: 10%;
				padding-top: 5px;
				margin: 0;
				position: relative;
			}
			.characteristics-wrapper {
				max-width: 100%;
				padding: 10px;
				margin-bottom: 200px;
				border: 1px solid white;
			}
			.characteristics-quote {
				max-width: 40%;
				float: left;
				transform: translateX(-5%);
				position: fixed;
				color: white;
			}
			.characteristics-quote h1 {
				max-width: 70%;
				text-align: center;
				margin: auto;
				padding-top: 100px;
			}
			.characteristics-container {
				max-width: 60%;
				float: right;
				text-align: center;
				position: relative;
			}
			.characteristics-item-row1, .characteristics-item-row2 {
				max-width: 50%;
			}
			.characteristics-item-row1 {
				padding-top: 50px;
			}
			.characteristics-item-row2 {
				position: absolute;
				top:50px;
				right: 0;
			}
			.characteristics-item {
				max-width: 80%;
				display: block;
				margin: auto;
				margin-bottom: 20px;
				margin-top: 20px;
			}
			.characteristics-icon {
				font-size: 60px;
				padding: 15px;
				border: 1px solid lightgrey;
				border-radius: 50%;
				height: 76px;
				width: 76px;
				margin: auto;
			}
			.characteristics-item:hover .characteristics-icon{
				background-color: white;
				color: black;
				-webkit-transition: 0.6s ease-in-out;
				-moz-transition: 0.6s ease-in-out;
				-ms-transition: 0.6s ease-in-out;
				-o-transition: 0.6s ease-in-out;
				transition: 0.6s ease-in-out;
			}
			/**Animations**/
			.left {
				-webkit-animation-name: left;
				-webkit-animation-duration: 1s;
				-moz-animation-name: left;
				-moz-animation-duration: 1s;
				-ms-animation-name: left;
				-ms-animation-duration: 1s;
				-o-animation-name: left;
				-o-animation-duration: 1s;
				animation-name: left;
				animation-duration: 1s;
			}
			.right {
				-webkit-animation-name: right;
				-webkit-animation-duration: 1s;
				-moz-animation-name: right;
				-moz-animation-duration: 1s;
				-ms-animation-name: right;
				-ms-animation-duration: 1s;
				-o-animation-name: right;
				-o-animation-duration: 1s;
				animation-name: right;
				animation-duration: 1s;
			}
			.scale {
				-webkit-animation-name: scale;
				-webkit-animation-duration: 2s;
				-moz-animation-name: fade;
				-moz-animation-duration: 2s;
				-ms-animation-name: scale;
				-ms-animation-duration: 2s;
				-o-animation-name: scale;
				-o-animation-duration: 2s;
				animation-name: scale;
				animation-duration: 2s;
			}
			.fade {
				-webkit-animation-name: fade;
				-webkit-animation-duration: 2s;
				-moz-animation-name: fade;
				-moz-animation-duration: 2s;
				-ms-animation-name: fade;
				-ms-animation-duration: 2s;
				-o-animation-name: fade;
				-o-animation-duration: 2s;
				animation-name: fade;
				animation-duration: 2s;
			}
			
			/**Animating from the left**/
			
			
			@-webkit-keyframes left {
				from {left: -500px;}
				to {left: 0;}
			}
			@-moz-keyframes left {
				from {left: -500px;}
				to {left: 0;}
			}
			@-ms-keyframes left {
				from {left: -500px;}
				to {left: 0;}
			}
			@-o-keyframes left {
				from {left: -500px;}
				to {left: 0;}
			}
			@keyframes left {
				from {left: -500px;}
				to {left: 0;}
			}
			
			
			/**Animating from the right**/
			
			
			@-webkit-keyframes right {
				from {right: -500px;}
				to {right: 0;}
			}
			@-moz-keyframes right {
				from {right: -500px;}
				to {right: 0;}
			}
			@-ms-keyframes right {
				from {right: -500px;}
				to {right: 0;}
			}
			@-o-keyframes right {
				from {right: -500px;}
				to {right: 0;}
			}
			@keyframes right {
				from {right: -500px;}
				to {right: 0;}
			}
			
			
			/**Animating scale**/
			
			
			@-webkit-keyframes scale {
				from {transform: scale(3);}
				to {transform: scale(1);}
			}@-moz-keyframes scale {
				from {transform: scale(3);}
				to {transform: scale(1);}
			}@-ms-keyframes scale {
				from {transform: scale(3);}
				to {transform: scale(1);}
			}@-o-keyframes scale {
				from {transform: scale(3);}
				to {transform: scale(1);}
			}
			@keyframes scale {
				from {transform: scale(3);}
				to {transform: scale(1);}
			}
			/**Fading animation**/
			@-webkit-keyframes fade {
				from {opacity: 0;}
				to {opacity: 1;}
			}
			@-moz-keyframes fade {
				from {opacity: 0;}
				to {opacity: 1;}
			}
			@-ms-keyframes fade {
				from {opacity: 0;}
				to {opacity: 1;}
			}
			@-o-keyframes fade {
				from {opacity: 0;}
				to {opacity: 1;}
			}
			@keyframes fade {
				from {opacity: 0;}
				to {opacity: 1;}
			}
			.cont {
				padding: 400px;
			}
		</style>
	</head>
	<body>
		<div class= "about">
				<h1>Who we are?</h1>
				<div class= "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan. Pellentesque commodo, enim nec faucibus tristique, risus nibh ullamcorper velit, sed egestas urna erat sit amet justo.</div>
		</div>
		<div class= "characteristics-wrapper">
			<div class= "characteristics-quote">
				<h1>Main characteristics of our services</h1>
			</div>
			<div class= "characteristics-container">
				<div class= "characteristics-item-row1">
			<div class= "characteristics-item">
				<div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div>
				<div class= "characteristics-title">Innovative</div>
				<div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div>
			</div>
			<div class= "characteristics-item">
				<div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div>
				<div class= "characteristics-title">Great Features</div>
				<div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div>
			</div>
			<div class= "characteristics-item">
				<div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div>
				<div class= "characteristics-title">Unique Design</div>
				<div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div>
			</div>
			<div class= "characteristics-item">
				<div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div>
				<div class= "characteristics-title">Well Documented</div>
				<div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div>
			</div>
				</div>
				<div class= "characteristics-item-row2">
					<div class= "characteristics-item">
				<div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div>
				<div class= "characteristics-title">Innovative</div>
				<div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div>
			</div>
			<div class= "characteristics-item">
				<div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div>
				<div class= "characteristics-title">Great Features</div>
				<div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div>
			</div>
			<div class= "characteristics-item">
				<div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div>
				<div class= "characteristics-title">Unique Design</div>
				<div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div>
			</div>
			<div class= "characteristics-item">
				<div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div>
				<div class= "characteristics-title">Well Documented</div>
				<div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div>
			</div>
				</div>
			</div>
		</div>
	</body>
</html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...