Trevorjoel/Musicandart.php

## about.html


<head>

<title>About the page</title>

<link rel="stylesheet" href="main.css">
  </style>
</head>

<body>


    <style type="text/css">
   { background-image: url("images/old-grunge-vector-background.jpg");
    margin-left: 1cm;
}

</style>

<div class="nav">
      <ul>
        <li class="home"><a href="index.html">Home</a></li>
        <li class="musicandart"><a href="musicandart.html">Music and Art</a></li>
        <li class="Travels"><a href="#">Travels</a></li>
        <li class="A better World"><a href="#">A better World</a></li>
        <li class="Teach and Learn"><a href="#">Teach and Learn</a></li>
        <li class="Marketplace"><a href="#">Marketplace</a></li>
        <li class="contact"><a href="#">Contact</a></li>
        <li class="About"><a href="about.html">About</a></li>
      </ul>
    </div>

<h1>About our awesome page</h1>

<h4>Who we are</h4>
<p>This is a community of like minded people. We are artists, writers, comics, travelers, knowledge seekers, teachers, activists, small business owners, entrepeneurs who share their thoughts, travels, adventures, projects; its a place to connect with eachother on a global platform. Bookmark this page and check back for updates.</p>

<p>Why not facebook? Because there is too much negativity, clickbait and mis-information. We will curate our page, like a beautiful garden, only the most useful information will get through to the viewers. </P>

<p>If you like garbage and mis-information but don't like interesting things, then click away, the internet is your oyster. This is a community website where we try make a difference by supporting each other. Submit your ideas, articles, stories and promotions Here (LINK TO CONTACTS)</p>

<h4>Search function</h4>
<p>If you are looking for an article, want to find a service or connect with someone by locality, all posts have been tagged by topic and location. Thus, all information is able to be recalled with the search function. HERE! Or feel free to browse, there is something for everybody.</p>

<h4>Topics</h4>
<p>Below and in the navigation bar at the top of each page are the links to each of our website categories. Scroll down for a description of each.</p>

<h4><A HREF="file:///C:/Users/Trev/Desktop/web/musicandart.html">Music and art for the revolution</A></h4>

<p>Find and share music and art that feeds the soul, makes the body move, calms the nerves, tickles the intellect and/or makes you want to smash the system. Use it to promote our own music and up and coming acts.</p>

<h4><A HREF="https://www.facebook.com/tgarrity">Travels, adventures and stories.</A></h4>

<p> This is where I will be documenting my travels. You will see my best photos, stories and a slightly twisted commentary
on all things foreign. I will also leave travel rescources to help you get on your way</p>

<h4><A HREF="https://www.facebook.com/tgarrity">Make a better world</A></h4>

<p> If you're not a completely selfish you should have some sort of interest in
leaving a better world for future generations. So here is the place to learn about wholesome social movements, inspirational
people, quotes, organic farming. So put flowers in the hair, roll up a fat one, save the whales and smash the system.
Let's try and have a solution based focus here, I myself will try to refrain from fruitless whining. </p>

<h4><A HREF="https://www.facebook.com/tgarrity">Teach, learn and share</A></h4>

<p>Learning is the best thing, you are never too old to learn. Here is the place to find the best knowledge and share what you know. I will be sharing interesting things I've learnt, articles, tutorials and videos on all topics from particle physics and organic farming to how to slap your Ho without spilling your Hennesey.</p>

<h4><A HREF="https://www.facebook.com/tgarrity">Marketplace</A></h4>

<h4>Submit</h4>
<p>Like what we do?<! --- (link)---> Submit your own music, art, articles, stories and pitch your business ideas or advertise your services right here right now. Each location and category will be tagged and be able to be found with the (link)search function.</p>

<p><em>I hope you enjoy and share your thoughts with me.</em></p>
<p>Trevor</p>

<h2 class="tst2">Enjoy the Brains</h2>
<IMG class="tst2"SRC="images/braindeadratmonkey.jpg" ALT="Enjoy" WIDTH=332 HEIGHT=332>
<h4><A HREF="https://www.facebook.com/tgarrity">Click for my facebook page like a good little voyeur</A></h4>

</body>


## comment.php

<html>
  <head>
    <title>Comments</title>
    <? include("insert_to.php"); ?>
  </head>
  <body>
  <h2 class="comments-wrapper-heading"> Comments </h2>
    <div class="comment-form">

      <form id="postID" action="insert_to.php" method="POST">
        <div class="commentform-element">
          <label class="hide" for="name">Full Name</label><br>
          <input class="input-fields" id="name" name="name" type="text" placeholder="What's up?" value=""/>
        </div>
        <div class="commentform-element">
          <label class="hide" for="author">Email</label><br>
          <input class="input-fields" id="email" name="email" type="text" placeholder="Email" value=""/>
        </div>
        <div class="commentform-element">
          <label class="hide" for="comment">Message</label><br>
          <textarea id="comment" class="input-fields" placeholder="Comment here!" name="comment" cols="40" rows="4"></textarea>

        </div>
        <input name="submit" class="form-submit-button"  type="submit" id="articleid" value="Post comment">
      <input type="hidden" name="articleid" id="articleid" value="<?php echo $_GET['id']; ?>" />

      <?php

                  if(isset($_GET['id'])){                // This will show if the url id is ok

    echo "id is set to number:"; echo $_GET["id"];
}


