<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by Charles Marlow</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Personal Website">
<meta name="keywords" content="personal, website">
<meta name="author" content="Charles Marlow">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<title>The Code Orchestra</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">The </span>Code Orchestra</h1>
</div>
<nav>
<ul>
<li><a href="#about-ref">ABOUT</a></li>
<li><a href="#MY WORK-ref">MY WORK</a></li>
<li><a href="#contact-ref">GET IN TOUCH</a></li>
</ul>
</nav>
</div>
</header>
<a name="about-ref"></a>
<section id="About">
<h1>What is the matri...I mean, what is The Code Orchestra?</h1>
<p = id="about p">Well, simply put: it's what you want at your side when you need a website, front-end software development, anything that has to do with web design and of course- PIZZA.</br> I mean, if you don't like pizza, nevermind then- don't contact me. I repeat- do not contact me!</br>Seriously though, I am a one man code orchestra, well-endowed with the technologies of JS (HTML and CSS included in there, naturally), Python and more surprises.</p></br>
</section>
<a name="MY WORK-ref"></a>
<section id="MY WORK">
<div class="images thumnails">
<h1> My work</h1>
<div class="center-block">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail"><img src="https://upload.wikimedia.org/wikipedia/en/d/d5/Pitchfork.com_screenshot.png" alt="pitchfork.com"></a>
<a href="#" class="thumbnail"><img src="http://simplycompelling.com/wp-content/uploads/2015/07/StumbleUpon-Recommended.png" alt="stumbleupon.com"></a>
<a href="#" class="thumbnail"><img src="http://images.gr-assets.com/misc/1397605627-1397605627_goodreads_misc.png" alt="goodreads.com"></a>
<a href="#" class="thumbnail"><img src="https://crunchbase-production-res.cloudinary.com/image/upload/c_limit,h_600,w_600/v1412594128/gmktjqxxltus0dfifejc.png" alt="nme.com"></a><
</div>
</div>
</div>
</div>
</section>
<a name="contact-ref"></a>
<div id="contact" class="ContentInside">
<h1 class="text-center">Contact Me<hr></h1>
<!--row#1--><div class="row">
<form class="col-md-5 col-md-offset-1" action="/send-a-message">
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon">Name</span>
<input type="text" class="form-control" placeholder="Name" id="formName">
</div>
</div><!--form-group-->
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon">E-mail</span>
<input type="email" class="form-control" placeholder="E-mail" id="formEmail">
</div>
</div><!--form-group-->
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon">Phone</span>
<input type="tel" class="form-control" placeholder="Phone" id="formPhone">
</div>
</div><!--form-group-->
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon">Message</span>
<textarea rows="3" class="form-control" placeholder="Message" id="formMessage"></textarea>
</div>
</div><!--form-group-->
<button type="submit" class="btn btn-default btn-lg" id="btnSend"><span class="glyphicon glyphicon-send"></span> Send</button>
</form>
<div class="col-md-5" id="ContactText">
<p>
Feel free to contact and get some more info about me and how we can work together. I'm always up for new projects.
</p>
<!--social--><div id="social">
<p>You can find me here as well: </p>
<div class="btn-group btn-group-lg">
<a href="https://www.facebook.com/nadav.gordon.5" class="btn btn-default" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a>
<a href="https://www.youtube.com/channel/UCVbUAb9-vRSm739oDwQt4jg" class="btn btn-default" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
<a href="http://www.stumbleupon.com/stumbler/doncijote" class="btn btn-default" target="_blank"><i class="fa fa-stumbleupon fa-2x"></i></a>
</div><!--btn-group-->
</div><!--social-->
</div><!--ContactText-->
</div> <!--row#1-->
</div><!--contact-->
</div><!--main-->
</div><!--MainContainer-->
<footer id="bottom-footer" class="text-center">
<p id="FooterText">© All rights reserved to <a href="https://www.freecodecamp.com/charlesmarlow" target="_blank"> Charles Marlow</a>.</p>
</footer>
</body>
</html>
</body>
</html>
/*Downloaded from https://www.codeseek.co/--Gordon--/a-pen-by-charles-marlow-EmpgKz */
body {
font:15px/1.5 Arial, Helvetica, sans-serif;
padding:0;
margin:0;
background-color:#C9C9C7;
background-image: url("http://www.zastavki.com/pictures/2560x1600/2010/Space_Bright_Planet_026512_.jpg");
background-size: cover;
}
nav {
font-size: 20px
}
.container{
width: 80%;
margin:auto;
overflow:hidden;
}
header{
background:#35424a;
color:#C2D4F8;
padding-top:30px;
min-height:110px;
border-bottom:#e8491d 3px solid;
}
.current {
text-decoration:none;
text-transform:uppercase;
}
header li {
float:left;
display:inline;
padding:0 20px 0 20px;
}
header #branding{
float:left;
}
header #branding h1{
margin:0px;
}
header nav {
float:right;
margin-top:15px;
}
header .current a {
color:#e8491d;
font-weight:bold;
}
header ul a {
color:#C2D4F8;
font-weight:bold;
}
#About h1 {
margin-top: 50px;
margin-bottom:10px;
min-height:80px;
text-align: center;
color:#000000;
font-size:55px;
font-family: 'Merienda One';
}
#About p {
color: black;
font-size:18px;
text-align: center;
margin: 20px 0px 20px 0px;
font-weight: 600;
}
.images h1 {
text-align: center;
font-family: 'Merienda One';
margin: 20px 0px 100px 0px;
}
#my work {
text-align: center;
margin: 100px 20px 20px 20px;
}
.images img {
display: block;
margin: 0px -80px 40px 220px;
width: 35%;
height: 35%;
float: left;
text-align: center;
}
.ContentInside{
padding:55px 5px;
margin: -120px 0px 0px 50px;
}
.input-group-addon {
min-width:110px;
text-align:left;
font-size:20px;
}
.form-group{
margin:10px 200px 10px 150px;
}
#bottom-footer{
height:40px;
}
#FooterText{
padding:10px 0px;
color: white;
}
#formMessage{
height:65px;
}
#btnSend{
margin: 5px 150px;
}
#bottom-footer{
background-color: #000000;
opacity: 0.8;
}
#ContactText{
font-size: 30px;
}
hr {
border: none;
height: 3px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
#social {
font-size: 35px
}
.btn-group {
background-color: black;
border: 1px solid white;
opacity: 0.7;
}