Skip to content

Instantly share code, notes, and snippets.

@kasiapryczek

kasiapryczek/index.html

Created July 11, 2015 12:38
Show Gist options
  • Save kasiapryczek/a5f5980640ec7eb71228 to your computer and use it in GitHub Desktop.
Save kasiapryczek/a5f5980640ec7eb71228 to your computer and use it in GitHub Desktop.
Download ZIP
final web
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">
<title>Home</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<body data-spy="scroll" data-target="#nav">
<div 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> -->
</div><!-- <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="container-fluid">
<div class="row" id="rowimagesone">
<div class="col-md-3 col-xs-6">
<a href="img/work1.jpg"><img src="img/work1.jpg" class="img-responsive"></a> <p>Panorama of Istanbul</p></div>
<div class="col-md-3 col-xs-6">
<a href="img/work2.jpg"><img src="img/work2.jpg" class="img-responsive"></a><p>Cat in Istanbul</p></div>
<div class="col-md-3 col-xs-6">
<a href="img/work3.jpg"><img src="img/work3.jpg" class="img-responsive"></a><p>Dark flowers</p></div>
<div class="col-md-3 col-xs-6">
<a href="img/work4.jpg"><img src="img/work4.jpg" class="img-responsive"></a><p>Walk in Paris</p></div>
</div>
<div class="row" id="rowimagestwo">
<div class="col-md-3 col-xs-6">
<a href="img/work5.jpg"><img src="img/work5.jpg" class="img-responsive"></a><p>Running in Louvre</p></div>
<div class="col-md-3 col-xs-6">
<a href="img/work6.jpg"><img src="img/work6.jpg" class="img-responsive"></a><p>Biking is hard</p></div>
<div class="col-md-3 col-xs-6">
<a href="img/work7.jpg"><img src="img/work7.jpg" class="img-responsive"></a><p>Dandelion</p></div>
<div class="col-md-3 col-xs-6">
<a href="img/work8.jpg"><img src="img/work8.jpg" class="img-responsive"></a><p>Leafless trees</p></div>
</div>
</div><!-- <end container-fluid> -->
</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 International School of Dance, 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>
</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="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
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 Desing
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
Photography
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
Photoshop
</div>
</div>
</div><!-- <end skills> -->
</div><!-- <end rows about> -->
</div><!-- <end container #about> -->
<div class="container-fluid" id="contact">
<div class="contact header">
<h1>Contact Me</h1> </div>
<div class="contact intro">
<p>Questions?<br> I am looking forward to gwtting new projects and new challenges<br> Just write me an email:</p>
</div>
<div class="contact info">
<h2><span class="glyphicon glyphicon-envelope"></span>kpryczek@gmail.com </h2>
<p>or give me a call...</p>
<h3><span class="glyphicon glyphicon-earphone"></span>(+49) 172 77 909 23</h3><br>
<p>I am looking forward to hearing from you!</p>
</div>
</div><!-- <end container #contact> -->
<div class="container" id="faq">
<div class="faq header">
<h1>FAQs</h1>
<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>
</div> <!-- <end container #faq> -->
<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
styles.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: 80px;
padding-bottom: 80px;
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;
}
#hellocolumn h3 {
margin-top: 0;
text-align: center;
}
#hello h3 {
font-size: 2em;
}
.progress {
margin-top: 20px;
}
.progress-bar {
background-color: #FF0066;
}
/*contact page*/
#contact {
background-image: url("../img/kasiacurtain3.jpg");
background-size: cover;
background-attachment: fixed;
padding-bottom: 80px;
padding-top: 50px;
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 h2 {
text-transform: uppercase;
font-family: 'Rajdhani', sans-serif;
font-size: 2em;
margin-bottom: 0;
}
.info h3 {
font-family: 'Rajdhani', sans-serif;
font-size: 2em;
}
.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;
}
/*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;
}
/*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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment