mrmccormack/kaikikibeta.html

## kaikikibeta.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

  <title>KaiKi_KiBeta</title>

    <!--

HEY! FUN FACT IF YOU ARE SEEING THIS! This sight was made in Febuary of 2018 for a college corce in wed desing! I plan on keeping it for a long time so if you are reading this in the furure, 18 year old me says hi! Oh, and if this is me reading this in the future and you wanna tell me things got better then thats great and I am happy for us both since were the same person. Hah!

-->

  <!--

    .__  __       .__  __
    |  \/  |_ _   |  \/  |
    | |\/| | '_|  | |\/| |_
    |_|  |_|_|(_) |_|  |_(_)

    A Bootstrap 3.x template by Mr. M. - Confederation College
    January 2017
    NOTES:
    - This contains all links to CDN's
    - MIT Licence (c) 2017


    -->

  <!-- Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  <!-- Link to Font Awesome http://fontawesome.io/ -->
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  <!-- favicon - ref: http://stackoverflow.com/questions/25952907/favicon-ico-vs-link-rel-shortcut-icon -->
  <link rel="shortcut icon" href="/path/to/icons/favicon.ico">
  <link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
  <link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

    <!-- 00000000000000000000000000000000000000000000 -->
    <!--SEE ME! READ! THIS!-->
    <!-- HEY YOU MAY NEED TO MOVE THIS TO A CSS SO KEEP ALL STYLE STUFF HERE! -->

  <style type="text/css">
    body {
      /* for nav bar*/
      margin-top: 50px;
        background-color: #009393;
    }

    #supworld {
        text-align: center;
      color: #b1c1cc;
        text-shadow: 2px 2px #000000;
    }

      p {
          color: azure;
      }

    #selfpic {
      padding: 50px;
        border: 8px solid #00ceff;
      }

      #indent {
          text-indent: 50px;
      }

      #center {
          text-align: center;
      }

      .zoom {
    transition: transform .2s;
    margin: 0 auto;
}

.zoom:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.1);
}

  </style>

    <!-- ALL STYLE STUFF IN HERE UNTIL YOU MOVE IT IF YOUR DO! -->
    <!-- SEE ME! READ ABOVE! -->
    <!-- 0000000000000000000000000000000000000000000-->


</head>


<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="#">See More in Menu</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="kaikikibeta.html">Home</a></li>
          <li><a href="coding.html">Coding</a></li>
          <li><a href="art.html">Art</a></li>
          <li><a href="https://www.youtube.com/channel/UCupav7SVwh06Py9oWIYKgKg?view_as=subscriber">YouTube</a></li>
          <li><a href="#PlaceHolder">Place Holder</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

<!-- title under the nav bar -->
  <div class="container">
    <h1 id="supworld">SUP WORLD!? I'm Kai!</h1>

    <!-- picture and about me section -->
    <div class="row">
      <div class="col-md-6">
        <img id="selfpic"  src="https://yt3.ggpht.com/-i4aCZZLxBSU/AAAAAAAAAAI/AAAAAAAAAAA/bwPIYfGxeo8/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg" class="img-circle img-responsive zoom" alt="Kai Ki-Ki Beta">
        </div>

          <div class="col-md-6">
              <h2>About me</h2>
            <p id="indent">Hi, I'm Kai! You may already know that at this point though. I will take this opertunity to tell a bit about myself. </p>
            <p id="indent">First of all, I made this site in my first year of college in a coding class and I enjoy coding. When I first did coding in highschool I was upset becase I could not understand it but now that I do understand it's really fun to have this skill. </p>
            <p id="indent">I also do art on my free time and injoy it alot. Fallow me on Deviant art if you want to know more.</p>
            <p id="indent">Oh, one more thing. I have a Youtube channle under the same name as this sight. Check it out and maybe leave a like or comment on some videos, or don't. It's your life. If you do want to look into any of this though you can look at the links below. </p>

        <!-- this is a butten that i do not think that i want bugt i will keep the code here if i change my mind -->

        <!-- <p><a class="btn btn-default" href="#"
        role="button">View details »</a></p> -->

      </div>
      </div>

      <div id="center" class="col-md-12">
          <button data-toggle="collapse" data-target="#moreless" class="btn btn-info" >Showmore/Less</button>
      </div>
          <!--id="showHide" type="button" class="btn btn-info">ShowMore/Less</button>-->

     <div id="moreless" class="collapse">
      <div class="col-md-4 collapse">
        <h2>Coding</h2>

            <p id="indent">I am currently in college for web desing and developent which is why this web page even exists. Ironicly I used to hate code but I found that when you understand it, it can be very fun to do and really cool. Not understanding it is ruff though so if anyone out there is interested I warn you that you need to be chill whne things don't go your way.</p>
            <p id="indent">With that inmind, the butten cap below will lead you to a page with a list of links that I got in college that may help anyone who would like to try coding, they sure did help me.</p>
            <p id="center"><a href="coding.html"><i class="fa fa-graduation-cap fa-5x zoom" aria-hidden="true"></i></a></p>
            <p id="indent"><small>You could also use the prompt "Coding" in the menu/nav bar.</small></p>
            <!--
            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
            -->
      </div>

      <div class="col-md-4 collapse">
        <h2>Art</h2>
            <p id="indent">I sometimes make art on my free time which I do not have alot of in college curently but I still try to do my best. If you would like to see more then fallow the links below.</p>
            <p><a class="btn btn-default zoom" href="art.html" role="button">Art Gallery »</a></p>
            <p id="indent">Or click this to see my DeviantArt page. </p>
            <p id="center"><a href="https://kurohikori.deviantart.com/"><i class="fab fa-deviantart fa-4x zoom"></i></a></p>
      </div>

      <div class="col-md-4 collapse">
        <h2>Youtube</h2>
            <p id="indent">My channel is a bit chaotic and all over the place. It is a bunch of videos that I just upload for the sake of intertainment for me and friends at this point. In the future I plan to make it more organized and falow a spasific stile. I may begin to upload video tutorials for coding, walkthroughs on 3d animation and speed paints on my computer. </p>
            <p id="indent">Other videos of other styles may be put on a different Youtube channel in the future. Who knows? Click the butten under this if you want to check out my channle. </p>

          <!-- butten takes person to my youtube channel -->

            <p><a class="btn btn-default zoom" href="https://www.youtube.com/channel/UCupav7SVwh06Py9oWIYKgKg?view_as=subscriber" role="button">Go Too Channel »</a></p>

            <p id="indent"><small>You could also use the prompt in the menu/nav bar for a link to my channel.</small></p>

          </div>
      </div> <!--THIS IS THE MORE LESS DIV END!-->
      </div>

    <hr>

