Skip to content

Instantly share code, notes, and snippets.

@akakiev

akakiev/index.html

Created June 4, 2017 01:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save akakiev/70c4f6496c525bbfe71ebd01c853381c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save akakiev/70c4f6496c525bbfe71ebd01c853381c to your computer and use it in GitHub Desktop.
Download ZIP
My Landing Page
Raw
index.html
<header class="navbar navbar-default navbar-fixed-top" id="banner">
<div class="container"><a class="scrollable" href="#top"><img src="http://a11.it-elit.pro/fon.png" height="80px"width="250px"alt="Web-Development" title="Here can be LOGO your company"/></a>
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false"><span class="sr-only">Landing Page</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<nav class="collapse navbar-collapse" id="navbar" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a class="scrollable" href="#top">About</a></li>
<li><a class="scrollable" href="#portfolio">Portfolio</a></li>
<li><a class="scrollable" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- end header--><a id="top" name="home"></a>
<main>
<header>
<div class="intro-text">
<p>Front-End Developer and HTML coder, creative direction,<br>PhD in electronics and scientific experience,<br>experience in technical support of hosting company;<br>freelancer at upwork.com, freelancer.com.</p>
<hr class="star-bright"/><span class="skills">Front-end: HTML, CSS, JavaScript, JQuery;<br>
Back-end: PHP, MySQL, Node.js, npm;<br>
OS: Windows, Debian, Ubuntu, Raspbian, Xubuntu;<br>
Instruments: GitHub, Notepad++, Geany, Bluefish, CodePen, Coder(googlecreativelab), Gimp, Photoshop;<br>
Mathematical modeling: Matlab, Maple, MathCad;<br>
Electonic schemes modeling: OrCad, Multisim, LabView;<br>
Writing/Editing scientific articles;<br>
</span>
</div><img src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAzkAAAAJDU4MmNjNzM1LWIyZTktNDZlYi04OTc4LTEyZDI0MzEwMDMwMw.jpg" alt="My foto." title="Serhii Baraban"/>
</header>
<!-- Gallery Grid Section-->
<section id="portfolio">
<h2>Portfolio</h2>
<hr class="star-dark"/>
<ul class="grid">
<li><a href="http://a11.it-elit.pro/html/t21/index.html"><img src="http://a11.it-elit.pro/1.jpg" alt="Site build on html, css"title="Site build on html, css"/></a></li>
<li><a href="http://a11.it-elit.pro/php/t14/t14z2.php"><img src="http://a11.it-elit.pro/2.jpg" alt="Site build on php,mysql"title="Site build on php,mysql"/></li>
<li><a href="http://a11.it-elit.pro/php/t14/t14z4.php"><img src="http://a11.it-elit.pro/3.jpg" alt="Site build on php,mysql"title="Site build on php,mysql"/></a></li>
<li><a href="http://a11.it-elit.pro/jQuery/t1/index.html"><img src="http://a11.it-elit.pro/4.jpg" alt="Site build on html, css"title="Site build on html, css, jQuery"/></a></li>
<li><a href="http://a11.it-elit.pro/jQuery/find/find_the_penguins.html"><img src="http://a11.it-elit.pro/5.jpg" alt="Site build on html, css"title="Site build on html, css, jQuery"/></a></li>
<li><a href="http://a11.it-elit.pro/jQuery/composition/index.html"><img src="http://a11.it-elit.pro/6.jpg" alt="Site build on html, css"title="Site build on html, css, jQuery"/></a></li>
</ul>
</section>
<!-- Contact Section-->
<section id="contact">
<h2>Contact Me</h2>
<hr class="star-dark"/>
<div>
<form id="contactForm" novalidate="">
<div class="form-item">
<label for="“name”">Name</label>
<input id="name" type="text" placeholder="Name" required=""/>
</div>
<div class="form-item">
<label for="“email”">Email Address</label>
<input id="email" type="email" placeholder="Email Address" required=""/>
</div>
<div class="form-item">
<label for="“phone”">Phone Number</label>
<input id="phone" type="tel" placeholder="Phone Number" required=""/>
</div>
<div class="form-item">
<label for="“message”">Message</label>
<textarea id="message" rows="5" placeholder="Message" required=""></textarea>
</div><br/>
<button type="submit">Send</button>
</form>
<div>
<p>Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some pleasant conversation here in stunning Vinnitsia... just feel free to drop me a line anytime.</p>
<p>I promise to reply A.S.A.P.</p>
<p>Note: No spam/soliciting pour moi, merci :)</p>
</div>
</div>
</section>
<!-- Scroll to Top Button (Only supposed to be visible on small and small screen sizes)-->
<div class="scroll-top"><a class="button scrollable" href="#top"><i class="fa fa-chevron-up"></i></a></div>
</main>
<!-- Footer-->
<footer>
<div id="footer-above">
<div>
<h3>About this page</h3>
<p>Made with <i class="fa fa-fw fa-coffee"></i> and <i class="fa fa-fw fa-music"></i><br/>by <a href="https://www.upwork.com/freelancers/~01954ce668f3682ad7">Serhii Baraban</a>.</p>
</div>
<div>
<h3>Around the Web</h3>
<ul>
<li><a class="button social" href="https://www.linkedin.com/in/serhii-baraban-a151095b/"><i class="fa fa-fw fa-linkedin"><img src="http://a11.it-elit.pro/linkedin.png"title="profile"height="50"width="50"></i></a></li>
<li><a class="button social" href="https://gist.github.com/akakiev"><i class="fa fa-fw fa-github"><img src="http://a11.it-elit.pro/GitHub-Mark-64px.png"title="gists"height="50"width="50"></i></a></li>
<li><a class="button social" href="https://codepen.io/barabanchik"><i class="fa fa-fw fa-codepen"></i><img src="http://a11.it-elit.pro/codepen.png"title="pens"height="50"width="50"></a></li>
<li><a class="button social" href="https://www.youtube.com/channel/UCAZrF1-IeBV8YYm2hD2JcxQ"><i class="fa fa-fw fa-youtube"><img src="http://a11.it-elit.pro/youtube.png"title="chanel"height="50"width="50"></i></a></li>
</ul>
</div>
</div>
<div id="footer-below">Serhii ©
<script>document.write(new Date().getFullYear())</script>. All Rights Reversed
</div>
</footer>
Raw
my-landing-page.markdown
Raw
script.js
$(window).on('resize', function() {
'use strict';
var element = document.querySelector('#banner'),
elHeight = 0,
elTop = 0,
dHeight = 0,
wHeight = 0,
wScrollCurrent = 0,
wScrollBefore = 0,
wScrollDiff = 0;
window.addEventListener('scroll', function () {
// Hide the displayed menu. If you want to scroll, you're obviously not interested in the options.
$('.navbar-collapse').collapse('hide');
$('.navbar-toggle').addClass('collapsed').blur();
if($(window).width() <= 768) {
elHeight = element.offsetHeight;
dHeight = document.body.offsetHeight;
wHeight = window.innerHeight;
wScrollCurrent = window.pageYOffset;
wScrollDiff = wScrollBefore - wScrollCurrent;
elTop = parseInt(window.getComputedStyle(element).getPropertyValue('top')) + wScrollDiff;
// scrolled to the very top; element sticks to the top
if(wScrollCurrent <= 0) {
element.style.top = '0px';
} // scrolled up; element slides in
else if(wScrollDiff > 0) {
element.style.top = (elTop > 0? 0 : elTop) + 'px';
} // scrolled down
else if(wScrollDiff < 0) {
// scrolled to the very bottom; element slides in
if(wScrollCurrent + wHeight >= dHeight - elHeight) {
element.style.top = ( ( elTop = wScrollCurrent + wHeight - dHeight ) < 0 ? elTop : 0 ) + 'px';
} // scrolled down; element slides out
else { element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + 'px'; }
}
wScrollBefore = wScrollCurrent;
} //
else element.style.top = '0px';
});
}).resize();
// Floating label headings for the contact form
$(function() {$("body")
.on("input propertychange", ".form-item",function(e) {
$(this).toggleClass("form-item-filled",!! $(e.target).val());})
.on("focus", ".form-item",function() {
$(this).addClass("form-item-focused");})
.on("blur", ".form-item",function() {
$(this).removeClass("form-item-focused");});
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({target: '.navbar-fixed-top'})
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide');});
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {$('body').on('click', 'a.scrollable', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top},1500,'easeInOutExpo');
event.preventDefault();
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Raw
style.css
body{
margin:0;
padding:0;
color:#666;
background:#888;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:20px;
}
h2,h3{
color:#888;
font-weight:bold;
text-align:center;
text-transform:uppercase;
}
a{
color:#722872;
}
a:hover,a:focus{color:#592059;
}
#banner .container,
main header,
#portfolio .grid,
#contact>div,
footer #footer-above{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-ms-flex-pack:distribute;
justify-content:space-around;
-webkit-box-align:start;
-ms-flex-align:start;
align-items:flex-start;
margin:0 auto;
}
#banner{
background-color:#722872 !important;
height:80px;
box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.2);
border-color:#592059;
}
#banner .container{width:95%;max-width:1024px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
}
#banner .container::before, #banner .container::after{display:none
}
#banner img{height:50px;margin:15px 0;
}
nav{
font-size:13px;
background:#722872;
-webkit-transition:all .3s;
transition:all .3s;
}
@media(max-width:768px){
nav{padding:5px;text-align:center;margin:0 auto;width:120%;
}
nav .active a{color:#722872;background:#bbb;box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
}
.nav>li{height:100%;text-transform:uppercase;font-weight:bold;letter-spacing:2px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
}
.nav>li a{color:#ffffff;padding:10px 20px;
}
.nav>li a:hover{color:#722872;background:#bbb;box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
.navbar-toggle{margin-right:0;
}
#top{
height:80px;
display:block;
}
main >*:not(.scroll-top){max-width:1024px;margin:0 auto;box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.2);
}
main header{background:#aaa;color:#fff;text-align:right;padding:70px 10% 50px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-ms-flex-line-pack:distribute;align-content:space-around;
}
@media(min-width:1023px){
main header{padding:50px 30px;
}
}
main header img{border-radius:50%;margin:30px 0 10px;max-width:80%;height:auto;width:250px;
}
main header .intro-text{max-width:675px;text-align:center;margin-bottom:30px;
}
@media(min-width:1023px){
main header .intro-text{text-align:right;width:610px;
}
}
main header .intro-text .skills{font-size:1.15em;
}
main section{background:#eee;padding:40px 0;
}
main section#contact>div{margin:0px auto;
}
main section#contact>div>div{width:80%;
}
main section#contact>div>div p{margin:60px auto 0;max-width:700px;
}
@media(min-width:1023px){
main section#contact>div>div{max-width:38%;
}
main section#contact>div>div p{margin-top:35px;
}
main section#contact>div>div p:last-child{margin-top:270px;
}
}
#portfolio .grid{padding:0;max-width:90%;list-style:none;margin-top:20px;
}
#portfolio .grid li{margin:20px;max-width:600px;
}
@media(min-width:1023px){
#portfolio .grid li{max-width:420px;
}
}
#portfolio img{max-width:100%;height:auto;display:block;
}
form{
width:80%;
}
@media(min-width:1023px){
form{width:40%;margin-left:20px;
}
}
form .row:first-child .form-item{border-top:1px solid #fff;
}
.form-item{position:relative;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #bbb;
}
.form-item input, .form-item textarea{z-index:1;position:relative;padding-right:0;padding-left:0;border:0;border-radius:0;font-size:1.5em;background:0 0;box-shadow:none!important;resize:none;width:100%;
}
.form-item input:focus, .form-item textarea:focus{outline:0
}
.form-item label{display:block;z-index:0;position:relative;top:2em;margin:0;font-size:.85em;line-height:1.764705882em;vertical-align:middle;vertical-align:baseline;opacity:0;-webkit-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease;
}
.form-item-filled label{top:0;opacity:1;color:#aaa;
}
.form-item-focused label{color:#722872;
}
footer{
color:#fff;
background-color:#aaa;
text-align:center;
box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.2);
}
footer h3{margin-bottom:30px;color:#fff;
}
#footer-above{padding-top:50px;width:80%;
}
#footer-above div{margin-bottom:50px;width:250px;
}
#footer-above ul{padding:0;
}
#footer-above li{display:inline;
}
#footer-below{box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.2);padding:25px 0;background-color:#722872;text-align:center;
}
.button{
color:#fff;
border:solid 2px #fff;
border-radius:50%;
display:inline-block;
width:50px;
height:50px;
text-align:center;
font-size:20px;
line-height:48px;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
.button:hover{border:solid 2px #fff;color:#722872;background:#fff;
}
.scroll-top{
z-index:1049;
position:fixed;
visibility:visible;
bottom:2%;right:2%;
}
.scroll-top a{background:#722872;
}
.scroll-top a:hover, .scroll-top a:focus{color:#722872;background-color:#bbb;border-color:#722872;
}
@media(min-width:768px){
.scroll-top a{visibility:hidden;
}
}
hr.star-bright, hr.star-dark{margin:40px auto 30px;padding:0;max-width:512px;border:0;border-top:solid 5px;text-align:center;
}
@media(min-width:1023px){
header hr.star-bright, header hr.star-dark{margin-right:0;text-align:right;
}
header hr.star-bright:after, header hr.star-dark:after{right:-10px;
}
}
hr.star-bright:after, hr.star-dark:after{content:'\f121';font-family:FontAwesome;display:inline-block;position:relative;top:-.8em;padding:0 .25em;font-size:2em;
}
hr.star-bright{border-color:#fff;
}
hr.star-bright:after{color:#fff;background-color:#aaa;
}
hr.star-dark{border-color:#888;
}
hr.star-dark:after{color:#888;background-color:#eee;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment