Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 21, 2016 16:53
Show Gist options
  • Save anonymous/617f0d5f528e6e81b38d156f004d177d to your computer and use it in GitHub Desktop.
Save anonymous/617f0d5f528e6e81b38d156f004d177d to your computer and use it in GitHub Desktop.
Download ZIP
portfolio page
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat">
</head>
<body>
<!--begin navbar-->
<!--far left name brand -->
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-md-5 nav-margin" style="font-family:Montserrat">
Hanifah Walidah - All Ends Development
</div>
<!-- space in btwn name and menu -->
<div class="col-md-2"></div>
<!-- far right menu items -->
<div class="col-md-1 nav-margin" style="font-family:Montserrat">
<a href="#services">Services</a>
</div>
<div class="col-md-1 nav-margin" style="font-family:Montserrat">
<a href="#portfolio">Portfolio</a>
</div>
<div class="col-md-1 nav-margin" style="font-family:Montserrat">
<a href="#contact">Contact</a>
</div>
</div>
</div>
</nav>
<!-- end navbar -->
<!-- begin header-->
<div class="container-fluid header-img header-overlay">
<div class="row header-main-text text-center">
All Ends Development
</div>
<hr class="style" />
<div class="header-sub-text text-center">
Front End, Back End and Product Management
</div>
<div class="row buttons">
<div class="col-md-3 col-md-offset-5">
<a class="btn btn-social-icon btn-twitter"><span class="fa fa-twitter"></span>
</a>
<button class="btn contact-buttons">LinkedIn</button>
<button class="btn contact-buttons">Email</button>
</div>
</div>
</div>
<!-- end header-->
<!-- begin services container -->
<div class="container-fluid orange-back" id="services">
<div class="row">
<div class="col-md-6">
<div class="col-md-* col-md-offset-1">
<h1 class="top-black-title">Front End</h1>
<p>
<img src="http://i1064.photobucket.com/albums/u361/Hanifah_Walidah/icon-html-css-anjular-js-ajax_zps1jwscakb.png" border="0" alt="frontendframes" /> </p>
<h1 class="top-black-title">Back End</h1>
<p>
<img src="http://i1064.photobucket.com/albums/u361/Hanifah_Walidah/backend-icons_zpsplw5r3nm.png" border="0" alt=" backend icons" /></a>
</p>
</div>
</div>
<div class="col-md-6">
<div class="col-md-* col-md-offset-1">
<h1 class="top-black-title">Product/Project Management</h1>
<h2 class="body-text">
<ul>
<li>Scrum Management: Guide a product through its lifecycle via lean methodologies like Agile, market research, UX, and financial modeling.</li>
<br>
<li>Create a roadmap, business model canvas, MVP, key metrics, personas, wireframing, and a stakeholder management plan.</li>
<br>
<li>Grow capable of launching viable, market‐ready products that anticipate user needs by making tough decisions and working with stakeholder.<br>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- end services container -->
<!-- begin portfolio container -->
<div class="container-fluid grey-back" id="portfolio">
<div class="row">
<div class="col-md-* text-center">
<h1 class="top-white-title">
Portfolio</h1>
<img class="img-thumbnail thumbs block-center" src="http://www.really-learn-english.com/image-files/thumbnail2.jpg"/>
<img class="img-thumbnail thumbs block-center" src="http://www.really-learn-english.com/image-files/thumbnail2.jpg"/>
<img class="img-thumbnail thumbs block-center" src="http://www.really-learn-english.com/image-files/thumbnail2.jpg"/>
</div>
</div>
<div class="row">
<div class="col-md-* text-center">
<img class="img-thumbnail thumbs block-center" src="http://www.really-learn-english.com/image-files/thumbnail2.jpg"/>
<img class="img-thumbnail thumbs block-center" src="http://www.really-learn-english.com/image-files/thumbnail2.jpg"/>
<img class="img-thumbnail thumbs block-center" src="http://www.really-learn-english.com/image-files/thumbnail2.jpg"/>
</div>
</div>
</div>
<!-- end portfolio container -->
<!-- begin contact container -->
<div class="container-fluid contact-back" id="contact">
<div class="row">
<div class="col-md-12">
<div class="col-md-* col-md-offset-1">
<h1 class="top-black-title">
Reach out to Hanifah Walidah! </h1>
<div class="row buttons">
<br>
<button class="btn social-buttons">Twitter</button>
<button class="btn social-buttons">LinkedIn</button>
<button class="btn social-buttons">Email</button>
<p></p>
<div class="row col-md-6">
<form action:"mailto:[email protected]">
<label>Name</label><br>
<input type="text"><br>
<label>Subject</label><br>
<input type="text"><br>
<label>Message</label><br>
<textarea></textarea>
<button type="submit" class="btn btn-lg submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end contact container -->
<!-- begin footer container
<nav class="navbar navbar-default navbar-fixed-bottom grey-back">
<div class="container-fluid">
<div class="col-md-5 nav-margin" style="font-family:Montserrat">
Hanifah Walidah - All Ends Development
</div>
<!-- space in btwn name and menu
<div class="col-md-2"></div>
<!-- far right menu items
<div class="col-md-1 nav-margin" style="font-family:Montserrat">
<a href="#services">Services</a>
</div>
<div class="col-md-1 nav-margin" style="font-family:Montserrat">
<a href="#portfolio">Portfolio</a>
</div>
<div class="col-md-1 nav-margin" style="font-family:Montserrat">
<a href="#contact">Contact</a>
</div>
</div>
</div>
</nav>
<!-- end footer container -->
</body>
</html>
Raw
portfolio page.markdown
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.css
.nav-margin{
margin-top: 10px;
font-family: Arial;
}
/*header CSS*/
.header-img{
background-image:url(http://i1064.photobucket.com/albums/u361/Hanifah_Walidah/brain-back_zpskderc1c5.jpg);
background-size: cover;
background-repeat: no-repeat;
margin-top:-18px;
z-index:1;
}
/*
.header-overlay{
position: relative;
block-color: #000000;
width:auto;
height:auto;
opacity:60%;
z-index: 20;
}
*/
.header-main-text{
font-family: Montserrat, bold;
font-size: 50px;
color: #ffffff;
padding-top: 300px;
padding-bottom: 10px;
text-shadow: 1px 1px 3px #000000;
}
hr.style{
border-top: 3px solid #ffffff;
padding-bottom: 10px;
width: 300px;
}
.header-sub-text{
font-family: Montserrat;
font-size: 20px;
color: #ffffff;
text-shadow: 1px 1px 3px #000000;
}
div.buttons{
margin-top: 10px;
margin-left: auto;
margin-right:auto;
padding-bottom: 400px;
}
.contact-buttons{
background-color: #ff8834;
margin: 5px;
box-shadow: 2px 2px 2px #000000;
}
/*Services - Portfolio - Contact CSS */
h1.top-black-title{
font-family: Montserrat, bold;
font-size: 30px;
color: #000000;
padding-top:20px;
}
h2.body-text{
font-family: Montserrat;
font-size: 20px;
margin-bottom: 50px;
color: #ffffff;
}
.orange-back{
background-color:#ff8400;
background-size: cover;
}
.green-back{
background-color:#99cc00;
background-size: cover;
}
/* Portfolio CSS */
.grey-back{
background-color: #666666;
}
h1.top-white-title{
font-family: Montserrat, bold;
font-size: 30px;
color: #ffffff;
padding-top:20px;
}
img.thumbs{
img-thumbnail;
width: 200px;
height:200px;
margin: 50px;
}
/* About and contact CSS*/
.contact-back{
background-color: #f2f2f2;
}
input[type=text] {
width=100%;
padding: 12px 20px;
margin: 5px 0;
border: solid 2px #333333;
border-radius: 4px;
box-sizing: border-box;
}
textarea{
width:100%;
height:200px;
padding: 5px 12px;
margin: 5px 0;
border: solid 2px #333333;
border-radius: 4px;
box-sizing: border-box;
}
button.submit{
background-color: #ffffff;
}
.social-buttons{
background-color: #ffffff;
margin: 5px;
box-shadow: 2px 2px 2px #000000;
}
h3{
font-family:Montsterrat, Arial;
font-size: 12px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://hackyourcraft.com/bootstrap-social/bootstrap-social.css" rel="stylesheet" />
<link href="http://hackyourcraft.com/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment