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

              
                <div class="container-fluid">
<nav class="navbar-fixed-top mobilethin-blue-border mobileBlkBack" role="navigation">
 <p class="mobileTextCenter"> 
   <a href="#Bio"><span class="LRGred mobileTextBlue"><u>Bio</u></span>      </a>
   <span class="LRGyellow mobileTextOrange"> ||</span>
   <a href="#ProjectsAndSolutions"><span class="LRGred mobileTextBlue">      <u>Projects and Solutions</u></span></a>
   <span class="LRGyellow mobileTextOrange"> ||</span>
   <a href="#Contact"><span class="LRGred mobileTextBlue"><u>Contact</u>      </span></a>
 
 </p>
</nav>  
  
<body class="mobileBlkBack LRGwhite2black"> 


<!-- BEGIN New Div for title/heading block -->

<div class="row mobileMarginTop15">
    <div class="col-md-6"></div>
    <div class="col-md-6 LRGgradientText orbitron">
    <p class="textLeft mobileTextOrange">The Daniel Widrich</p>
    <p class="textRight mobileTextOrange">Web Development Studio</p>
    </div>
  
</div>
    
		<!-- END main title/heading block--> 

<!-- INSERT visual divider (1920 x 270 image) -->
<img src="https://c3.staticflickr.com/8/7442/27364629922_aa1a62a62a_h.jpg" width=100%></img>
<!-- END visual divider (1920 x 270 image) -->
  

	<!-- Begin new div element for next visual section-->   
  		<div class="row" style="margin-top: 6%;">
    <div class="col-md-6" style="text-align:center;"><img class="roundedImage mobileMarginTop10 LRGphotoDisappear" src="https://c8.staticflickr.com/8/7464/27753477455_23808b3163_h.jpg"><img class="roundedImage mobileMarginTop10 mobilePhotoDisappear" src="https://c3.staticflickr.com/8/7563/27365288642_5d0f4be051_b.jpg"><a name="Bio"></a></div> 
    <div class="col-md-1"></div>
    <div class="col-md-4 thin-red-border" style="margin-top: 6%; margin-bottom: 3%;">
      <p class="LRGpText mobileTextBlue">Hi, I'm Dan.</p>
      <p class="LRGpText mobileTextBlue">A Software Engineer with 9 years experience working on Geospatial Information Systems; I began studying programming in 2013 with Python and later joined <a class="underline" href="https://freecodecamp.com">freeCodeCamp.com</a> for full-stack javaScript certification.</p>
      <p class="LRGpText mobileTextBlue">Writing code is a game, a collection of puzzles requiring simple, yet elegant solutions, each one deepening and enhancing my fascination and love of the game.</p>
      <p class="LRGpText mobileTextBlue">Below you will find links to projects - puzzles - I am solving and other interests of mine.  I hope you enjoy exploring and look forward to our connection.</p>
      <p class="LRGpText mobileTextBlue">- Dan</p> 
    </div>
    <div class="col-md-1"></div>
  		</div>
  
<!-- End div element for visual section-->
  <div class="row " style="margin-top: 6%;">
    <div class="col-md-6"></div>
    <div class="col-md-6">
    
    <div class="col-md-10 LRGgradientText orbitron mobileTextBlue mobilethin-orange-border thin-red-border mobileMarginTop5"><a name="ProjectsAndSolutions"></a>
      <p style="text-align:right;">Projects</p>
      <p style="text-align:center;">and</p>
      <p style="text-align:left;">Solutions</p></div>
    <div class="col-md-2"></div>
    </div>
  </div>

 <!-- This is where the portfolio example section begins -->
  
  <div style="margin-bottom: 6%;">
     <div class="row" style="margin-top: 6%;">
      <div class="col-md-6"><a href="https://codepen.io/Daniel_Widrich/"><img class="LRGportfolioImage XSportfolioImage" src="//c7.staticflickr.com/8/7330/27140911934_41fdff93ef_h.jpg"></a>
      </div>
      <div class="col-md-6"><p class="LRGpText mobileTextBlue pblocktext XSportfolioImage">This is "A" placeholder project.  It really has no bearing on what it is I am trying to accomplish.  Enjoy this as it may change frequently or, enjoy it because it will remain the absolute same forever and ever.</div>
    </div>
     <div class="row" style="margin-top: 6%;">
      <div class="col-md-6"><a href="https://codepen.io/Daniel_Widrich/"><img class="LRGportfolioImage XSportfolioImage" src="http://c5.staticflickr.com/8/7593/27652626332_5c15468145_h.jpg"></a>
      </div>
      <div class="col-md-6"><p class="LRGpText mobileTextBlue pblocktext XSportfolioImage">This is "B" placeholder project.  It really has no bearing on what it is I am trying to accomplish.  Enjoy this as it may change frequently or, enjoy it because it will remain the absolute same forever and ever.</div>
    </div>
    <div class="row" style="margin-top: 6%;">
      <div class="col-md-6"><a href="https://codepen.io/Daniel_Widrich/"><img class="LRGportfolioImage XSportfolioImage" src="http://c8.staticflickr.com/8/7303/27777312815_a9326778bb_b.jpg"></a>
      </div>
      <div class="col-md-6"><p class="LRGpText mobileTextBlue pblocktext XSportfolioImage">This is the infamous Andres Marie Amphere tribute page.  It pays homage to a great man of science, a man of the age of enlightenment.  Just thinking about ole Andre gets me all Amped up.</div>
    </div>
  </div>
 
 <!-- This is where the CONTACT section begins -->
  
  <div class="row" style="margin-top: 6%;">
    <div class="col-md-6"></div>
    <div class="col-md-6">
          <div class="col-md-10 LRGpowerOn MobilePowerOn orbitron     mobileTextBlue mobilethin-orange-border thin-red-border mobileMarginTop5"><a name="Contact"></a>
          <p class="LRGgradientText" style="text-align:left;">Contact</p>
          <p style="text-align:center;"><br></p>
          <p class="LRGgradientText" style="text-align:right;">Details</p>
          </div>  
          <div class="col-md-2"></div>
    </div>
  </div>
  
  <!-- This is where the CONTACT info entry begins -->
  
  <div class="row" style="margin-top: 6%;">
    <div class="col-md-1"></div>
    <div class="col-md-4">
      <div class="well radialGradient LRGheight250"><p class="LRGgradientText2 textCenter mobileTextBlue">Your Contact Info:</p>
         <input type="text" name="fname" placeholder="First Name"><br>
         <input type="text" name="lname" placeholder="Last Name"><br>
         <input type="text" name="email" placeholder="Email"><br>
         <input type="text" name="location" placeholder="Location: City, State"><br>
         <input type="submit" value="Submit">
      </div>
    </div><!-- closes div column md-4 -->
    <div class="col-md-2"></div><!--middle 2 columns of row -->
    <div class="col-md-4">
      <div class="well radialGradient LRGheight250"><p class="LRGgradientText2 textCenter mobileTextBlue">My Contact Info:</p>
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-9">
            <p class="LRGorange mobileTextOrange">First Name: Daniel<br>
              Last Name: Widrich<br>
              Location:  Cincinnati, Ohio<br>
              Daniel_Widrich@yahoo.com</p>
          </div>
      </div>
    </div>
    <div class="col-md-1"></div>
  </div>
    
    

    
   
    

 
 
    
</body>  
</div>
              
            
!

CSS

              
                /*classes for experimenting with links and positioning */
.pblocktext {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    width: 450px;
}

.underline {
  text-decoration: underline;
}

.alignR {
  text-align: right;
}

/* semi-simple gradient color backgrounds*/
.white2black {
background-image: linear-gradient(to right, #ffffff, #e5e5e5, #cccccc, #b2b2b2, #999999, #7f7f7f, #666666, #4c4c4c, #333333, #191919, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000);
}

.black2white {
  background-image: linear-gradient(to left, #ffffff, #e5e5e5, #cccccc, #b2b2b2, #999999, #7f7f7f, #666666, #4c4c4c, #333333, #191919, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000);
}

.danMountain {
  background-image: url("https://c3.staticflickr.com/8/7563/27365288642_5d0f4be051_b.jpg");
  background-repeat: no-repeat;        
  position: relative;
  width: 100%;
  height: auto;
  background-position: center center; 
  background-size: cover;
  opacity: 1;
}

/* flickr image of B&W trees looking up into canopy */
.treeCanopy {
  background-image: url("https://c6.staticflickr.com/6/5514/11753006925_22aa0e5dbf_z.jpg");
  background-repeat: no-repeat;        
  position: relative;
  width: 100%;
  height: auto;
  background-position: center center; 
  background-size: cover;
  opacity: .5;
}

.testBackground3 {
  background-image: radial-gradient(rgba(0,0,0,1), rgba(0,0,255,.5));
  opacity: .7; 
}

.roundedImage {
  border-radius: 50%;
  width: 85%;
  opacity: 1;
  background-position: center;
}

.radialGradient {
  background: radial-gradient(black, grey);
}

.blackBackground {
  background-color: #000000;
}

.whiteBackground {
  background-color: #ffffff;
}

.textLeft {
  text-align: left;
}

.textCenter {
  text-align: center;
}

.textRight {
  text-align: right;
}

.orbitron {
  font-family: orbitron;
}

.league {
  font-family: league;
}

/* this element is used to exclude styles on small screens which, for whatever reason, are not compatible with functional capabilities */
@media screen and (min-width: 1025px) {
  .LRGwhite2black {
    background-image: linear-gradient(to right, #ffffff, #e5e5e5, #cccccc, #b2b2b2, #999999, #7f7f7f, #666666, #4c4c4c, #333333, #191919, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000);
  }

  .LRGpowerOn {
  background-image: url("http://c5.staticflickr.com/8/7120/27820021652_3ba82f4758_m.jpg");
  background-repeat: no-repeat;        
  background-position: center center; 
  background-size: 25%;
  padding-top: 3%;
  padding-bottom: 3%;
  opacity: 1;
}
  
  .LRGgradientText {
    font-size: 4em;
    background: -webkit-linear-gradient(left, #ff0000,  #ff0000, #ffe100, #ff0000, #ff0000), transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.3;
    background: -o-linear-gradient(left, #ff0000, #ff0000, #ffe100, #ff0000, #ff0000);
    background: -moz-linear-gradient(left, #ff0000, #ff0000, #ffe100, #ff0000, #ff0000);
    background: linear-gradient(left, #ff0000, #ff0000, #ffe100, #ff0000, #ff0000);
  }
  
  .LRGgradientText2 {
    font-size: 2em;
    background: -webkit-linear-gradient(left, #ff0000,  #ff0000, #ffe100, #ff0000, #ff0000), transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.3;
    background: -o-linear-gradient(left, #ff0000, #ff0000, #ffe100, #ff0000, #ff0000);
    background: -moz-linear-gradient(left, #ff0000, #ff0000, #ffe100, #ff0000, #ff0000);
    background: linear-gradient(left, #ff0000, #ff0000, #ffe100, #ff0000, #ff0000);
  }
  
  .LRGgradientText3 {
    font-size: 2em;
    background: -webkit-linear-gradient(left, #ffe100, #ffe100, #ff0000, #ffe100, #ffe100), transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.3;
    background: -o-linear-gradient(left, #ffe100, #ffe100, #ff0000, #ffe100, #ffe100);
    background: -moz-linear-gradient(left, #ffe100, #ffe100, #ff0000, #ffe100, #ffe100);
    background: linear-gradient(left, #ffe100, #ffe100, #ff0000, #ffe100, #ffe100);
  }
  
  .LRGgradientText3 {
    font-size: 2em;
    background: -webkit-linear-gradient(left, black, black, white, black, black), transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.3;
    background: -o-linear-gradient(left, black, black, white, black, black);
    background: -moz-linear-gradient(left, black, black, white, black, black);
    background: linear-gradient(left, black, black, white, black, black);
  }
  
  .LRGpText {
    color: #b2b2b2;
  }
  
  .LRGphotoDisappear {
    height: 0px;
    width: 0px;
    z-index: -1;
  }
  
  .LRGyellow {
    color: #ffe100;
  }
  
  .LRGorange {
    color: orange;
  }
  
  .LRGred {
    color: #ff0000;
  }
  
  .LRGblack {
    color: black;
  }
  
  .LRGheight250 {
    height: 250px;
  }
  
  /* border style for experimenting and for practical implication */
    .thin-red-border {
    border-color: #ff0000;
    border-width: 5px;
    border-style: solid;
  }

  .LRGportfolioImage {
    position: relative;
    height: 300px;
    width: 450px;
    display: block;
    margin-left: auto;
    margin-right: auto;
 }
  
}

/* This defines properties exclusive for small screens  */
@media screen and (max-width: 1024px) {
.XSportfolioImage {
    position: relative;
    height: 100%;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
 } 
  
  .MobilePowerOn {
  background-image: url("http://c3.staticflickr.com/8/7344/27309955754_7a530320f8_m.jpg");
  background-repeat: no-repeat;        
  background-position: center center; 
  background-size: 25%;
  padding-top: 3%;
  padding-bottom: 3%;
  opacity: 1;
  
}
  .mobileTextWhite {
  color: #ffffff;
  font-family: orbitron;
  }
  
  .mobileTextOrange {
    color: #d56d28;
    font-family: orbitron;
  }
  
  .mobileTextBlue {
    color: #7b90ab;
    
  }
  
  .mobileTextCenter {
    text-align: center;
  }
  
  .mobilewhite2black {
  background-image: linear-gradient(to right, #ffffff, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000, #000000,   #000000);
  }
  
  .mobileMarginTop15 {
    margin-top: 15%;
  }
  
  .mobileMarginTop10 {
    margin-top: 10%;
  }
  
  .mobileMarginTop5 {
    margin-top: 5%;
  }
  .mobileBlkBack {
  background-color: #000000;
  }
  
  .mobileGreyBack {
    background-color: #cccccc;
  }
  
  .mobilePhotoDisappear {
    height: 0px;
    width: 0px;
    z-index: -1;
  }
  
   .mobilethin-white-border {
    border-color: #ffffff;
    border-width: 5px;
    border-style: solid;
  }
  
  .mobilethin-orange-border {
    border-color: #d56d28;
    border-width: 5px;
    border-style: solid;
  }
  
  .mobilethin-blue-border {
    border-color: #7b90ab;
    border-width: 5px;
    border-style: solid;
  }
  
  
}
              
            
!

JS

              
                
              
            
!
999px

Console