css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <nav>
 <div class="navContainer">
  <div class="logo">
   <span class="black">IT</span><strong>Forward</strong>
   <div class="logoSymbol">
    <span style="color: black; padding-left: 3px; font-size: 50pt;">&raquo;</span>
   </div>
  </div>

  <ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#program">Program</a></li>
   <li><a href="#services">Services</a></li>
   <li><a href="#volunteer">Volunteer</a></li>
   <li><a href="#donate">Donate</a></li>
  </ul>
 </div>
</nav>

<section id="home">
 <h1>About</h1>
 <p>IT<span style="color: rgba(0,150,255,1); font-weight: 600;">Forward</span>, a Computer Mentors program, offers three pillars of technology opportunity to the Tampa area:</p>

<i class="fa fa-certificate fa-3x" aria-hidden="true"></i><p>Entry level technology skills, experience, and certification as it relates to computer repair and maintenance.</p>

 <i class="fa fa-laptop fa-3x" aria-hidden="true"></i><p>Computer ownership based on a sliding scale to provide equal opportunities for low income families.</p>

<i class="fa fa-wrench fa-3x" aria-hidden="true"></i><p>Affordable computer repair that provides our techs-in-training with necessary and valuable experience required for entry-level IT careers.</p>
</section>

<header></header>


<section id="program">
 <h1>Program</h1>
 <p>Previous experience is one of the biggest obstacles to entering a career in Information Technology. Through IT<span style="color: rgba(0,150,255,1); font-weight: 600;">Forward</span> candidates are able to achieve Microsoft Technology Associate Certifications
  and gain experience through apprenticeship at our repair shop alongside experienced computer technicians.</p>
 <p>Certified techs leave our program with entry level certifications, experience, and college credits that count towards a technology elective.</p>
 <div class="eligible">
  <h3>Am I Eligible?</h3>
  <ul>
   <li>Must live within Hillsborough County</li>
   <li>Sliding scale tuition</li>
   <li>For High School students and beyond</li>
  </ul>

  <center><button>Request More Info</button></center>

  <center><button>Registration</button></center>
</section>

<header></header>

<section id="services">
 <h1>Services</h1>

 <article>
  <h3>Computer Repair</h3>
  <p>Your computer will be assessed by a qualified technician before any work begins. A deposit of $75 is required upon drop off, which is applied towards parts and services. Intake form and terms of agreement are available for download using the button
   below.</p>
  <button>Fix my Computer!</button>
 </article>

 <article>
  <h3>Purchase a Computer</h3>
  <p>Low cost refurbished computers may be purchased using our sliding scale. <strong>Proof of income is required to receive computers at a discounted rate.</strong> Using the button below, fill out the form and review our sliding scale to assess which
   options are right for you.</p>
  <button>Buy a Computer</button>
 </article>
</section>

<header></header>

<section id="volunteer">
 <h1>Volunteer</h1>
 <h3>Join us in our efforts to Bridge the Digital Divide!</h3>
 <center>
  <form>
   <input type="text" placeholder="Your Name">
   <input type="text" placeholder="Your Email">
   <input type="text" placeholder="Your Skill(s)">
   <br/>
   <center><button>Send!</button></center>
  </form>
  <p><em>By filling out and submitting the above form you agree to be contacted by Computer Mentors regarding volunteer opportunities and events.  Your information will never be released to other parties.</em></p>
 </center>
</section>

<header></header>

<section id="donate">
 <h1>Donate</h1>
	<button>Donate Equipment</button>
  <button>Become a Sponsor</button>
  <button>Support our Cause</button>
	
 <p>Computer Mentors IT<span style="color: rgba(0,150,255,1); font-weight: 600;">Forward</span> is accepting donations!  We are seeking 17"+ flat panel monitors; Desktop and Laptop computers that run at least Windows 7; components/accessories such as drives, memory, USB keyboards, and USB mouse; and all phones & tablets.</p>
	
	<p>Up to five items in donations may be dropped off at our main office <strong>Monday through Thursday between 9:00AM and 5:00PM</strong>. Larger quantity donations are requested by appointment. </p>
	
			<h3>813-236-1191</h3>
	
	<h4>2802 East Dr. Martin Luther King Jr. Blvd,<br/> 
		Suite F<br/>
		Tampa FL, 33610</h4>
	

  


</section>


<footer>
 Computer Mentors Group, Inc is a 501(c)3 non-profit organization. <br/> For more information about Computer Mentors programs visit our website at <br/> <a href="http://www.computermentors.org" target="_blank">www.computermentors.org</a>
</footer>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Oxygen|Poppins');

body {
 margin: 0;
 padding: 0;
 color: #000;
 background: #fff;
}

button {
 border: 3px solid rgba(0, 150, 255, 1);
 padding: 4px 15px;
 margin: 10px auto;
 background: #fff;
 color: rgba(0, 150, 255, 1);
 text-align: center;
 font-size: 14pt;
 font-weight: 600;
 font-family: oxygen;
 height: 50px;
}

button:hover {
 background: rgba(0, 150, 255, 1);
 color: #fff;
 transition: 2s;
}



nav ul li {
 display: inline;
 padding-right: 20px;
 font-family: Oxygen;
 font-size: 14pt;
}


nav ul {
 text-align: right;
 width: 100%;
 padding: 50px 0 0 0;
 margin: 0;
}

nav {
 width: 100%;
 margin: 0;
 padding: 0;
 height: 250px;
 background: url('https://static.pexels.com/photos/57007/pexels-photo-57007.jpeg') no-repeat fixed;
 background-size: cover;
}

.navContainer {
 width: 100%;
 height: 100px;
 margin: 0;
 padding: 0;
 background: rgba(255, 255, 255, .8);
 border-bottom: 5px solid rgba(0, 150, 255, .5);
 position: fixed;
}


a:link,
a:visited,
a:active {
 color: #000;
 text-decoration: none;
 font-weight: 600;
}

a:hover {
 transition: .1s;
 background: rgba(255, 255, 255, 0);
 border-bottom: 0px solid rgba(0, 150, 255, .8);
 color: rgba(0, 150, 255, .9);
}



/* text part of logo */

.logo {
 width: 240px;
 height: 110px;
 background: none;
 float: left;
 margin: 30px 20px;
 color: rgba(0, 150, 255, .9);
 font-family: Oxygen;
 font-size: 30pt;
 text-align: center;
}


/* "Tech" part of logo */

.black {
 font-weight: 0;
 color: black;
}

h1 {
 font-family: Oxygen;
 color: rgba(0, 150, 255, 1);
 font-size: 30pt;
	margin-top: 100px;
}

header {
 background: rgba(0, 150, 255, .2);
 padding: 10px;
 background: url('https://static.pexels.com/photos/163125/board-printed-circuit-board-computer-electronics-163125.jpeg') no-repeat fixed;
 background-size: cover;
 height: 150px;
 widght: 100%;
}

p {
 font-family: Poppins;
 font-size: 11pt;
}

section {
 border: 0px solid black;
 margin: 0 auto;
 max-width: 600px;
 margin: 20px auto;
 padding: 10px;
 text-align: left;
 color: #222;
 background: #fff;
}

article {
 border: 0px solid #888;
 border-radius: 10px;
 width: 276px;
 margin: 0 auto;
 padding: 10px;
 text-align: center;
 display: inline-block;
}

article p {
	padding: 5px;
	text-align: justify;
}
.logoSymbol {
 display: inline-block;
 letter-spacing: -10px;
 line-height: 24px;
 position: relative;
 top: 3px;
 left: -15px;
}

.logoSymbolTop {
 padding-left: 24px;
}

.eligible,
h3 {
 font-family: poppins;
}

footer {
 width: 100%;
 margin: 0 auto;
 text-align: center;
 padding: 20px 0;
 font-family: poppins;
 background: rgba(0, 150, 255, .8);
 color: white;
	line-height: 20px;
}

footer a:link,
footer a:active,
footer a:visited,
footer a:hover {
 color: #fff;
}

input[type=text]{
	border: 3px solid rgba(0,150,255,1);
	width: 180px;
	height: 40px;
	padding: 0px;
	text-align: center;
	color: rgba(0,150,255,1);
	font-family: Oxygen;
	font-size: 12pt;
	font-weight: 600;
	margin: 5px auto;
}

i, fa {
	float: left;
	padding: 10px 15px 10px 0px;
	color: rgba(0,150,255,1);
}

#donate p {
	text-align: center;
	line-height: 20px;}

#donate h3 {
	text-align: center;
	font-size: 30pt;
	line-height: 0px;
	color: rgba(0,150,255,1);
}

#donate h4 {
	text-align: center;
	font-size: 20pt;
	color: rgba(0,150,255,1);
	font-family: oxygen;
}

#volunteer em {
	text-align: center;
	font-size: 8pt;
	color: #888;
}

#program p {
	text-align: justify;
	line-height: 20px;
}

#home p {
	line-height: 30px;
	font-size: 14pt;
	color: #444;
	text-align: left;
	margin: 15px 0 15px 0;
}

@media(max-width: 800px) {

 .logo {
height: auto;
  margin: 5px auto 0 auto;
  display: block;
  width: 100%;
  transform: scale(.6,.6);
  -ms-transform: scale(.6,.6);
  -webkit-transform: scale(.6,.6);
 }

 nav ul li,
 nav ul {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  text-align: center;
	 display: none;
 }


 nav,
 .navContainer {
  height: 80px;
  margin: 0;
  padding: 0;
 }
	
	section {margin-top: 0;}
	
	h1 {margin: 20px auto;}
	
	article {
		margin: 10px auto;
		display: block;
	}

	#volunteer h3 { text-align: center;}
	#donate button {display: block;}
	#donate p {text-align: justify;}
	#donate h4 {font-size: 14pt;}
	footer {font-size: 14pt;}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console