CodePen
HTML
<body>
<div class="container">
<div id="myHead">
<div id="#menu">
<div class="text-center">
<ul class="list-inline myMenu">
<<li><a href="#myHead">Home</a></li>
<li><a href="#aboutMe">About me</a></li>
<li><a href="#myPort">Portfolio</a></li>
<li><a href="#myCont">Contacts</a></li>
</ul>
</div>
</div>
<h1 class="text-center">Yaroslav Kolesnikov<h1>
<h3 class="text-center">Welcome to my page</h3>
<hr>
<div class="list-inline myButton text-center">
<a href="https://twitter.com/JroslavK" target="_blank" title="Twitter">
<button class="btn btn-default">
<i class="fa fa-twitter" aria-hidden="true"></i> Twitter</button></a>
<a href="https://github.com/YaroslavW" target="_blank" title="gitHub">
<button class="btn btn-default">
<i class="fa fa-github" aria-hidden="true"></i> GitHub</button></a>
<a href="https://www.facebook.com/profile.php?id=100011231734286" target="_blank" title="Facebook">
<button class="btn btn-default">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook</button></a>
<a href="https://www.freecodecamp.com/yaroslavw" target="_blank" title="freeCodeCamp">
<button class="btn btn-default" >
<i class="fa fa-free-code-camp" aria-hidden="true"></i> FreeCodeCamp</button></a>
</div>
</div>
</div>
<div class="container">
<div id="aboutMe">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 myText">Hey . I'm Yaroslav and now I'm going through a course in Front End Developer FreeCodeCamp. I love learning new stuff related to programming and technology. My passion is to use technology based solutions, to help solve real world challenges.<br />I have a higher medical education. I love to read and travel. When I do not do the encoding, I do self-education. You can find me on FreeCodeCamp, Codecademy and Udemy <br />My dream - to live and work in a free country, where appreciate the professionalism and human rights.</div>
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<img src="https://pbs.twimg.com/profile_images/484989907845120000/fTyh8IC7_400x400.jpeg" class="img-rounded"/>
</div>
<div class="clearfix visible-md"></div>
</div>
</div>
</div>
<div class="container">
<div id="myPort">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<p data-height="265" data-theme-id="0" data-slug-hash="ygxwXP" data-default-tab="js,result" data-user="YaroslavW" data-embed-version="2" data-pen-title="Simon Game" class="codepen">See the Pen <a href="http://codepen.io/YaroslavW/pen/ygxwXP/">Simon Game</a>
by YaroslavW (<a href="http://codepen.io/YaroslavW">@YaroslavW</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<div class="caption text-center"><a href="http://codepen.io/YaroslavW/pen/ygxwXP/" target="_blank">Simon Game</a> </div></a></div></div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<p data-height="265" data-theme-id="0" data-slug-hash="dNjvgd" data-default-tab="js,result" data-user="YaroslavW" data-embed-version="2" data-pen-title="Pomodoro Clock" class="codepen">See the Pen <a href="http://codepen.io/YaroslavW/pen/dNjvgd/">Pomodoro Clock</a> by YaroslavW (<a href="http://codepen.io/YaroslavW">@YaroslavW</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><div class="caption text-center">
<a href="http://codepen.io/YaroslavW/pen/dNjvgd/" taarget="_blank">Pomodoro Clock</a></div></div></div>
<div class="col-sm-6 col-md-3"><div class="thumbnail"><p data-height="265" data-theme-id="0" data-slug-hash="dNqGaZ" data-default-tab="js,result" data-user="YaroslavW" data-embed-version="2" data-pen-title=" Tic Tac Toe Game" class="codepen">See the Pen <a href="http://codepen.io/YaroslavW/pen/dNqGaZ/"> Tic Tac Toe Game</a> by YaroslavW (<a href="http://codepen.io/YaroslavW">@YaroslavW</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><div class="caption text-center"><a href="http://codepen.io/YaroslavW/pen/dNqGaZ/" target="_blank"> Tic Tac Toe Game</a></div></div></div>
<div class="col-sm-6 col-md-3"><div class="thumbnail"><p data-height="265" data-theme-id="0" data-slug-hash="LxrVja" data-default-tab="js,result" data-user="YaroslavW" data-embed-version="2" data-pen-title="Build a Wikipedia Viewer" class="codepen">See the Pen <a href="http://codepen.io/YaroslavW/pen/LxrVja/">Build a Wikipedia Viewer</a> by YaroslavW (<a href="http://codepen.io/YaroslavW">@YaroslavW</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><div class="caption text-center"><a href="http://codepen.io/YaroslavW/pen/LxrVja/" target="_blank">Wikipedia Viewer</a></div></div></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3"><div class="thumbnail"><p data-height="265" data-theme-id="0" data-slug-hash="WRyVQL" data-default-tab="js,result" data-user="YaroslavW" data-embed-version="2" data-pen-title="JavaScript Calculator" class="codepen">See the Pen <a href="http://codepen.io/YaroslavW/pen/WRyVQL/">JavaScript Calculator</a> by YaroslavW (<a href="http://codepen.io/YaroslavW">@YaroslavW</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><div class="caption text-center"><a href="http://codepen.io/YaroslavW/pen/WRyVQL/" target="_blank">JavaScript Calculator</a></div></div></div>
<div class="col-sm-6 col-md-3"><div class="thumbnail"><p data-height="265" data-theme-id="0" data-slug-hash="egKYRa" data-default-tab="js,result" data-user="YaroslavW" data-embed-version="2" data-pen-title="Show the Local Weather" class="codepen">See the Pen <a href="http://codepen.io/YaroslavW/pen/egKYRa/">Show the Local Weather</a> by YaroslavW (<a href="http://codepen.io/YaroslavW">@YaroslavW</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><div class="caption text-center"><a href="http://codepen.io/YaroslavW/pen/egKYRa/" target="_blank">Show the Local Weather</a></div></div></div>
<div class="col-sm-6 col-md-3"><div class="thumbnail"><p data-height="265" data-theme-id="0" data-slug-hash="PWeMjV" data-default-tab="js,result" data-user="YaroslavW" data-embed-version="2" data-pen-title="Build a Random Quote Machine(2) " class="codepen">See the Pen <a href="http://codepen.io/YaroslavW/pen/PWeMjV/">Build a Random Quote Machine(2) </a> by YaroslavW (<a href="http://codepen.io/YaroslavW">@YaroslavW</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><div class="caption text-center"><a href="http://codepen.io/YaroslavW/pen/PWeMjV/" target="_blank">Random Quote Machine </a></div></div></div>
<div class="col-sm-6 col-md-3"><div class="thumbnail"><p data-height="265" data-theme-id="0" data-slug-hash="GrGpXy" data-default-tab="html,result" data-user="YaroslavW" data-embed-version="2" data-pen-title="Twitchtv JSON API" class="codepen">See the Pen <a href="http://codepen.io/YaroslavW/pen/GrGpXy/">Twitchtv JSON API</a> by YaroslavW (<a href="http://codepen.io/YaroslavW">@YaroslavW</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><div class="caption text-center"><a href="http://codepen.io/YaroslavW/pen/GrGpXy/" target="_blank">Twitchtv JSON API</a></div></div></div>
</div>
</div>
</div>
<div class="container">
<div id="myCont">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<h3 class="text-center">You can write to me</h3>
<h3 class="myEmail text-center">kolesnikovy70 @gmail.com</h3>
<p class="myPhone text-center">8-(8888)-8-888-888-888.</p>
</div>
<div clas="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="https://twitter.com/JroslavK" type="button" target="_blank" title="Twitter" class="btn btn-default target btn-block" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> <span class="signa">Twitter</span></a>
<div clas="row"> <a href="https://github.com/YaroslavW" type="button" target="_blank" title="GitHub" class="btn btn-default target btn-block" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> <span class="signa">GitHub</span></a></div>
<div clas="row"> <a href="https://www.facebook.com/profile.php?id=100011231734286" target="_blank" title="Facebook" type="button" class="btn btn-default target btn-block"><i class="fa fa-facebook" aria-hidden="true"></i> <span class="signa">Facebook</span></a></div>
<div clas="row"><a href="https://www.freecodecamp.com/yaroslavw"target="_blank" title="freeCodeCamp" type="button" class="btn btn-default target btn-block"><i class="fa fa-free-code-camp" aria-hidden="true"></i> <span class="signa">FreecodeCamp</span></a></div>
</div> </div></div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="myFooter"><div class=" text-center">
<ul class="list-inline myMenu">
<li><a href="#myHead">Home</a></li>
<li><a href="#aboutMe">About me</a></li>
<li><a href="#myPort">Portfolio</a></li>
<li><a href="#myCont">Contacts</a></li>
</ul></div><hr>
<div class="text-center">Built by Yaroslav Kolesnikov.</div>
</div>
</div>
</div>
</div>
</body>
@import url(https://fonts.googleapis.com/css?family=Lato);
#myHead{
height:400px;
background-image:URL('https://i.ytimg.com/vi/rSxufmWM6bo/maxresdefault.jpg');
}
.myButton {
margin-top:5%;
}
.myMenu a{
font-size:26px;
color:white;
}
#myHead h1{
color:red;
}
#myHead h3{
color:#D8CDF1;
}
#aboutMe{
background-color:#E9E6FF;
height: 480px;
}
#aboutMe img{
margin-top:50px;
width:300px;
height:300px;
border-radius:4000px;
}
.myText{
margin:0px;
font-family:Lato;
font-size: 1.8rem;
padding-top:3%;
padding-left:5%;
}
hr {
border:none;
background:#D8CDF1;
height:3px;
width:50%;
}
#myCont{
height:auto;
background-image:URL('http://www.newhdwallpapers.in/wp-content/uploads/2014/07/Computer-Networking-Cable-Hi-tech-Wallpaper.jpg');
}
#myCont h3{
color:#D8CDF1;
font-size:5rem;
font-family:Impact;
}
#myCont .target{
margin-top:50px;
margin-bottom: 50px;
}
#myCont .myEmail{
margin-top:10%;
font-size:4rem;
font-family:Lato;
color: red;
}
.myPhone{
font-size:300%;
font-family:Momospace;
color:#00AFB8;
margin-top:5%;
}
#myPort{
background-color:#E9E6FF;
}
#myFooter{
margin-top:5%;
}
#myFooter li a{
color: black;
}
@media screen and (max-width: 992px) {
span.signa {
display: none;
}
#myCont .target{
margin:10px;
}
};
See the Pen LandingPage(for change) by YaroslavW (@YaroslavW) on CodePen.
