A Pen by michelle currier

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  michelle currier</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="slider_container">
			<a href="#testimonials">
				<div class="bulb_content">
					<div class="bulb"></div>
					<h5>Users Love Us!</h5>
					<h6>What they are saying</h6>
				</div>
			</a>
				<div id="slider" class="slider">
					<h1>WHAT MAKES US DIFFERENT?</h1>
					<div class="control_next"></div>
					<ul>
						<li>
							<div class="shape_container">
							<div class="slider_content">
								
								<h3>SCALABLE &amp; RELIABLE</h3>
								<p>We provide precise tracking and reporting functionality for 
attribution and performance marketing. We offer close to 100 different flexible and scalable features within HitPath. Coupled with unparalleled customer support, it is no wonder we are considered the most feature-rich platform on the market.</p>
							</div>
							</div>
						</li>
						<li>
							<div class="shape_container">  
							<div class="slider_content">
								
								<h3>PERSONALIZED SERVICE</h3>
								<p>It’s not just traking software, we go out of our way to partner with you so that we are better able to help you navigate through the ever changing landscape of digital marketing. It’s about the little things like managing your DNS and IPs for you, and ensuring consistent up time when it’s time for renewal. </p>
							</div>
							</div>
						</li>
						<li>
							<div class="shape_container">
							<div class="slider_content"> 
								
								<h3>WE LISTEN AND GROW WITH YOU</h3>
								<p>At the heart of the HitPath Tracking Software is its ability to change and move with the times. The feedback and insight of our clients is what has helped make HitPath an invaluable tracking resource. </p>
							</div>
							</div>
						</li>
						<li>
							<div class="shape_container">
							<div class="slider_content">
								
								<h3>HISTORY IN THE MAKING</h3>
								<p>We paved the way for cookieless tracking. Our Pixel and HitID based tracking methods have been the basis of our fool-proof reporting since their invention in 2005. </p>
							</div>
							</div>
						</li> 
					</ul>	
				</div>
		
		</div><!-- end slider container -->
<div> this is some other shit</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mush_el/a-pen-by-michelle-currier-PwEaMx */
/* slider for story */
.slider_container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  height: auto;
}
#slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: inline-block;
}
#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: auto;
  list-style: none;
}
#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: auto;
  height: 280px;
}
div.control_next {
  position: absolute;
  top: 22%;
  z-index: 999;
  display: block;
  padding: 0px ;
  text-decoration: none;
  background: url('../images/lp_1_sprite.png') no-repeat;
  width: 26px;
  height: 56px;
  cursor: pointer;
  background-position: -454px -44px;
}
div.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}
div.control_next {
  right: 0;
}
.slider_content {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin: auto;
  padding: 0px 20px;
}
.bulb_content {
  width: 240px;
  padding-left: 45px;
  display: inline-block;
  vertical-align: top;
}
.bulb {
  background: url('http://www.hitpath.com/images/lp_1_sprite.png') no-repeat;
  width: 160px;
  height: 153px;
  background-position: -539px -34px;
}
#slider h1 {
  font-size: 44px;
  color: #DC5B26;
  margin: -10px 0px 10px 0px;
  font-family: 'CenturyGothicBold';
}
.shape_container h3 {
  color: #0D72B9;
  font-size: 27px;
  margin: 0px;
  font-family: 'CenturyGothicBold';
}
.shape_container h4 {
  color: #000;
  font-size: 22px;
  margin: 0px 0px 4px 0px;
  font-family: 'CenturyGothicBold';
}
.bulb_content h5 {
  font-size: 24px;
  color: #0D72B9;
  margin: 0px;
}
.bulb_content h6 {
  font-size: 18px;
  color: #0D72B9;
  margin: 0px;
}
.shape_container p {
  color: #000;
  font-size: 21px;
  line-height: 26px;
  margin: 0px;
  width: 75%;
  font-family: 'CenturyGothicBold';
}

Comments