Namyalg/index.html

## index.html
 <head>
  <title>
    Project Tachyon: Home Page
  </title>
</head>

<body style="background-color:black;">
  <table cellspacing="500" padding="60" border-radius="70">
    <tr>
      <th width = "375">HOME</th>
      <th width = "600">
        <div class="dropdown">
          <span><h>SPECIFICATIONS</h><h> AND DESIGN</h></span>
          <div class="dropdown-content">
           <p><a href="https://codepen.io/Nam2312/full/GRgeKYB">SPECS</a></p>
            <p><a href="https://codepen.io/Nam2312/full/xxbvVwa">DESIGN</a></p>
          </div>
        </div>
      </th>
      <th width = ><a href="https://codepen.io/Nam2312/full/gObVrXP">GALLERY</a></th>
    </tr>
    </table>
  <div class="container">
  <img src="https://i.postimg.cc/FsWyHjJy/Capture.jpg"  style="width:100%;">

  <div class="centered"><h1 class="ml2">P R O J E C T  </h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
  <h1 class="ml1">
  <span class="text-wrapper">
    <span class="line line1"></span>
    <span class="letters">T A C H Y O N</span>
    <span class="line line2"></span>
  </span>
</h1>
    <h2>A gravity driven kart designed and engineered with extreme skill and precision. </h2>
<img src = "https://i.postimg.cc/cLP53w23/TACH.jpg">

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script></div>
</div>


 <div class="ml1"></div>
<div class="ml2"></div>

<script>
{
  $( "div.ml1" ).delay( 800 );
  $( "div.ml2" );
});
</script>

