Skip to content

Instantly share code, notes, and snippets.

@Alirezaaraby

Alirezaaraby/index.html

Created February 24, 2020 10:32
Show Gist options
  • Save Alirezaaraby/3e6848bfd3a5e4a408a79b4566c64944 to your computer and use it in GitHub Desktop.
Save Alirezaaraby/3e6848bfd3a5e4a408a79b4566c64944 to your computer and use it in GitHub Desktop.
Download ZIP
MMT <FOOTER>
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Mathmatycho Footer Responsive</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mathmatycho</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="logo"><b>math<span>ma</span>ty<span>c</span>ho</b></div>
</div>
<form style="top: 10px">
<input type="email" class="Neon" placeholder="mathmatycho@gmail.com" style="text-align:center">
<button id="Email" class="Send_Email">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" class="Send_Email_Icon">
<path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
</svg>
</button>
</form>
<!-- Socail Media Button -->
<div id="circ">
<ul>
<li class="animated zoomIn facebook" style="background:#3B5998;">
<div class="back"></div>
<div class="icon icon-color">
<a class="fa fa-facebook icon-color" href="https://facebook.com/mathmatycho"></a>
</div>
</li>
<li class="animated zoomIn delayone" style="background:#55ACEE;">
<div class="back"></div>
<div class="icon">
<a class="fa fa-twitter icon-color" href="https://twitter.com/Mathmatycho"></a>
</div>
</li>
<li class="animated zoomIn delaytwo instagram"style="background:#125688;">
<div class="back"></div>
<div class="icon icon-color">
<a class="fa fa-instagram icon-color" href="https://instagram.com/math.matycho"></a>
</div>
</li>
<li class="animated zoomIn delaythree youtube"style="background:#bb0000;">
<div class="back"></div>
<div class="icon icon-color">
<a class="fa fa-youtube icon-color" href="https://youtube.com/mathmatycho"></a>
</div>
</li>
<li class="animated zoomIn delayfour" style="background: #007bb5;">
<div class="back"></div>
<div class="icon icon-color">
<a class="fa fa-linkedin icon-color" href="https://linkedin.com/company/mathmatycho"></a>
</div>
</li>
</ul>
</div>
<!-- Copy all Rights -->
<div class="container_Copyallrights reverse absolute" style="text-align:center">
<div class="ball"><p class="copy_allrights">&copy<p></div>
<div class="ball"><p class="copy_allrights">2<p></div>
<div class="ball"><p class="copy_allrights">0<p></div>
<div class="ball"><p class="copy_allrights">2<p></div>
<div class="ball"><p class="copy_allrights">0<p></div>
<div class="ball_link"><a href="http://mathmatycho.com" class="link">Mathmatycho.com</a></div>
</div>
</body>
</html>
<!-- partial -->
</body>
</html>
Raw
style.css
@import url(//fonts.googleapis.com/css?family=Vibur); /* Copy Allright */
.ball {
width: 17px;
height: 17px;
margin: 10px auto;
border-radius: 80px;
margin-left:5px;
text-align: center;
vertical-align: middle;
}
.ball_link {
width: 140px;
height: 17px;
margin: 10px auto;
border-radius: 50px;
}
.ball:nth-child(1) {
background: #000000;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}
.ball:nth-child(2) {
background: #000000;
-webkit-animation: left 1.1s infinite ease-in-out;
-moz-animation: left 1.1s infinite ease-in-out;
animation: left 1.1s infinite ease-in-out;
}
.ball:nth-child(3) {
background: #000000;
-webkit-animation: right 1.05s infinite ease-in-out;
-moz-animation: right 1.05s infinite ease-in-out;
animation: right 1.05s infinite ease-in-out;
}
.ball:nth-child(4) {
background: #000000;
-webkit-animation: left 1.15s infinite ease-in-out;
-moz-animation: left 1.15s infinite ease-in-out;
animation: left 1.15s infinite ease-in-out;
}
.ball:nth-child(5) {
background: #000000;
-webkit-animation: right 1.1s infinite ease-in-out;
-moz-animatiocontainer_Copyallrightsn: right 1.1s infinite ease-in-out;
animation: right 1.1s infinite ease-in-out;
}
.ball_link:nth-child(6) {
background: #000000;
-webkit-animation: left 1.05s infinite ease-in-out;
-moz-animation: left 1.05s infinite ease-in-out;
animation: left 1.05s infinite ease-in-out;
}
.container_Copyallrights {
width: 300px;
height: 10px;
margin: auto;
color: #ffffff;
float: left;
bottom: 1px;
}
.copy_allrights{
color:white;
position:relative;
text-decoration: none !important;
margin: 0 auto;
}
.reverse{
display: flex;
bottom: 10%;
}
.link{
color:white;
position:relative;
text-decoration: none !important;
/*margin:2.5px;*/
left: 1px;
top: 0;
}
.link:hover{
color:#333;
}
@keyframes right {
0% {
transform: translatey(-3px);
}
50% {
transform: translatey(3px);
}
100% {
transform: translatey(-3px);
}
}
@keyframes left {
0% {
transform: translatey(3px);
}
50% {
transform: translatey(-3px);
}
100% {
transform: translatey(3px);
}
}
@media only screen and (max-width: 1200px) {
.container_Copyallrights {
float: left;
}
}
@media only screen and (max-width: 700px) {
.container_Copyallrights {
float: none;
}
/* body{
background-color: lightblue;
/* font-size:3vh; */
/* } */
}
@media only screen and (max-width: 446px) {
.container_Copyallrights {
float: none;
}
}
/* div.absolute { */
/* position: bottom; */
/* bottom: 10px; */
/* } */
/* Social Media Button */
/* @import url(https://fonts.googleapis.com/css?family=Damion); */
/* body { */
/* background: #333; */
/* overflow-x:visible; */
/* } */
/* .delayone {
-moz-animation-delay: .2s;
-webkit-animation-delay: .2s;
}
.delaytwo {
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
.delaythree {
-moz-animation-delay: .6s;
-webkit-animation-delay: .6s;
}
.delayfour {
-moz-animation-delay: .8s;
-webkit-animation-delay: .8s;
}
.delayfive {
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
} */
/* .delaysix {
-moz-animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
} */
/* h1 {
font-family: "Damion", cursive;
color: #fff;
font-size: 6em;
text-align: center;
margin-top: 0;
} */
.icon {
position: relative;
width: 100%;
margin-top: 30%;
display: block;
/* color: #004d40; */
font-size: 2em;
-webkit-transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
-moz-transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
/* color: white; */
}
#circ {
max-width: 100%;
min-height: 200px;
width: 1280px;
text-align: center;
margin: 0 auto;
float: none;
bottom:-100px;
position: relative;
}
#circ ul {
list-style: none;
padding: 0;
margin-top: 80px;
width: 100%;
}
#circ ul li {
display: inline-block;
border-radius: 50%;
/* overflow: hidden; */
width: 80px;
height: 80px;
/* margin: 0 20px 20px 20px; */
text-align: center;
background: #fff;
/* border: solid 8px #00897b; */
position: relative;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
#circ ul li:hover {
/* border: solid 8px #004d40; */
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
@media only screen and (max-width: 1200px) {
.icon {
/* position: relative; */
margin-top: 30%;
/* color: #004d40; */
font-size: 2em;
-webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#circ ul li {
width: 80px;
height: 80px;
/* margin: 0 5px 5px 5px; */
horiz-align: center;
/* margin-bottom:100px; */
}
#circ ul li:hover .icon {
/* font-size: 2.5em; */
opacity:0.7;
/* border: none; */
}
#circ ul li:hover {
border: none;
opacity:0.7;
}
}
@media only screen and (max-width: 690px) {
/* h1 {
font-size: 2em;
} */
#circ ul li {
border-radius: 0;
border: none;
margin: 0;
}
#circ ul li:hover {
border: none;
opacity:0.7;
}
}
/* #facebook {
background: #3B5998;
}
#twitter {
background: #55ACEE;
}
#linkedin {
background: #007bb5;
}
#youtube {
background: #bb0000;
}
#instagram {
background: #125688;
} */
.icon-color{
color: white;
text-decoration: none;
}
/* Send Email Form */
input[type="email"]:focus{
outline: 2px solid #fee;
box-shadow: 0 0px 20px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
}
/*input[type="email"], select{*/
/*}*/
/*input[type="email"]:hover{*/
/*}*/
.Neon{
width:400px;
outline: 2px solid #fee;
border-style:none;
position: absolute;
margin: -100px 0 0 -200px;
top: 450px;
/*left: 48.5%;*/
left: 48.5%;
/*transform: translateX(-50%);*/
}
input[type="email"]{
padding: 20px 10px;
line-height: 0;
box-shadow: 0 40px 100px, 0 -10px 50px , 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
}
input{
background: rgba(255,255,255,0);
position: relative;
outline: solid;
top: 250px;
margin: 0 auto;
padding: 10px;
color: #333;
font-size:20px;
/*color:#27b8a9;*/
}
/*.bg {*/
/* display: block;*/
/* background-size: cover;*/
/* height: 768px;*/
/* width: 100%;*/
/* position: relative;*/
/*}*/
/*body{*/
/* background: #112 url(//images.weserv.nl/?url=i.imgur.com/6QJjYMe.jpg) center no-repeat;*/
/* background-size: cover;*/
/*}*/
@media only screen and (max-width: 690px) {
/*input{*/
/* height:10px;*/
/* !*width:200px;*!*/
/*}*/
/*.Neon{*/
/* position: relative;*/
/* width: 200px;*/
/* !*margin: -100px 0 0 -200px;*!*/
/* top: 50%;*/
/* left: 50%;*/
/* font-size: 20px;*/
/* }*/
.Neon{
position:absolute;
left: 49%;
width: 200px;
transform:translate(-50,-50)
}
}
/* * {
outline: none;
} */
/*body{*/
/* background: #112 url(//images.weserv.nl/?url=i.imgur.com/6QJjYMe.jpg) center no-repeat;*/
/* background-size: cover;*/
/*}*/
.Send_Email {
background: rgba(255,255,255,0);
position: relative;
/*padding: 10px;*/
/*display: block;*/
border-radius: 3px;
/*margin: 13% auto;*/
width: 20%;/*150px;*/
height:100px;
/*left: 43%;*/
/*top: 10%;*/
box-shadow: 0 40px 100px, 0 -10px 50px , 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
border: 2px solid #d91140;
animation: blink linear infinite 3s;
outline: none;
/*bottom: 150px;*/
top: 225px;
left: 50%;
transform: translate(-50%, -50%);
max-width: 200px;
}
.Send_Email:hover .Send_Email_Icon {
z-index:-3px;
top:10%;
transform: rotate(10deg);
-webkit-transition: -webkit-transform 0.15s;
-moz-transition: -moz-transform 0.15s;
-o-transition: -o-transform 0.15s;
-ms-transition: -ms-transform 0.15s;
transition: transform 0.15s;
position: relative;
}
.Send_Email.clicked {
/* background-color: #cff5b3; */
border: 2px solid #cff5b3;
color: #ff0000;
}
.Send_Email.clicked .Send_Email_Icon {
-webkit-animation: flyaway 1.3s linear;
-moz-animation: flyaway 1.3s linear;
-o-animation: flyaway 1.3s linear;
-ms-animation: flyaway 1.3s linear;
animation: flyaway 1.3s linear;
top: 25%;
right: 40%;
}
.Send_Email_Icon{
fill:#d91140;
height:40px;
}
@keyframes flyaway {
0% {
transform: translateY(0)
rotate(145deg);
}
100% {
transform: translateY(50vh)
rotate(145deg);
}
}
@keyframes blink {
80% {
text-shadow: none;
}
81% {
color: inherit;
text-shadow: inherit;
}
82% {
color: #333;
text-shadow: none;
}
83% {
color: inherit;
text-shadow: inherit;
}
92% {
color: #333;
text-shadow: none;
}
92.5% {
color: inherit;
text-shadow: inherit;
}
}
/*@media only screen and (max-width: 690px) {*/
/* .Send_Email{*/
/* width:75px;*/
/* height:50px;*/
/* margin-left: 30px;*/
/* }*/
/* .Send_Email_Icon{*/
/* transform: scale(0.5);*/
/* position:relative;*/
/* display:block;*/
/* margin-bottom:80px;*/
/* margin-top: 10%;*/
/* right: 40%;*/
/* height:20px;*/
/* }*/
/*}*/
body {
background: #112 url(//images.weserv.nl/?url=i.imgur.com/6QJjYMe.jpg) center no-repeat;
background-size:cover;
}
.container{
font-size:19vw;
overflow:visible;
min-font-size:18vh ;
max-font-size: 25vh;
}
.logo {
text-align: center;
width: 65%;
height: 250px;
/*margin: auto;*/
position: relative;
/*margin-top: 150%;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*left: 0;*/
/*right: 0;*/
/*bottom: 0;*/
user-select: none;
left: 50%;
transform: translateX(-50%);
/*margin-top:10%*/
}
.logo b{
font: 400 10vw "Vibur";
color: #fee;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
}
.logo b span{
animation: blink linear infinite 2s;
}
.logo b span:nth-of-type(2){
animation: blink linear infinite 3s;
}
@keyframes blink {
78% {
color: inherit;
text-shadow: inherit;
}
79%{
color: #333;
}
80% {
text-shadow: none;
}
81% {
color: inherit;
text-shadow: inherit;
}
82% {
color: #333;
text-shadow: none;
}
83% {
color: inherit;
text-shadow: inherit;
}
92% {
color: #333;
text-shadow: none;
}
92.5% {
color: inherit;
text-shadow: inherit;
}
}
/* @media screen and (min-width: 601px) {
div.container {
font-size: 80px;
}
} */
/* @media only screen and (max-width: 600px) {
div.container {
font-size: 30px;
}
body {
font-size: 30px;
}
.logo b{
font: 400 11vh "Vibur";
}
} */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment