Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <onload="myFunction()">


    <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">×</span>
        <h1>Subscribe to our newsletter!</h1>
        
      </div>

    </div>

    <div class="w3-container header w3-teal">

      <div class="row">
        <div class="col-12">


          <ul class="topnav" id="myTopnav">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#resume">Resume</a></li>
            <li><a href="#projectlinks">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="icon">
              <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
            </li>


          </ul>

          <div style="padding-left:16px"> </div>
          </di>
        </div>

        <div class="w3-container summary ">
          <div id="summary"><br>
            <div class="row">
              <div class="col-8">

                <img class="image" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAVuAAAAJGExYWQxNTRjLTc4NDYtNGRiZC1hNGJmLTZhZjk5MTk2MmZiOQ.jpg" alt="Frances Endencia" height="" width="" /><br><br>
                <h4>My name is Frances Endencia. <br> You can reach me at 630.656.2854 <br> FEndencia@gmail.com
 </h4><br>
                <button id="myBtn">Sign up for latest news!</button>
              </div>


            </div>
          </div>

          <div class="row col-12 w3-container resume">


            <h1 id="resume">Resume</h1> 
            <div class="row col-12 w3-container experience">
              <h3>Career Summary</h3><br>

              <h4>Seeking a position that will utilize broad based education and team oriented skills in networking, designing, compiling, debugging programming skills in computer engineering Technology and provide professional growth.
  <h3>Skills & Training	</h3>	
<h4>Online marketing  - social media, keyword, seo, traffic generation<br>
HTML, CSS, JavaScript, Bootstrap, Oracle SQL, Microsoft Access  SQL<br><br>
icstars - Business, technology and leadership program Jan - April 2016<br>
* user experience research  (ux/ui)<h2>
created the winning user experience design for client  TTX
<h4>*  HTML, CSS, JSON, Bootstrap, Excell<br>
*  scrum master / engagement master<br>
*  agile and waterfall technology
  </div>
  
    <h3>Education</h3><br><h4>Free Code Camp - 2015 till present<br>HTML, CSS, Javascript<br><h4>Bachelor in Computer Engineering Technology | July 2014 | Devry University, Addison IL 60101<br>
Major: Software programming  Oracle SQL,  Access SQL, Java, C++, C<br>
Minor: Telephone & Computer  Networking
Matlab 
 Simulation software: Multi Sim, Matlab, Altera Quartus II<br>
 Developing broadband network telephone communications signals & utilizing Smith Charts <br>
 Designing & developing programs utilizing  Oracle’s SQL +<br>
    <h3>Experience</h3>
<h4>Developed real time business websites and online stores<br>
  PaintShopPro, Pixlr - graphics & animation

Researched patent applications validity, prevent patent trolls<br>
Video - VideoMakerFx 
  <h3>Extra Curricular</h3>
    <h4>Toastmasters<br>
    Various Chamber of Commerce</h4>

          </div
  </div>
  </div>
      <h1>-----------------------------</h1>
     <div class="row">
       <div class="col-12">
          <div class="w3-container socialmedia">
   <h3 id="projectlinks">Project Links</h3>
      <div class="col-4 polaroid w3-container">
         <a href="https://docs.google.com/presentation/d/188VoU1PgPjamHaDMLuRkFLJcFH4rurO1xZzNhBireik/edit#slide=id.p">
               <img src="http://www.doctormc.com/images/photos/child-psychiatry-help.jpg" alt="Psychiatry: Medical Science or Fraud?" height="200" width="350">Psychiatry: Medical Science or Fraud?
         </a>
            
          </div> <br><br>  
        
       
         <br>
    
        <br>  
          <div class="col-8">
       <div class="polaroid w3-container">
            <img src="https://s-media-cache-ak0.pinimg.com/originals/5b/6f/77/5b6f77e3832abde10402d71a9ee921d9.jpg"alt="saveenergy" width="350px" height="220px">Earn free energy!</a>
      </div><br><br>
          
            
            
   <div class="row">
      
     
  
  
 
      
      
      
        <div class=" col-12 polaroid w3-container ">
         <a href="https://reach4dstars.com">
  <img src="https://reach4dstarscom.files.wordpress.com/2016/09/cropped-website1.jpg" alt="Reach4dStars" height="200" width="350">Reach4dStars
         </a>
            
          </div>
    </div>


          
          
            
          
          
          
          
          </div><br><br>
          
         
              <br><br>
            
                   
            </div>
          </div>
              <br><br>
              <br>
              
              
              
            
            
            
          </div>
           
          
  <br> <br>
    <div id="contact">
      <h1>Contact Me!</h1> <br><br><h5>Frances Endencia</h5>
      <h5>630.656.28854</h5>
      <h5>fendencia@gmail.com</h5>
      
      
      
            </div>
            </div>
</div>  
  </div>     
  </body>
</html>
              
            
!

CSS

              
                body {
 background-img: url('http://www.opencloudconnect.org/wp-content/uploads/2013/05/clouds-bg.jpg') alt="Frances Endencia";
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #e6fff2;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #2e6b6b;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #000033;}

ul.topnav li.icon {display: none;}
h1 {
  text-align: center;
}
h4 {
  display: inline-block;
  text-align:left;
}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
* {
  box-sizing: border-box;
  
}
[class* = "col- "] {
  
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
.facebookimage{
  ;
}
.header {
  background-color: #691A99;
  color: white;
  font-family: "verdana georgia";
  height:100%;
  padding: 5px;
}


.image{
  border-radius: 150%;
  
  
}

#summary {
  text-align: center;
  position: relative;
  float: left;
  margin-top: -20x;
  width: 100%;
  height:400px;
  background-color: #006666;
  color: white;

}

.resume { 
    float: left;
    padding: 15px;
    border: none;
   width:  100%;
    height: 100%;
  
}
.experience{
    width: 500px;
    float: left;
    padding: 15px;
    border: none;
   height: 100%;
  position: relative;
}
.education{
  width: 40%;
  float: left;
  padding: 15px;
  border: none;
  height: 100%;
  position: relative;
}
.projectlinks{
  text-align: center;
  background-color:  #006666;
  height: 1000px;
}



/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 600px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 600px;}
}
.projectlinks {
  float: absolute;
  width: 500px;
  height: 4000px;
  position: center;
  background-color: #006666;
  color: #000066;
  display: inline-block;
  
  }


div.polaroid {
  width: 26%;
  height: 250px;
  float: center;
  display: inline-block;
  position: relative;
  background-color:  #006666;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
}
div.container {
    text-align: center;
    padding: 10px 10px;
  
}
.right {
  
position: absolute;
    right: 0px;
    width: 300px;
    
    padding: 10px;
}
.col-4 {
  display: inline-block;
}
#contact {
  text--decoration: underline;
  width: 100%;
  height: 220px;
  padding: 50px;
  margin: 1px;
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;
  background-color:  #006666;
    color: #ffffff;
  position="center";
}

              
            
!

JS

              
                function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
function myFunction() {
    alert("modal-content");
<!--window.onclick = function(event) -->{
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}
              
            
!
999px

Console