Skip to content

Instantly share code, notes, and snippets.

@imtmh

imtmh/index.html

Created June 30, 2017 22:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save imtmh/0c3a8f372100e1bfa2a3ddebc437e5fe to your computer and use it in GitHub Desktop.
Save imtmh/0c3a8f372100e1bfa2a3ddebc437e5fe to your computer and use it in GitHub Desktop.
Download ZIP
Personal Portfolio Webpage Free Code Camp
Raw
index.html
<html>
<head>
<title>Thirumalesh Chinna - Web Development</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> </head>
<body style="margin-top: 0px">
<nav class="navbar navbar-default navbar-fixed-top">
<div id="navbar-width">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand topnav" href="https://www.linkedin.com/in/tirmalesh" target="_blank">Thirumalesh Chinna</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"> <a href="#content-home">Home</a> </li>
<li> <a href="#content-about">About</a> </li>
<li> <a href="#content-portfolio">Portfolio</a> </li>
<li> <a href="#content-contact">Contact</a> </li>
</ul>
</div>
</div>
<!--container-fluid-->
<!--container-fluid-->
</div>
<!-- navbar-width-->
</nav>
<!--navbar parent nav-->
<div id="all-content" style="height: 100%">
<div id="content-home" class="page">
<div class="content-text">
<div id="portfolio-header">
<p>Thirumalesh Chinna</p>
<!-- <br>Web Development</p>-->
</div>
<div id="portfolio-caption">
<p>Fill the space</p>
<hr> </div>
<div>
<ul class="social-list">
<li> <a href="https://www.freecodecamp.com/hobohiggs" target="_blank" class="btn btn-default btn-lg" style="margin-top: 0px"><i class="fa fa-fire fa-fw"></i> freeCodeCamp</a> </li>
<li> <a href="https://www.linkedin.com/in/tirmalesh" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> Linkedin</a> </li>
<li> <a href="https://github.com/imtmh" target="-blank" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> Github</a> </li>
</ul>
</div>
</div>
</div>
<!--end content-home-->
<div id="content-about" class="page container-fluid">
<div class="content-text">
<div class="row">
<div class="col-md-6 col-xs-12" style="color: white">
<h1>About Me</h1>
<p style="font-size: 150%">I'm a self-taught developer from England. My current expertise is HTML, CSS, Bootstrap and Javascript, and I am always training to add more to the list and sharpen my skillset. This is my first fully self-coded website.</p>
</div>
<div class="col-md-6 col-xs-12"> <img src="https://lh3.googleusercontent.com/-9DGYoiAH_Cg/WVbFk70LnsI/AAAAAAAA--o/zjFPD33m5UM4wnVy4e0FBprIVyvxoTwYgCEwYBhgL/s802/IMG_0822.JPG" id="profile-pic" class="img-responsive" alt="Profile Picture"> </div>
</div>
</div>
</div>
<!--end content-about-->
<div id="content-portfolio" class="page">
<div class="content-text container">
<div class="row">
<!--Start of portfolio link button-->
<div class="col-md-6">
<div class="portfolio-button">
<a href="#" target="_blank">
<p class="portfolio-title">Sample Work Title</p> <img src="https://instagram.fbom2-1.fna.fbcdn.net/t51.2885-15/e35/18812860_300329313743567_4924295870196744192_n.jpg" class="img-responsive portfolio-image" alt="Portfolio Sample Work">
<p class="portfolio-description">Sample Work Desciption</p>
</a>
</div>
</div>
<!--End of portfolio link button-->
<!--Start of portfolio link button-->
<div class="col-md-6">
<div class="portfolio-button">
<a href="#" target="_blank">
<p class="portfolio-title">Sample Work Title</p> <img src="https://instagram.fbom2-1.fna.fbcdn.net/t51.2885-15/e35/13704106_1223630311004577_1050831821_n.jpg" class="img-responsive portfolio-image" alt="Portfolio Sample Work">
<p class="portfolio-description">Sample Work Desciption</p>
</a>
</div>
</div>
<!--End of portfolio link button-->
<!--Start of portfolio link button-->
<div class="col-md-6">
<div class="portfolio-button">
<a href="#" target="_blank">
<p class="portfolio-title">Sample Work Title</p> <img src="https://instagram.fbom2-1.fna.fbcdn.net/t51.2885-15/e35/12976246_1043372112382669_313008103_n.jpg" class="img-responsive portfolio-image" alt="Portfolio Sample Work">
<p class="portfolio-description">Sample Work Desciption</p>
</a>
</div>
</div>
<!--End of portfolio link button-->
<!--Start of portfolio link button-->
<div class="col-md-6">
<div class="portfolio-button">
<a href="#" target="_blank">
<p class="portfolio-title">Sample Work Title</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/545385/1280_x_720_surf_girl.jpg" class="img-responsive portfolio-image" alt="Portfolio Sample Work">
<p class="portfolio-description">Sample Work Desciption</p>
</a>
</div>
</div>
<!--End of portfolio link button-->
</div>
<!--end of row-->
</div>
</div>
<!--end of content-portfolio-->
<div id="content-contact" class="page">
<div class="content-text container-fluid">
<div class="col-sm-6 col-xs-12" style="color: white; font-size: 200%; text-align: right">
<p>Contact Thirumalesh Chinna:</p>
<p><a href="mailto:tmhs.bits@gmail.com" style="color: white">tmhs.bits@gmail.com</a></p>
<br> </div>
<div class="col-sm-6 col-xs-12">
<ul class="social-list" style="text-align: right">
<li> <a href="https://www.freecodecamp.com/hobohiggs" target="_blank" class="btn btn-default btn-lg" style="margin-top: 0px"><i class="fa fa-fire fa-fw"></i> freeCodeCamp</a> </li>
<li> <a href="https://www.linkedin.com/in/tirmalesh" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> Linkedin</a> </li>
<li> <a href="https://github.com/imtmh" target="-blank" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> Github</a> </li>
</ul>
</div>
</div>
</div>
<!--end content-contact-->
<footer>
<div class="content-footer">
<ul class="list-inline">
<li><a href="#content-home">Home</a></li>
<li><a href="#content-about">About</a></li>
<li><a href="#content-portfolio">Portfolio</a></li>
<li><a href="#content-contact">Contact</a></li>
</ul>
<p style="color: grey">Copyright © 2017 Thirumalesh Chinna</p>
</div>
</footer>
</div>
<!--end all-content-->
</body>
</html>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Raw
style.css
html {
-webkit-text-size-adjust: none;
}
a:link {
text-decoration: none;
}
@media (max-width: 768px) {
body {
padding: 0px !important;
margin: 0px !important;
}
#navbar-width {
width: 100% !important;
}
#portfolio-header {
font-size: 250% !important;
}
#portfolio-caption {
font-size: 150% !important;
}
#content {
width: 100% !important;
padding: 0px !important;
margin: 0px !important;
}
.content-text {
width: 100% !important;
padding: 0px !important;
margin: 0px !important;
}
.btn {
border-radius: 30px !important;
margin-top: 10px !important;
font-size: 150% !important;
}
#content-about {
padding-top: 100px !important;
}
#content-contact {
padding-top: 100px !important;
}
h1 {
font-size: 200% !important;
}
}
/* everything above this line is mobile style */
.navbar {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
border-bottom: grey;
}
.btn {
border-radius: 35px;
border: 5px solid white;
color: #fff;
background: none;
margin-top: 50px;
box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.4);
font-size: 200%;
transition: 0.1s;
}
.btn:hover {
border: 5px solid white;
color: #fff;
background: black;
transform: scale(1.1);
box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.7);
transition: 0.2s;
}
.social-list {
list-style-type: none;
padding: 0;
margin: 0;
}
html {
height: 400%;
}
body {
height: 100%;
}
#navbar-width {
margin: auto;
width: 70%;
}
#content {
margin: auto;
width: 70%;
}
#content-home {
background: url(https://farm6.staticflickr.com/5763/23251795456_641279bbd5_k_d.jpg) no-repeat center center fixed;
background-size: cover;
text-align: center;
}
#content-about {
padding-top: 250px;
background: url(https://c2.staticflickr.com/6/5087/5299568637_c43fd3c0a6_b.jpg) no-repeat center center fixed;
background-size: cover;
}
#content-portfolio {
background: url(https://c1.staticflickr.com/5/4278/35471469551_d7137db4bd_h.jpg) no-repeat center center fixed;
background-size: cover;
}
#content-contact {
padding-top: 250px;
background: url(https://farm6.staticflickr.com/5039/6940287706_a236059c59_k_d.jpg) no-repeat center center fixed;
background-size: cover;
}
.content-text {
width: 70%;
margin: auto;
}
#portfolio-header {
font-size: 400%;
font-weight: bold;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
color: white;
}
#portfolio-caption {
font-size: 300%;
color: white;
text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
}
.page {
min-height: 25%;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 100px;
padding-bottom: 100px;
overflow: auto;
}
#profile-pic {
border-radius: 25% 10% 25% 10%;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.7);
float: right;
}
.portfolio-button {
height: 100%;
max-height: 400px;
width: 100%;
max-width: 500px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
color: white;
margin-left: auto;
margin-right: auto;
margin-top: 7%;
transition: 1s;
}
.portfolio-button:hover {
transform: scale(1.03);
background: rgba(255, 255, 255, 0.15);
transition: 0.1s;
box-shadow: 0px 0px 100px 0px rgba(255, 255, 255, 0.3);
}
.portfolio-image {
border-top: solid grey 1px;
border-bottom: solid grey 1px;
border-radius: 0px;
margin-bottom: 15px;
}
hr {
width: 70%;
}
.portfolio-title {
text-align: center;
font-size: 200%;
font-weight: 900;
color: white;
height: 35px;
margin-top: 5px;
}
.portfolio-description {
text-align: center;
font-size: 120%;
font-style: italic;
font-weight: 600;
color: white;
}
footer {
background-color: rgba(220,220,220,1);
}
.content-footer {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 20px;
font-weight: bold;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment