my portfolio app2.0

index.html

	<!------------------------------- NAVBAR--------------> 
	<div class="topnav" id="navbar" >
			<a href="#home" class="fade btns" onclick="changePage(1)">home</a>
			<a href="#works" class="fade btns" onclick="changePage(2)">works</a>
			<a href="#contact" class="fade btns" onclick="changePage(3)">contact</a>
			<a href="javascript:void(0);" class="icon" onclick="navOut()" >&#9776;</a>
	</div>
<!--==============----------- PAGE ONE ------------------==========-->
	<div class="box page fade" id="one">
		<h1 class="header" id="p">Welcome to me page</h1>

		<h1><small class="subHeader">meow</small></h1>
		<hr/>
		<!-- IMAGES -->
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="https://image.ibb.co/hh1vpa/img1.jpg" style="width:100%">
    <div class="ctext">Meow</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="https://image.ibb.co/jn1vpa/img2.jpg" style="width:100%">
    <div class="ctext">Mew Meow</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="https://image.ibb.co/d0ZtaF/img3.jpg" style="width:100%">
    <div class="ctext">Meow Mew Meow</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
		
		<hr/>
    <h3 class="header">about me</h3>
    <p class="text about">
      My name is Daniel Osborn and I am from Maryland in the States. I love learning and computers, I want to learn as much as I can and share this knowledge with a new generation(I am too old to be cool). This is my portfolio following my projects and progress at freeCodeCamp.com. I am also utilizing other online learning tools such as codeacademy and sololearn. Hopefully I can use what I learn here to get a career in programming of some sort.
    </p>
		<p class="text">
      I have been using online tools to teach myself how to make web apps and everything that goes with it. I have a love for computer science and all things tech! One day I hope to have a career in the field, I would truly love to learn C lang and swim in the depths of low level computing but I think JS is a great place to get started. Having the ability to use what I have learned to make awesome projects like this portfolio is really freaking neat!
		</p>

	</div>
<!-------=======================================WORKS=======================----------------->
  <div class="box page fade" id="two">
    <h1 class="header">Works</h1>
    <h2 class="subHeader">Me Be Workn`</h2>
   
    <div class="workNav">
      <a href="#moons" class="fade" onclick="swiWork(1)">Moons</a>
      <a href="#RPS" class="fade" onclick="swiWork(2)">R<small>ock</small>PS</a>
      <a href="#TBA" class="fade" onclick="swiWork(3)">MORE TBA</a>
    </div>
    
    <div class="works" id="wOne">
      <p data-height="410" data-theme-id="0" data-slug-hash="weRJPr" data-default-tab="result" data-user="djorborn" data-embed-version="2" data-pen-title="MOONS" class="codepen">See the Pen <a href="https://codepen.io/djorborn/pen/weRJPr/">MOONS</a> by Daniel Jordan Osborn (<a href="https://codepen.io/djorborn">@djorborn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
    </div>
    
    <div class="works" id="wTwo">
      <p data-height="410" data-theme-id="0" data-slug-hash="jwzmXd" data-default-tab="result" data-user="djorborn" data-embed-version="2" data-pen-title="r p s" class="codepen">See the Pen <a href="https://codepen.io/djorborn/pen/jwzmXd/">r p s</a> by Daniel Jordan Osborn (<a href="https://codepen.io/djorborn">@djorborn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
    </div>
    
    <div class="works" id="wThree">
      <h3>MORE SOON... ISH</h3>
    </div>
    
  </div>
<!--===============---------PAGE THREE --------==================-------->
<div class="box page fade" id="three">
	<h1 class="header">Contact</h1>
	<h1 class="subHeader"><small>meowMM</small></h1>
  <h4 class="header">Yes I like cats</h4>
  <p class="text">
    I would give some contact info but IDK, maybe one day.
  </p>
	<hr/>
</div>

my-portfolio-app2-0.markdown

my portfolio app2.0

A Pen by Daniel Jordan Osborn on CodePen.

License.

script.js

//NAVBAR
//NAV ICON
function navOut() {
    var x = document.getElementById("navbar");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
//NAVBAR FUNCTIONS
var btns = document.getElementsByClassName('btns');
var pages = document.getElementsByClassName('page');
var pageIndex = 1;
changePage(pageIndex);

function changePage(n){
  for(var i = 0; i < pages.length; i++){
    pages[i].style.display = "none";
    btns[i].style.backgroundColor = "#777";
  }
  pages[n -1].style.display = "block";
  btns[n -1].style.backgroundColor = "#333";
}

//IMAGES 
var change = 1;
var slideIndex = change;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}


//WORKS/////======\\\\\\WORKS/
var workIndex = 2;
swiWork(workIndex);
function swiWork(n){
  var works = document.getElementsByClassName('works');
  for(var i = 0; i < works.length; i++){
    works[i].style.display = "none";
  }
  works[n -1].style.display = "block";
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

 {
	box-sizing: border-box;
}
body {
	margin: 0;
}
/* NAVBAR */

.topnav {
	background-color: #777;
	overflow: hidden;
	position: fixed;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 0;
	top: 0;
	box-shadow: 0 0 10px grey;
}
.topnav a {
	float: left;
	display: block;
	color: #fff;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	transition: 0.6s ease;
}
.topnav a:hover{
	background-color:#000;
	color: black;
}
.topnav .icon {
	display: none;
}

/* navbar meta 
 * if the screen is less the 600px wide:
 * hide all link but the first
 *then show the icon 
 */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/*
 * then class="responsive" is added to
 * JavaScript so when the icon is cliked
 * the navbar gets shown vertically
 */
 @media screen and (max-width: 1000px){
	.topnav.responsive a.icon{
		position: absolute;
		top: 0;
		right: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}
/* END NAVBAR ALL */
/* START PAGE SETUP */
.box {
	margin: 70px auto;
	box-shadow: 0 0 20px grey;
	background-color: rgba( 0, 0, 0, 0.4 );
	width: 90%;
	
		min-height: 900px;
    max-height: 1200px;
	/*transition: 0.3s ease-in-out;*/
}
@media screen and (min-width: 1000px){
	.box {
		margin: 70px auto;
		width: 75%;
		min-width: 300px;
		min-height: 900px;
    max-height: 1200px;
		box-shadow: 0 0 20px grey;
		background-color: rgba( 0, 0, 0, 0.4 );
		/*transition: 0.3s ease-in-out;*/
	}
}
h1{
	text-align: center;
}
.header {
	text-decoration: underline;
	padding: 10px;
  text-align: center;
}
.subHeader {
  text-align: center;
}

/* SLIDESHOW CONTAINER */
.slideshow-container {
	max-width: 1000px;
	position: relative;
	margin: auto;
}
.mySlides {
	display: none;
}
/* NEXT AND PREVIUS BUTTONS */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	transition: 0.6s ease;
	border-radius: 0px 3px 3px 0;
}
/* NEXT BUTTON */
.next {
	right: 0;
	border-radius: 3px 0px 0px 3px;
}
/* HOVER */
.prev:hover, .next:hover{
	background-color: rgba( 0, 0, 0, 0.8 );
}
/* Caption Text */
.ctext {
	color: #f2f2f2;
	font-size: 0.9em;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 30%;
	text-align: center;
	background-color: rgba( 0, 0, 0, 0.4 );
	border-radius: 0 50px 0 0;
	border-bottom:solid rgba( 0, 0, 0, 0.6 );
}
/* NUMBER TEXT */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}
/* THE DOTS*/
.dot {
	cursor: pointer;
	height: 13px;
	width: 13px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .dot:hover {
	background-color: #717171;
}
/* FADING ANIMATION */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
@-webkit-keyframes fade {
	from {opacity: .1}
	to {opacity: 1}
}
@keyframes fade {
	from {opacity: .1}
	to {opacity: 1}
}
/*
*****WORKS STUFF*****/
/**/
/*
* NAVEBAR
*/
.workNav{
  background-color: rgba( 0, 0, 0, 0.4);
  height: 29px;
  padding-top: 10px;
  z-index: 1;
}
.workNav a {
  padding: 10px 13px;
  text-align: center;
  text-decoration: none;
  color: black;
  transition: 0.6s ease;
}
.workNav a:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

/**/
/***** TEXT *****\*/
.text {
  padding-left: 10px;
  text-indent: 20px;
}