<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<head>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto+Slab" rel="stylesheet">
</head>
<script src="https://use.fontawesome.com/8c14f362f7.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="row navbarRow">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><!-- END button -->
<a class="navbar-brand" href="#">
danyweis
</a>
</div><!-- END navbar-header -->
<div id="navBar" class="collapse navbar-collapse">
<ul class="nav nav-pills nav-justified">
<li role="presentation"><a href="#home">home</a></li>
<li role="presentation"><a href="#about">about</a></li>
<li role="presentation"><a href="#portfolio">portfolio</a></li>
<li role="presentation"><a href="#contact">contact</a></li>
</ul>
</div><!-- END #navBar -->
</div><!-- END navbarRow -->
</div><!-- END container -->
</nav><!-- END navbar -->
<div class="container mainContent">
<div id="home">
<div class="row homeBox">
<div class="col-xs-1 homeBoxRight"></div>
<div class="col-xs-10 homeBoxMiddle"></div>
</div><!-- END homeBox -->
<div class="row heroBox">
<div class="col-xs-12 heroText1">
<div class="col-xs-1"></div>
<div class="col-xs-10 heroTextUp">
<br />
<h1 class="text-center">Front-End Developer</h1>
<br />
<h4 class="text-center">dont try finding yourself,
<br /> just start creating yourself</h4>
<br />
</div>
</div><!-- END heroText -->
</div><!-- END heroBox -->
<div class="row heroBox">
<div class="col-xs-12 heroText2">
<div class="col-xs-4"></div>
<div class="col-xs-7 heroTextDown">
<br />
<h2 class="text-center"><span class="passion">/* build with passion and <i class="fa fa-music" aria-hidden="true"></i> */</span></h2>
<br />
</div>
<div class="col-xs-1 heroTextDownAfter">
<br />
</div>
</div><!-- END heroText -->
</div><!-- END heroBox -->
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8 lineTower"></div>
</div>
<div class="row">
<div class="lineTouchTower"></div>
</div>
</div><!-- END home -->
<div id="about">
<div class="bgParis">
<img src="https://raw.githubusercontent.com/danyweis/danyweis.com/master/image/Skyline/skylineParis.png" class="img-responsive" alt="skyline of paris" />
</div><!-- END bgParis -->
<div class="aboutBox">
<div class="row topBox">
<div class="col-xs-3 topBoxLeft"></div>
<div class="col-xs-9 topBoxRight"></div>
</div><!-- END topBox -->
<div class="row topPicBox">
<div class="col-xs-3 topPicBoxLeft"></div>
<div class="col-xs-3 col-sm-2 topPicBoxMiddle">
<img src="http://danyweis.com/image/pics/moi.jpg" class="imgMe img-responsive" alt=" image of Dany Weis" />
</div>
<div class="col-xs-6 topPicBoxRight"></div>
</div><!-- END topPicBox -->
<div class="row topSpaceBox">
<div class="col-xs-5 topSpaceLeft"></div>
<div class="col-xs-6 topSpaceText">
<h2 class="text-center">About Me</h2>
</div>
<div class="col-xs-1 topSpaceRight"></div>
</div><!-- END topSpaceBox -->
<div class="row topTextBox">
<div class="col-xs-2 topTextBoxRight"></div>
<div class="col-xs-9 topTextBoxText">
<p>Hello World, my name is Dan an I would like to introduce myself: <br />
I’m born in Luxembourg at 8:55am I measured 47cm and I had 2.7kg and … no I better start 20 years later <i class="fa fa-smile-o" aria-hidden="true"></i> .</p>
<p>I started my working carrier as salesman and I did that for five years long, after that I did take the decision to move in the south of France, to the Côte d’Azur. <br />
Here I worked now for eight summers as a waiter and in the winter ... I didn’t know what to do. So last year I started to learn to code and it happened, I really started loving what I learnd so I did take the decision that this year I will learn to code and do not any more a new saison. I will put all the time and power I have in my further education.</p>
<p>For the moment I already learned to use HTML5, CSS3, Bootstrap, jQuery, Git, Sass. <br />
My next steps are that I really want to go deeper in JavaScript, PHP and MySQL for that I can start contributing in OpenSource projects.</p>
<p>I consider my self as self-taught, I know what I want and I will work until I get it!</p>
<p>In the end of 2017 I will be able to create a fully functional Facebook like webpage and application! </p>
</div>
</div><!-- END topTextBox -->
<div class="row topUnderTextBox">
<div class="col-xs-2 topUnderTextBoxLeft"></div>
<div class="col-xs-2 topUnderTextBoxRight"></div>
<div class="topUnderTextBoxDeco"></div>
</div><!-- END topUnderTextBox -->
<div class="row goToPortfolio">
<div class="col-xs-10 goToLeft"></div>
<div class="col-xs-2 goToRight"></div>
</div><!-- END goToPortfolio -->
</div><!-- END aboutBox -->
</div><!-- END about -->
<div id="portfolio">
<div class="row portfolioSpace">
<div class="col-xs-6 portfolioSpaceLeft"></div>
<div class="col-xs-4 portfolioSpaceMiddle"></div>
<div class="col-xs-2 portfolioSpaceRight"></div>
</div><!-- END portfolioSpace -->
<div class="row portfolioTop">
<div class="col-xs-6">
<h2 class="text-center">Portfolio</h2>
</div>
<div class="col-xs-6 portfolioTopRight"></div>
</div><!-- END portfolioTop -->
<div class="row portfolioBubbleBox">
<div class="portfolioBubbleLeft"></div>
<div class="portfolioBubble"></div>
</div><!-- END portfolioBubbleBox -->
<div class="row portfolioLine portfolioLineOne">
<div class="col-xs-6 portfolioLineLeft">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8 text-center portfolioLineImage">
<img src="https://raw.githubusercontent.com/danyweis/danyweis.com/877dfb95e8c652d2c37a6d2a9ac4cad3eda2fa4a/codepen/danweis.com.png"class="img-responsive" alt="web site danyweis.com" />
<a href="http://www.danyweis.com" target="_blank">danyweis.com</a>
</div>
</div>
</div><!-- END portfolioLineLeft -->
<div class="col-xs-6 portfolioLineRight">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8 text-center portfolioLineImage">
<img src="https://raw.githubusercontent.com/danyweis/danyweis.com/877dfb95e8c652d2c37a6d2a9ac4cad3eda2fa4a/codepen/charlyr.com.png" class="img-responsive" alt="web site charlyR" /><a href="http://www.charlyr.com" target="_blank">charlyr.com</a>
</div>
</div>
</div><!-- END portfolioLineLeft -->
</div><!-- END portfolioLineOne -->
<div class="row portfolioBubbleBox">
<div class="portfolioBubbleLeft"></div>
<div class="portfolioBubble"></div>
</div><!-- END portfolioBubbleBox -->
<div class="row portfolioLine portfolioLineTwo">
<div class="col-xs-6 portfolioLineLeft">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8 text-center portfolioLineImage">
<img src="https://raw.githubusercontent.com/danyweis/danyweis.com/877dfb95e8c652d2c37a6d2a9ac4cad3eda2fa4a/codepen/charly.com.png" class="img-responsive" alt="web site of charlyR" />
<a href="#">Charly</a>
</div>
</div>
</div><!-- END portfolioLineLeft -->
<div class="col-xs-6 portfolioLineRight">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8 text-center portfolioLineImage">
<img src="https://raw.githubusercontent.com/danyweis/danyweis.com/877dfb95e8c652d2c37a6d2a9ac4cad3eda2fa4a/codepen/eiffel.com.png" class="img-responsive" alt="web site Gustave Eiffel" />
<a href="#">eiffel.com</a>
</div>
</div>
</div><!-- END portfolioLineLeft -->
</div><!-- END portfolioLineTwo -->
<div class="row portfolioBubbleBox">
<div class="portfolioBubbleLeft"></div>
<div class="portfolioBubble"></div>
</div><!-- END portfolioBubbleBox -->
<div class="row portfolioLine portfolioLineThree">
<div class="col-xs-6 portfolioLineLeft">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8 text-center portfolioLineImage">
<img src="https://raw.githubusercontent.com/danyweis/danyweis.com/877dfb95e8c652d2c37a6d2a9ac4cad3eda2fa4a/codepen/ch.com.png" class="img-responsive" alt="template charly.com" />
<a href="#">template charlyr</a>
</div>
</div>
</div><!-- END portfolioLineLeft -->
<div class="col-xs-6 portfolioLineRight">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8 text-center portfolioLineImage">
<img src="https://raw.githubusercontent.com/danyweis/danyweis.com/877dfb95e8c652d2c37a6d2a9ac4cad3eda2fa4a/codepen/dw.com.png" class="img-responsive" alt="template danweis.com" />
<a href="#">template danweis</a>
</div>
</div>
</div><!-- END portfolioLineLeft -->
</div><!-- END portfolioLineThree -->
<div class="row portfolioBubbleBox">
<div class="portfolioBubbleLeft"></div>
<div class="portfolioBubble"></div>
</div><!-- END portfolioBubbleBox -->
<div class="row portfolioSpaceBottom">
<div class="col-xs-6"></div>
<div class="col-xs-6 portfolioSpaceBottomRight"></div>
</div><!-- END portfolioSpaceBottom -->
<div class="row goToContactBox">
<div class="col-xs-2 goToContact"></div>
</div><!-- END goToContactBox -->
</div><!-- END portfolio -->
<div id="contact">
<div class="row contactBox">
<div class="col-xs-6 contactSideButton">
<div class="row contactSpaceBetweenButton">
<div class="col-xs-4 contactButtonSpaceShort"></div>
<div class="col-xs-8 contactButtonSpace"></div>
</div><!-- contactSpaceBetweenButton -->
<div class="row socialButtonLine">
<div class="col-xs-1 col-sm-2 socialSpacePushButton"></div>
<div class="col-xs-9 col-sm-6 socialButton">
<a href="https://github.com/danyweis" class="btn btn-default btn-block" target="_blank"><i class="fa fa-github" ></i> Github</a>
</div>
</div><!-- END socialButtonLine -->
<div class="row contactSpaceBetweenButton">
<div class="col-xs-6 contactButtonSpaceLong"></div>
<div class="col-xs-6 contactButtonSpace"></div>
</div><!-- contactSpaceBetweenButton -->
<div class="row socialButtonLine">
<div class="col-xs-1 col-sm-2 socialSpacePushButton"></div>
<div class="col-xs-9 col-sm-6 socialButton">
<a href="https://twitter.com/danyweisCode" class="btn btn-default btn-block" target="_blank"><i class="fa fa-twitter" ></i> Twitter</a>
</div>
</div><!-- END socialButtonLine -->
<div class="row contactSpaceBetweenButton">
<div class="col-xs-4 contactButtonSpaceShort"></div>
<div class="col-xs-8 contactButtonSpace"></div>
</div><!-- contactSpaceBetweenButton -->
<div class="row socialButtonLine">
<div class="col-xs-1 col-sm-2 socialSpacePushButton"></div>
<div class="col-xs-9 col-sm-6 socialButton">
<a href="https://www.linkedin.com/in/dany-weis-32883b115?trk=nav_responsive_tab_profile" class="btn btn-default btn-block" target="_blank"><i class="fa fa-linkedin" ></i> LinkedIn</a>
</div>
</div><!-- END socialButtonLine -->
<div class="row contactSpaceBetweenButton">
<div class="col-xs-6 contactButtonSpaceLong"></div>
<div class="col-xs-6 contactButtonSpace"></div>
</div><!-- contactSpaceBetweenButton -->
<div class="row socialButtonLine">
<div class="col-xs-1 col-sm-2 socialSpacePushButton"></div>
<div class="col-xs-9 col-sm-6 socialButton">
<a href="https://www.freecodecamp.com/danyweis" class="btn btn-default btn-block" target="_blank"><i class="fa fa-free-code-camp" ></i> Freecodecamp</a>
</div>
</div><!-- END socialButtonLine -->
</div><!-- END contactSideButton -->
<div class="col-xs-6 contactOpositSideButton">
</div><!-- END contactSideMail -->
</div><!-- END contactBox -->
<div class="row contactFooterSpaceMailBox">
<div class="col-xs-2"></div>
<div class="col-xs-7 contactFooterSpaceMailBoxRight"></div>
<div class="col-xs-2 eMail">
<p>mail me to:</p>
<h2>danyweismail@gmail.com</h2>
</div>
</div>
<div class="row contactFooter">
<div class="col-xs-3 contactFooterLeft">
<div class="row">
<div class="col-xs-8"></div>
<div class="col-xs-4 toContactUnderButton"></div>
</div>
</div><!-- contactFooterLeft -->
<div class="col-xs-9 contactFooterRight">
<h2>Contact</h2>
</div>
</div><!-- END contactFooter -->
</div><!-- END contact -->
<div class="row text-center footer">
<div class="col-xs-4">
<h6>special thanks to my <i class="fa fa-female" aria-hidden="true"></i> for all the <i class="fa fa-coffee" aria-hidden="true"></i></h6>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
<h6><i class="fa fa-copyright" aria-hidden="true"></i> by danyweis 2017</h6>
</div>
</div><!-- END footer -->
</div><!-- END container -->
/* ***** GENERAL ***** */
body{
padding-top: 60px;
font-family: 'Roboto Slab', serif;
}
.mainContent{
box-shadow:0px 0px 10px black;
padding:0px;
}
h1, h2, h3, h4, h5, h6{
font-family: 'Indie Flower', cursive;
margin: 0px;
}
h1{
font-size: 52px;
}
h6{
font-size:16px;
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.row{
margin:0;
padding:0;
}
/* ***** NAVIGATION ***** */
.navbar-inverse .navbar-brand {
color: #fff;
margin: 5px 0px;
}
.nav>li>a {
color: #fff;
margin:10px 5px;
}
.nav>li>a:hover {
color: #000;
}
.navbar{
box-shadow: 0 0 15px #000;
}
/* ***** HOME ***** */
#home{
min-height: calc(500px - 70px);
}
.homeBox{
height: 100px;
width: 100%;
}
.homeBoxRight{
height: 100%;
}
.homeBoxMiddle{
height: 100%;
border-left: 3px solid #000;
border-bottom: 3px solid #000;
border-radius: 0 0 0 100px;
}
.heroTextUp{
min-height: 100px;
border-right: 3px solid #000;
}
.heroText2{
min-height: 100px;
}
.heroTextDown{
min-height: 100px;
border-top: 3px solid #000;
border-left: 3px solid #000;
border-radius: 15px 0 0 0;
}
.passion{
color: #bada55;
}
.lineTower{
height:50px;
border-top: 3px solid #000;
}
.lineTouchTower{
border-top: 3px solid #000;
border-radius: 0 50px 0 0;
height:50px;
width:47.1%;
}
/* ***** ABOUT ME ***** */
.aboutBox{
width: 100%;
min-height: 600px;
color: #fff;
background-color: #000;
}
/* ***** topBox ***** */
.topBox{
height: 100px;
}
.topBoxLeft{
height: 100%;
}
.topBoxRight{
height: 100%;
border-left: 3px solid #fff;
border-top: 3px solid #fff;
border-radius: 150px 0 0 0;
}
/* ***** topPicBox ***** */
.imgMe{
width: 100%;
}
.topPicBox{
height: auto;
}
.topPicBoxMiddle{
border: 3px solid #fff;
border-radius: 0 50% 0 50%;
overflow: hidden;
}
.topPicBoxLeft{
border-top: 3px solid #fff;
}
/* ***** topSpaceBox ***** */
.topSpaceBox{
height: 150px;
}
.topSpaceBox>h2{
margin-top: 0;
}
.topSpaceText{
height: 150px;
border-right: 3px solid #fff;
}
.topSpaceRight{
border-top: 3px solid #fff;
height: 150px;
}
/* ***** topTextBox ***** */
.topTextBox{
min-height: 250px;
}
.topTextBoxText{
min-height: 250px;
padding: 15px;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
border-radius: 30px 0 0 0;
}
/* ***** topUnderTextBox ***** */
.topUnderTextBox{
height: 150px;
display: flex;
}
.topUnderTextBoxRight{
border-top: 3px solid #fff;
}
.topUnderTextBoxDeco{
height: 150px;
width: 150px;
border: 3px solid #fff;
border-radius: 0 50% 50% 50%;
background-color: #bada55;
}
.goToRight{
height: 45px;
border-top:3px solid #fff;
border-radius: 45px 0;
}
/* ***** PORTFOLIO ***** */
#portfolio{
background-color: #fff;
}
.portfolioSpaceMiddle{
height: 25px;
border-bottom: 3px solid #000;
border-radius: 0 0 25px 0;
}
.portfolioTopRight{
border-left: 3px solid #000;
height: 100px;
}
/* ***** portfolioBubbleBox ***** */
.portfolioBubbleBox{
height: 40px;
display: flex;
}
.portfolioBubbleLeft{
width: calc(50% - 18.5px);
height: 40px;
}
.portfolioBubble{
width: 40px;
height: 40px;
border: 3px solid #000;
border-radius: 50%;
background-color: #bada55;
}
/* ***** portfolioLineImage ***** */
.portfolioLineImage{
background-color: #bada55;
box-shadow: 0 0 10px #000;
}
.portfolioLineImage>a{
color: #000;
}
.portfolioLineRight{
border-left: 3px solid #000;
}
/* ***** portfolioSpaceBottom ***** */
.portfolioSpaceBottomRight{
height: 50px;
border-left: 3px solid #000;
border-bottom: 3px solid #000;
}
.goToContact{
height: 50px;
border-top: 3px solid #000;
border-right: 3px solid #000;
}
/* ***** CONTACT ***** */
#contact{
background-color: #000;
min-height: 500px;
}
.eMail{
color: #bada55;
transform: rotate(-90deg);
z-index:500;
}
.contactFooterSpaceMailBoxRight{
height: 100px;
border-left: 3px solid #fff;
}
.contactButtonSpaceShort,.contactButtonSpaceLong{
height: 30px;
border-right: 3px solid #fff;
}
.toContactUnderButton{
height: 50px;
border-left: 3px solid #fff;
border-bottom: 3px solid #fff;
}
.contactFooterRight{
height: 50px;
border-bottom:3px solid #fff;
color: #fff;
}
/* ***** FOOTER ***** */
.footer{
height: 25px;
}
