Skip to content

Instantly share code, notes, and snippets.

@rswdn

rswdn/index.html

Created April 14, 2017 13:13
Show Gist options
  • Save rswdn/5474c756cdb4f297ca0a9fbb81335d7d to your computer and use it in GitHub Desktop.
Save rswdn/5474c756cdb4f297ca0a9fbb81335d7d to your computer and use it in GitHub Desktop.
Download ZIP
My Website
Raw
index.html
<head>
<div class="head">
<a href="#about"><button id="info"class="button1">About</button></a>
<button id="info" class="button2">Portfolio</button>
<a href="#contact"><button id="info" class="button3">Contact</button></a>
<div class="section1">
<div class="header">
<header>Hi I'm Ryan</header>
</div>
<div class="h1">
<h1>And I Build Websites</h1>
</div>
<a href="#contact"><button id="info" class="button4">Contact</button></a>
</div>
<div class="hr">
<hr></hr>
</div>
</div>
</div>
</head>
<body>
<div class="about">
<a id="about"><h2 class="h2">About me</h2></a>
<div class="container">
<div class="jumbotron">
<p class="p">Hi my name is Ryan Sowden and I am a web developer from Brisbane Australia and I specialize in Front End Development using HTML, CSS and JavaScript. So if you are a business looking for a Web Developer or an employee looking to hire you can get in contact with me <a href="#contact">here</a>.</p>
</div>
</div>
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img1"></img>
<img src="http://w3widgets.com/responsive-slider/img/css3.png" class="img2"></img>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Badge_js-strict.svg/2000px-Badge_js-strict.svg.png" class= "img3"></img>
<div class="contact">
<a id="contact"><h3 class="h3">Want to work together?</h3>
<p class="p2">I'm currently accepting new projects and would love to hear about yours. Please take a few minutes to tell me about it</p>
<button class="button5" id="info">Get Started</button>
</div>
<div class="footer">
<footer>
<p class="p4">Follow me on Social Media</p>
<a href="https://twitter.com/ryansowden"><img class="timg" src="https://img.clipartfest.com/1636d574e1e48e291f80a5d2b38175d9_black-circle-twitter-icon-twitter-circle-clipart_486-486.png"></img></a>
<a href="https://www.facebook.com/ryan.sowden.3"><img class="fimg" src="https://image.flaticon.com/icons/svg/54/54997.svg"></img></a>
<img class="iimg" src="https://img.clipartfest.com/775ee5289677d38fe2fdb408e30544a3_instagram-logo-clipart-instagram-clipart-circle_512-512.png"></img>
<a url="https://github.com/RyanSowden"><img class="gimg" src="https://image.flaticon.com/icons/svg/25/25231.svg"></img></a>
</footer>
</div>
</div>
Raw
script.js
$( document ).ready(function() {
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
scrollToAnchor('about');
});
});
});
Raw
style.css
.head{
background-image: url("http://wallpaperpulse.com/img/1686096.jpg");
}
.header{
font-family: Arial Rounded MT Bold;
font-size: 100px;
text-align: center;
margin-top: 50px;
color: white;
margin-top: 120px;
margin-bottom: 15px;
}
.h1{
font-size: 10px;
font-family:Arial Rounded MT Bold;
text-align: center;
color: white;
}
.hr{
margin-top:200px;
background-color: #eee;
border: 0 none;
color: #eee;
height: 1px
}
.button1{
background:none;
border:none;
margin:0;
padding:0;
color: black;
margin-left: 950px;
margin-top: 20px;
cursor: pointer;
}
.button2{
background: none;
border: none;
padding: 0;
color: black;
margin-left: 30px;
margin-top: 20px;
cursor: pointer;
}
.button3{
background:none;
border:none;
margin:0;
padding:0;
color: black;
margin-left: 25px;
margin-top: 20px;
cursor: pointer;
}
.button4{
font-size: 50px;
border-radius: 100px;
border-color: white;;
border-style: solid;
background: none;
padding: 20px;
color: white;
font-family: Arial Rounded MT Bold;
margin-left: 490px;
margin-top: 75px;
cursor: pointer;
}
.about{
background: silver;
}
.h2{
font-family: Arial Rounded MT Bold;
font-size: 60px;
color: white;
text-align: center;
}
.p{
font-family: Monospaced Monaco;
color: black;
text-align: center;
font-size: 30px;
margin-left: 200px;
margin-right: 200px;
}
.img1{
height: 150px;
width: 150px;
position: relative;
left: 100px
}
.img2{
height: 150px;
width: 100px;
position: relative;
left: 400px;
}
.img3{
height: 165px;
width: 120px;
position: relative;
left: 700px;
}
.contact{
background: #FFFF33;
margin-bottom: 75px;
}
.h3{
color: black;
font-size: 50px;
font-family: Arial Rounded MT Bold;
text-align: center;
margin-bottom: 50px;
}
.p2{
font-family: Monospaced Monaco;
color: black;
text-align: center;
font-size: 30px;
margin-left: 200px;
margin-right: 200px;
}
.button5{
font-size: 50px;
border-radius: 100px;
border-color: black;
border-style: solid;
background: none;
padding: 20px;
color: black;
font-family: Arial Rounded MT Bold;
margin-left: 455px;
margin-bottom: 100px;
margin-top: 50px;
cursor: pointer;
}
.footer{
backgorund-color: white;
}
.p4{
color: black;
text-align: center;
}
button:hover{
color:white;
}
.timg{
height: 40px;
width: 40px;
position: relative;
right: -470px;
cursor: pointer;
margin-bottom: 10px;
}
.fimg{
height: 35px;
width: 40px;
position: relative;
right: -500px;
cursor: pointer;
margin-bottom: 10px;
}
.iimg{
height: 40px;
width: 40px;
position: relative;
right: -530px;
cursor: pointer;
margin-bottom: 10px;
}
.gimg{
height: 35px;
width: 40px;
position: relative;
right: -550px;
cursor: pointer;
margin-bottom: 10px;
}
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