Item: A Pen by Charles Marlow
Rating: 3.4
Author: --Gordon--

1 Downloads
128 Views
Tweet
Download Now View Demo

HTML
CSS

<!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&amp;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">&copy 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;
}