Skip to content

Instantly share code, notes, and snippets.

@kasiapryczek

kasiapryczek/index.html

Last active September 13, 2015 13:28
Show Gist options
  • Save kasiapryczek/4172de4bbc6487015304 to your computer and use it in GitHub Desktop.
Save kasiapryczek/4172de4bbc6487015304 to your computer and use it in GitHub Desktop.
Download ZIP
new home page and updated styles
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Rajdhani:500|Pacifico|Cardo|Josefin+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/kasiastyle.css">
<script>
$(function () {
$('#tooltip1').tooltip();
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!--jQuery Media Script-->
<script src="js/jquery.media.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA-HjWder4SAOn34DQzPreqViE6AoZ8qx4">
</script>
<title>Home</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<body data-spy="scroll" data-target="#nav">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class["sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="nav">
<ul class="nav navbar-nav">
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
</ul>
</div>
</div><!-- <nav container end> -->
</nav><!-- <end navbar> -->
<div class="welcome">
<a href="#"><h1>Kasia Pryczek</h1></a>
</div>
<div class="jobtitle">
<h2>FULL STACK WEB DEVELOPER</h2>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/kasiaally3.jpg" alt="...">
<div class="carousel-caption">
<p><span class="glyphicon glyphicon-menu-down"></span></p>
</div>
</div>
<div class="item">
<img src="img/write.jpg" alt="...">
<div class="carousel-caption">
<p><span class="glyphicon glyphicon-menu-down"></span></p>
</div>
</div>
<div class="item">
<img src="img/writingmachine.jpg">
<div class="carousel-caption">
<p><span class="glyphicon glyphicon-menu-down"></span></p>
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container-fluid" id="work">
<div class="worksection">
<div class="image" id="0"></div>
<div class="image" id="1"></div>
<div class="image" id="2"></div>
<div class="image" id="3"></div>
<div class="image" id="4"></div>
</div>
</div><!-- <end container #work> -->
<div class="container-fluid" id="about">
<div class="row" id="rowabout">
<div class="col-md-6 col-xs-12" id="kasiapic">
<div id="headerabout">
<h1>About Me</h1>
<span class="glyphicon glyphicon-option-horizontal"></span>
<p>After graduating Social Psychology in Warsaw I moved to the sin city Berlin. My humanistic skills and creative thinking dominated my career and I founded an <a href="#" title="that's a wonderful space in Berlin that used to be named Studio Motion" id="tooltip1">International School of Dance</a>, to promote arts and integrate communities. Due to the lack of workforce I ended up working as a Marketing Manager for over 5 years. Marketing narrowed to Online Marketing and there, for the first time, I discovered the power of a code. I discovered another side of me, the one with attention to details, logical thinking and passion for challenges of today's tech industry. Living in Europe's Sillicon Valley, I had an opportunity to connect with people and companies that have put me on the new career path.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="I will write more but stll not sure what">View More.</button>
</div>
</div>
<div class="col-md-6 col-xs-12" id="skills">
<h1>My Skills</h1>
<span class="glyphicon glyphicon-option-horizontal"></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
HTML/CSS
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
JavaScript
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
Ruby on Rails
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
Responsive Design
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
Photography
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
Photoshop
</div>
</div>
</div>
</div>
</div><!-- <end container #about> -->
<div class="container-fluid" id="contact">
<div class="contact header">
<h1>Contact Me</h1> </div>
<!--<div id="maps">
<iframe width="400" height="320" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA-HjWder4SAOn34DQzPreqViE6AoZ8qx4&q=Pasedagplatz+5,+13088+Berlin,+Germany"></iframe>
</div> -->
<div id="map-canvas" style="width: 400px; height:320px"></div>
<div class="contact intro">
<p>Questions?<br> I am looking forward to getting new projects and new challenges<br> Just write me an email:</p>
</div>
<form>
<div class="form-group">
<label for="name" class="sr-only">Name</label>
<input placeholder="Enter your name" class="form-control" id="name" type="text" name="name">
</div>
<div class="form-group">
<label for="email" class="sr-only">E-mail</label>
<input placeholder ="Email" class="form-control" id="email" type="email" required="required" name="email">
</div>
<textarea placeholder ="Your message here" id="message-box" class="form-control" name="message" style="resize:none" cols="40" rows="5"></textarea>
<div class="form-group">
<p id="char-count"></p></div>
<button type="submit" class="btn btn-default" id="send-btn">Send</button>
</form>
<div class="contact info">
<p id="char-count"></p>
<p id="visible-comment"></p>
</div>
<script type="text/javascript" src="js/scripts.js"></script>
</div><!-- <end container #contact> -->
<div class="container" id="faq">
<div class="faq header">
<div class="row">
<h1 class="faqs">FAQs</h1>
<div class="modal-button">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">View Resume/CV</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h2 class="modal-title" id="myModalLabel">Lear more about me</h4>
</div>
<div class="modal-body">
<iframe id="cv" src="img/CV Katarzyna Pryczek english.pdf"></iframe>
</div>
</div>
</div>
</div>
</div><!-- <end modal button> -->
</div> <!-- <end row> -->
<p>For more information about me and my work check the frequently asked questions below</p></div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="glyphicon glyphicon-menu-right"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Since I was a child I had a great passion for technologies. Feeling that deep inside I'm an engeneer pushed me to a change. Working as a web developer helps me to engage more with the tech industry and develop my passions and skills. Flexible working hours combined with good time management give me the opportunity to continue growing as a mother, dancer, photographer.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="glyphicon glyphicon-menu-right"></span>
who are your clients?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
I am happy to take every chalenge!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class="glyphicon glyphicon-menu-right"></span>
I need to think of more interesting questions
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
...and some inteligent answers.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><span class="glyphicon glyphicon-menu-right"></span>
And more questions...
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
and more answers...
</div>
</div>
</div>
</div>
<table class="center">
<tr class="my-row" id="services">
<th>SERVICES</th>
<th>DURATION</th>
<th>PRICE</th>
</tr>
<tr class="my-row">
<th>Website Design</th>
<th>1-2 weeks</th>
<th>individually discussed</th>
</tr>
<tr class="my-row">
<th>Development</th>
<th>2 weeks</th>
<th>individually discusssed</th>
</tr>
<tr class="my-row">
<th>Something more</th>
<th>not too long</th>
<th>probebly individual</th>
</tr>
</table>
<div id="movie1">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
</div>
</div> <!-- <end container #faq> -->
<footer>
<div class="footer-copyright">
&copy; Katarzyna Pryczek 2015
</div>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
<div class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://katarzyna-pryczek.bitballoon.com" data-via="kasiapryczek">Tweet</a>
</div>
</footer>
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('.navbar');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('.navbar').css('background-color', 'rgba(34,34,34,0.9)');
} else {
$('.navbar').css('background-color', 'transparent');
}
});
});
</script>
</body>
</html>
Raw
kasiastyles.css
/*typography*/
h1 {
font-family: 'Pacifico', sans-serif;
font-size: 4em;
margin-bottom: 30px;
}
h3,
h2 {
font-family: 'Rajdhani', Heveltica, Arial, sans-serif
}
p,
li {
font-family: 'Josefin Slab' serif;
color: black;
font-size: 16px;
}
a {
font-family: 'Josefin Slab' serif;
}
/*about page*/
*{box-sizing: border-box;}
#about {
background-color: #d9f4ea;
padding-top: 90px;
padding-bottom: 110px;
padding-left: 50px;
padding-right: 50px;
}
.container {
width: 80%;
margin: 0 auto ;
}
#headerabout {
padding-right: 10px;
}
#headerabout h1 {
font-family: "Rajdhani", sans-serif;
font-size: 4em;
margin-bottom: 10px
}
.glyphicon-option-horizontal {
font-size: 4em;
color: #FF0066;
}
#skills h1 {
font-family: "Rajdhani", sans-serif;
font-size: 4em;
margin-bottom: 10px;
}
#skill_list {
padding-left: 30px;
}
.progress {
margin-top: 20px;
background-color: transparent;
}
.progress-bar {
background-color: #FF0066;
}
/*contact page*/
#contact {
background-image: url("../img/kasiacurtain3.jpg");
background-size: cover;
background-attachment: fixed;
padding-bottom: 110px;
padding-top: 70px;
padding-right: 50px;
}
.header h1 {
font-family: 'Rajdhani', sans-serif;
font-size: 5em;
margin-bottom: 25px;
text-align: right;
padding-top: 40px;
}
.intro p, p {
color: black;
font-family: 'Josefin Slab', serif;
font-size: 1.3em;
line-height: 1.5;
margin-bottom: 30px;
}
.info {
float: right;
clear: both;
}
.contact {
text-align: right;
}
.contact h1 {
font-size: 4em;
}
.glyphicon-envelope {
font-size: 0.7em;
letter-spacing: 0.5em;
color: #ff0066;
}
.glyphicon-earphone {
font-size: 0.7em;
letter-spacing: 0.5em;
color: #ff0066;
}
.form-control {
width: 45%;
float: right;
clear: right;
margin-bottom: 8px;
background-color: transparent;
border-bottom-color: black;
}
.form-control::-webkit-input-placeholder {
color: #ff0066;
}
.form-control::-moz-placeholder {
color: #ff0066;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #ff0066;
}
#send-btn {
float: right;
clear: both;
background-color: black;
color: white;
box-shadow: none;
border-color: black;
}
/*faq styles*/
#faq {
padding-bottom: 50px;
padding-top: 60px;
}
.faq h1 {
font-family: "Rajdhani", sans-serif;
text-align: left;
margin-bottom: 0px;
}
.panel-heading {
text-transform: uppercase;
}
.panel-title a{
font-family: "Rajdhani", sans-serif;
text-decoration: none;
font-size: 1.2em;
}
.panel-body {
font-family: "Josefin Slab", serif;
font-size: 1.2em;
}
.panel-default>.panel-heading {
background-color: transparent;
}
.glyphicon-menu-right {
color: #FF0066;
}
.faqs {
text-align: left;
float: left;
}
.modal-button {
margin-top: 135px;
float: right;
margin-right: 15px
}
.modal-body {
height: 500px;
}
#cv {
padding: 10px;
height: 100%;
width: 100%;
}
table.center {
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
tr {
line-height: 3em;
font-family: 'Josefin Slab' serif;
font-size: 1.2em;
}
tr#services {
font-family: 'Rajdhani', sans-serif;
font-size: 1.2em;
}
th {
font-weight: normal;
padding-left: 10px;
}
/*index page*/
body {
position: relative;
}
.navbar ul {
margin-top: 0;
}
.navbar ul li {
display: inline-block;
padding: 20px 10px 25px;
float: right;
}
.navbar {
background-color: transparent;
position: fixed;
width: 100%;
top: 0;
border-color: transparent;
transition-duration: 1s;
z-index: 2;
}
.navbar ul li a {
text-transform: uppercase;
color: black;
font-family: "Rajdhani", sans-serif;
letter-spacing: 0.05em;
transition: color 600ms;
-webkit-transition: color 600ms;
text-decoration: none;
font-size: 1.2em;
}
.navbar a:hover {
color: #ffc7b9;
text-decoration: none;
}
.navbar-nav {
float: right;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.jobtitle {
position: absolute;
z-index: 4;
padding-top: 80px;
padding-left: 55px;
}
.jobtitle h2 {
font-size: 1.8em;
}
.welcome h1 {
text-align: left;
font-size: 3.5em;
margin-bottom: 0;
margin-top: 16px;
margin-left: 50px;
color: #FF0066;
}
.welcome a {
text-decoration: none;
}
.welcome {
position: fixed;
z-index: 3;
width: 50%;
}
.carousel-caption p {
color: white;
font-size: 1.5em;
margin-top: 0;
margin-bottom: 0;
}
.carousel h2 {
color: white;
text-decoration: none;
font-size: 5em;
}
.glyphicon-menu-down {
font-size: 2em;
}
/*work*/
#rowimagesone {
margin-top: 100px;
}
#work {
padding-top: 50px;
padding-bottom: 50px;
}
footer {
font-family: "Rajdhani";
background-color: #d9f4ea;
height: 100px;
text-align: center;
}
.footer-copyright {
padding-top: 20px;
font-size: 1.5em;
}
#movie1 {
text-align: center;
padding-top: 80px;
padding-bottom: 50px;
}
#tooltip1.tooltip {
background-color: black;
color: white;
}
Raw
program.rb
def greeting
puts "Please enter your name:"
name = gets.chomp
puts "Hello " + " " + name
end
greeting
Raw
sripts.js
var myKitties = [ { title: "The Cat", pic: "img/thumb1.jpg" }, { title: "On The Wind", pic: "img/thumb2.jpg" },
{ title: "Biking's Hard", pic: "img/thumb3.jpg" },
{ title: "Dark Flowers", pic: "img/thumb4.jpg" }, {title: "Water Pilars", pic: "img/thumb5.jpg"}
];
$(document).ready(function() {
$("#message-box").css("background-color" , "#d9f4ea");
$("#send-btn").on("click", function() {
console.log("clicked");
var comment = $("#message-box").val();
console.log(comment);
$("#visible-comment").html(comment.toUpperCase());
return false;
});
$("#message-box").on("keyup", function() {
console.log("keyup happened");
var charCount=$("#message-box").val().length;
console.log(charCount)
$("#char-count").html(charCount);
if(charCount > 50) {
$("#char-count").css("color", "red")
} else {
$("#char-count").css("color", "black")
};
});
var rows= $(".my-row");
for(var i=0; i<rows.length; ++i) {
if(i%2===0) {
$(rows[i]).css("background-color", "#d9f4ea")
}
};
for(var i=0; i<myKitties.length; ++i) {
$( "#" + i ).css("background-image", "url(" + myKitties[i].pic + ")" );
};
$(".image").mouseenter( function() {
console.log(myKitties[this.id].title);
$(this).html("<p class='info'><span class='proj-title'>Title:</span> " + myKitties[this.id].title + "</p>");
}).mouseleave( function() {
$("p.info").html("");
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.559772,13.460112,17),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
});
};
google.maps.event.addDomListener(window, 'load', initialize);
});
@dogweather
Copy link

This is all looking beautiful. The only small thing to do for your next assignments is: Indents are usually 4 spaces for HTML and CSS. And, we take great pains to make sure that they're spaces and not tabs. (I can't tell which one you used here, but I can help you configure Sublime if you need to.)

Awesome job.

@dogweather
Copy link

Yep, you really got this. Your code looks very good. I don't see anything I'd change.

@dogweather
Copy link

Oh whoops, yes I do see something I'd change. 😉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment