Skip to content

Instantly share code, notes, and snippets.

@TomEweb

TomEweb/index.html

Created May 7, 2017 10:39
Show Gist options
  • Save TomEweb/f6ea5e8d8d7b6da45ad60d28c25a9ef2 to your computer and use it in GitHub Desktop.
Save TomEweb/f6ea5e8d8d7b6da45ad60d28c25a9ef2 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio 5.7.17 1738
Raw
index.html
<head>
<!--font awesome-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".nav" data-offset="50">
<!--begin nav-->
<div class="nav">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!--nav-->
<div class="container">
<div class="jumbotron" id="about"><br />
<div class="row">
<div class="col-lg-4">
<img .img-responsive class="img2" src="https://s-media-cache-ak0.pinimg.com/236x/75/bd/b9/75bdb9bf23175ec74f86cec6554791b5.jpg" alt="" />
</div> <br> <br />
<div class="col-lg-8">
<h1>My name is Tom</h1> <br />
<h4>I am a web designer and developer in hot pursuit for frontend development certification through freeCodeCamp. Welcome to my portfolio which is my second project for the course.</h4> <hr />
<h5>This in not me in the photo. The photo is being used as a placeholder. There are more placeholders below where I will later add my projects with links.</h5>
</div> <!--col-->
</div> <!--row-->
</div> <!--jumbotron-->
</div? <!--container jumbotron-->
<div class="port" id="portfolio"><br /><br />
<h1>PORTFOLIO</h1>
<hr />
</div>
<!--begin portfolio-->
<div class="container">
<div class="row">
<div class="col-lg-6" style="background: orange">
<img class="img1" src="http://www.cssdesignawards.com/cdasites/2014/201409/20140922055809.jpg" alt="" />
</div> <!--col-->
<div class="col-lg-6" style="background:orange">
<img class="img1" src="https://www.bigblackbag.com/img/samples/photographers/lucianosalazarphoto.com.jpg" alt="" />
</div> <!--col-->
</div> <!--row-->
<div class="row">
<div class="col-lg-6" style="background: red">
<img class="img1" src="http://www.multyshades.com/wp-content/uploads/2013/02/portfolio-websites1.jpg" alt="" />
</div> <!--col-->
<div class="col-lg-6" style="background:orange">
<img class="img1" src="http://psd.fanextra.com/wp-content/uploads/2011/02/portfolio-designs-1.jpg" alt="" />
</div> <!--col-->
</div> <!--row-->
<div class="row">
<div class="col-lg-6" style="background: red">
<img class="img1" src="https://www.google.co.th/search?q=website+portfolio&source=lnms&tbm=isch&sa=X&sqi=2&ved=0ahUKEwjbncbMptbTAhUIK48KHYUJAoEQ_AUIBigB&biw=1973&bih=887#imgrc=t77NkWgFhrCVmM:" alt="" />
</div> <!--col-->
<div class="col-lg-6" style="background:orange">
<img class="img1" src="https://www.google.co.th/search?q=website+portfolio&source=lnms&tbm=isch&sa=X&sqi=2&ved=0ahUKEwjbncbMptbTAhUIK48KHYUJAoEQ_AUIBigB&biw=1973&bih=887#imgrc=nhqRgP8__HEN1M:" alt="" />
</div> <!--col-->
</div> <!--third row-->
<div class="row">
<div class="col-lg-6" style="background: green">
<img class="img1" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/mist-vcard-portfolio-website-template.jpg" alt="" />
</div> <!--col-->
<div class="col-lg-6" style="background:yellow">
<img class="img1" src="http://www.pixeden.com/media/k2/galleries/780/preview-inner-page.jpg" alt="" />
</div> <!--col-->
</div> <!--row-->
</div> <!--portfolio container-->
<!--begin contact-->
<div class="container" id="contact">
<br /><br />
<h1 style="text-align: center">CONTACT ME</h1>
<hr />
<div class="row">
<div class="col-lg-7">
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="email" name="name" placeholder="Your name here">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="email">Phone Number:</label>
<input type="phone" class="form-control" id="phone" name="phone" placeholder="(xxx) xxx-xxxx">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" name="message" id="message" placeholder="Your message here"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form> <br />
</div> <!--col-->
<div class="col-lg-5">
<br /><br /> <h4>Send me a message if you would like more information and I'll try to get back to you A.S.A.P.</h4> <br />
<h4>I look forward to hearing from you.</h4>
</div> <!--col-->
</div> <!--row-->
</div>
<!--begin social media icons-->
<div id="social">
<div class="row">
<div class="col-lg-6">
<br /><h4>Made with <i class="fa fa-heart" aria-hidden="true"></i> by Tom Evans.
</h4>
</div> <!--col-->
<div class="col-lg-6">
<a href="#"><i class="fa fa-facebook-square fa-5x"></i></a>
<a href="#"><i class="fa fa-twitter-square fa-5x"></i></a>
<a href="i class="class="fa fa-github-square fa-5x"></i></a>
<a href="#"><i class="fa fa-google-plus-square fa-5x"></i></a>
</div> <!--col-->
</div> <!--row-->
</div> <!--social-->
<div>
</div> <!--container contact-->
<!--end contact-->
<!--end social media icons-->
</div> <!--big container-->
</div>
<footer>
<h3>TomEweb 2017</h3>
</footer>
</body>
Raw
style.css
body{
background-color: beige;
}
.nav{
overflow: hidden;
background: black;
position: fixed;
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index:1; //any higher integer value
}
.nav ul{
}
.nav ul li{
list-style-type: none;
float: left;
padding-left: 30px;
font-size: 1.5em;
}
/* Links inside the navbar */
.nav ul li a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav ul li a:hover{
color: yellow;
}
.jumbotron{
margin-top: 78px;
margin-bottom: 0px;
background: rgb(170, 170, 170);
color: white;
}
hr {
background-color: #bbb;
color: white;
border: none;
border-top: 4px solid;
margin: 50px;
}
.img1{
width: 100%;
height: 90%;
}
.img2{
border-radius: 50%;
}
.port{
padding: 50px;
text-align: center;
background: orange;
margin-bottom: 0px;
}
#social{
text-align: center;
background: orange;
padding: 40px;
}
footer{
background: black;
color: white;
padding: 20px;
text-align: center;
}
/* contact form */
.red{
color:red;
}
#contact{
background: pink;
padding: 50px;
margin-bottom: 0px;
}
/* contact form end */
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment