<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Erythrina works</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif' rel='stylesheet' type='text/css'>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" >
</head>
<body>
<div id="scrollable" data-spy="scroll" data-target="#target_nav">
<!-- .....NAV BAR...... -->
<header>
<nav class="navbar-fixed-top" id="target_nav">
<div class="container">
<a href=""><div class="navbar-overbox"><h1>
ERYTHINA</h1><h2>let me make you believe<h2>
</div></a>
<div class="pull_right">
<ul>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</nav>
</header>
<div class="headerImage">
</div>
<div class="blueline"></div>
<div class="container"> <!--CONTAINER OPEN-->
<!-- .....PORTFOLIO...... -->
<!-- .the bootstrap modal lg. -->
<div id="portfolio"></div>
<div class="modal fade bs-example-modal-lg" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg ">
<div class="modal-content my_modalbox">
<img class="pull_right close" data-dismiss="modal" src="cerrar.png" height="30" width="30">
<div class="centering"><img class="centering" src="titulo.png" height="30" width="224">
</div>
<div class="text-center"><h1> categoria del proyecto </h1></div>
<h2>modal box for picture 1</h2>
<div class="horizontalpic centering"> 1pic</div>
<div class="verticalpic"> 2pic</div>
<div class="verticalpic"> 3pic</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="modal fade bs-example-modal-lg" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg ">
<div class="modal-content my_modalbox">
<img class="pull_right close" data-dismiss="modal" src="cerrar.png" height="30" width="30">
<div class="centering"><img class="centering" src="titulo.png" height="30" width="224">
</div>
<div class="text-center"><h1> categoria del proyecto </h1></div>
<h2>modal box for picture 2</h2>
<div class="horizontalpic centering"> 1pic</div>
<div class="verticalpic"> 2pic</div>
<div class="verticalpic"> 3pic</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="modal fade bs-example-modal-lg" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg ">
<div class="modal-content my_modalbox">
<img class="pull_right close" data-dismiss="modal" src="cerrar.png" height="30" width="30">
<div class="centering"><img class="centering" src="titulo.png" height="30" width="224">
</div>
<div class="text-center"><h1> categoria del proyecto </h1></div>
<h2>modal box for picture 3</h2>
<div class="horizontalpic centering"> 1pic</div>
<div class="verticalpic"> 2pic</div>
<div class="verticalpic"> 3pic</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- </div>-->
<div class="section-heading centering">
<img class="centering" src="portfolio.png" height="30" width="224">
</div>
<!-- .carrousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--<li data-target="#myCarousel" data-slide-to="2"></li>-->
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<!-- .thumbnails row. -->
<div class="row thumbnailStyle">
<div class="col-sm-3">
<div id="thumbnailImage1" data-toggle="modal" data-target=".bs-example-modal-lg">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage2" data-toggle="modal" data-target=".bs-example-modal-lg">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage3">
<div id="overlay"></div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage4">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage5">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage6">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage7">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage8">
<div id="overlay">
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row thumbnailStyle">
<div class="col-sm-3">
<div id="thumbnailImage1">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage2">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage3">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage4">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage5">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage6">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage7">
<div id="overlay">
</div>
</div>
</div>
<div class="col-sm-3">
<div id="thumbnailImage8">
<div id="overlay">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel nav left-right -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div id="about"></div>
<!-- .....ABOUT ......... -->
<section class="aboutSection section-heading">
<div class="text-center centering">
<img src="about.png" height="30" width="224" align="middle">
</div>
<div class="row">
<div class="col-sm-4">
<div class="about-skills">
<img src="skills.png">
</div>
</div>
<div class="col-sm-8 about-text">
<h2><p> ||| HELLO WORLD ||| I’m young full time desginer / photographer !!!</p>
After high school, I made my vocational training press design. Then I decided to make a Design bachelor degree with a strong fundation in conventional arts.
Currently I’m training myself in interactive desging and in the audiovisual field. <a href=""> CV.pdf</a></h2>
</div>
</div>
</section>
<div class="greyline"></div>
<!-- .....CONTACT......... -->
<section class= "contactSection" id="contact">
<div class="text-center">
<img src="contact.png" height="30" width="224" align="middle">
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8 contact-text">
<h2>me if you are interested in hiring me or need a freelance designer.</h2>
<a href="">or send an e-mail</a>
</div>
<div class="contact-form">
<form action="contact me">
<input type="text" placeholder="Name" name="name" required>
<input type="email" placeholder="Email" name="email" required>
<textarea placeholder="Message" name="message" required></textarea>
<div class="captcha">
<input type="text" value="2 + 3 =" name="question" required readonly>
<input type="text" placeholder="Answer" name="captcha" required>
</div>
<input class="send" type="submit" value="Send">
</form>
</div>
</section>
</div>
</div> <!-- container -->
<!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
<footer class="text-center">
<h1>Copyright © 2014 Lidia Diaz Navarro </h1>
</footer>
</html>
/*TYPE refence
font-family: 'Droid Sans', sans-serif;
font-family: 'Droid Serif', serif;
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
*/
/*GENERAL STYLE*/
.centering{
display: block;
margin-left: auto;
margin-right: auto;
}
.headerImage h1 {
margin: 0px auto 0px auto;
padding-top: 200px;
width: 150px
}
.headerImage h2 {
margin: 0px auto 0px auto;
padding-top: 30px;
width: 300px
}
.headerImage {
margin-top: 45px;
height: 600px;
background-color: rgb(216,0,62);
/*background:url(full_1.png);
background-size: cover;
*/
}
.blueline {
height: 65px;
background:url(lines.png);
background-color: rgb(106,236,175);
}
.greyline {
height: 65px;
background:url(lines.png);
background-color: rgb(180,180,180);
}
.greyline {
height: 65px;
background-color: rgb(180,180,180);
}
.redline {
margin-top: 300px;
height: 50x;
background-color: rgb(216,0,62);
}
.section-heading{
height: 30px;
width: 100%;
margin-top: 100px;
background-color: rgb(255,255,255);
margin-bottom: 30px;
}
/* NAV BAR */
.pull_right{
position: :absolute;
float:right;
}
nav{
padding-left: 50px;
padding-right: 50px;
height: 45px;
background-color: rgb(255,255,255);
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
}
nav ul{
position: :absolute;
margin-top: -63px;
}
nav li{
display: inline-block;
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
font-size: 140%;
color: rgb(77,77,77);
padding-left: 40px;
}
nav li.active:focus{
color: rgb(216,0,62);
text-decoration: underline;
}
nav li.active a:hover{
color: rgb(106,236,175);
}
nav a{
color: rgb(77,77,77);
}
nav a:hover{
text-decoration: none;
color: rgb(216,0,62);
}
.navbar-overbox{
height: 75px;
width: 200px;
padding-left: 65px;
margin-top: -20px;
background-color: rgb(106,236,175);
}
.navbar-overbox h1{
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
font-size: 200%;
color: rgb(255,255,255);
margin-left: -32px;
padding-top: 19px;
}
.navbar-overbox h2{
font-family: 'Droid Sans', sans-serif;
font-size: 80%;
color: rgb(255,255,255);
margin-left: -30px;
margin-top: -10px;
}
/*--------------------PORTFOLIO*/
.close{
margin-right: 10px;
float:right;
}
.my_modalbox{
margin-top: 10px;
padding-top: 30px;
}
.poppy h1{
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
font-size: 100%;
color: rgb(77,77,77);
}
.poppy h2{
font-family: 'Droid Serif', serif;
font-size: 100%;
color: rgb(77,77,77);
margin-top: 40px;
}
.horizontalpic{
background-color: rgb(180,180,180);
margin-top: 5px;
margin-bottom: 5px;
/*float: left;*/
height: 500px;
width: 890px;
}
.verticalpic{
background-color: rgb(180,180,180);
margin: 5px 5px 30px 5px;
float: left;
height: 600px;
width: 439px;
}
.squaredpic{
background-color: rgb(180,180,180);
margin-top: 5px;
margin-bottom: 5px;
height: 500px;
width: 500px;
}
/*the thumbnails */
.thumbnailStyle{
color: rgb(180,180,180);
height: 602px;
}
#thumbnailImage1 {
margin-top: 1px;
border-bottom:1px solid #fff;
border-right:2px solid #fff;
background:url(thumbnail.png);
background-size:cover;
overflow:hidden;
}
#thumbnailImage2 {
margin-top: 1px;
border-bottom:1px solid #fff;
border-right:2px solid #fff;
background:url(thumbnail.png);
background-size:cover;
overflow:hidden;
}
#thumbnailImage3 {
margin-top: 1px;
border-bottom:1px solid #fff;
border-right:2px solid #fff;
background:url(thumbnail.png);
background-size:cover;
overflow:hidden;
}
#thumbnailImage4 {
margin-top: 1px;
border-bottom:1px solid #fff;
border-right:2px solid #fff;
background:url(thumbnail.png);
background-size:cover;
overflow:hidden;
}
#thumbnailImage5 {
margin-top: 1px;
border-bottom:1px solid #fff;
border-right:2px solid #fff;
background:url(thumbnail.png);
background-size:cover;
overflow:hidden;
}
#thumbnailImage6 {
margin-top: 1px;
border-bottom:1px solid #fff;
border-right:2px solid #fff;
background:url(thumbnail.png);
background-size:cover;
overflow:hidden;
}
#thumbnailImage7 {
margin-top: 1px;
border-bottom:1px solid #fff;
border-right:2px solid #fff;
background:url(thumbnail.png);
background-size:cover;
overflow:hidden;
}
#thumbnailImage8 {
margin-top: 1px;
border-bottom:1px solid #fff;
border-right:2px solid #fff;
background:url(thumbnail.png);
background-size:cover;
overflow:hidden;
}
#overlay{
background:rgba(90,0,34,.5);
text-align:center;
padding:150px 0 150px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
}
#thumbnailImage1:hover #overlay {
opacity:1;}
#thumbnailImage2:hover #overlay {
opacity:1;}
#thumbnailImage3:hover #overlay {
opacity:1;}
#thumbnailImage4:hover #overlay {
opacity:1;}
#thumbnailImage5:hover #overlay {
opacity:1;}
#thumbnailImage6:hover #overlay {
opacity:1;}
#thumbnailImage7:hover #overlay {
opacity:1;}
#thumbnailImage8:hover #overlay {
opacity:1;}
/*making the overlayed boxes*/
/* ABOUT */
.aboutSection {
margin-top: 55px;
padding-top: 30px;
height: 260px;
background-color: rgb(216,0,62);
-webkit-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
/*HOW TO PUT THE SHADOW OVER THE GRAYBOX*/
}
.aboutSection img{
margin-left: 85px;
}
.about-text a{
margin-left: 0px;
text-decoration: underline;
color: rgb(255,255,255);
}
.about-text a:hover{
color: rgb(180,180,180);
}
.about-skills {
margin-top: 0px;
margin-left: 35px
}
.about-text{
width: 600px;
padding-top: 10px;
padding-left: 80px;
}
.about-text h1{
font-family: 'Droid Sans', sans-serif;
font-size: 50%;
color: rgb(255,255,255);
margin-left: 0px;
margin-top: 0px;
}
.about-text h2{
font-family: 'Droid Serif', serif;
font-size: 100%;
color: rgb(255,255,255);
margin-left: 0px;
margin-top: 0px;
line-height: 150%;
}
/* CONTACT */
.contactSection{
background: #f9f9f9;
margin-top: 0px;
margin-left: -50px;
margin-right: -50px;
padding-top: 30px;
padding-bottom: 90px;
}
.contact-text{
padding-top: 15px;
padding-left: 80px;
padding-right: 200px;
}
.contact-text h2{
width: 415px;
font-family: 'Droid Serif', serif;
font-size: 100%;
color: rgb(77,77,77);
margin-left: 0px;
margin-top: 0px;
line-height: 180%;
}
.contact-text a{
text-decoration: underline;
color: rgb(77,77,77);
}
.contact-text a:hover{
text-decoration: underline;
color: rgb(216,0,62);
}
.contact-form{
width: 800px;
margin-left: 18%;
margin-top: 100px;
padding-top:50px;
}
/* FORM */
// Colours
$green: #6AECAF;
$red: #D8003E;
$blue: #D8003E;
form {
width: 50%;
margin: 13% auto;
min-width: 9rem;
padding-left: 20%;
padding-right: 20%;
margin-top: 20px;
}
input, textarea {
float: left;
width: 100%;
max-width: 100%;
outline: 0;
border: 0px solid;
margin: 0.5rem 0;
padding: 0.5rem 1rem;
/*background: darken(#f9f9f9, 10%);*/
color: darken(#f9f9f9, 50%);
&[type=submit] {
background: $green;
color: #fff;
width: auto;
float: right;
}
&::placeholder {
color: darken(#f9f9f9, 50%);
}
&.error {
background: $red;
color: #fff;
&::placeholder {
color: darken($red, 60%);
}
}
}
.send{
}
.send:hover{
background: rgb(106,236,175);
}
textarea {
height: 10rem;
}
.captcha {
float:left;
input {
float: right;
}
input[name=question] {
width: 4rem;
text-align: right;
padding-right: 0;
}
[name=captcha] {
width: 5rem;
padding-left: 0.5rem;
&::placeholder {
text-align: center;
}
}
}
)
* {
box-sizing: border-box;
}
@font-face {
font-family: 'Droid Sans', sans-serif;
font-weight: 400;
}
body {
color: #2f2f2f;
font-family: 'Droid Sans', sans-serif;
}
/*FOOTER*/
footer {
height: 60x;
background-color: rgb(216,0,62);
margin-left: -50px;
margin-right: -50px;
margin-bottom: -50px;
margin-top: -50px;
-webkit-box-shadow: 0px 0px 20px -9px rgba(0,0,0,0.68);
-moz-box-shadow: 0px 0px 20px -9px rgba(0,0,0,0.68);
box-shadow: 0px 0px 20px -9px rgba(0,0,0,0.68);
}
footer h1{
opacity: 0.8;
padding-top: 22px;
padding-bottom: 28px;
font-family: 'Droid Sans', sans-serif;
font-size: 90%;
color: rgb(77,77,77);
}
