Skip to content

Instantly share code, notes, and snippets.

@tolkadot

tolkadot/index.html

Created August 24, 2015 09:02
Show Gist options
  • Save tolkadot/a06c18ad6ac905fd5fcc to your computer and use it in GitHub Desktop.
Save tolkadot/a06c18ad6ac905fd5fcc to your computer and use it in GitHub Desktop.
Download ZIP
website background scroll
Raw
index.html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,900' rel='stylesheet' type='text/css'>
</head>
<!-- NAV -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">tolka dot</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</div>
</nav>
<main>
<!-- HOME -->
<div class = "container-fluid">
<div class="sticky-bg home">
<section id="home">
<h1 id="banner"> tolka </h1>
<h2>web design studio </h2>
<h3> clean useable websites </h3>
<ul id ="linksList"><li><button><a href="https://twitter.com/tolkadot">TWITTER</a></button>
</li>
<li><button><a href="#">LINKEDIN</a></button>
</li>
<li><button><a href="https://github.com/tolkadot">GITHUB</a></button>
</li>
<li><button><a href="http://www.freecodecamp.com/tolkadot">FreeCodeCamp</a></button>
</li></ul>
</div>
<!-- ABOUT -->
<div class="sticky-bg about">
<section id="about"><div class="col-xs-6"><p>Hello. My name is Dee Bryant and I'm a self taught web designer & developer based in Melbounre, Australia. I am working through the FreeCodeCamp roadmap to develop my skills further and help non-profit organisations with their website needs.</br>
Competences:<br>
Languages and Frameworks:
Javascript, HTML5, CSS3, jQuery, Bootstrap3
<br>Tools & expertise:
Git, Responsive Web Design.
<p></div>
<div class="col-xs-6"><img id ="myPic" class="img-responsive" src = "https://avatars1.githubusercontent.com/u/10471661?v=3&s=460"></div>
</div> </section>
</div>
<div class="sticky-bg portfolio">
<section id="portfolio">
Some of my work
<div class="row">
<div class="col-xs-4 portfolioThumb">Project1<img class="img-responsive" src=" http://img.wonderhowto.com/img/43/20/63539901827181/0/enable-tab-webpage-previews-every-web-browser.w654.jpg" height = '80%' width = '80%'></div>
<div class="col-xs-4 portfolioThumb">Project2</div>
<div class="col-xs-4 portfolioThumb">Project3</div>
</div>
<div class="row">
<div class="col-xs-4 portfolioThumb">Project4</div>
<div class="col-xs-4 portfolioThumb">Project5</div>
<div class="col-xs-4 portfolioThumb">Project6</div>
</div>
</section>
</div>
<!-- CONTACT -->
<div class="sticky-bg contact">
<section id="contact">
<div>
tolka web design & development tolkadot@gmail.com</div>
<ul id ="contactsList">
<li><button>
<a class="btn btn-block btn-social btn-twitter" href="https://twitter.com/tolkadot">
<i class="fa fa-twitter"> twitter</i>
</a>
</button>
</li>
<li><button><a class="btn btn-block btn-social btn-linkedin" href="#"><i class="fa fa-linkedin"> linkedin</i></a></button>
</li>
<li><button><a class="btn btn-block btn-social btn-twitter" href="https://github.com/tolkadot"> <i class="fa fa-github"> github </i></a></button>
</li>
<li><button> <img href="http://www.freecodecamp.com/tolkadot"><img alt="Free Code Camp Icon" id="imgIcon" onerror="$(this).hide()" src="//dist.alternativeto.net/icons/free-code-camp_68344.png?width=32&amp;height=32&amp;mode=crop&amp;anchor=middlecenter" width="20" height="20"> <a class="btn btn-social" href="http://www.freecodecamp.com/tolkadot"> freecodecamp</a></button>
</li></ul>
</section>
</div>
<!-- FOOTER -->
<footer class ="footer">
<div class = "container">
<ul class = "nav navbar-nav navbar-left footer">
<li><a href="#home">home </a></li>
<li><a href="#about">about </a></li>
<li><a href="#portfolio">portfolio </a></li>
<li><a href="#contact">contact</a></li>
</ul>
<br><br><br><p>
Copyright © tolka web design studio 2015. All Rights Reserved</p>
</div>
</footer>
</div>
</section>
</main>
Raw
script.js
$(document).ready(function() {
$("button").mouseenter(function(){
$(this).addClass('btn-lg');
});
$("button").mouseleave(function(){
$(this).removeClass('btn-lg');
});
});
//$(this)addClass("btn-lg")});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body, html, main {
height: 100%;
}
.sticky-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
margin: 0 auto;
}
#myPic{
border-radius: 30%;
}
/* HOME*/
#home {
font-family: 'Poiret One', cursive;
border:0;
margin:0;
height: 600px;
text-align: center;
/*top: 150px; */
/*width: 100%; */
}
.sticky-bg.home {
background-color: grey;
background-image: url(http://puckettpages.com/wp-content/uploads/2011/07/clouds-blue-sky-blurred-background-backdrop1.jpg);
}
#banner {
font-size : 300px;
}
#home h2 {
font-size: 70px;
}
#linksList li{
list-style-type:none;
display: inline;
padding: 10px;
background-color: rgba(227, 235, 240, .5);
}
/*ABOUT*/
#about{
text-align: center;
width: 100%;
font-family: 'Roboto Condensed', sans-serif;
font-size: 150%;
color: gray;
padding: 170px;
border:0;
margin:0;
height: 600px;
}
.sticky-bg.about {
background-color: pale-blue;
background-image: url("http://www.thecanvasfactory.com.au/blog/wp-content/uploads/colour-themed-art-canvas-photo-prints-blurry-photo.jpg.pagespeed.ce.9cgCVX8eT5.jpg");
}
/*PORTFOLIO*/
.sticky-bg.portfolio {
background-color: grey;
background-image: url(https://s-media-cache-ak0.pinimg.com/736x/5e/69/dc/5e69dc4797427650140e51312e3ce942.jpg);
}
.portfolioThumb {
height: 400px;
width: 400px;
border: 10px solid;
padding: 10px;
margin: 15px;
}
#portfolio {
font-family: 'Roboto Condensed', sans-serif;
font-size: 150%;
color: dark-gray;
text-align: center;
}
/*CONTACT*/
.sticky-bg.contact {
background-color: grey;
background-image: url(http://thumbs.dreamstime.com/t/blurred-pastel-background-multi-color-53448121.jpg);
font-family: font-family: 'Roboto Condensed', sans-serif;
font-size: 50px;
text-align: center;
padding: 50px;
margin:0px;
border:40px;
}
/*CONTACT*/
#contactsList li{
list-style-type:none;
display: inline;
padding: 20px 20px 30px 20px;
background-color: rgba(227, 235, 240, .5);
font-size: 20px;
font-family: sans-serif;
}
.footer{
background-color:rgb(255, 233, 233);
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//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