?>


      </form>

    </div>
  </body>
</html>

## index.html

      
    Raw
  

              index.html
            
          
## insert_to.php
<?php
//if( $_POST ){

define ('DB_NAME', 'comments') ;
define ('DB_USER', 'root' ) ;
define ('DB_PASSWORD', '' ) ;
define ('DB_HOST', 'localhost' ) ;


     $link = mysql_connect (DB_HOST, DB_USER, DB_PASSWORD);
		if (!$link)  {
    		die ('could not connect : ' . mysql_error ()) ;
}
					echo 'Connected successfully to the database';

	mysql_connect (DB_HOST, DB_USER, DB_PASSWORD);

		$database_selected = mysql_select_db ('DB_NAME', $link) ;
		if(!'database_selected') {
   	    die('Could not connect: ' . mysql_error());
}
				echo 'Connected successfully database';


$name = $_POST ["name"];
$email = $_POST ["email"];
$comment = $_POST ["comment"];
$articleid = $_POST["articleid"];

if( ! is_numeric($articleid) )
   die('invalid article id');


$sql = "INSERT INTO comments.commentform (`ID`, `name`, `email`, `comment`, `articleid`) VALUES (NULL,'$name','$email', '$comment' , `$articleid`);";
echo "$name","<br>", "$comment", "$articleid";


 //mysql_query($sql);

$success= mysql_query("INSERT INTO comments.commentform  (`ID`, `name`, `email`, `comment`, `articleid`)
		VALUES (NULL, '$name', '$email', '$comment', '$articleid');");
		if (!$success) {
		die('Could not Insert: ' . mysql_error());
}


//echo "$name","<br>", "$comment";
//	if (!mysql_query($sql)) {
// 	die('Error: ' . mysql_error());
//}

mysql_close($link);
//}


?>

## list_comments.php


<?php
define ('DB_NAME', 'comments') ;
define ('DB_USER', 'root' ) ;
define ('DB_PASSWORD', '' ) ;
define ('DB_HOST', 'localhost' ) ;

$link = mysql_connect (DB_HOST, DB_USER, DB_PASSWORD);
if (!$link)  {
	die ('could not connect : ' . mysql_error ()) ;
}
//echo 'Connected successfully to the database';

mysql_connect (DB_HOST, DB_USER, DB_PASSWORD);

$database_selected = mysql_select_db ('comments', $link) ;
if(!'database_selected') {
	die('Could not connect: ' . mysql_error());
}
//echo 'Connected successfully database';


$link = new mysqli (DB_HOST, DB_USER, DB_PASSWORD);

	if ($link->connect_error)
	die($link->connect_error);


$articleid = $_GET["id"];

if( ! is_numeric($articleid) )
   die('invalid article id');

   $query = "SELECT * FROM `comments` . `commentform` WHERE `articleid` = $articleid";
   $result = $link->query($query);
   if (!$result) die ("Database access failed: " . $link->error);

   $comments = mysql_query($query);
   //print_r($result);
   while($rows = $result->fetch_assoc()){
   		$id = $rows ['ID'];
   	    $name = $rows ['name'];
   	  	 $comment = $rows ['comment'];

   	   	 echo "  <div class='comment_reply'>
   	   	 <b>$name</b><br/><br>
   	   	 <b>Comment:</b><br> <div class= '' <br />$comment
   	   	 </div>
   	   	 </div>
   	   	 ";
   }

mysql_close();
?>

## main.css
a  {color: #500B0B;
}

body {
      margin: 0;
      padding: 0;
      background: none;
    }
body { background-repeat: no-repeat;
  background-attachment: fixed;
  background-image:  url("images/old-grunge-vector-background.jpg");
  margin-left: 1cm; margin-right: 1cm;
}
body#altbackground {
  background-repeat: repeat-y;
  background-attachment: ;
  background-image:  url("images/sharkbaysunset.jpg");
  background-position: center;

  margin-left: 1cm; margin-right: 1cm;
}
body#altbackground_lusa{
background-image: url("images/whaleshark.jpg");

}

div#lusa{
  background-image: url("images/lusa/light2.jpg");
background-repeat: none;
background-position: center;
background-attachment: fixed;

}

div#bret {
    background-image: url("images/whaleshark.jpg");
    background-position: left;
    background-repeat: none;
    background-attachment: fixed;
}

em {
  font-size: 115%;
  font-weight: bolder;
  font-style: inherit;

}

h1 { color: #500B0B;
  font-family: Firefly;
  text-align: center;
  border: none;
  background-color : none;
  font-size: 350%;
  border-radius: 80px;
  box-shadow: none;
  margin-bottom: 5px;
  margin-right: 15%;
  margin-top: 5px;
  padding: 10px;

}
h2 { font-family: Firefly;
  color: #F00C0C;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 20px;
  padding: 10px
}
h4 {
	text-align: center;
	font-size: 150%;
	color: rgba(113, 7, 7, 0.95);
  	padding: 10px;
  	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.69);
  	border-radius: 20px;
  	width: 98.6%;
  	font-family: Oranienbaum;
  	margin-right:0%;
  	margin-left:0%;
  	align: center;

}
#h4sidebar_right{
	margin-right:0%;
	padding: 8px;
	width: 90%;
}
#h4about{
	align: left;
	margin-right:100%;
	width:25%;
	float: center;

}

iframe { position: center;
     border-radius: 5px;
     border-spacing: 10px;
     padding: 10px;
     margin-bottom: 10px;
     border: medium inset rgba(113, 7, 7, 0.95);

}

p {
    font-family: Oranienbaum;
    color: #500B0B;
    font-size: 135%;
    font-style: center;
    font-weight: 0%;
    margin-right:10px;
    text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 20px;

}
p#article_text{
	margin-right:15%;
}

.textopacity_r {
      background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
      background: rgba(204, 204, 204, 0.2);
      border-radius: 10px;
      padding: 10px;
      float: top;
    margin-right:15%;
}


.textopacity {
      background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
      background: rgba(204, 204, 204, 0.4);
      border-radius: 20px;
      padding: 10px;
}
.textopacitybottom{ /* To keep opaque text background under image galleries */
      background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
      background: rgba(204, 204, 204, 0.4);
      border-radius: 20px;
      position: inherit;
      top: 100%;
      padding-top: 10px;
      width: 100%;

}

a.active {
      background-color: #fff;
      color: #444;
    }

.articleform {
	background-color: #F8F8F8;
    padding: 20px;
    border: 5px solid #008000 ;
    border-color: rgba(113, 7, 7, 0.95);
    border-style: inset;
    border-radius: 10px;
    margin: 10px;
    font: black;
    float:left;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    width:81%;

}
#articleform_header{
	background-image: url("images/old-grunge-vector-background.jpg");

	background-repeat:;
	background-position: bottom;
	background-color: #EAD579;
}
#articleform_awards{
	width:92%;
}


article#altbackground1{
  background-image: url("images/whaleshark.jpg");
  background-position: fixed;

    padding: 20px;
    border: 5px solid #008000 ;
    border-color: rgba(113, 7, 7, 0.95);
    border-style: inset;
    border-radius: 10px;
    margin: 10px;
    font: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;

}
article#altbackground2{
	background-image: url("images/under_construction.jpg");
}
.comment_container {

	padding: 10px;

}
.comment_reply{
	margin:5px;
	border: 4px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	width:50%;
	padding: 10px;
	margin-top:15px


}
.comment-form {
	border: 4px solid rgba(0,0,0,0.1);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
	width:50%;
	padding: 10px;
	margin:5px;

}

.container_gallery {

    padding: 0px;
    border: 5px solid #008000 ;
    border-color: rgba(113, 7, 7, 0.95);
    border-style: none;
    font: black;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 0px;
    width: 80%;
    margin: 30px auto;
    overflow: hidden;
  }
    .container_galleryimage {
    background :none;
    padding: 20px;
    font: black;
    width: 96%;
	margin: 10px auto;
    overflow: hidden;

  }
  .container_1 input#search{                                 /* search bar */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.69);
  border-radius: 20px;
  width: 150px;
  height: 20px;
  border: solid white: 10px;
  padding: none;
  font-size: 10pt;
  float: right;
  padding-left: 10px;
  overflow: scroll;
  width: 180px;
  vertical-align: middle;
  white-space: nowrap;

}

.box {                                             /* Figure out wtf this is for */
  padding: 0px;
  border-radius: 0px;
  float: right;
  position: left;

}
.featuresColumn {
	float: left;
	width: 32%;
	margin-right: 10px;

	}

.flagimage { padding: 0px;
  	border-radius: 15px;
  	padding-right: 0px;
  	float: right;

}

	.galleryItem {
    width : 130%;
    color: #797478;
    font: 20px/1.5 Verdana, Helvetica, sans-serif;
    float: right;
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;
    width: 16%;
    margin:  10% 4% 10px 4%;
    margin-top: 10px;
  }
  .galleryitem_last{
    max-width: 230%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: rgba(113, 7, 7, 0.95);
    border-style: none;
    margin: 10% 4% 10px 4% ;
    margin-top: 5px;
    width: 130%;

}
  .galleryItem h3 {
    text-transform: uppercase;
    font-size: 170%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    font-family: times;
    color: #500B0B;
    margin:  1% 4% 1px 4%;
    overflow: visible;
    padding: 3px;
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.3);
      width: 130%;
  }

  .galleryItem img {
    max-width: 150%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: rgba(113, 7, 7, 0.95);
    border-style: none;
    margin: 10% 4% 10px 4% ;
    margin-top: 5px;
    width: 130%;
    height: 40%;

}

.galleryfoot{
  padding-top: 200px;
  position: relative;
    height: 20px;
    border: 3px solid #73AD21;
}

.icon {
  padding-left: 10px;
  float: left;

}

.imageright {
    padding: 10px;
    background-color: none;
    border: rgba(113, 7, 7, 0.95);
    border-style: inset; border-radius: 10px ;
    float: right;
    margin-left: 10px

}

.last {
	margin-right: 0%;
}

.nav ul {
      list-style: inside;
      text-align: justify;
      padding-top: 10px;

      border: solid white: 0px;
      background-color: none; opacity: 1.8;
      margin-left: 10px;
      padding-bottom: 5px;
      position: center;
      padding: 10px;
      float: none;

      }

 .nav li {
      font-family: 'Monastic Pro', sans-serif;
      font-size: 112%;
      line-height: 100px;
      height: 40px;
      border: 0px solid #888;
      line-height: 40px;
      padding: 3px;
      border-collapse: justify;
      text-align: justify;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
      border-radius: 400px;
      background-color: none;
      content: left;
    }

    .nav li {
      display: inline-block;
      text-align: justify;

    }
    .nav a {
      text-decoration: none;
      color: inherit;
    }
    .nav a:hover {
      background-color: #005f5f;
    }


