Jump to content
Sign in to follow this  
m.s_shohan

Having problem with using css in div

Recommended Posts

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...