Page 001 : 134340 by macithemes

<!DOCTYPE html>
<head>
<!--                         PAGE 001 : 134340
                             by macithemes
-->

<!-- CREDITS:
                tab inspiration from https://codepen.io/kevin11/pen/rVeJxp
                taehyung icon by softyoongina

-->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<script>
$(function() {
  $('.tabs nav a').on('click', function() {
    show_content($(this).index());
  });

  show_content(0);

  function show_content(index) {
    // Make the content visible
    $('.tabs .content.visible').removeClass('visible');
    $('.tabs .content:nth-of-type(' + (index + 1) + ')').addClass('visible');

    // Set the tab to selected
    $('.tabs nav a.selected').removeClass('selected');
    $('.tabs nav a:nth-of-type(' + (index + 1) + ')').addClass('selected');
  }
});

</script>

<!--all in one page: by macithemes, hope you like!---->

    <title>navigation</title>



    <style type="text/css">
* {box-sizing: border-box}

body {
    background-color: #e3e3e3; /*change background color*/
    font-family:arial;
    font-size:11px;
}


a {
    text-decoration: none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    color: #000; /* change color of side nav links */
}

a:hover {
    text-decoration: none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    color: white;
}

.contain {
    top:0;
    bottom:0;
    left:0;
    position:fixed;
    width:800px;
    border-radius:3px;
    height:450px;
    right:0;
    margin:auto;

}


.tabs {
  position: relative;
  background: #333; /*change right side div*/
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  height:430px;
  color: #fff;

}

.tabs nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: #fff;
  color: #000;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
  width: 150px;
  height: 430px;

}

.tabs nav a {
  padding: 20px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.tabs nav a:hover,
.tabs nav a.selected {
  background: #f3f3f3;
  color: #AD9897;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.tabs .content {
  padding: 20px 30px;
  position: absolute;
  top: 0px;
  left: 150px;
  width: 0px;
  height: 430px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}

.tabs .content.visible {
  padding: 20px;
  width: 100%;
  opacity: 1;
}

.tabs .content p {
    padding-bottom: 2px;

}

.tabs .content p:last-of-type {
    padding-bottom: 30px;
    padding: 0px 40px; }

.content h2 {
    color: #AD9897;
}
.logo {
  position:absolute;
  bottom: 235px;
  left: 105px;
}

#dash {
    background: #fff;
    width: 79px;
    height: 3px;
    margin-top: -10px;
    margin-right: 10px;
}

.content p {
    width: 380px;

}
.info {
    position: relative;
    left: 420px;
    bottom: 270px;
    background: #AD9897;
    width: 150px;
    height:30px;
    line-height: 29px;
}

.tags {
    padding: 0px 40px;
}
.tags h4 {
    font-size: 13px;
    padding-left: 16px;
    padding-top: -10px;
}

.tags a {
    color: #fff;
    display: block;
    padding: 2px;
    margin-bottom: 5px;
    padding-left: 14px;
}

.second-row {
    position: relative;
    left: 160px;
    bottom: 309px;
}

.third-row {
    position:relative;
    bottom: 618px;
    left: 280px;
}

.fourth-row {
    position: relative;
    bottom: 926px;
    left: 400px;
}

.fas {
    font-size: 10px;
    padding: 20px;
}

#blogroll {
		    margin-top: 20px;
		}

		#blogroll ul {
			list-style: none;
			margin-left: 1%;
		}

		#blogroll li {
			float: left;
			margin: 0.5%;
			padding:0;
		}


		#blogroll img {
		    width:70px;
		    padding:13px;

		}
	#taggs {
   overflow: auto;
   height: 500px;
   width: 120%;
   margin-left: -0px;
   box-sizing: border-box;
   padding: 2%;
	}


</style>
</head>
<body>

<div class="contain">
  <!--change tab links below-->
  <div class="tabs">
  <nav>
    <a>about</a>
    <a>tags</a>
    <a>ask</a>
    <a>blogroll</a>
    <a href="https://macithemes.tumblr.com">credit</a>
  </nav>
  <img class="logo" src="https://78.media.tumblr.com/8447ec373f43d971c64e40395610f190/tumblr_pbttieLKjZ1wvbht2o1_640.jpg" style="border-radius: 100px;width:85px;height:85px;"/>
    <div class="content">
    <h2> 001 about</h2>
    <div id="dash"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br/><br/>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     <br/><br/>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="info">
        <p>Name: Maci </p>
    </div>
     <div class="info">
        <p>Age: 20 </p>
    </div>
     <div class="info">
        <p>Located: America </p>
    </div>
     <div class="info">
        <p>Likes: Coding</p>
    </div>
  </div>
  <div class="content scroll">
    <h2> 002 tags</h2>
    <div id="dash"></div>
     <div id="taggs">
        <div class="tags">
        <h4> shows </h4>
        <a href="/">#The Simpsons</a>
        <a href="/">#Arrow</a>
        <a href="/">#Riverdale</a>
        <a href="/">#Pretty Little Liars</a>
        <a href="/">#VThe Flash</a>
        </div>
        <!--add tags in the a links to whatever you'd like-->
         <div class="tags">
         <h4> title </h4>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        </div>
        <!--beginning of second row-->
          <div class="tags second-row">
        <h4> food </h4>
        <a href="/">#cake</a>
        <a href="/">#hamburger</a>
        <a href="/">#burrito</a>
        <a href="/">#salad</a>
        <a href="/">#chips</a>
        </div>
        <div class="tags second-row">
        <h4> title </h4>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        </div>
        <!--beginning of third row-->
        <div class="tags third-row">
        <h4> music </h4>
        <a href="/">#2pm</a>
        <a href="/">#BTS</a>
        <a href="/">#Red Velvet</a>
        <a href="/">#Snsd</a>
        <a href="/">#Got 7</a>
        </div>
        <div class="tags third-row">
        <h4> title </h4>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        </div>
        <!--beginning of fourth row-->
         <div class="tags fourth-row">
        <h4> movies </h4>
        <a href="/">#infinity war</a>
        <a href="/">#Jason Bourne Series</a>
        <a href="/">#Mission Impossible Series</a>
        <a href="/">#Deadpool</a>
        <a href="/">#Black Panther</a>
        </div>
        <div class="tags fourth-row">
        <h4> title </h4>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        <a href="/">#tag</a>
        </div>
   </div>
  </div>
  <div class="content">
       <h2> 003 Ask</h2>
     <div id="dash"></div>
<!-- Iframe for askbox {replace macithemes with your url name}-->
<p><iframe frameborder="0" scrolling="no" width="150%" height="150" src="http://www.tumblr.com/ask_form/macithemes.tumblr.com" style="background-color:transparent; overflow:hidden;margin: 45px;
padding: 5px;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>

  </div>
  <div class="content">

     <h2> 004 blogroll</h2>
     <div id="dash"></div>
     <div style="overflow:auto;width:600px;height:350px;border:none;font-size:12px;text-align:left;">
<!---blogroll DONT TOUCH -->
     <div id="blogroll">
		{block:Following}
		<ul>{block:Followed}
		<li><a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-96}"/></a></li>
            {/block:Followed}
		</ul>
		{/block:Following}
	</div>
    </div>
  </div> <!--end of blogroll-->

</div>
 </div><!--contain class--->

</body>
</html>