Skip to content

Instantly share code, notes, and snippets.

@anemos474

anemos474/errors.js

Last active October 9, 2017 12:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anemos474/c8d82e2e186f7ca8097963b0813fe7c4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anemos474/c8d82e2e186f7ca8097963b0813fe7c4 to your computer and use it in GitHub Desktop.
Download ZIP
eclipse
Raw
errors.js
window.onerror = function(text, file, line){
alert('An error occured in file ' + file
+ ' at line ' + line
+ ':\n'
+ text
);
}
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset='utf-8' >
<title>Eclipse</title>
<link rel='stylesheet' type='text/css' href='css/styles.css' />
<meta
name="viewport"
content="width=device-width, initial-scale=1" />
</head>
<body>
<div class='container'>
<!------------------------------- HERO ------------------------------->
<div class='conteiner__hero'>
<img class='slanted__image' src='images/slanted.png'>
<div class='hero__text'>
<h1 class='hero__title'>Amazing Dude.
<br>Amazing Life.
</h1>
<div class='hero__content'>Welcome to the personal site of <b>John Doe.</b>
<br>A professional skier and a musician.
</div>
</div>
</div>
<!------------------------------- HEADER ------------------------------->
<div class='conteiner__header'>
<div class='header'>
<div class='header__logo'>
<a class='logo'>
<img class='logo__image' src='images/container.png'>
</a>
</div>
<div class='header__menu' id='menu1'>
<div class='hide__menu'>
<ul class='menu' >
<li class='menu__items'><a class='menu__item' href='#'>HERO</a></li>
<li class='menu__items'><a class='menu__item' href='#'>ABOUT</a></li>
<li class='menu__items'><a class='menu__item' href='#'>GALLERY</a></li>
<li class='menu__items'><a class='menu__item' href='#'>MUSIC</a></li>
<li class='menu__items'><a class='menu__item' href='#'>CONTACT</a></li>
</ul>
</div>
<div class='menu__button'>
<div class='menu__icon'>&#9776;</div>
<div class='menu__title'> MENU</div>
</div>
<div class='close__button'>
<img class='close__icon' src='images/close_icon.png'>
</div>
</div>
</div>
</div>
<!------------------------------- ABOUT ------------------------------->
<div class='conteiner__about'>
<div class='about__colum about_left'>
<img class='colum__photo' src='images/photo.png'>
</div>
<div class='about__colum about_right'>
<div class='colum__text'>
<div class='about__title'>SED FAUCIBUS QUIS
</div>
<div class='about_content'>
<br>Fusce bibendum luctus massa,
<br>ut tincidunt lectus tincidunt in.
<br>Nulla tristique ipsum vitae lacus
<br>ullamcorper, at dictum nunc
<br>scelerisque.
</div>
</div>
</div>
</div>
<!------------------------------- GALLERY ------------------------------->
<div class='conteiner__gallery'>
<div class='gallery__thumbnail' id='gallery1'>
<div class='thumbnail'>
<img class='thumbnail__image' src='images/thumbnail_1.png'>
<img class='thumbnail__image' src='images/thumbnail_2.png'>
<img class='thumbnail__image' src='images/thumbnail_3.png'>
<img class='thumbnail__image' src='images/thumbnail_4.png'>
<div class='gallery__social'>
<img class='thumbnail__image image_social' src='images/social_bak.png'>
<div class='social__content'>
<div class='social__title'>
INSTAGRAM
</div>
<div class='social__text'>
Etiam lacus dolor, tincidunt vitae
<br>nisi in, vulputate placerat odio.
<br>Pellentesque iaculis.
</div>
<form class='button__social' action='#'>
<button class='social-button__text' type='submit'>
VIEW ON INSTAGRAM
</button>
</form>
</div>
</div>
<img class='thumbnail__image image_last' src='images/thumbnail_5.png'>
<img class='thumbnail__image gallery_blankspace' src='images/blankspace.png'>
</div>
</div>
</div>
<!------------------------------- MUSIC ------------------------------->
<div class='conteiner__music'>
<div class='music__blankspace'>
<img class='blankspace__music-image' src='images/blankspice_music.png'>
</div>
<div class='music__video'>
<img class='video-bak' src='images/video-bak.png'>
<div class='video__wraper'>
<div class='video__title-first'>
SELF-EFFACING RAGE
</div>
<div class='video__title-after'>
FT. FASCINATING COLLISION
</div>
<div class='video__content'>
Director: James G. Rohrer
<br>Production Company: Sycamore
<br>Producer: Laura S. Carlton
<br>Executive Producer: Jack M. Heckart
</div>
<form class='button__video' action='#'>
<button class='video-button__text' type='submit'>CLICK TO PLAY &#10148;
</button>
</form>
</div>
</div>
<div class='music_boxes'>
<div class='music__spotify'>
<img class='spotify-bak' src='images/spotify.png'>
<div class='spotify__content'>
<div class='spotify__title'>
SPOTIFY
</div>
<div class='spotify__text'>
Follow me, stream and add
<br>my songs to your Spotify playlist.
</div>
<form class='button__spotify' action='#'>
<button class='spotify-button__text' type='submit'>FOLLOW ON SPOTIFY
</button>
</form>
</div>
</div>
<div class='music__itunse'>
<img class='itunse-bak' src='images/itunes.png'>
<div class='itunes__content'>
<div class='itunse__title'>
ITUNES
</div>
<div class='itunse__text'>
Buy and download my songs
<br>from iTunes.
</div>
<form class='button__itunse' action='#'>
<button class='itunse-button__text' type='submit'>BUY FROM ITUNES
</button>
</form>
</div>
</div>
</div>
</div>
<!------------------------------- FOOTER ------------------------------->
<div class='conteiner__footer'>
<div class='footer__colums'>
<div class='footer-colum footer_left'>
<div class='footer-colum__content'>
<div class='footer-content__title'>
<b>AMAZING DUDE.
<br>AMAZING LIFE.
</b>
</div>
<div class='footer-content__text'>
Mauris ornare lobortis arcu, at
<br>sodale dolor finibus nec. In
<br>convallis risus ligula, bibendum
<br>sagittis ante cursus vitae. Donec
<br>ornare, dui nec sagittis imperdiet,
<br>nunc eros dignissim augue, ut
<br>aliquam nibh felis sit amet leo.
<br>Vivamus eu tincidunt tellus.
<br>Vestibulum lectus. quis condi-
<br>mentum lectus, nec aliquet Duis
<br>sollicitudin facili sis dui ac
<br>aliquet. Phasellus tempor sollici-
<br>tudin consequat vel arcu quis dictum.
<br>Vestibulum viverra commodo nunc
<br>eu pellentesque. Phasel lus insce-
<br>lerisque elit, eu ultricies mauris.
<div class='copyright__text'>&copy;2015. all rights reserved.
</div>
</div>
</div>
</div>
<div class='footer-colum footer_center'>
<div class='footer-colum__contact'>
<div class='footer-contact__title'>
<b>CONTACT ME</b>
</div>
<div class='footer-contact__text'>
1242 Crestview Terrace
<br>Artesia Wells, TX 78001
<p>Phone: 830-676-7974
<br>Email: [email protected]
</p>
</div>
</div>
<div class='footer-colum__social'>
<div class='footter-social__title'>
FOLLOW ME ON
</div>
<div class='footter-social__menu'>
<ul class='footter-social__items'>
<li class='foter-social__item fb'>
<a class='foter-social__link' href='#'>FACEBOOK</a>
</li>
<li class='foter-social__item tw'>
<a class='foter-social__link' href='#'>TWITTER</a>
</li>
<li class='foter-social__item ig'>
<a class='foter-social__link' href='#'>INSTAGRAM</a>
</li>
<li class='foter-social__item sc'>
<a class='foter-social__link' href='#'>SPOTIFY</a>
</li>
</ul>
</div>
</div>
</div>
<div class='footer-colum footer_right'>
<div class='footer-colum__subscribe'>
<div class='subscribe__content'>
<div class='subscribe__content-title'>
SUBSCRIBE
</div>
<div class='subscribe__content-text'>
Duis sollicitudin facilisis dui ac aliquet. Phasellus tempor sollicitudin
<br>augue, id hendrerit enim gravida non. Integer consequat vel arcu quis
<br>dictum.Vestibulum viverra commodo nunc eu pellentesque.
</div>
<form class='subscribe__form' action='?' method='POST'>
<input type='text' placeholder='ENTER YOUR EMAIL ADDRESS' class='mail__field' />
<input type='submit' name='' value='&#9658;' class='send__button' />
</form>
</div>
</div>
<div class='footer-colum__sponsor'>
<div class='footer__sponsor'>
<div class='footer-sponsor__title'>
SPONSOR
</div>
<ul class='footer__sponsor'>
<li class='sponsor__items'>
<a class='sponsor__link' src='#'><img class='sponsor__image' src='images/sponsor_logo.png'>
</a>
</li>
<li class='sponsor__items'>
<a class='sponsor__link' src='#'><img class='sponsor__image' src='images/sponsor_logo.png'>
</a>
</li>
<li class='sponsor__items'>
<a class='sponsor__link' src='#'><img class='sponsor__image' src='images/sponsor_logo.png'>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type='text/javascript' src='scripts/jquery-3.2.1.min.js'></script>
<script type='text/javascript' src='scripts/error.js'></script>
<script type='text/javascript' src='scripts/menu.js'></script>
<script>
var m = new menu('#menu1');
</script>
</html>
Raw
menu.js
function menu (sSelector){
var m = this;
// 1. Data ====================
m.menu = $(sSelector);
m.subMenu = m.menu.find('.hide__menu');
m.menuIcon = m.menu.find('.menu__button');
m.menuCloseIcon = m.menu.find('.close__button');
// 2. Logic ===================
m.showMenu = function (){
m.subMenu.slideToggle('menu2');
m.menuIcon.css({'display' : 'none'});
m.menuCloseIcon.css({'display' : 'block'});
}
m.hideMenu = function (){
m.subMenu.slideToggle('menu2');
m.menuIcon.css({'display' : 'block'});
m.menuCloseIcon.css({'display' : 'none'});
}
// 3. Events ==================
m.menu.find(m.menuIcon) .click(m.showMenu);
m.menu.find(m.menuCloseIcon).click(m.hideMenu);
}
Raw
styles.css
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');
body {
margin: 0;
padding: 0;
font-family: 'Fira Sans', sans-serif;
}
.container{
max-width: 1400px;
margin: 0 auto;
width: 1349px;
}
.conteiner__hero{
width: 100%;
background: url(../images/hero.png) no-repeat;
height: 800px;
background-size: cover;
position: relative;
}
.slanted__image{
height: 100%;
position: absolute;
right: 0px;
}
.hero__text{
padding-left: 200px;
padding-top: 350px;
}
.hero__title{
margin: 0;
font-size: 54px;
}
.hero__content{}
.hero__introduce{
font-size: 20px;
}
.conteiner__header{
position: absolute;
width: 1000px;
top: 50px;
}
.header{
position: absolute;
width: 1000px;
}
.header__logo{
padding: 100px 0 0 200px;
}
.logo__image{
}
.header__menu{}
.menu{
margin: 0;
padding: 0 0 5%;
}
.menu2{
display: flex;
}
.hide__menu{
background: rgba(0, 0, 0, 0.9);
position: fixed;
top: 0px;
width: 100%;
max-width: 1400px;
height: 100%;
z-index: 2;
display: none;
text-align: center;
padding: 5% 0;
}
.menu__items{
display: block;
font-size: 2.5em;
padding: 5px;
}
.menu__item{
text-decoration: none;
color: white;
line-height: 2em;
border-bottom: solid 1px;
}
.menu__item:hover{
color: yellow;
}
.menu__button{
height: 50px;
width: 50px;
font-size: 0;
text-align: center;
cursor: pointer;
position: absolute;
left: 1000px;
top: 100px;
z-index: 3;
}
.close__button{
height: 50px;
width: 50px;
font-size: 0;
position: fixed;
left: 1000px;
top: 100px;
z-index: 3;
display: none;
}
.close__icon{
height: 50px;
width: 50px;
cursor: pointer;
}
.menu__icon{
font-size: 26px;
/* display: none; */
}
.menu__title{
font-size: 14px;
/* display: none; */
}
.conteiner__about{
display: flex;
flex-wrap: wrap;
}
.about__colum {}
.about_left{
max-width: 675px;
max-height: 500px;
display: inline-block;
}
.about__colum {}
.about_right{
max-width: 674px;
max-height: 500px;
display: inline-block;
}
.colum__photo{
width: 100%;
height: 100%;
}
.colum__text{
width: 100%;
margin: 0 auto;
padding: 120px 0 0 50px;
}
.about__title{
color: #666666;
font-size: 18px;
}
.about_content{
color: #666666;
font-size: 24px;
}
.conteiner__gallery{}
.gallery__thumbnail{
max-width: 1400px;
}
.thumbnail{
display: flex;
height: 100%;
max-width: 1400px;
flex-wrap: wrap;
background: #3f729b;
flex-direction: row;
justify-content: center;
}
.thumbnail__image{
display: flex;
max-width: 337px;
width: 100%;
}
.image_last{}
.image_social{
max-width: 674px;
}
.social__content{
margin: 0 auto;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.gallery_blankspace{}
.gallery__blankspace{}
.gallery__social{
position: relative;
}
.social__title{
color: #f9f9f9;
padding: 0 0 37px 0;
}
.social__text{
color: #f9f9f9;
font-size: 21px;
}
.button__social{
padding: 30px 0;
}
.social-button__text{
border-radius: 9px;
border: solid 1px #f9f9f9;
color: #f9f9f9;
background: #3f729b;
letter-spacing: 2px;
cursor: pointer;
}
.conteiner__music{
height: 100%;
background: url(../images/music_image.png) no-repeat;
font-size: 0;
position: relative;
}
.blankspace__music-image{
max-width: 337px;
max-height: 800px;
}
.music__blankspace{}
.music__video{
display: flex;
position: absolute;
top: 0;
left: 337px;
}
.video-bak{
position: relative;
max-width: 337px;
}
.video__wraper{
margin: 0 auto;
left: 25%;
top: 25%;
position: absolute;
transform: translate(-25%, -25%);
}
.video__title-first{
font-size: 21px;
color: #2ebd59;
padding: 130px 0px 5px 50px;
}
.video__title-after{
font-size: 16px;
color: #2ebd59;
padding: 0 0 5px 50px;
}
.video__content{
font-size: 12px;
color: #f9f9f9;
padding: 20px 0 0px 50px;
}
.button__video{
padding: 20px 0 0 50px;
}
.video-button__text{
border: solid 1px #2ebd59;
border-radius: 9px;
letter-spacing: 2px;
background: #212227;
color: #2ebd59;
cursor: pointer;
font-size: 12px;
}
.music_boxes{
display: flex;
font-size: 0;
position: relative;
}
.music__spotify{
display: inline-flex;
}
.spotify-bak{
display: inline-flex;
max-width: 674px;
}
.spotify__content{
margin: 0 auto;
left: 25%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.spotify__title{
color: #f9f9f9;
padding: 0 0 37px 0;
font-size: 24px;
}
.spotify__text{
color: #f9f9f9;
font-size: 21px;
}
.button__spotify{
padding: 30px 0;
}
.spotify-button__text{
border-radius: 9px;
border: solid 1px #f9f9f9;
color: #f9f9f9;
background: #2ebd59;
letter-spacing: 2px;
cursor: pointer;
}
.music__itunse{
display: inline-flex;
}
.itunse-bak{
display: inline-flex;
max-width: 675px;
}
.itunes__content{
margin: 0 auto;
left: 75%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.itunse__title{
color: #f9f9f9;
padding: 0 0 37px 0;
font-size: 24px;
}
.itunse__text{
color: #f9f9f9;
font-size: 21px;
}
.button__itunse{
padding: 30px 0 0 0;
}
.itunse-button__text{
border-radius: 9px;
border: solid 1px #f9f9f9;
color: #f9f9f9;
background: #282b2f;
letter-spacing: 2px;
cursor: pointer;
}
.conteiner__footer{
background: #212227;
}
.footer__colums{
display: flex;
}
.footer-colum {}
.footer_left{
max-width: 337px;
padding: 100px 0 0 200px;
display: inline-flex;
}
.footer-colum__content{}
.footer-content__title{
color: white;
padding: 0 0 26px 0;
}
.footer-content__text{
font-size: 14px;
color: #919191;
}
.copyright__text{
padding: 26px 0;
}
.footer-colum {}
.footer_center{
display: block;
max-width: 337px;
padding: 100px 0 0 50px;
width: 100%;
}
.footer-colum__social{}
.footter-social__title{
color: white;
padding: 50px 0 26px 0;
}
.footter-social__items {
font-size: 18px;
color: #919191;
padding: 0px 0 0 20px;
cursor: pointer;
}
.foter-social__item{}
.fb{
list-style-image: url(../images/fb.png);
}
.tw{
list-style-image: url(../images/tw.png);
}
.ig{
list-style-image: url(../images/ig.png);
}
.sc{
list-style-image: url(../images/sc.png);
}
.foter-social__link{
text-decoration: none;
color: #919191;
}
.footer-colum__contact{}
.footer-contact__title{
color: white;
padding: 0 0 44px 0;
}
.footer-contact__text{
font-size: 14px;
color: #919191;
}
.footer-colum {}
.footer_right{
padding: 100px 0;
max-width: 674px;
}
.footer-colum__subscribe{}
.subscribe__form{
font-size: 0;
position: relative;
}
.subscribe__content{}
.subscribe__content-title{
color: white;
padding: 0 0 26px 0;
}
.subscribe__content-text
{
font-size: 14px;
color: #919191;
padding: 20px 0;
}
.mail__field{
color: #555252;
width: 350px;
height: 35px;
background: #909193;
border: #909193;
padding: 10px 40px 10px 10px;
box-sizing: border-box;
outline: none;
}
.send__button{
width: 40px;
height: 35px;
cursor: pointer;
background: #909193;
position: absolute;
color: #555252;
font-family: "Oswald";
font-weight: 300;
font-size: 16px;
outline: none;
border: none;
}
.footer-colum__sponsor{}
.footer-sponsor__title{
color: white;
padding: 68px 0 0 0;
}
.footer__sponsor{
padding: 0;
}
.sponsor__items{
display: inline-block;
border-bottom: solid 1px white;
border-top: solid 1px white;
padding: 10px;
margin: 0 15px 0 0;
cursor: pointer;
}
.sponsor__link{
text-decoration: none;
}
.sponsor__image{}
@media screen and (min-device-width: 320px)
and (max-device-width: 480px)
{
.menu__item {
font-size: 76px;
}
.menu {
height: 100%;
width: 100%;
padding: 15% 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment