<!--
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@S%?**++;%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@#%*;::,,,,,:,?@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@S*;:,,:::::::::,?@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@#?;:,::::::,,::;;++%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@#*:,:::::,::+*%##@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@?:,:::::,:*%#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@S;,:::::,;?#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@%::::::,:?@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@%::::::,+#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@#::::::,*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@;,::::,+@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@%,::::::#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@+,::::,?@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@;::::::#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#S%*++;;;:::;;;++*?S#@@@@@@@@@@@@@@@@
@@@@@@@@@@:::::::@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@S?+;::,,,:::::::::::,,,::;+?S@@@@@@@@@@@@
@@@@@@@@@@;::::::#@@@@@@@@@@@@@@@@@@@@@@@@@@@@S*;:,,:::::::::::::::::::::::,,:;*S@@@@@@@@@
@@@@@@@@@@+,::::,?@@@@@@@@@@@@@@@@@@@@@@@@@#?;:,::::::,:::;+;:::::::;:::,::::::,:;?#@@@@@@
@@@@@@@@@@%,:::::;@@@@@@@@@@@@@@@@@@@@@@@@?:,:::::,::+?%#@@@;:::::,?@@#S?+::,:::::,:*#@@@@
@@@@@@@@@@@;:::::,+@@@@@@@@@@@@@@@@@@@@@@@%+:,::,:+%#@@@@@@*,:::::;@@@@@@@@S*;,::::,;S@@@@
@@@@@@@@@@@S::::::,*@@@@@@@@@@@@@@@@@@@@@@@@S*:;?#@@@@@@@@?:::::::S@@@@@@@@@@@%;,,:?@@@@@@
@@@@@@@@@@@@%::::::,+#@@@@@@@@@@@@@@@@@@@@@@@@#@@@@@@@@@@*,::::::?@@@@@@@@@@@@@@?*#@@@@@@@
@@@@@@@@@@@@@%::::::,:%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%;,::::::?@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@S;,:::::,;%@@@@@@@@@@@@@@@@@@@@@@@@@@@@%+::::::,;S@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@*:,:::::,:*S@@@@@@@@@@@@@@@@@@@@@@S*;,:::::,:*#@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@#+:,:::::,::+?S#@@@@@@@@@@@@#S?+;:,:::::,:+S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@#*;:,::::::,:::;++****++;:::,,:::::,,:*S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@%*;:,,::::::::,,,,,,::::::::,,::+%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@S?+;::,,,,::::::::,,,,::;+?S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#S%?*++;;;;;;++*?%S#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
                            https://gerradroberts.com


-->
<!DOCTYPE html>
<html lang="en">
    <head>
<title>Gerrad Roberts</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/gfx/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/gfx/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/gfx/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%;background-color:black;}
.bgimg {background-image: url('./gfx/bg.jpg');min-height: 100%;background-position: center;background-size: cover;}
.small{width:20px;}
.section {overflow: hidden;}
.section .marquee {-webkit-animation: marquee 27s linear infinite;animation: marquee 27s linear infinite;display: inline-block;white-space: nowrap;}
.section .marquee:hover {-webkit-animation-play-state: paused;animation-play-state: paused;}
.text-styling {background-color: green;color:white;padding: 1em;}
.puff-in-center {
	-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

</style>
</head>
<body id="mypage">
<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-green"><i class="fa-fw fas fa-times-circle"></i> Close</a>
  <a href="javascript:void(0)" onclick="w3_close();document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button"><i class="fa-fw fas fa-address-card"></i> About</a>
  <!--<a href="mailto:staff@gerradroberts.com" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa-fw fas fa-at"></i> Contact</a>-->
  <br>
  <div class="w3-section w3-margin w3-opacity">
   <br>
    <span class="w3-small"><script>document.write(new Date().getFullYear())</script> &reg; All Rights Reserved. GerradRoberts.com</span>
  </div>
</nav>
<div class="puff-in-center bgimg w3-display-container w3-animate-opacity w3-text-black">
  <div class="w3-display-topleft w3-padding-large w3-xlarge">
    <div class="w3-button w3-padding-16 w3-left w3-text-white" onclick="w3_open()"><i class="fas fa-chevron-circle-down"></i></div>
  </div>
</div>
<div id="id01" class="w3-modal">
    <div class="w3-modal-content">
        <div class="w3-container"><span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright"><i class="fas fa-window-close"></i></span>
        <div class="w3-row">
                        <p class="w3-section"></p><i class="fas fa-user-ninja w3-jumbo w3-text-blue"></i></p>
    <h3>Gerrad Roberts</h3>
    
    <p>Gerrad Roberts is a <span style="font-style:oblique;" class="w3-light-grey w3-text-blue">
       Coffee fanatic. Communicator. Total beer buff. Internet enthusiast. Hardcore student. Evil introvert. Analyst. Tvaholic.</span> </p>
    
    <h4>History</h4>
    <p class="w3-border w3-padding">
    He's happy, wise, eager and perhaps a little too foolish. But there's more than meets the eye, not surprising for somebody with his position.
He was born in a middle class family in an average port. He lived free of trouble until he was about 16 years old, but at that point life changed.
He started working for the family company and was gaining a little fame. With the help of great friends, he is on top of the world in a ever changing world. But with his brilliance and wits, there's nothing to stop him from reaching full potential. He could quickly become a true inspiration for many.
However, he is currently learning how to reach full potential. He feels like there's more to experience in this world. Luckily he has awesome friends to support him.</p>
        <h4><i class="fas fa-home w3-text-green"></i> He lives in Piatra Neam,Romania</h4>
    
        <h5><i class="fas fa-film w3-text-yellow"></i> His favorite movie: On My Ship</h5>
       <h5><i class="fas fa-ring"></i> Gerrad is single.</h5>        Gerrad has worked for the following:
    <ul class="w3-ul w3-hoverable">
        <li><i class="fas fa-building w3-text-gray"></i> Amity as a Interactive Ideation Director From Jan-1992 to Sep-1996</li>
        <li><i class="fas fa-building w3-text-gray"></i> Omnideo as a Central Operations Analyst From Feb-2001 to May-2008</li>
        <li><i class="fas fa-building w3-text-gray"></i> Midose as a Regional Division Strategist From May-2013 to Sep-2016</li>
    </ul>
    
        <h5><i class="fas fa-birthday-cake w3-text-orange"></i> Gerrad is 48 years old. Born Aug-24-1977 in Ilagan,Philippines</h5>
    
    <h5><i class="fas fa-baby"></i> Gerrad is survived by his lovely child.</h5><i class="fas fa-child w3-text-gray"></i> Vivia, Meaning: lively ,who is 3 years old.<h5><i class="fas fa-paw w3-text-brown"></i> Gerrad has one wonderful animal companion.</h5><i class="fas fa-dog w3-text-gray"></i> Reno who is 5 years old. 
    <div class="w3-bar">
        <div class="w3-bar-item"><img class="w3-image" style="max-width:150px" src="https://d2ph5fj80uercy.cloudfront.net/04/cat3464.jpg"><h3>Gerrad's Cat?</h3></div>
        <div class="w3-bar-item"><img class="w3-image" style="max-width:150px;" src="https://thispersondoesnotexist.com/"><h3>Gerrad's kid?</h3></div>
       <!-- <div class="w3-bar-item"><img class="w3-image" style="max-width:150px;" src="https://thisartworkdoesnotexist.com/"><h3>A Recent Painting of Gerrad's?</h3></div>-->
        
    </div>
    </div>
    </div>
    </div>
</div>
  <script>
function w3_open() {document.getElementById("mySidebar").style.display = "block";}
function w3_close() {document.getElementById("mySidebar").style.display = "none";}
function _(name){return document.getElementById(name)};

</script>
</body>
</html>