/*CSS Design Rifat Seferi */
/*TBC =to be complete */
/*TBA= TO ACTIVETED*/
/*main-page = All the page body class */
/*main-paragraph = the main paragraph on the page usally the most important*/
/*GPT=good position top*/
/*NecI=Necessarie insieme o combinazione insime per funzionare */
/*
_____ _____ ______
/\ \ /\ \ /\ \
/::\ \ /::\ \ /::\ \
/::::\ \ \:::\ \ /::::\ \
/::::::\ \ \:::\ \ /::::::\ \
/:::/\:::\ \ \:::\ \ /:::/\:::\ \
/:::/__\:::\ \ \:::\ \ /:::/ \:::\ \
/::::\ \:::\ \ /::::\ \ /:::/ \:::\ \
/::::::\ \:::\ \ ____ /::::::\ \ /:::/ / \:::\ \
/:::/\:::\ \:::\ ___\ /\ \ /:::/\:::\ \ /:::/ / \:::\ ____\
/:::/ \:::\ \:::| |/::\ \/:::/ \:::\____\/:::/ / \:::| |
\::/ |::::\ /:::|____|\:::\ /:::/ \::/ /:::/ / /:::|____|
\/____|:::::\/:::/ / \:::\/:::/ / \/____/:::/____/ /:::/ /
|:::::::::/ / \::::::/ / \::\ \ /:::/ /
|::|\::::/ / \::::/____/ \::\ \ /:::/ /
|::| \::/____/ \:::\ \ \::\ \ /:::/ /
|::| | \:::\ \ \::\ /:::/ /
|::| | \:::\ \ \::\__/:::/ /
\::| | \:::\____\ \:::::::/ /
\:| | \::/ / \:::::/ /
\|___| \/____/ \:::/____/
/*Good to know se cambi da cursor:pointer /default non hai più un effect click on mobile */
/*---------------------MENU NAVIGATOR--------------------------------------*/
/*/*body header [nav #navigator (.navbar | navbar-default )]
[div .contaner-nav ]
[ #home-button .home-design] [a #MENU .Navigator-MenuButton'] After animazione [div .navbar-header] #navigator { /*As a child so to win concurenzial bahavior*/
}
header>#navigator:hover {
height:0vw;
}
/*------------------BLACK-LINEonMobile--------------------------------------*/
nav>.contaner-nav { /*As a child so to win concurenzial bahavior*/
font-size:0;
height:11.7vw;
background-color:black;
display:fixed;
overflow:visible;
width:100%;
z-index:10;/*Utile per diventare visibile above anche con problema di opacity*/
}
nav>.contaner-nav:hover {
}
/*-------------Contenitore pulsanti------*/
nav .navbar-header {/*la black line */
display:none;
margin-top:auto;/*ottimo Mobile sistemato
in percentuale header and footer non ho più bisogno di questo
*/
position:relative;
left:12vw;/*NecI navbar-header*/
}
nav .navbar-header:active {
}
/*---------------------Buttons MENU-------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
nav .navbar-header a {
position:relative;
display:block;
opacity:1;
width:50%;
height:11.8vw;/*NecI home-design*/
border:solid .1vw black;
padding-top:2vw;
font-size:5vw;
margin-top:auto;
margin-bottom:auto;
margin-left:0vw; /*NecI navbar*/
background-color:#161A28;
text-align:center;
}
nav .navbar-header a:hover,nav .navbar-header a:active {
/*stile della white line sta dentro alla :class='link-to-button-as-input';*/
opacity:1;
background-color:black; /*to cancel the link-to-button-as-input color on active---*/
font-size:5vw;
/*--Animation --*/
position: relative;
font-weight:lighter;
padding-top:3vw;
color:#161A28;
box-shadow: none;
border:solid .1vw #161A28;
border-radius:0vw; /*to cancel the radius */
cursor: none;
-webkit-animation: navigatoButton 0s cubic-bezier(.02,1.19,.86,-0.37) infinite; /* Safari 4.0 - 8.0 */
animation: navigatoButton 0s; /**/
}
/*---------------------Buttons MENU-------------------------*/
/*----------------------------------------------------------*/
.home-design {
margin-top:auto;
width:12vw;
height:11.8vw;/*NecI navbar*/
background-color:#161A28;/*Visible come buttone */
display:block; /*So can in the same line with MENU */
padding:1vw;
transition:all .1s;
-webkit-transition:all .1s;
margin-left:0vw;
border-top:solid .1vw black;
border-bottom:solid .1vw black;
}
.home-design:active {
background:tomato;
}
#home-button:hover {
/*--Animation --*/
}
/*----------------black Lines inside home button--------------------------------------*/
.home-design div {
position:relative;
margin-top:2vw;
margin-left:1.1vw;
padding:0vw;
background-color:white;
width:80%;
height:5%;
box-shadow: 0vw 0vw 1vw 0.1vw #a57;
transition:all 1s;
-webkit-transition:all 1s;
}
.home-design div:hover {
box-shadow: 0vw 0vw 1vw 0.1vw #fff;
}
.home-design div:nth-child(odd):hover {
/*--Animation --*/
position:relative;
-webkit-animation: homeButtonOrario 1s cubic-bezier(.02,1.19,.86,-0.37) 2; /* Safari 4.0 - 8.0 */
animation: homeButtonOrario 1s cubic-bezier(.02,1.19,.86,-0.37) 2;
box-shadow:solid red 20vw;
background: radial-gradient(circle, #161A28,transparent, black); /* Standard syntax (must be last) */
}
.home-design div:nth-child(even):hover {
/*--Animation --*/
position:relative;
-webkit-animation: homeButtonAntOrario 1s cubic-bezier(.02,1.19,.86,-0.37) 2; /* Safari 4.0 - 8.0 */
animation: homeButtonAntOrario 1s cubic-bezier(.02,1.19,.86,-0.37) 2;
box-shadow:solid red 20vw;
background: radial-gradient(circle, #161A28,transparent, black); /* Standard syntax (must be last) */
}
/*----------------black Lines inside home button--------------------------------------*/
#div-number {
margin-left:5vw;
margin-top:-1vw;
display:block;
padding:2vw;
position:fixed;
background-color:white;
height:8vw;
width:100%
}
#div-number>a {
color:#161A28 ;
text-decoration:none;
font-size:5vw;
}
@-webkit-keyframes homeButtonOrario {
from {border:rgba(0,255,0,.4);}
to {border:rgba(0,255,0,.4);}
}
@keyframes homeButtonOrario {
from {transform: rotate(0deg);}
to {transform: rotate(1200deg);} /*CTRL the velocity*/
/*CTRL the velocity*/
from{background: radial-gradient(circle,#161A28,transparent, black);}
to{background: radial-gradient(circle, #161A28,transparent, white);}
from {border-left:solid 0.25vw rgba(0,180,180, .8);}
to {border-left:solid 0.25vw rgba(0, 100, 0,.4);}
from {border-top:solid 0.25vw rgba(0,180,0,.5);}
to {border-top:solid 0.25vw rgba(0,100,0,.6);}
from {border-right:solid 0.25vw rgba(0,180, 0,.8);}
to {border-right:solid 0.25vw rgba(0,100,0,.6);}
from {border-bottom:solid 0.25vw rgba(0,180,0,.4) ;}
to {border-bottom:solid 0.25vw rgba(0,100, 0,.5) ;}
}
@-webkit-keyframes homeButtonAntOrario {
from {border:rgba(0,255,0,.4);}
to {border:rgba(0,255,0,.4);}
}
@keyframes homeButtonAntOrario {
from {transform: rotate(0deg);}
to {transform: rotate(-1200deg);} /*CTRL the velocity*/
/*CTRL the velocity*/
from{background: radial-gradient(circle,#161A28,transparent, black);}
to{background: radial-gradient(circle, #161A28,transparent, white);}
from {border-left:solid 0.25vw rgba(0,180, .8);}
to {border-left:solid 0.25vw rgba(0, 100, 0,.4);}
from {border-top:solid 0.25vw rgba(0,180,0,.5);}
to {border-top:solid 0.25vw rgba(0,100,0,.6);}
from {border-right:solid 0.25vw rgba(0,180, 0,.8);}
to {border-right:solid 0.25vw rgba(0,100,0,.6);}
from {border-bottom:solid 0.25vw rgba(0,180,0,.4) ;}
to {border-bottom:solid 0.25vw rgba(0,100, 0,.5) ;}
}
/*slide effect buttons*/
@-webkit-keyframes homeButtonSlides {
from {border:rgba(0,255,0,.4);}
to {border:rgba(0,255,0,.4);}
}
@keyframes homeButtonSlides {
/*CTRL the velocity*/
from{width:.2%;}
from{opacity:.5;}
to{width:100%;}
to{opacity:1;}
}
/*FIM*/
body>div {
margin-left:5vw;
}
body>section {
margin-left:5vw;
}
/*--Animation Funciton &-Effected special--------*/
header {
}
header:hover {
}
/*-----------------Input the symbol asterix(*) ------------------------*/
#asterix {
color: red;
}
/*-----------------Input the symbol asterix(*) x ----------------------*/
.main-page {
background-image: url("../img/BackgrundPaternInverted.png");
margin:0vw;
background-color:none;
color: red ;
background-size:.5vw;
width:100%;
opacity: 1;
font-size:2vw;
font-family: 'Josefin Sans', sans-serif;
text-shadow: 0vw .07vw 0vw rgba(205,250,250,1);
/*display:inline;/*will put the Navigator to all the width;*/
}
.main-page input,.main-page textarea,.main-page button {
font-family: 'Josefin Sans', sans-serif;
}
.main-page-2 {
margin-left:0vw;
background-size:0.6vw;
opacity: 1;
font-size:1.75vw;
font-family: 'Josefin Sans', sans-serif;
/*display:inline;/*will put the Navigator to all the width;*/
}
.logo {
position:absolute;
background-color:transparent;
background-position:center;
display:block;
padding-top:1vw;
padding-left:10vw;
padding-right:10vw;
border-left:solid transparent 20vw;
transition:all 4s;
-webkit-transition:all 4s;
}
.logo:hover {
padding-top:0vw;
}
/*---------------------MENU NAVIGATOR--------------------------------------*/
/*/*body header [nav #navigator (.navbar | navbar-default )]
[div .contaner-nav ]
[ #home-button .home-design] [a #MENU .Navigator-MenuButton'] After animazione [div .navbar-header] ------------------*/
/*---------------------Ottimizzato fino a 4 pulsanti non di più------------------*/
.navbar-header a {
box-shadow:none;
background-color:;
display:inline;
margin:2vw;
font-size:1.5vw;/*is cancel from .contaner-nav:hover, */
padding-left:auto;/*will center*/
padding-right:auto;
box-shadow:0px;
border:;
text-shadow: .2vw .5vw 0.1vw rgba(0,0,0,1);
opacity:0.4;
transition: all .4s;
-webkit-transition: all .4s;
}
.navbar-header a:hover,.navbar-header a:active {
opacity:1;
background-color:; /*to cancel the link-to-button-as-input color on active---*/
font-size:2vw;
/*--Animation --*/
position: relative;
-webkit-animation: navigatoButton 0s cubic-bezier(.02,1.19,.86,-0.37) infinite; /* Safari 4.0 - 8.0 */
animation: navigatoButton 0s cubic-bezier(..02,1.19,.86,-0.37) infinite;
font-weight:lighter;
padding:2vw;
}
/*--Animation Funciton &-Effected special--------*/
/*--Animation Funciton --*/
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mypersonal {
from {left: 1500px;}
from {opacity:0;}
to {opacity: 1;}
from {opacity:0.3;}
to {opacity:0;}
to {left: 0px;}
}
@keyframes navigatoButton {
from {padding:1vw;}
to {padding:2.5vw;} /*CTRL the velocity*/
from {margin:7vw;}
to {margin:2vw;} /*CTRL the velocity*/
from {opacity:1;}
to {opacity:.7;} /*CTRL the velocity*/
/*CTRL the velocity*/
/*-----------TBA--------*/
}
.main-paragraph:hover {
}
.contaner-level-zero {
}
.contaner-level-zero:hover {
}
.contaner-list {
}
/*-----------------Personal data ------------------------------*/
/*id=blog..... (div contaner-level-zero)
(div contaner-list )
(ul contaner-list )
(li (span personal-info))
----------------------------------------------------------------*/
.list-Personal-info {
/*background-color: pink;*/
}
.list-Personal-info:hover {
}
.list-Personal-info>li {
}
.list-Personal-info>li:hover {
}
/*-----------------------------JumbotronMobile---------------------------*/
/*----Dipende sempre da che img si inserisce-----------------*/
/*----Jumbotron-----------------*/
/*Ho incrementato l'img cosi sembra più grande ma ho un down scale che permette una risoluzione più piccola cosi da
caricare prima su mobile o reti lente */
.jumbotronMob {
width:120%;/*Lo prende meglio*/
height:50%;
background-image:url("../img/Panoramic-View-Copenhagen-Enjoy2.jpg");
background-size:110%;
background-repeat:no-repeat;
position:absolute;
display:block;
left:-16vw;
top:-10vw;/*Dipende dal Imagine e quanti pulsanti ho nel menu*/
z-index:0;
transition: all .4s;
}
/*-----------------------------JumbotronMobileX---------------------------*/
.main-tittle {
margin-top:65vw;
background-color:;
}
/*-----------------INFO inserite dal admin----------------*/
.personl-info {
padding-top:5vw;
display:inline;
text-shadow: .1vw .1vw .1vw .1vw rgba(150, 150, 150,0.1);
margin:0vw;
border:;
text-decoration:none;
/*--Animation --*/
position:inherit;/*cosi si apre il menu a tendina con il planeta */
-webkit-animation: mypersonal 1s cubic-bezier(.02,1.19,.86,-0.37); /* Safari 4.0 - 8.0 */
animation: mypersonal 8s cubic-bezier(.02,1.19,.86,-0.37) infinite;
}
/*--Animation Funciton &-Effected special--------*/
/*--Animation Funciton --*/
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mypersonal {
from {left: 1500px;}
from {opacity:0;}
to {opacity: 1;}
from {opacity:0.3;}
to {opacity:0;}
to {left: 0px;}
}
@keyframes mypersonal {
from {font-size:5vw;}
from {opacity:0.8;}
to {opacity:0;}
to {font-size:5.12vw;}
/*-----------TBA--------*/
}
/*-----------------Personal data X ------------------------------*/
/*-----------------PersonalBLOG ------------------------------*/
/*------------------Atention ----------------------------------*/
/*------------add div ,pading , margin so will not vibrate during limit-hover*/
#blog-part1-firstPage {
width:80vw;
/*background-color:#161A28 ;/* Cosi evidenzi ogni volta */
padding:0vw;
display:block;
position:relative;/*funziona meglio */
margin-bottom:10vw;
margin-top:10vw;
height:33vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/
overflow:hidden;
transition: all .4s;
-webkit-transition: all .4s;
background-color:;
}
#blog-part1-firstPage:active,#blog-part1-firstPage:hover { /*hover click effect*/
/*background-color:red;*/
width:95vw;
height:100vw;
}
#blog-part1-firstPage p>text {
background-color:/*cyan;* Cosi evidenzi ogni volta */
padding:.5vw;
margin:.1vw;
}
#blog-part2-firstPage {
width:80vw;
/*background-color:#161A28 ;/* Cosi evidenzi ogni volta */
padding:0vw;
display:block;
position:relative;/*funziona meglio */
margin-bottom:10vw;
margin-top:10vw;
height:33vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/
overflow:hidden;
transition: all .4s;
-webkit-transition: all .4s;
background-color:;
}
#blog-part2-firstPage:active,#blog-part2-firstPage:hover { /*hover click effect*/
/*background-color:red;*/
width:95vw;
height:100vw;
}
#blog-part2-firstPage p>text {
background-color:/*cyan;* Cosi evidenzi ogni volta */
padding:.5vw;
margin:.1vw;
}
/*-----------------Input data for