.sidebar_right{
	background-color:#EAD579 ;
	background-image: url("images/old-grunge-vector-background.jpg");
	background-position: top;
    border: 5px solid #008000 ;
    border-color: rgba(113, 7, 7, 0.95);
    border-style: inset;
    border-radius: 10px;
    margin-left: 82%;
    Margin-right: 10px;
    margin-top:10px;
    position: fixed;
    padding:10px;
    font: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    float: right;
    width:12%;

}

#SkypeButton_Call_trevor.garrity_1 {

      margin:0 !important;
    }

#SkypeButton_Call_trevor.garrity_1 img  {
      margin:0 !important;
      vertical-align:left !important;
      background-color: black;

}

.tst1 {font-family: arial; text-align: center; font-size: 125%;}

.tst2 {
    padding: 10px;
    background-color: none;
    border: rgba(113, 7, 7, 0.95);
    border-style: inset; border-radius: 10px ;
}
 .tst3 {
  padding: 0px;
    background-color: none;
    border: rgba(113, 7, 7, 0.95);
    border-style: none;
    border-radius: 10px ;
    float: none;
    margin-right: 10px ;
    border-radius: 10px;


}

.textopacity_box{

      background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
      background: rgba(204, 204, 204, 0.2);
      border-radius: 10px;
      font-size: 170%;
      font-family: times;
      height: inherit;
      margin:  4% 4% 1px 4%;
      overflow: hidden;
      padding: 5px;
      width: 130%;

}


/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
 .galleryItem {width: 21%; }

}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){r
 .galleryItem {width: 29.33333%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
 .galleryItem{width: 46%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
 .galleryItem {width: 96%;}
 .galleryItem .wrapper .featuresColumn img {width: 96%;}
 .galleryItem h3 {font-size: 18px;}
 .galleryItem p, {font-size: 18px;}
}
    border-radius: 10px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      border-radius: 15px;


## Musicandart.php

<html>


<head>

<title>Music and Art</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css">
  <?php include 'header.php';
   ?><? include("insert_to.php"); ?>

</head>


<body>
  <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<body>

<h1>Music and Art for the revolution</h1>

<p> Find and share music and art that feeds the soul, makes the body move, calms the nerves, tickles the intellect and/or makes you want to smash the system. Use it to promote our own music and up and coming acts.</p>

<article class=articleform>
  <header>
    <H4>Presenting the Jingles</H4><IMG style="float: right;"class=""SRC="images/estonianflag.jpg" ALT="theteachermarket" WIDTH=80 HEIGHT=60>
  </header>
  <p>Published: <time pubdate="pubdate">18th Jan 2016</time></p>
  <IMG class=""SRC="images/jinglescasualwide.jpg" ALT="Enjoy" WIDTH=466 HEIGHT=280>

<p>This great four piece band out of Estonia are long time friends of mine.</p><p>They consist of; Jonathan flack on guitars and vocals,
    Rauno Vaher on percussion, Hainn Hoppe on guitars and Tanel Liberg on bass guitar with all members on the vibes.</p><p>Their style is an eclectic throwback to simpler times when music was played for love, not vanity or riches. Their sets consist of unique, upbeat renditions of popular songs and old classics, with well written and rapidly developing originals being continually added to the set list. It's the type of show than can pull you out of a troubled state of mind and get you smiling and dancing the night away. <p>They are headed up by Jonathan from Melbourne Australia, who infuses the band with a great philosophy and work ethic. Jonathan has been blessed with a great group of like-minded musicians who are all accomplished in their art. The jingles are great bunch of guys who all contribute to the songwriting process, and stage presence.<p> Spending a lot of time hanging out with them, watching them rehearse, perform and get better I would bet they are going somewhere soon.</p><p>They are presently in the competition for Estonian Eurovision and you can support them with that. You should really check them out if you get the chance, I can personally vouch for them. <p>Follow them on their Facebook page (below the video, don't forget to like and share) to keep up to date on gigs, new material or to buy their new album.</p>

    <p>Here's the latest video of them: </p>

      <iframe width="480" height="270" src="https://www.youtube.com/embed/te2VC3koMnc" frameborder="0" allowfullscreen></iframe><br>


        <div class="fb-like" data-href="https://www.facebook.com/flackandvaher" data-width="100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true" style= ""></div>
          <p>
            <p><A HREF="file:///C:/Users/Trev/Desktop/web/musicandart.html">Clickey here for Music and art</A></p>
<h2 class="comments-wrapper-heading"> Comments </h2>


    <?php
          include ("list_comments.php");
          include ('comment.php'); ?>


<?php    include ("insert_to.php"); ?>
  <footer>

  </footer>
</article>

<article class=articleform>
  <header>
    <H4>Michael Franti and spearherad</H4>
  </header>
 <p>Published: <time pubdate="pubdate">21st Jan 2016</time></p>


<p>. .. they are cool because ... You should listen to them because ...
Here is a video of them </p>

  ...
  <footer>
    <p><small>Creative Commons Attribution-ShareAlike License</small></p>
  </footer>
</article>

<h2 class="tst2">Enjoy the brains</h2>
<IMG class="tst2"SRC="images/braindeadratmonkey.jpg" ALT="Enjoy" WIDTH=332 HEIGHT=332>
<h4><A HREF="https://www.facebook.com/tgarrity">Click for my facebook page like a good little voyeur</A></h4>


</body>
</html>


	<head>

	<title>About the page</title>

	<link rel="stylesheet" href="main.css">
	</style>
	</head>

	<body>


	<style type="text/css">
	{ background-image: url("images/old-grunge-vector-background.jpg");
	margin-left: 1cm;
	}

	</style>

	<div class="nav">
	<ul>
	<li class="home"><a href="index.html">Home</a></li>
	<li class="musicandart"><a href="musicandart.html">Music and Art</a></li>
	<li class="Travels"><a href="#">Travels</a></li>
	<li class="A better World"><a href="#">A better World</a></li>
	<li class="Teach and Learn"><a href="#">Teach and Learn</a></li>
	<li class="Marketplace"><a href="#">Marketplace</a></li>
	<li class="contact"><a href="#">Contact</a></li>
	<li class="About"><a href="about.html">About</a></li>
	</ul>
	</div>

	<h1>About our awesome page</h1>

	<h4>Who we are</h4>
	<p>This is a community of like minded people. We are artists, writers, comics, travelers, knowledge seekers, teachers, activists, small business owners, entrepeneurs who share their thoughts, travels, adventures, projects; its a place to connect with eachother on a global platform. Bookmark this page and check back for updates.</p>

	<p>Why not facebook? Because there is too much negativity, clickbait and mis-information. We will curate our page, like a beautiful garden, only the most useful information will get through to the viewers. </P>

	<p>If you like garbage and mis-information but don't like interesting things, then click away, the internet is your oyster. This is a community website where we try make a difference by supporting each other. Submit your ideas, articles, stories and promotions Here (LINK TO CONTACTS)</p>

	<h4>Search function</h4>
	<p>If you are looking for an article, want to find a service or connect with someone by locality, all posts have been tagged by topic and location. Thus, all information is able to be recalled with the search function. HERE! Or feel free to browse, there is something for everybody.</p>

	<h4>Topics</h4>
	<p>Below and in the navigation bar at the top of each page are the links to each of our website categories. Scroll down for a description of each.</p>

	<h4><A HREF="file:///C:/Users/Trev/Desktop/web/musicandart.html">Music and art for the revolution</A></h4>

	<p>Find and share music and art that feeds the soul, makes the body move, calms the nerves, tickles the intellect and/or makes you want to smash the system. Use it to promote our own music and up and coming acts.</p>

	<h4><A HREF="https://www.facebook.com/tgarrity">Travels, adventures and stories.</A></h4>

	<p> This is where I will be documenting my travels. You will see my best photos, stories and a slightly twisted commentary
	on all things foreign. I will also leave travel rescources to help you get on your way</p>

	<h4><A HREF="https://www.facebook.com/tgarrity">Make a better world</A></h4>

	<p> If you're not a completely selfish you should have some sort of interest in
	leaving a better world for future generations. So here is the place to learn about wholesome social movements, inspirational
	people, quotes, organic farming. So put flowers in the hair, roll up a fat one, save the whales and smash the system.
	Let's try and have a solution based focus here, I myself will try to refrain from fruitless whining. </p>

	<h4><A HREF="https://www.facebook.com/tgarrity">Teach, learn and share</A></h4>

	<p>Learning is the best thing, you are never too old to learn. Here is the place to find the best knowledge and share what you know. I will be sharing interesting things I've learnt, articles, tutorials and videos on all topics from particle physics and organic farming to how to slap your Ho without spilling your Hennesey.</p>

	<h4><A HREF="https://www.facebook.com/tgarrity">Marketplace</A></h4>

	<h4>Submit</h4>
	<p>Like what we do?<! --- (link)---> Submit your own music, art, articles, stories and pitch your business ideas or advertise your services right here right now. Each location and category will be tagged and be able to be found with the (link)search function.</p>

	<p><em>I hope you enjoy and share your thoughts with me.</em></p>
	<p>Trevor</p>

	<h2 class="tst2">Enjoy the Brains</h2>
	<IMG class="tst2"SRC="images/braindeadratmonkey.jpg" ALT="Enjoy" WIDTH=332 HEIGHT=332>
	<h4><A HREF="https://www.facebook.com/tgarrity">Click for my facebook page like a good little voyeur</A></h4>

	</body>

	<html>
	<head>
	<title>Comments</title>
	<? include("insert_to.php"); ?>
	</head>
	<body>
	<h2 class="comments-wrapper-heading"> Comments </h2>
	<div class="comment-form">

	<form id="postID" action="insert_to.php" method="POST">
	<div class="commentform-element">
	<label class="hide" for="name">Full Name</label><br>
	<input class="input-fields" id="name" name="name" type="text" placeholder="What's up?" value=""/>
	</div>
	<div class="commentform-element">
	<label class="hide" for="author">Email</label><br>
	<input class="input-fields" id="email" name="email" type="text" placeholder="Email" value=""/>
	</div>
	<div class="commentform-element">
	<label class="hide" for="comment">Message</label><br>
	<textarea id="comment" class="input-fields" placeholder="Comment here!" name="comment" cols="40" rows="4"></textarea>

	</div>
	<input name="submit" class="form-submit-button" type="submit" id="articleid" value="Post comment">
	<input type="hidden" name="articleid" id="articleid" value="<?php echo $_GET['id']; ?>" />

	<?php

	if(isset($_GET['id'])){ // This will show if the url id is ok

	echo "id is set to number:"; echo $_GET["id"];
	}



	?>


	</form>

	</div>
	</body>
	</html>
	<?php
	//if( $_POST ){

	define ('DB_NAME', 'comments') ;
	define ('DB_USER', 'root' ) ;
	define ('DB_PASSWORD', '' ) ;
	define ('DB_HOST', 'localhost' ) ;


	$link = mysql_connect (DB_HOST, DB_USER, DB_PASSWORD);
	if (!$link) {
	die ('could not connect : ' . mysql_error ()) ;
	}
	echo 'Connected successfully to the database';

	mysql_connect (DB_HOST, DB_USER, DB_PASSWORD);

	$database_selected = mysql_select_db ('DB_NAME', $link) ;
	if(!'database_selected') {
	die('Could not connect: ' . mysql_error());
	}
	echo 'Connected successfully database';



	$name = $_POST ["name"];
	$email = $_POST ["email"];
	$comment = $_POST ["comment"];
	$articleid = $_POST["articleid"];

	if( ! is_numeric($articleid) )
	die('invalid article id');



	$sql = "INSERT INTO comments.commentform (`ID`, `name`, `email`, `comment`, `articleid`) VALUES (NULL,'$name','$email', '$comment' , `$articleid`);";
	echo "$name","<br>", "$comment", "$articleid";


	//mysql_query($sql);

	$success= mysql_query("INSERT INTO comments.commentform (`ID`, `name`, `email`, `comment`, `articleid`)
	VALUES (NULL, '$name', '$email', '$comment', '$articleid');");
	if (!$success) {
	die('Could not Insert: ' . mysql_error());
	}


	//echo "$name","<br>", "$comment";
	// if (!mysql_query($sql)) {
	// die('Error: ' . mysql_error());
	//}

	mysql_close($link);
	//}




	?>
	a {color: #500B0B;
	}

	body {
	margin: 0;
	padding: 0;
	background: none;
	}
	body { background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url("images/old-grunge-vector-background.jpg");
	margin-left: 1cm; margin-right: 1cm;
	}
	body#altbackground {
	background-repeat: repeat-y;
	background-attachment: ;
	background-image: url("images/sharkbaysunset.jpg");
	background-position: center;

	margin-left: 1cm; margin-right: 1cm;
	}
	body#altbackground_lusa{
	background-image: url("images/whaleshark.jpg");

	}

	div#lusa{
	background-image: url("images/lusa/light2.jpg");
	background-repeat: none;
	background-position: center;
	background-attachment: fixed;

	}

	div#bret {
	background-image: url("images/whaleshark.jpg");
	background-position: left;
	background-repeat: none;
	background-attachment: fixed;
	}

	em {
	font-size: 115%;
	font-weight: bolder;
	font-style: inherit;

	}

	h1 { color: #500B0B;
	font-family: Firefly;
	text-align: center;
	border: none;
	background-color : none;
	font-size: 350%;
	border-radius: 80px;
	box-shadow: none;
	margin-bottom: 5px;
	margin-right: 15%;
	margin-top: 5px;
	padding: 10px;

	}
	h2 { font-family: Firefly;
	color: #F00C0C;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 20px;
	padding: 10px
	}
	h4 {
	text-align: center;
	font-size: 150%;
	color: rgba(113, 7, 7, 0.95);
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.69);
	border-radius: 20px;
	width: 98.6%;
	font-family: Oranienbaum;
	margin-right:0%;
	margin-left:0%;
	align: center;

	}
	#h4sidebar_right{
	margin-right:0%;
	padding: 8px;
	width: 90%;
	}
	#h4about{
	align: left;
	margin-right:100%;
	width:25%;
	float: center;

	}

	iframe { position: center;
	border-radius: 5px;
	border-spacing: 10px;
	padding: 10px;
	margin-bottom: 10px;
	border: medium inset rgba(113, 7, 7, 0.95);

	}

	p {
	font-family: Oranienbaum;
	color: #500B0B;
	font-size: 135%;
	font-style: center;
	font-weight: 0%;
	margin-right:10px;
	text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 20px;

	}
	p#article_text{
	margin-right:15%;
	}

	.textopacity_r {
	background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
	background: rgba(204, 204, 204, 0.2);
	border-radius: 10px;
	padding: 10px;
	float: top;
	margin-right:15%;
	}


	.textopacity {
	background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
	background: rgba(204, 204, 204, 0.4);
	border-radius: 20px;
	padding: 10px;
	}
	.textopacitybottom{ /* To keep opaque text background under image galleries */
	background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
	background: rgba(204, 204, 204, 0.4);
	border-radius: 20px;
	position: inherit;
	top: 100%;
	padding-top: 10px;
	width: 100%;

	}

	a.active {
	background-color: #fff;
	color: #444;
	}

	.articleform {
	background-color: #F8F8F8;
	padding: 20px;
	border: 5px solid #008000 ;
	border-color: rgba(113, 7, 7, 0.95);
	border-style: inset;
	border-radius: 10px;
	margin: 10px;
	font: black;
	float:left;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px;
	width:81%;

	}
	#articleform_header{
	background-image: url("images/old-grunge-vector-background.jpg");

	background-repeat:;
	background-position: bottom;
	background-color: #EAD579;
	}
	#articleform_awards{
	width:92%;
	}


	article#altbackground1{
	background-image: url("images/whaleshark.jpg");
	background-position: fixed;

	padding: 20px;
	border: 5px solid #008000 ;
	border-color: rgba(113, 7, 7, 0.95);
	border-style: inset;
	border-radius: 10px;
	margin: 10px;
	font: black;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px;

	}
	article#altbackground2{
	background-image: url("images/under_construction.jpg");
	}
	.comment_container {

	padding: 10px;

	}
	.comment_reply{
	margin:5px;
	border: 4px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	width:50%;
	padding: 10px;
	margin-top:15px



	}
	.comment-form {
	border: 4px solid rgba(0,0,0,0.1);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px;
	width:50%;
	padding: 10px;
	margin:5px;

	}

	.container_gallery {

	padding: 0px;
	border: 5px solid #008000 ;
	border-color: rgba(113, 7, 7, 0.95);
	border-style: none;
	font: black;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
	border-radius: 0px;
	width: 80%;
	margin: 30px auto;
	overflow: hidden;
	}
	.container_galleryimage {
	background :none;
	padding: 20px;
	font: black;
	width: 96%;
	margin: 10px auto;
	overflow: hidden;

	}
	.container_1 input#search{ /* search bar */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.69);
	border-radius: 20px;
	width: 150px;
	height: 20px;
	border: solid white: 10px;
	padding: none;
	font-size: 10pt;
	float: right;
	padding-left: 10px;
	overflow: scroll;
	width: 180px;
	vertical-align: middle;
	white-space: nowrap;

	}

	.box { /* Figure out wtf this is for */
	padding: 0px;
	border-radius: 0px;
	float: right;
	position: left;

	}
	.featuresColumn {
	float: left;
	width: 32%;
	margin-right: 10px;

	}

	.flagimage { padding: 0px;
	border-radius: 15px;
	padding-right: 0px;
	float: right;

	}

	.galleryItem {
	width : 130%;
	color: #797478;
	font: 20px/1.5 Verdana, Helvetica, sans-serif;
	float: right;
	color: #797478;
	font: 10px/1.5 Verdana, Helvetica, sans-serif;
	float: left;
	width: 16%;
	margin: 10% 4% 10px 4%;
	margin-top: 10px;
	}
	.galleryitem_last{
	max-width: 230%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: rgba(113, 7, 7, 0.95);
	border-style: none;
	margin: 10% 4% 10px 4% ;
	margin-top: 5px;
	width: 130%;

	}
	.galleryItem h3 {
	text-transform: uppercase;
	font-size: 170%;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
	border-radius: 3px;
	font-family: times;
	color: #500B0B;
	margin: 1% 4% 1px 4%;
	overflow: visible;
	padding: 3px;
	background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
	background: rgba(204, 204, 204, 0.3);
	width: 130%;
	}

	.galleryItem img {
	max-width: 150%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: rgba(113, 7, 7, 0.95);
	border-style: none;
	margin: 10% 4% 10px 4% ;
	margin-top: 5px;
	width: 130%;
	height: 40%;

	}

	.galleryfoot{
	padding-top: 200px;
	position: relative;
	height: 20px;
	border: 3px solid #73AD21;
	}

	.icon {
	padding-left: 10px;
	float: left;

	}

	.imageright {
	padding: 10px;
	background-color: none;
	border: rgba(113, 7, 7, 0.95);
	border-style: inset; border-radius: 10px ;
	float: right;
	margin-left: 10px

	}

	.last {
	margin-right: 0%;
	}

	.nav ul {
	list-style: inside;
	text-align: justify;
	padding-top: 10px;

	border: solid white: 0px;
	background-color: none; opacity: 1.8;
	margin-left: 10px;
	padding-bottom: 5px;
	position: center;
	padding: 10px;
	float: none;

	}

	.nav li {
	font-family: 'Monastic Pro', sans-serif;
	font-size: 112%;
	line-height: 100px;
	height: 40px;
	border: 0px solid #888;
	line-height: 40px;
	padding: 3px;
	border-collapse: justify;
	text-align: justify;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
	border-radius: 400px;
	background-color: none;
	content: left;
	}

	.nav li {
	display: inline-block;
	text-align: justify;

	}
	.nav a {
	text-decoration: none;
	color: inherit;
	}
	.nav a:hover {
	background-color: #005f5f;
	}


	.sidebar_right{
	background-color:#EAD579 ;
	background-image: url("images/old-grunge-vector-background.jpg");
	background-position: top;
	border: 5px solid #008000 ;
	border-color: rgba(113, 7, 7, 0.95);
	border-style: inset;
	border-radius: 10px;
	margin-left: 82%;
	Margin-right: 10px;
	margin-top:10px;
	position: fixed;
	padding:10px;
	font: black;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px;
	float: right;
	width:12%;

	}

	#SkypeButton_Call_trevor.garrity_1 {

	margin:0 !important;
	}

	#SkypeButton_Call_trevor.garrity_1 img {
	margin:0 !important;
	vertical-align:left !important;
	background-color: black;

	}

	.tst1 {font-family: arial; text-align: center; font-size: 125%;}

	.tst2 {
	padding: 10px;
	background-color: none;
	border: rgba(113, 7, 7, 0.95);
	border-style: inset; border-radius: 10px ;
	}
	.tst3 {
	padding: 0px;
	background-color: none;
	border: rgba(113, 7, 7, 0.95);
	border-style: none;
	border-radius: 10px ;
	float: none;
	margin-right: 10px ;
	border-radius: 10px;


	}

	.textopacity_box{

	background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
	background: rgba(204, 204, 204, 0.2);
	border-radius: 10px;
	font-size: 170%;
	font-family: times;
	height: inherit;
	margin: 4% 4% 1px 4%;
	overflow: hidden;
	padding: 5px;
	width: 130%;

	}








	/* MEDIA QUERIES*/
	@media only screen and (max-width : 940px),
	only screen and (max-device-width : 940px){
	.galleryItem {width: 21%; }

	}

	@media only screen and (max-width : 720px),
	only screen and (max-device-width : 720px){r
	.galleryItem {width: 29.33333%;}
	}

	@media only screen and (max-width : 530px),
	only screen and (max-device-width : 530px){
	.galleryItem{width: 46%;}
	}

	@media only screen and (max-width : 320px),
	only screen and (max-device-width : 320px){
	.galleryItem {width: 96%;}
	.galleryItem .wrapper .featuresColumn img {width: 96%;}
	.galleryItem h3 {font-size: 18px;}
	.galleryItem p, {font-size: 18px;}
	}
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 15px;

	<html>


	<head>

	<title>Music and Art</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="main.css">
	<?php include 'header.php';
	?><? include("insert_to.php"); ?>

	</head>


	<body>
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

	<body>

	<h1>Music and Art for the revolution</h1>

	<p> Find and share music and art that feeds the soul, makes the body move, calms the nerves, tickles the intellect and/or makes you want to smash the system. Use it to promote our own music and up and coming acts.</p>

	<article class=articleform>
	<header>
	<H4>Presenting the Jingles</H4><IMG style="float: right;"class=""SRC="images/estonianflag.jpg" ALT="theteachermarket" WIDTH=80 HEIGHT=60>
	</header>
	<p>Published: <time pubdate="pubdate">18th Jan 2016</time></p>
	<IMG class=""SRC="images/jinglescasualwide.jpg" ALT="Enjoy" WIDTH=466 HEIGHT=280>

	<p>This great four piece band out of Estonia are long time friends of mine.</p><p>They consist of; Jonathan flack on guitars and vocals,
	Rauno Vaher on percussion, Hainn Hoppe on guitars and Tanel Liberg on bass guitar with all members on the vibes.</p><p>Their style is an eclectic throwback to simpler times when music was played for love, not vanity or riches. Their sets consist of unique, upbeat renditions of popular songs and old classics, with well written and rapidly developing originals being continually added to the set list. It's the type of show than can pull you out of a troubled state of mind and get you smiling and dancing the night away. <p>They are headed up by Jonathan from Melbourne Australia, who infuses the band with a great philosophy and work ethic. Jonathan has been blessed with a great group of like-minded musicians who are all accomplished in their art. The jingles are great bunch of guys who all contribute to the songwriting process, and stage presence.<p> Spending a lot of time hanging out with them, watching them rehearse, perform and get better I would bet they are going somewhere soon.</p><p>They are presently in the competition for Estonian Eurovision and you can support them with that. You should really check them out if you get the chance, I can personally vouch for them. <p>Follow them on their Facebook page (below the video, don't forget to like and share) to keep up to date on gigs, new material or to buy their new album.</p>

	<p>Here's the latest video of them: </p>

	<iframe width="480" height="270" src="https://www.youtube.com/embed/te2VC3koMnc" frameborder="0" allowfullscreen></iframe><br>


	<div class="fb-like" data-href="https://www.facebook.com/flackandvaher" data-width="100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true" style= ""></div>
	<p>
	<p><A HREF="file:///C:/Users/Trev/Desktop/web/musicandart.html">Clickey here for Music and art</A></p>
	<h2 class="comments-wrapper-heading"> Comments </h2>




	<?php
	include ("list_comments.php");
	include ('comment.php'); ?>


	<?php include ("insert_to.php"); ?>
	<footer>

	</footer>
	</article>

	<article class=articleform>
	<header>
	<H4>Michael Franti and spearherad</H4>
	</header>
	<p>Published: <time pubdate="pubdate">21st Jan 2016</time></p>


	<p>. .. they are cool because ... You should listen to them because ...
	Here is a video of them </p>

	...
	<footer>
	<p><small>Creative Commons Attribution-ShareAlike License</small></p>
	</footer>
	</article>

	<h2 class="tst2">Enjoy the brains</h2>
	<IMG class="tst2"SRC="images/braindeadratmonkey.jpg" ALT="Enjoy" WIDTH=332 HEIGHT=332>
	<h4><A HREF="https://www.facebook.com/tgarrity">Click for my facebook page like a good little voyeur</A></h4>







	</body>
	</html>