## script.js
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml2');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml2 .letter',
    scale: [4,1],
    opacity: [0,0.9],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 750,
    delay: (el, i) => 60*i
  }).add({
    targets: '.ml2',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
var textWrapper = document.querySelector('.ml1 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml1 .letter',
    scale: [0.3,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 600,
    delay: (el, i) => 70 * (i+1)
  }).add({
    targets: '.ml1 .line',
    scaleX: [0,1],
    opacity: [0.5,1],
    easing: "easeOutExpo",
    duration: 1000,
    offset: '-=875',
    delay: (el, i, l) => 80 * (l - i)
  }).add({
    targets: '.ml1',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

## style.css
body
{
  color: #ffffff

}
#header{
  width: 30%;
  padding: 0px 10px;

}
.row
{
  display: flex;
  flex-wrap: wrap;
  padding: 0px 4px;
}

table {
  border-collapse: collapse;
  background-color:black;
  color:white;
    border-spacing: 15px;
  width : 100%;
  font-size:25px;`
  padding :15px;
      font-family: verdana;
  border-radius : 2px;
}
a
{
  text-decoration : none;
  color:white;
}

table, th, td {
  height : 100px;
  width = 30%;
    background-clip: padding-box; /* this has been added */
    /*border-radius: 20px;*/
    background-color: black;
    color: white;
    border: 5px solid black;
  border-radius : 4px;
}
a:hover
{
  color:#041480;
}
.dropdown {
  position: relative;
  display: inline-block;

}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border :2px solid black;
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

.stuff img{
  width: 100%;
}
p{
  display: inline-block;
  border: solid;
  padding: 15px;
  border-radius: 90px;
  width: 160px;
  text-align: center;
  font-family: calibri;
  margin-top: 0px;
  white-space: nowrap;
 overflow: hidden;
  text-overflow: ellipsis;
}
#id{
  width: 25%;
  background-size: cover;
  background-repeat: no-repeat;
  border: solid;
  padding: 15px;
  text-align: center;
  vertical-align: center;
  color: black;
}
#id:hover p{
  width: 100%;
  height: 50%;
  border-radius: 0px;
  opacity: 0.65;
  background: black;
  color: white;
  border-width: 0px;
  word-wrap: break-word;
}
p:hover {
  background: grey;
  opacity: 0.5;
}
/*url('http://24.media.tumblr.com/tumblr_m3zbob0VCe1rvf9w7o1_500.gif'*/
* {
  box-sizing: border-box;
}
.column {
  float: left;
  height: 25%;
  width: 50%;
  padding: 20%;
  height: 300px;
  background: black;
  color: white;
  }
.row:after {
  content: "";
  clear: both;
}
a{
  text-decoration: none;
  color:white;
}
#red{
  background: black;
  width: 30%;
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
.dropdown-content p{
  border: none;
}
img
{
  opacity : 0.3;
    display: block;
  margin-left: auto;
  margin-right: auto;
}
.ml2 {
  font-weight: 1200;
  font-size: 5.5em;
  margin-left :auto;
  margin-right : auto;
}

.ml2 .letter {
  display: inline-block;
  line-height: 1.2em;
}

.ml1 {
  font-weight: 900;
  font-size: 6em;
}

.ml1 .letter {
  display: inline-block;
  line-height: 1em;
}

.ml1 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
  margin-left :auto;
  margin-right : auto;
  font-size:80;
}

.ml1 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #fff;
  transform-origin: 0 0;
}

.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }
.container {
  position: relative;
  text-align: center;
  color: white;
}

img
{
	opacity : 0.3;
  }
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

## thelatest.markdown

      
    Raw
  

              thelatest.markdown
            
          
    thelatest

A Pen by Namya on CodePen.
License.
	<head>
	<title>
	Project Tachyon: Home Page
	</title>
	</head>

	<body style="background-color:black;">
	<table cellspacing="500" padding="60" border-radius="70">
	<tr>
	<th width = "375">HOME</th>
	<th width = "600">
	<div class="dropdown">
	<span><h>SPECIFICATIONS</h><h> AND DESIGN</h></span>
	<div class="dropdown-content">
	<p><a href="https://codepen.io/Nam2312/full/GRgeKYB">SPECS</a></p>
	<p><a href="https://codepen.io/Nam2312/full/xxbvVwa">DESIGN</a></p>
	</div>
	</div>
	</th>
	<th width = ><a href="https://codepen.io/Nam2312/full/gObVrXP">GALLERY</a></th>
	</tr>
	</table>
	<div class="container">
	<img src="https://i.postimg.cc/FsWyHjJy/Capture.jpg" style="width:100%;">

	<div class="centered"><h1 class="ml2">P R O J E C T </h1>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
	<h1 class="ml1">
	<span class="text-wrapper">
	<span class="line line1"></span>
	<span class="letters">T A C H Y O N</span>
	<span class="line line2"></span>
	</span>
	</h1>
	<h2>A gravity driven kart designed and engineered with extreme skill and precision. </h2>
	<img src = "https://i.postimg.cc/cLP53w23/TACH.jpg">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script></div>
	</div>


	<div class="ml1"></div>
	<div class="ml2"></div>

	<script>
	{
	$( "div.ml1" ).delay( 800 );
	$( "div.ml2" );
	});
	</script>
	// Wrap every letter in a span
	var textWrapper = document.querySelector('.ml2');
	textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

	anime.timeline({loop: true})
	.add({
	targets: '.ml2 .letter',
	scale: [4,1],
	opacity: [0,0.9],
	translateZ: 0,
	easing: "easeOutExpo",
	duration: 750,
	delay: (el, i) => 60*i
	}).add({
	targets: '.ml2',
	opacity: 0,
	duration: 1000,
	easing: "easeOutExpo",
	delay: 1000
	});
	var textWrapper = document.querySelector('.ml1 .letters');
	textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

	anime.timeline({loop: true})
	.add({
	targets: '.ml1 .letter',
	scale: [0.3,1],
	opacity: [0,1],
	translateZ: 0,
	easing: "easeOutExpo",
	duration: 600,
	delay: (el, i) => 70 * (i+1)
	}).add({
	targets: '.ml1 .line',
	scaleX: [0,1],
	opacity: [0.5,1],
	easing: "easeOutExpo",
	duration: 1000,
	offset: '-=875',
	delay: (el, i, l) => 80 * (l - i)
	}).add({
	targets: '.ml1',
	opacity: 0,
	duration: 1000,
	easing: "easeOutExpo",
	delay: 1000
	});
	body
	{
	color: #ffffff

	}
	#header{
	width: 30%;
	padding: 0px 10px;

	}
	.row
	{
	display: flex;
	flex-wrap: wrap;
	padding: 0px 4px;
	}

	table {
	border-collapse: collapse;
	background-color:black;
	color:white;
	border-spacing: 15px;
	width : 100%;
	font-size:25px;`
	padding :15px;
	font-family: verdana;
	border-radius : 2px;
	}
	a
	{
	text-decoration : none;
	color:white;
	}

	table, th, td {
	height : 100px;
	width = 30%;
	background-clip: padding-box; /* this has been added */
	/border-radius: 20px;/
	background-color: black;
	color: white;
	border: 5px solid black;
	border-radius : 4px;
	}
	a:hover
	{
	color:#041480;
	}
	.dropdown {
	position: relative;
	display: inline-block;

	}

	.dropdown-content {
	display: none;
	position: absolute;
	background-color: black;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border :2px solid black;
	padding: 12px 16px;
	z-index: 1;
	}

	.dropdown:hover .dropdown-content {
	display: block;
	}
	.footer {
	background-color: #f1f1f1;
	padding: 10px;
	text-align: center;
	}

	.stuff img{
	width: 100%;
	}
	p{
	display: inline-block;
	border: solid;
	padding: 15px;
	border-radius: 90px;
	width: 160px;
	text-align: center;
	font-family: calibri;
	margin-top: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	#id{
	width: 25%;
	background-size: cover;
	background-repeat: no-repeat;
	border: solid;
	padding: 15px;
	text-align: center;
	vertical-align: center;
	color: black;
	}
	#id:hover p{
	width: 100%;
	height: 50%;
	border-radius: 0px;
	opacity: 0.65;
	background: black;
	color: white;
	border-width: 0px;
	word-wrap: break-word;
	}
	p:hover {
	background: grey;
	opacity: 0.5;
	}
	/url('http://24.media.tumblr.com/tumblr_m3zbob0VCe1rvf9w7o1_500.gif'/
	* {
	box-sizing: border-box;
	}
	.column {
	float: left;
	height: 25%;
	width: 50%;
	padding: 20%;
	height: 300px;
	background: black;
	color: white;
	}
	.row:after {
	content: "";
	clear: both;
	}
	a{
	text-decoration: none;
	color:white;
	}
	#red{
	background: black;
	width: 30%;
	}
	/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
	.column {
	width: 100%;
	}
	}
	.dropdown-content p{
	border: none;
	}
	img
	{
	opacity : 0.3;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	.ml2 {
	font-weight: 1200;
	font-size: 5.5em;
	margin-left :auto;
	margin-right : auto;
	}

	.ml2 .letter {
	display: inline-block;
	line-height: 1.2em;
	}

	.ml1 {
	font-weight: 900;
	font-size: 6em;
	}

	.ml1 .letter {
	display: inline-block;
	line-height: 1em;
	}

	.ml1 .text-wrapper {
	position: relative;
	display: inline-block;
	padding-top: 0.1em;
	padding-right: 0.05em;
	padding-bottom: 0.15em;
	margin-left :auto;
	margin-right : auto;
	font-size:80;
	}

	.ml1 .line {
	opacity: 0;
	position: absolute;
	left: 0;
	height: 3px;
	width: 100%;
	background-color: #fff;
	transform-origin: 0 0;
	}

	.ml1 .line1 { top: 0; }
	.ml1 .line2 { bottom: 0; }
	.container {
	position: relative;
	text-align: center;
	color: white;
	}

	img
	{
	opacity : 0.3;
	}
	.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}