Jump to content

How can I make it's position fixed ?


m.s_shohan

Recommended Posts

Hi, here is a code. I want to make the .characteristics-quote to stay fixed when scrolling to the .characteristics-wrapper. But When the characteristics-wrapper class scrolling is finished the .characteristics-quote should be vanished. Can you please tell me how I can fix this ? Thank you in advance.

<!DOCTYPE html>
<html lang= "en-us">
	<head>
		<meta charset= "utf-8"/>
		<title>About</title>
		<link rel= "stylesheet" type= "text/css" href= "font-awesome-4.7.0/css/font-awesome.min.css"/>
		<style type= "text/css">
			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;
			}
			.characteristics-wrapper {
				max-width: 100%;
				padding: 10px;
				margin-bottom: 200px;
				border: 1px solid white;
				overflow: hidden;
			}
			.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: 3s;
				-moz-animation-name: right;
				-moz-animation-duration: 3s;
				-ms-animation-name: rightt;
				-ms-animation-duration: 3s;
				-o-animation-name: right;
				-o-animation-duration: 3s;
				animation-name: right;
				animation-duration: 3s;
			}
			.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;}
			}
		</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 item2">
				<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>
		<div style= "height: 700px"></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
×
×
  • Create New...