<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="styles.css">
   <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
  body{
  	width: 100%;
  	height: 100%;
  }
/*Parallax*/

.parallax{
    background-image: url("Images/Homepage/bg.jpg");
    height: 540px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    position:relative;
}
/*Parallax*/

#header{
 position: absolute;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
	left: 20%;
  font-size: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 20px;
  background-color: #357eca;
  width: 50%;
  word-wrap: break-word;
  opacity: 0.9;
  font-weight: 900;
  padding-left: 5%;
  padding-right: 5%;



}

h5
{   
  color:white; 
  text-align: center;
    font-family: 'Montserrat';
      text-transform: uppercase;
      font-weight: 900;
 
  /*-webkit-margin-before:0.67em;
  -webkit-margin-after:0.67em;
  -webkit-margin-start:0px;
  -webkit-margin-end:0px;
  -webkit-tap-highlight-colour:rgba(0,0,0,0);
  -webkit-font-smoothing:antialiased;
  -webkit-box-direction:normal;
  position: absolute;*/
}
h5:after, h5:before
{
  content: '';
  width: 50px;
  height: 2px;
  background: black;
  margin: 0 10px;
}
/*--- Circular images --- */

.img-circular1,
.img-circular2,
.img-circular3 {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  display: block;
  margin: 0 auto;

  height: calc(0.2 * 100vmin); /* 64px at 320 and 256px at 1280 */
  width : calc(0.2 * 100vmin); /* nice responsive sizing */

  background-position: center;  /* center image in parent */
  background-repeat: no-repeat; /* prevents repeat of image! */
  background-size: cover;       /* stretch/shrink to fill */

  border-radius: 50%;
}

.img-circular1 { background-image: url('/Images/Homepage/learn.jpg'); }
.img-circular2 { background-image: url('/Images/Homepage/watch.jpg'); }
.img-circular3 { background-image: url('/Images/Homepage/practice.jpg'); }

#container1 {
  top: 100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  width: 70%;
  background-color: white;
  overflow: auto;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
    flex-grow: 1;
      height: 25vh;
  justify-content: space-around;
}

.wrap {
width: 30%;
}
table, th, td {

}

 .hptablefont
 {
	width: 33.3%;
	font-family: 'Montserrat'; 
	size: 1.5em; 
	color: green;   
	text-transform: uppercase;
  	align-items: center;
  	justify-content: center;
  	font-size: 3vh; 
 }
 
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121623693-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-121623693-1');
</script>

</head>
<body>
<div id="navigation"></div>
<div id="sidebar" style="opacity: 1; background-color: #eee;"></div>
<div id="rightsidebar" style="opacity: 1;  background-color: #eee;"></div>
<div class="parallax"><h5 id="header"><b>Welcome to RyanTeaches</b></h5></div>

<!--<img src="bg.jpg" style="top:60px;height: 510px;min-width: 100%;">-->
<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>

<div id="container1" style="padding-bottom: 0;">
    <div class="wrap">
    <div class="img-circular1"></div>
    </div>
    <div class="wrap">
    <a href="https://www.youtube.com/channel/UC5GPvJSUO4599z_ugFuoJwg"><div class="img-circular2"></div></a>
    </div>
    <div class="wrap">
    <div class="img-circular3"></div>
    </div>
    </div>

<div id="container1" style="padding-top: -3vh; padding-bottom: 100px;">
    	<table style="width:100%">
  <tr>
    <th class="hptablefont"><a href="learn.html">Learn</a></th>
    <th class="hptablefont"><a href="https://www.youtube.com/channel/UC5GPvJSUO4599z_ugFuoJwg"> Watch</a></th> 
    <th class="hptablefont"><a href="practice.html">Practice</a></th>
  </tr>
</table>
</div>
<div style="padding-bottom: 100px;">hi</div>


<script src="nav.js"></script>
<script src="template.js"></script>
</body>
</html>