<div>
    <footer class="text-center">

      <p>© 2016 Company, Inc.</p>
    </footer>

  </div>  <!-- /container -->


  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->

	<title>KaiKi_KiBeta</title>

	<!--

	HEY! FUN FACT IF YOU ARE SEEING THIS! This sight was made in Febuary of 2018 for a college corce in wed desing! I plan on keeping it for a long time so if you are reading this in the furure, 18 year old me says hi! Oh, and if this is me reading this in the future and you wanna tell me things got better then thats great and I am happy for us both since were the same person. Hah!

	-->

	<!--

	.__ __ .__ __
	\| \/ \|_ _ \| \/ \|
	\| \|\/\| \| '_\| \| \|\/\| \|_
	\|_\| \|_\|_\|(_) \|_\| \|_(_)

	A Bootstrap 3.x template by Mr. M. - Confederation College
	January 2017
	NOTES:
	- This contains all links to CDN's
	- MIT Licence (c) 2017


	-->

	<!-- Bootstrap -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	<!-- Link to Font Awesome http://fontawesome.io/ -->
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
	<!-- favicon - ref: http://stackoverflow.com/questions/25952907/favicon-ico-vs-link-rel-shortcut-icon -->
	<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
	<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
	<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

	<!-- 00000000000000000000000000000000000000000000 -->
	<!--SEE ME! READ! THIS!-->
	<!-- HEY YOU MAY NEED TO MOVE THIS TO A CSS SO KEEP ALL STYLE STUFF HERE! -->

	<style type="text/css">
	body {
	/* for nav bar*/
	margin-top: 50px;
	background-color: #009393;
	}

	#supworld {
	text-align: center;
	color: #b1c1cc;
	text-shadow: 2px 2px #000000;
	}

	p {
	color: azure;
	}

	#selfpic {
	padding: 50px;
	border: 8px solid #00ceff;
	}

	#indent {
	text-indent: 50px;
	}

	#center {
	text-align: center;
	}

	.zoom {
	transition: transform .2s;
	margin: 0 auto;
	}

	.zoom:hover {
	-ms-transform: scale(1.5); /* IE 9 */
	-webkit-transform: scale(1.5); /* Safari 3-8 */
	transform: scale(1.1);
	}

	</style>

	<!-- ALL STYLE STUFF IN HERE UNTIL YOU MOVE IT IF YOUR DO! -->
	<!-- SEE ME! READ ABOVE! -->
	<!-- 0000000000000000000000000000000000000000000-->


	</head>


	<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">See More in Menu</a>
	</div>
	<div id="navbar" class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="kaikikibeta.html">Home</a></li>
	<li><a href="coding.html">Coding</a></li>
	<li><a href="art.html">Art</a></li>
	<li><a href="https://www.youtube.com/channel/UCupav7SVwh06Py9oWIYKgKg?view_as=subscriber">YouTube</a></li>
	<li><a href="#PlaceHolder">Place Holder</a></li>
	</ul>
	</div>
	<!--/.nav-collapse -->
	</div>
	</nav>

	<!-- title under the nav bar -->
	<div class="container">
	<h1 id="supworld">SUP WORLD!? I'm Kai!</h1>

	<!-- picture and about me section -->
	<div class="row">
	<div class="col-md-6">
	<img id="selfpic" src="https://yt3.ggpht.com/-i4aCZZLxBSU/AAAAAAAAAAI/AAAAAAAAAAA/bwPIYfGxeo8/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg" class="img-circle img-responsive zoom" alt="Kai Ki-Ki Beta">
	</div>

	<div class="col-md-6">
	<h2>About me</h2>
	<p id="indent">Hi, I'm Kai! You may already know that at this point though. I will take this opertunity to tell a bit about myself. </p>
	<p id="indent">First of all, I made this site in my first year of college in a coding class and I enjoy coding. When I first did coding in highschool I was upset becase I could not understand it but now that I do understand it's really fun to have this skill. </p>
	<p id="indent">I also do art on my free time and injoy it alot. Fallow me on Deviant art if you want to know more.</p>
	<p id="indent">Oh, one more thing. I have a Youtube channle under the same name as this sight. Check it out and maybe leave a like or comment on some videos, or don't. It's your life. If you do want to look into any of this though you can look at the links below. </p>

	<!-- this is a butten that i do not think that i want bugt i will keep the code here if i change my mind -->

	<!-- <p><a class="btn btn-default" href="#"
	role="button">View details »</a></p> -->

	</div>
	</div>

	<div id="center" class="col-md-12">
	<button data-toggle="collapse" data-target="#moreless" class="btn btn-info" >Showmore/Less</button>
	</div>
	<!--id="showHide" type="button" class="btn btn-info">ShowMore/Less</button>-->

	<div id="moreless" class="collapse">
	<div class="col-md-4 collapse">
	<h2>Coding</h2>

	<p id="indent">I am currently in college for web desing and developent which is why this web page even exists. Ironicly I used to hate code but I found that when you understand it, it can be very fun to do and really cool. Not understanding it is ruff though so if anyone out there is interested I warn you that you need to be chill whne things don't go your way.</p>
	<p id="indent">With that inmind, the butten cap below will lead you to a page with a list of links that I got in college that may help anyone who would like to try coding, they sure did help me.</p>
	<p id="center"><a href="coding.html"><i class="fa fa-graduation-cap fa-5x zoom" aria-hidden="true"></i></a></p>
	<p id="indent"><small>You could also use the prompt "Coding" in the menu/nav bar.</small></p>
	<!--
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	-->
	</div>

	<div class="col-md-4 collapse">
	<h2>Art</h2>
	<p id="indent">I sometimes make art on my free time which I do not have alot of in college curently but I still try to do my best. If you would like to see more then fallow the links below.</p>
	<p><a class="btn btn-default zoom" href="art.html" role="button">Art Gallery »</a></p>
	<p id="indent">Or click this to see my DeviantArt page. </p>
	<p id="center"><a href="https://kurohikori.deviantart.com/"><i class="fab fa-deviantart fa-4x zoom"></i></a></p>
	</div>

	<div class="col-md-4 collapse">
	<h2>Youtube</h2>
	<p id="indent">My channel is a bit chaotic and all over the place. It is a bunch of videos that I just upload for the sake of intertainment for me and friends at this point. In the future I plan to make it more organized and falow a spasific stile. I may begin to upload video tutorials for coding, walkthroughs on 3d animation and speed paints on my computer. </p>
	<p id="indent">Other videos of other styles may be put on a different Youtube channel in the future. Who knows? Click the butten under this if you want to check out my channle. </p>

	<!-- butten takes person to my youtube channel -->

	<p><a class="btn btn-default zoom" href="https://www.youtube.com/channel/UCupav7SVwh06Py9oWIYKgKg?view_as=subscriber" role="button">Go Too Channel »</a></p>

	<p id="indent"><small>You could also use the prompt in the menu/nav bar for a link to my channel.</small></p>

	</div>
	</div> <!--THIS IS THE MORE LESS DIV END!-->
	</div>

	<hr>

	<div>
	<footer class="text-center">

	<p>© 2016 Company, Inc.</p>
	</footer>

	</div> <!-- /container -->


	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

	</body>

	</html>