7+ CSS Footer Examples

This post contains a total of 7+ CSS Footer Examples with Source Code. All these Website Footers are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Footer Examples

1. By Jules Forrest

Made by Jules Forrest. Footer with CSS Grid. Source

CSS Footer by Jules Forrest
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
ul {
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 24px;
  justify-items: center;
  margin: auto;
}

@media (min-width: 500px) {
  ul {
    grid-auto-flow: column;
  }
}

a {
  color: white;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 hsla(0, 0%, 100%, 0.4);
}

a:hover {
  box-shadow: inset 0 -1.2em 0 hsla(0, 0%, 100%, 0.4);
}

li:last-child {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

li:hover ~ li p {
  -webkit-animation: wave-animation 0.3s infinite;
          animation: wave-animation 0.3s infinite;
}

/* below is just for demo styling */

div {
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: #002a38;
  line-height: 1.3;
  font-family: Menlo, monospace;
}

@-webkit-keyframes wave-animation {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-15deg);
  }
}

@keyframes wave-animation {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-15deg);
  }
}
</style>
</head>
<body>
  <div>
  <ul>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Codepen</a></li>
    <li><a href="#">Email</a></li>
    <li><a href="#">Dribbble</a></li>
    <li><a href="#">Github</a></li>
    <li>
      <p>πŸ‘‹</p>
    </li>
  </ul>
</div>
</html>

2. By Zed Dash

Made by Zed Dash. Footer with Goey CSS Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;display=swap'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'> 
<style>
body {
  display: grid;
  grid-template-rows: 1fr 10rem auto;
  grid-template-areas: "main" "." "footer";
  overflow-x: hidden;
  background: #F5F7FA;
  min-height: 100vh;
  font-family: "Open Sans", sans-serif;
}
body .footer {
  z-index: 1;
  --footer-background:#ED5565;
  display: grid;
  position: relative;
  grid-area: footer;
  min-height: 12rem;
}
body .footer .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1rem;
  background: var(--footer-background);
  filter: url("#blob");
}
body .footer .bubbles .bubble {
  position: absolute;
  left: var(--position, 50%);
  background: var(--footer-background);
  border-radius: 100%;
  -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
          animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  transform: translate(-50%, 100%);
}
body .footer .content {
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 4rem;
  padding: 2rem;
  background: var(--footer-background);
}
body .footer .content a, body .footer .content p {
  color: #F5F7FA;
  text-decoration: none;
}
body .footer .content b {
  color: white;
}
body .footer .content p {
  margin: 0;
  font-size: 0.75rem;
}
body .footer .content > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body .footer .content > div > div {
  margin: 0.25rem 0;
}
body .footer .content > div > div > * {
  margin-right: 0.5rem;
}
body .footer .content > div .image {
  align-self: center;
  width: 4rem;
  height: 4rem;
  margin: 0.25rem 0;
  background-size: cover;
  background-position: center;
}

@-webkit-keyframes bubble-size {
  0%, 75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}

@keyframes bubble-size {
  0%, 75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}
@-webkit-keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}
@keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}
</style>
</head>
<body>
  <div class="main"></div>
<div class="footer">
  <div class="bubbles">
    <div class="bubble" style="--size:2.725700083208892rem; --distance:6.715265015436767rem; --position:4.727332479678093%; --time:3.6974858959531884s; --delay:-2.638193993204724s;"></div>
    <div class="bubble" style="--size:4.002410905091111rem; --distance:6.500840160257102rem; --position:82.48972013991842%; --time:2.619406138407804s; --delay:-3.9880677412046603s;"></div>
    <div class="bubble" style="--size:2.14245449038624rem; --distance:7.604315552464671rem; --position:96.17982114046374%; --time:3.946473707395058s; --delay:-3.674069110394974s;"></div>
    <div class="bubble" style="--size:2.6180749105948546rem; --distance:8.937810565898015rem; --position:88.98594832558832%; --time:2.445611327624445s; --delay:-3.815478335903179s;"></div>
    <div class="bubble" style="--size:4.057086145152155rem; --distance:8.28156279356331rem; --position:26.491555953305244%; --time:2.169781877615654s; --delay:-2.8668106068033863s;"></div>
    <div class="bubble" style="--size:5.324778883731571rem; --distance:6.436481777269572rem; --position:2.10334850698374%; --time:3.5704836271571136s; --delay:-3.2370958997228776s;"></div>
    <div class="bubble" style="--size:4.244159148982964rem; --distance:8.536979056230408rem; --position:21.601758827074164%; --time:2.626742794688895s; --delay:-3.2160961539229427s;"></div>
    <div class="bubble" style="--size:5.711936067791038rem; --distance:8.659214906467163rem; --position:84.9661034079428%; --time:2.894507416697665s; --delay:-3.9070115899947666s;"></div>
    <div class="bubble" style="--size:5.178571367710707rem; --distance:8.250216334060237rem; --position:90.54144468809204%; --time:2.528099311292711s; --delay:-2.971406193065805s;"></div>
    <div class="bubble" style="--size:2.039434070304263rem; --distance:7.941576485667008rem; --position:18.967846787577535%; --time:2.995960149895174s; --delay:-2.8394561147412705s;"></div>
    <div class="bubble" style="--size:2.6643549176811625rem; --distance:7.269665272364958rem; --position:9.160271786046936%; --time:3.5245827907488536s; --delay:-3.8037073659305918s;"></div>
    <div class="bubble" style="--size:2.849439657579283rem; --distance:8.365949764680717rem; --position:32.07885221735351%; --time:2.519261244066355s; --delay:-2.7496176472002736s;"></div>
    <div class="bubble" style="--size:5.5580611195406595rem; --distance:6.428493811109155rem; --position:95.68024849691402%; --time:2.1903168945544005s; --delay:-2.315673077903672s;"></div>
    <div class="bubble" style="--size:2.1183029257948105rem; --distance:9.515684513297451rem; --position:62.28475718874398%; --time:2.8855469346102267s; --delay:-2.7886585083184485s;"></div>
    <div class="bubble" style="--size:3.581575603368808rem; --distance:9.992623802837867rem; --position:65.81775627478422%; --time:2.7826376551733807s; --delay:-2.000620306435478s;"></div>
    <div class="bubble" style="--size:2.3145639600172956rem; --distance:6.2993621958687935rem; --position:22.50724202753038%; --time:2.7460928078044318s; --delay:-3.8272044571147434s;"></div>
    <div class="bubble" style="--size:3.3378982008319227rem; --distance:7.398440312140332rem; --position:56.19757485243151%; --time:2.185536325282109s; --delay:-2.2307499687694214s;"></div>
    <div class="bubble" style="--size:5.16730058288954rem; --distance:8.024069470746653rem; --position:2.1398746221909004%; --time:2.709425877640271s; --delay:-2.740524549597896s;"></div>
    <div class="bubble" style="--size:2.755758383032564rem; --distance:7.460942840378134rem; --position:102.36157579395937%; --time:3.3149511926313444s; --delay:-2.670012716489791s;"></div>
    <div class="bubble" style="--size:5.53013139310846rem; --distance:6.435170978241196rem; --position:3.998285841503124%; --time:3.3606082508366955s; --delay:-2.330412284077354s;"></div>
    <div class="bubble" style="--size:5.333385141951765rem; --distance:6.02779292847827rem; --position:61.797094861307244%; --time:3.951483819143744s; --delay:-3.6660708710541074s;"></div>
    <div class="bubble" style="--size:3.081971842249204rem; --distance:9.149862933742813rem; --position:96.16211707486362%; --time:3.5931422497008456s; --delay:-2.195391231682565s;"></div>
    <div class="bubble" style="--size:2.071350497192994rem; --distance:7.533016634013593rem; --position:7.600869473962371%; --time:2.3787685178282985s; --delay:-3.959566794318133s;"></div>
    <div class="bubble" style="--size:3.838956235161991rem; --distance:8.742358745780884rem; --position:54.920613159251076%; --time:2.7224577595779675s; --delay:-3.1415599035832895s;"></div>
    <div class="bubble" style="--size:3.4583361506436825rem; --distance:8.18633998307162rem; --position:7.546746427981059%; --time:2.783253418856696s; --delay:-2.840992229842029s;"></div>
    <div class="bubble" style="--size:4.077336570415958rem; --distance:6.961303149955628rem; --position:53.23463166309858%; --time:2.6096024401702076s; --delay:-2.3676888705825907s;"></div>
    <div class="bubble" style="--size:4.213189089116368rem; --distance:7.907260344628038rem; --position:76.96698565076711%; --time:2.289916964049107s; --delay:-2.835802779657901s;"></div>
    <div class="bubble" style="--size:3.586226065446442rem; --distance:9.14929856162927rem; --position:10.785633175776088%; --time:2.917814635003498s; --delay:-2.2013111785145196s;"></div>
    <div class="bubble" style="--size:2.39756320009454rem; --distance:8.379804896158165rem; --position:89.33512317833404%; --time:2.9104300060326724s; --delay:-3.224561977891357s;"></div>
    <div class="bubble" style="--size:5.711776744074036rem; --distance:7.202561493535958rem; --position:-4.404490137933726%; --time:3.3314320817315237s; --delay:-2.8899511945461507s;"></div>
    <div class="bubble" style="--size:3.802159147011734rem; --distance:6.834923371324174rem; --position:8.43428235617939%; --time:3.157140908943357s; --delay:-2.3997632790920305s;"></div>
    <div class="bubble" style="--size:5.353597852570927rem; --distance:8.314804288905052rem; --position:39.50334262096225%; --time:3.952851305020793s; --delay:-3.6697448006570674s;"></div>
    <div class="bubble" style="--size:2.1366754266375336rem; --distance:6.113827635169568rem; --position:22.881238934982843%; --time:2.609560498669097s; --delay:-2.048231371479289s;"></div>
    <div class="bubble" style="--size:2.726664734392638rem; --distance:6.122097580677088rem; --position:24.411543237547136%; --time:3.3709921658670026s; --delay:-3.713502690523637s;"></div>
    <div class="bubble" style="--size:2.075947018258815rem; --distance:6.6110939841317045rem; --position:-4.355440769492425%; --time:2.7634721464902787s; --delay:-3.8380960333160465s;"></div>
    <div class="bubble" style="--size:4.086596457902971rem; --distance:7.04541158925156rem; --position:68.00384372338931%; --time:3.2106999028113927s; --delay:-3.7671122114944664s;"></div>
    <div class="bubble" style="--size:2.796123642903738rem; --distance:9.232134398248757rem; --position:60.91784161401796%; --time:2.1228745803586793s; --delay:-2.617936098752361s;"></div>
    <div class="bubble" style="--size:2.7760812957543983rem; --distance:7.780082254431991rem; --position:48.61252737057554%; --time:2.546663352115821s; --delay:-3.2372683653470227s;"></div>
    <div class="bubble" style="--size:5.84226473840023rem; --distance:7.662482265145085rem; --position:45.558880641539574%; --time:2.4209189807759297s; --delay:-2.5241310627760876s;"></div>
    <div class="bubble" style="--size:4.116057845962611rem; --distance:7.689490631886447rem; --position:26.238242443394817%; --time:2.3763909533089187s; --delay:-2.029608126106607s;"></div>
    <div class="bubble" style="--size:5.166485773865499rem; --distance:8.91768095612262rem; --position:-3.2715535300076026%; --time:2.211428319739811s; --delay:-2.680094309240427s;"></div>
    <div class="bubble" style="--size:4.819958195842167rem; --distance:6.218029466480549rem; --position:42.37275632391457%; --time:2.3250237203381388s; --delay:-2.9816465918085067s;"></div>
    <div class="bubble" style="--size:3.265503415392712rem; --distance:9.747308139772294rem; --position:3.8962237518185674%; --time:3.222880221790485s; --delay:-3.1345694298314237s;"></div>
    <div class="bubble" style="--size:5.706558168916608rem; --distance:7.47463566508661rem; --position:67.04112040970973%; --time:3.644068520254435s; --delay:-3.877329950761118s;"></div>
    <div class="bubble" style="--size:5.506117705900748rem; --distance:8.574531415342499rem; --position:47.865937632913926%; --time:3.8195012129455463s; --delay:-2.6413714307919682s;"></div>
    <div class="bubble" style="--size:2.965095771894185rem; --distance:8.900030535227266rem; --position:63.38372848143395%; --time:3.406518357540474s; --delay:-2.7990225082440956s;"></div>
    <div class="bubble" style="--size:4.677678810562908rem; --distance:6.79712628966954rem; --position:63.63684813939446%; --time:2.1242388816311117s; --delay:-3.598203030219279s;"></div>
    <div class="bubble" style="--size:2.7951693266116298rem; --distance:8.685619513654522rem; --position:79.13240540157804%; --time:2.5603564228669082s; --delay:-2.549440260723531s;"></div>
    <div class="bubble" style="--size:5.361071496480287rem; --distance:9.549890731453306rem; --position:77.12814804808252%; --time:3.7495995796119077s; --delay:-3.6375567180068793s;"></div>
    <div class="bubble" style="--size:4.657876797858653rem; --distance:7.7483325384474115rem; --position:61.992925456721466%; --time:3.887694125594986s; --delay:-2.1443923637765927s;"></div>
    <div class="bubble" style="--size:2.2268399845379125rem; --distance:6.276830221121636rem; --position:13.63082677363764%; --time:2.650429585647172s; --delay:-3.8924881314437654s;"></div>
    <div class="bubble" style="--size:3.340900876888857rem; --distance:7.87188521051555rem; --position:74.94126383659949%; --time:3.9238424855553284s; --delay:-3.373507234750926s;"></div>
    <div class="bubble" style="--size:3.8797965678520283rem; --distance:6.265197171779329rem; --position:29.702553064784965%; --time:2.4797457431694316s; --delay:-3.5836505062118404s;"></div>
    <div class="bubble" style="--size:2.686013631949203rem; --distance:7.199078883855209rem; --position:23.31858237341718%; --time:3.066822415070911s; --delay:-3.8809898436818973s;"></div>
    <div class="bubble" style="--size:2.684209979166603rem; --distance:9.896702830546221rem; --position:2.5796644456626687%; --time:2.7283460404515094s; --delay:-3.3555016229823798s;"></div>
    <div class="bubble" style="--size:4.4155032228190985rem; --distance:6.134130596205374rem; --position:69.68605845262758%; --time:3.5031198012999347s; --delay:-3.89213553027337s;"></div>
    <div class="bubble" style="--size:3.6985189297980794rem; --distance:8.014320430222849rem; --position:17.878588843937806%; --time:3.18877248278996s; --delay:-3.4987850364393775s;"></div>
    <div class="bubble" style="--size:5.808388151790041rem; --distance:7.271454388706551rem; --position:80.32776274321083%; --time:3.466623347664203s; --delay:-3.9808272129354685s;"></div>
    <div class="bubble" style="--size:3.623606744869rem; --distance:8.688288313207181rem; --position:34.55322209279567%; --time:3.741491599855053s; --delay:-3.295365846871966s;"></div>
    <div class="bubble" style="--size:5.8418367184287rem; --distance:9.247361481151707rem; --position:92.66331952267478%; --time:2.0260262934389264s; --delay:-2.0557701357096527s;"></div>
    <div class="bubble" style="--size:3.8695490133331782rem; --distance:8.701827936684332rem; --position:80.16677053731996%; --time:2.0960937107984705s; --delay:-3.1129520188773823s;"></div>
    <div class="bubble" style="--size:4.178197878166525rem; --distance:7.945557343938574rem; --position:19.433753377286408%; --time:3.1336853106243847s; --delay:-2.9492136991983573s;"></div>
    <div class="bubble" style="--size:5.950312176157753rem; --distance:6.928191540362607rem; --position:44.05598140190769%; --time:3.8236183227332377s; --delay:-2.4561442445423287s;"></div>
    <div class="bubble" style="--size:2.3078502430363423rem; --distance:8.786149791452235rem; --position:1.6869944271191928%; --time:3.541837327666264s; --delay:-2.1993760646449134s;"></div>
    <div class="bubble" style="--size:3.652013162887224rem; --distance:9.88218905085716rem; --position:97.63063247297806%; --time:3.1267045797846937s; --delay:-2.9689574268718193s;"></div>
    <div class="bubble" style="--size:5.325884448205541rem; --distance:6.231339763992519rem; --position:-3.2038586747108266%; --time:2.3345363439959463s; --delay:-2.4926927256622755s;"></div>
    <div class="bubble" style="--size:4.53597865917197rem; --distance:6.428625833615193rem; --position:42.296845014728945%; --time:3.6384791478252407s; --delay:-2.034162219570198s;"></div>
    <div class="bubble" style="--size:3.992013295381571rem; --distance:8.177487344433935rem; --position:95.73816931691255%; --time:2.7076199610944656s; --delay:-2.734395726475781s;"></div>
    <div class="bubble" style="--size:5.01621903032624rem; --distance:7.288837338718351rem; --position:24.858794446958733%; --time:2.3595099980211076s; --delay:-2.690522241500759s;"></div>
    <div class="bubble" style="--size:4.827303772019738rem; --distance:6.270665164595996rem; --position:98.16906414457534%; --time:2.2920977512106653s; --delay:-3.4740839990248453s;"></div>
    <div class="bubble" style="--size:2.4116852350197338rem; --distance:9.768323585126382rem; --position:2.446307835266756%; --time:2.416900118015786s; --delay:-3.7205600665910428s;"></div>
    <div class="bubble" style="--size:2.348756311852558rem; --distance:8.625083152964748rem; --position:10.57043628205643%; --time:3.3705220551375366s; --delay:-3.5956907937581444s;"></div>
    <div class="bubble" style="--size:5.707995679441418rem; --distance:7.286778664527956rem; --position:57.301306794447584%; --time:3.511983636008719s; --delay:-2.5889518503963256s;"></div>
    <div class="bubble" style="--size:3.5506276671610095rem; --distance:7.481634360830447rem; --position:23.409356441593253%; --time:3.0703552040589397s; --delay:-2.1563541583006582s;"></div>
    <div class="bubble" style="--size:3.9620570550912007rem; --distance:8.939747254756043rem; --position:72.05478422272941%; --time:3.119618296829342s; --delay:-2.897933795069794s;"></div>
    <div class="bubble" style="--size:5.331827716174672rem; --distance:8.660463835276829rem; --position:75.79348135017808%; --time:2.1374013496827984s; --delay:-2.490252870432789s;"></div>
    <div class="bubble" style="--size:2.4725147214157035rem; --distance:8.803266800165947rem; --position:86.37284069062495%; --time:2.6168249037394036s; --delay:-2.7822387204012156s;"></div>
    <div class="bubble" style="--size:4.868207747617642rem; --distance:8.048647077155339rem; --position:78.4711105884205%; --time:2.046931333251924s; --delay:-2.3548152234061286s;"></div>
    <div class="bubble" style="--size:4.5356095008043535rem; --distance:8.391984504152598rem; --position:28.940479822444715%; --time:2.0954982897473338s; --delay:-2.1945041065408266s;"></div>
    <div class="bubble" style="--size:5.7820677288228985rem; --distance:8.440438015100451rem; --position:24.950393285261406%; --time:3.0192995928073407s; --delay:-2.3094863596736968s;"></div>
    <div class="bubble" style="--size:2.068592849237313rem; --distance:6.076880527815808rem; --position:60.898450148137556%; --time:2.9743117997457524s; --delay:-2.854132541220267s;"></div>
    <div class="bubble" style="--size:5.9584731696349955rem; --distance:8.840351651973457rem; --position:18.200102314375027%; --time:3.5051620608392984s; --delay:-2.9314783834188614s;"></div>
    <div class="bubble" style="--size:4.8458147080529645rem; --distance:7.980213045381471rem; --position:20.571231181073173%; --time:3.685878652104025s; --delay:-3.56068662884676s;"></div>
    <div class="bubble" style="--size:4.6142309741247844rem; --distance:9.263328880663101rem; --position:54.14437046322876%; --time:2.698271513100167s; --delay:-2.823781901694289s;"></div>
    <div class="bubble" style="--size:2.9962706860653574rem; --distance:8.891221492978044rem; --position:73.76915112897962%; --time:3.6041733650980237s; --delay:-3.2989236975833394s;"></div>
    <div class="bubble" style="--size:2.440232498995938rem; --distance:6.2073553636070935rem; --position:73.74955313230424%; --time:3.2706933251121657s; --delay:-3.320243534741832s;"></div>
    <div class="bubble" style="--size:4.390605245978844rem; --distance:8.51290535165595rem; --position:32.940414294597076%; --time:3.081141817375791s; --delay:-3.7128310287973s;"></div>
    <div class="bubble" style="--size:4.223895488370198rem; --distance:8.136647637618765rem; --position:-1.836771877385357%; --time:3.511465861075476s; --delay:-3.5618641392808246s;"></div>
    <div class="bubble" style="--size:5.054327379726783rem; --distance:8.189952628171309rem; --position:38.17105991221224%; --time:3.623278654730871s; --delay:-2.6173584207239773s;"></div>
    <div class="bubble" style="--size:5.809545731272722rem; --distance:9.137097574860821rem; --position:99.30398901412217%; --time:2.211833984958989s; --delay:-3.4697011315596122s;"></div>
    <div class="bubble" style="--size:4.298010446251372rem; --distance:7.279371974848732rem; --position:79.4474807721934%; --time:2.820746656882186s; --delay:-2.414907120741249s;"></div>
    <div class="bubble" style="--size:5.717054221673995rem; --distance:8.847792831699131rem; --position:-2.2905957281049427%; --time:3.6361568881030255s; --delay:-3.8511307796655054s;"></div>
    <div class="bubble" style="--size:2.7644758474888915rem; --distance:6.825350241372283rem; --position:72.67681670716456%; --time:2.7442197495481815s; --delay:-3.037762268744385s;"></div>
    <div class="bubble" style="--size:5.802202300640341rem; --distance:8.311133810170155rem; --position:11.420352495497458%; --time:3.719676831509495s; --delay:-2.2000267242061784s;"></div>
    <div class="bubble" style="--size:3.0112907984055495rem; --distance:6.301770348935771rem; --position:96.2318562569763%; --time:2.068728670493447s; --delay:-2.7458206975260886s;"></div>
    <div class="bubble" style="--size:3.586577985794099rem; --distance:6.56431633024966rem; --position:102.65885000185754%; --time:2.5000676201405696s; --delay:-3.3121187961543104s;"></div>
    <div class="bubble" style="--size:3.5692408152369755rem; --distance:8.4960076140925rem; --position:44.228428480380664%; --time:3.254542661581094s; --delay:-2.259186732731269s;"></div>
    <div class="bubble" style="--size:3.5080170058264573rem; --distance:7.37861447331144rem; --position:30.336281748982223%; --time:2.8272071815095954s; --delay:-3.836584047212117s;"></div>
    <div class="bubble" style="--size:2.1267626488725906rem; --distance:8.035973730066756rem; --position:14.403727288482116%; --time:2.021374864362676s; --delay:-3.673789733710239s;"></div>
    <div class="bubble" style="--size:5.649687259517809rem; --distance:6.45097376978316rem; --position:45.903551148883075%; --time:2.2391315588620513s; --delay:-3.9419316206975554s;"></div>
    <div class="bubble" style="--size:2.3156103831164803rem; --distance:6.5802358565934185rem; --position:88.46644520033368%; --time:3.4876337673548594s; --delay:-3.9380036890502437s;"></div>
    <div class="bubble" style="--size:4.672946418489328rem; --distance:8.730087752867936rem; --position:34.17753107713964%; --time:2.259731252365415s; --delay:-2.2032953203532317s;"></div>
    <div class="bubble" style="--size:2.8660454979843992rem; --distance:8.063602763190636rem; --position:75.41985554512722%; --time:3.038917477946619s; --delay:-3.539274210887006s;"></div>
    <div class="bubble" style="--size:3.0701294047826266rem; --distance:9.671162805636285rem; --position:59.998905042990316%; --time:3.7717477376350157s; --delay:-3.0356981615639187s;"></div>
    <div class="bubble" style="--size:2.5478855469981836rem; --distance:8.094469132911993rem; --position:49.207329059050544%; --time:3.695548565285971s; --delay:-2.40897144700829s;"></div>
    <div class="bubble" style="--size:3.520948670876318rem; --distance:7.813633026763878rem; --position:23.70802850897548%; --time:3.515467397082467s; --delay:-2.544882005588496s;"></div>
    <div class="bubble" style="--size:2.968711722143585rem; --distance:9.931192643660205rem; --position:69.52579331569568%; --time:2.264211288857757s; --delay:-3.2497520626896836s;"></div>
    <div class="bubble" style="--size:5.3174106673570565rem; --distance:8.663912716978155rem; --position:27.875541660639918%; --time:3.793674949005361s; --delay:-3.5004228140170994s;"></div>
    <div class="bubble" style="--size:5.1484632121466785rem; --distance:7.5844299437810925rem; --position:91.11066693554824%; --time:2.4736133872818353s; --delay:-2.7930785479849396s;"></div>
    <div class="bubble" style="--size:5.2692887934458525rem; --distance:7.3275145893729725rem; --position:32.652374554973456%; --time:2.115908873745834s; --delay:-3.495756601923358s;"></div>
    <div class="bubble" style="--size:4.699753816082792rem; --distance:9.038272771629227rem; --position:16.498043517245485%; --time:3.272329884235312s; --delay:-3.4550788799092236s;"></div>
    <div class="bubble" style="--size:4.28310467772728rem; --distance:6.150202814042957rem; --position:92.74506115669597%; --time:2.4394664342045806s; --delay:-2.45835966712633s;"></div>
    <div class="bubble" style="--size:4.609319158613901rem; --distance:9.788652148429563rem; --position:42.1217256267596%; --time:2.261168180727397s; --delay:-3.278128370053803s;"></div>
    <div class="bubble" style="--size:3.2288707724205894rem; --distance:8.23935908531513rem; --position:-1.524894625264701%; --time:2.641379555102352s; --delay:-3.2519957966272677s;"></div>
    <div class="bubble" style="--size:4.455809800786298rem; --distance:8.248327587833924rem; --position:64.19861879865263%; --time:3.897591080558568s; --delay:-3.583015584675822s;"></div>
    <div class="bubble" style="--size:3.034002055246913rem; --distance:6.035579939924972rem; --position:26.06426399846578%; --time:3.367111896109575s; --delay:-3.5314174021588784s;"></div>
    <div class="bubble" style="--size:3.6275196127936837rem; --distance:8.027591790832561rem; --position:85.76053801516058%; --time:3.3774969304670694s; --delay:-2.627355384777563s;"></div>
    <div class="bubble" style="--size:4.091225336845509rem; --distance:7.69737135102597rem; --position:90.31118901077774%; --time:2.007954046559191s; --delay:-3.7778626077538475s;"></div>
    <div class="bubble" style="--size:4.6626521516388655rem; --distance:9.208421000621604rem; --position:31.173401110561755%; --time:2.719947998756599s; --delay:-2.1386943103591105s;"></div>
    <div class="bubble" style="--size:2.995052073683543rem; --distance:9.962637819274228rem; --position:41.67835414642734%; --time:2.8037574215269894s; --delay:-3.189698832151644s;"></div>
    <div class="bubble" style="--size:3.119156705286195rem; --distance:7.9447100825928185rem; --position:98.68518555859306%; --time:2.838537669212822s; --delay:-2.2433050919657695s;"></div>
    <div class="bubble" style="--size:2.7776218759033906rem; --distance:6.2349811231972785rem; --position:85.5110718707538%; --time:3.4517234307688183s; --delay:-2.530271568019299s;"></div>
    <div class="bubble" style="--size:3.882997279161615rem; --distance:8.330895748815685rem; --position:-3.543471978773609%; --time:3.2900662901158704s; --delay:-3.1579852574347855s;"></div>
    <div class="bubble" style="--size:3.2469446637392227rem; --distance:6.705131036852339rem; --position:32.64224326301729%; --time:3.2950212652547384s; --delay:-2.1050579540137897s;"></div>
    <div class="bubble" style="--size:3.8026036544199444rem; --distance:7.879325878643081rem; --position:49.2927551726777%; --time:3.839616793173063s; --delay:-2.9677314784363507s;"></div>
    <div class="bubble" style="--size:5.848796559416503rem; --distance:7.047298339273074rem; --position:46.90121988664421%; --time:2.017548615055482s; --delay:-2.3740802603684332s;"></div>
    <div class="bubble" style="--size:4.149224587382589rem; --distance:9.566103105130493rem; --position:14.099198372442473%; --time:2.7892076198962945s; --delay:-3.795704048766085s;"></div>
    <div class="bubble" style="--size:4.298730887030855rem; --distance:9.944536467466467rem; --position:37.591318529598745%; --time:2.5300264030075126s; --delay:-3.598630410005143s;"></div>
  </div>
  <div class="content">
    <div>
      <div><b>Eldew</b><a href="#">Secuce</a><a href="#">Drupand</a><a href="#">Oceash</a><a href="#">Ugefe</a><a href="#">Babed</a></div>
      <div><b>Spotha</b><a href="#">Miskasa</a><a href="#">Agithe</a><a href="#">Scesha</a><a href="#">Lulle</a></div>
      <div><b>Chashakib</b><a href="#">Chogauw</a><a href="#">Phachuled</a><a href="#">Tiebeft</a><a href="#">Ocid</a><a href="#">Izom</a><a href="#">Ort</a></div>
      <div><b>Athod</b><a href="#">Pamuz</a><a href="#">Vapert</a><a href="#">Neesk</a><a href="#">Omemanen</a></div>
    </div>
    <div><a class="image" href="https://codepen.io/z-" target="_blank" style="background-image: url(&quot;https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/happy.svg&quot;)"></a>
      <p>Β©2019 Not Really</p>
    </div>
  </div>
</div>
<svg style="position:fixed; top:100vh">
  <defs>
    <filter id="blob">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="blob"></feColorMatrix>
    </filter>
  </defs>
</svg>
</body>
</html>

3. By Matheus Almeida

Made by Matheus Almeida. Responsive Flexbox Footer. Source

CSS Footer by Matheus Almeida
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, user-scalable=1">
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/zub3tbp.css">
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  font-family: acumin-pro, system-ui, sans-serif;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-size: 14px;
  background-color: #f4f4f4;
  align-items: start;
  min-height: 100vh;
}

.footer {
  display: flex;
  flex-flow: row wrap;
  padding: 30px 30px 20px 30px;
  color: #2f2f2f;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
}

.footer > * {
  flex:  1 100%;
}

.footer__addr {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer__logo {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  text-transform: lowercase;
  font-size: 1.5rem;
}

.footer__addr h2 {
  margin-top: 1.3em;
  font-size: 15px;
  font-weight: 400;
}

.nav__title {
  font-weight: 400;
  font-size: 15px;
}

.footer address {
  font-style: normal;
  color: #999;
}

.footer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  max-width: max-content;
  background-color: rgb(33, 33, 33, 0.07);
  border-radius: 100px;
  color: #2f2f2f;
  line-height: 0;
  margin: 0.6em 0;
  font-size: 1rem;
  padding: 0 1.3em;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
}

.footer__nav {
  display: flex;
	flex-flow: row wrap;
}

.footer__nav > * {
  flex: 1 50%;
  margin-right: 1.25em;
}

.nav__ul a {
  color: #999;
}

.nav__ul--extra {
  column-count: 2;
  column-gap: 1.25em;
}

.legal {
  display: flex;
  flex-wrap: wrap;
  color: #999;
}
  
.legal__links {
  display: flex;
  align-items: center;
}

.heart {
  color: #2f2f2f;
}

@media screen and (min-width: 24.375em) {
  .legal .legal__links {
    margin-left: auto;
  }
}

@media screen and (min-width: 40.375em) {
  .footer__nav > * {
    flex: 1;
  }
  
  .nav__item--extra {
    flex-grow: 2;
  }
  
  .footer__addr {
    flex: 1 0px;
  }
  
  .footer__nav {
    flex: 2 0px;
  }
}
</style>
</head>
<body>
  <header>
  <!-- Content -->
</header>

<main>
  <!-- Content -->
</main>

<footer class="footer">
  <div class="footer__addr">
    <h1 class="footer__logo">Something</h1>
        
    <h2>Contact</h2>
    
    <address>
      5534 Somewhere In. The World 22193-10212<br>
          
      <a class="#">Email Us</a>
    </address>
  </div>
  
  <ul class="footer__nav">
    <li class="nav__item">
      <h2 class="nav__title">Media</h2>

      <ul class="nav__ul">
        <li>
          <a href="#">Online</a>
        </li>

        <li>
          <a href="#">Print</a>
        </li>
            
        <li>
          <a href="#">Alternative Ads</a>
        </li>
      </ul>
    </li>
    
    <li class="nav__item nav__item--extra">
      <h2 class="nav__title">Technology</h2>
      
      <ul class="nav__ul nav__ul--extra">
        <li>
          <a href="#">Hardware Design</a>
        </li>
        
        <li>
          <a href="#">Software Design</a>
        </li>
        
        <li>
          <a href="#">Digital Signage</a>
        </li>
        
        <li>
          <a href="#">Automation</a>
        </li>
        
        <li>
          <a href="#">Artificial Intelligence</a>
        </li>
        
        <li>
          <a href="#">IoT</a>
        </li>
      </ul>
    </li>
    
    <li class="nav__item">
      <h2 class="nav__title">Legal</h2>
      
      <ul class="nav__ul">
        <li>
          <a href="#">Privacy Policy</a>
        </li>
        
        <li>
          <a href="#">Terms of Use</a>
        </li>
        
        <li>
          <a href="#">Sitemap</a>
        </li>
      </ul>
    </li>
  </ul>
  
  <div class="legal">
    <p>&copy; 2019 Something. All rights reserved.</p>
    
    <div class="legal__links">
      <span>Made with <span class="heart">β™₯</span> remotely from Anywhere</span>
    </div>
  </div>
</footer>
</body>
</html>

4. By Christopher Schuck

Made by Christopher Schuck. Responsive & clean footer design with Social Icons. Source

CSS Footer by Christopher Schuck
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans|Oswald:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font: 11px "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.generic-anchor {
  color: #8DB9ED;
}
.generic-anchor:visited {
  color: #8DB9ED;
}
.generic-anchor:hover {
  color: #ccc;
}

.flex-rw {
  display: flex;
  flex-flow: row wrap;
}

main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 10em "Oswald", sans-serif;
  color: #9b9b9b;
  line-height: 1;
}

footer {
  background: #373737;
  margin-top: auto;
  width: 100%;
}

.footer-list-top {
  width: 33.333%;
}

.footer-list-top > li {
  text-align: center;
  padding-bottom: 10px;
}

.footer-list-header {
  padding: 10px 0 5px 0;
  color: #fff;
  font: 2.3vw "Oswald", sans-serif;
}

.footer-list-anchor {
  font: 1.3em "Open Sans", sans-serif;
}

.footer-social-section {
  width: 100%;
  align-items: center;
  justify-content: space-around;
  position: relative;
  margin-top: 5px;
}

.footer-social-section::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 10px;
  border-top: 1px solid #ccc;
  width: calc(100% - 20px);
}

.footer-social-overlap {
  position: relative;
  z-index: 2;
  background: #373737;
  padding: 0 20px;
}

.footer-social-connect {
  display: flex;
  align-items: center;
  font: 3.5em "Oswald", sans-serif;
  color: #fff;
}

.footer-social-small {
  font-size: 0.6em;
  padding: 0px 20px;
}

.footer-social-overlap > a {
  font-size: 3em;
}

.footer-social-overlap > a:not(:first-child) {
  margin-left: 0.38em;
}

.footer-bottom-section {
  width: 100%;
  padding: 10px;
  border-top: 1px solid #ccc;
  margin-top: 10px;
}

.footer-bottom-section > div:first-child {
  margin-right: auto;
}

.footer-bottom-wrapper {
  font-size: 1.5em;
  color: #fff;
}

.footer-address {
  display: inline;
  font-style: normal;
}

@media only screen and (max-width: 768px) {
  .footer-list-header {
    font-size: 2em;
  }

  .footer-list-anchor {
    font-size: 1.1em;
  }

  .footer-social-connect {
    font-size: 2.5em;
  }

  .footer-social-overlap > a {
    font-size: 2.24em;
  }

  .footer-bottom-wrapper {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 568px) {
  main {
    font-size: 5em;
  }

  .footer-list-top {
    width: 100%;
  }

  .footer-list-header {
    font-size: 3em;
  }

  .footer-list-anchor {
    font-size: 1.5em;
  }

  .footer-social-section {
    justify-content: center;
  }

  .footer-social-section::after {
    top: 25%;
  }

  .footer-social-connect {
    margin-bottom: 10px;
    padding: 0 10px;
  }

  .footer-social-overlap {
    display: flex;
    justify-content: center;
  }

  .footer-social-icons-wrapper {
    width: 100%;
    padding: 0;
  }

  .footer-social-overlap > a:not(:first-child) {
    margin-left: 20px;
  }

  .footer-bottom-section {
    padding: 0 5px 10px 5px;
  }

  .footer-bottom-wrapper {
    text-align: center;
    width: 100%;
    margin-top: 10px;
  }
}
@media only screen and (max-width: 480px) {
  .footer-social-overlap > a {
    margin: auto;
  }

  .footer-social-overlap > a:not(:first-child) {
    margin-left: 0;
  }

  .footer-bottom-rights {
    display: block;
  }
}
@media only screen and (max-width: 320px) {
  .footer-list-header {
    font-size: 2.2em;
  }

  .footer-list-anchor {
    font-size: 1.2em;
  }

  .footer-social-connect {
    font-size: 2.4em;
  }

  .footer-social-overlap > a {
    font-size: 2.24em;
  }

  .footer-bottom-wrapper {
    font-size: 1.3em;
  }
}
</style>
</head>
<body>
  <main>
    Content
  </main>
<footer class="flex-rw">
  
  <ul class="footer-list-top">
    <li>
      <h4 class="footer-list-header">About Pavilion</h4></li>
    <li><a href='#' class="generic-anchor footer-list-anchor" itemprop="significantLink">GET TO KNOW US</a></li>
    <li><a href='#' class="generic-anchor footer-list-anchor" itemprop="significantLink">PROMOS</a></li>
    <li><a href='#' class="generic-anchor footer-list-anchor" itemprop="significantLink">BECOME A RETAILER</a></li>

    <li><a href='#' itemprop="significantLink" class="generic-anchor footer-list-anchor">JOB OPENINGS</a></li>

    <li><a href='#' class="generic-anchor footer-list-anchor" itemprop="significantLink">EVENTS</a></li>
  </ul>
  <ul class="footer-list-top">
    <li>
      <h4 class="footer-list-header">The Gift Selection</h4></li>


    <li><a href='#' class="generic-anchor footer-list-anchor">ANGEL FIGURINES</a></li>
    <li><a href='#' class="generic-anchor footer-list-anchor">HOME DECOR</a></li>
    <li><a href='#' class="generic-anchor footer-list-anchor">MUGS</a></li>
    <li><a href='/Pet-Lover/cat/id/108' class="generic-anchor footer-list-anchor">PET LOVER</a></li>
    <li><a href='#' class="generic-anchor footer-list-anchor" target="_blank">HANDBAGS & JEWELRY</a></li>
  </ul>
  <ul class="footer-list-top">
    <li id='help'>
      <h4 class="footer-list-header">Please Help Me</h4></li>
    <li><a href='#' class="generic-anchor footer-list-anchor" itemprop="significantLink">CONTACT</a></li>
    <li><a href='/faq.html' class="generic-anchor footer-list-anchor" itemprop="significantLink">FAQ</a></li>
    <li id='find-a-store'><a href='#' class="generic-anchor footer-list-anchor" itemprop="significantLink">STORE LOCATOR</a></li>
    <li id='user-registration'><a href='#' class="generic-anchor footer-list-anchor" itemprop="significantLink">NEW USERS</a></li>
    <li id='order-tracking'><a href='#' itemprop="significantLink" class="generic-anchor footer-list-anchor">ORDER STATUS</a></li>
  </ul>
  <section class="footer-social-section flex-rw">
      <span class="footer-social-overlap footer-social-connect">
      CONNECT <span class="footer-social-small">with</span> US
      </span>
      <span class="footer-social-overlap footer-social-icons-wrapper">
      <a href="#" class="generic-anchor" target="_blank" title="Pinterest" itemprop="significantLink"><i class="fa fa-pinterest"></i></a>
      <a href="#" class="generic-anchor" target="_blank" title="Facebook" itemprop="significantLink"><i class="fa fa-facebook"></i></a>
      <a href="#" class="generic-anchor" target="_blank" title="Twitter" itemprop="significantLink"><i class="fa fa-twitter"></i></a>
      <a href="#" class="generic-anchor" target="_blank" title="Instagram" itemprop="significantLink"><i class="fa fa-instagram"></i></a>
      <a href="#" target="_blank" title="Youtube" itemprop="significantLink"><i class="fa fa-youtube"></i></a>
      <a href="#" class="generic-anchor" target="_blank" title="Google Plus" itemprop="significantLink"><i class="fa fa-google-plus"></i></a>
      </span>
  </section>
  <section class="footer-bottom-section flex-rw">
<div class="footer-bottom-wrapper">   
<i class="fa fa-copyright" role="copyright">
 
</i> 2019 Pavilion in <address class="footer-address" role="company address">Bergen, NY</address><span class="footer-bottom-rights"> - All Rights Reserved - </span>
    </div>
    <div class="footer-bottom-wrapper">
    <a href="#" rel="nofollow">Terms</a> | <a href="#" class="generic-anchor" rel="nofollow">Privacy</a>
      </div>
  </section>
</footer>
</body>
</html>

5. By Swarup Kumar Kuila

Made by Swarup Kumar Kuila. CSS Footer Design with Raindrop Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,[email protected],300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'> 
<style>
.page-wrapper
{
      position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 11111;
    top: 35px;
}

footer p, footer strong, footer b, footer {
    color: #b0b0b0;
}

.footer-top {
    background: #303030;
    background-size: cover;
    background-position: center;
    padding: 0 0 20px;
    font-family: rubik;
  padding-top:30px;
  
}

.footer-top, .footer-bottom {
    background-color: #1c1f2f;
}

.footer-bottom {
    padding: 15px 0;
    border-top: 1px solid #313646;
    background-color: #181828 !important;
    color: #b0b0b0;
    font-family: rubik;
}
color: #99a9b5;
    padding-top: 15px;
}

.footer-site-info {
    font-size: 92.86%;
}
#footer-navigation, #footer-navigation li a:hover, .custom-footer, .custom-footer li a:hover {
    color: white;
}

#footer-navigation, #footer-navigation li a, .custom-footer, .custom-footer li a {
    color: #99a9b5;
    padding-top: 15px;
}

.footer-bottom ul {
    margin: 0;
}
.inline-inside {
    font-size: 0;
    line-height: 0;
}
.clearfix:after, .clearfix:before {
    content: "";
    display: table;
}
#footer-menu li {
    display: inline-block;
    padding: 0 21px;
    position: relative;
    line-height: 1;
}

#footer-navigation, #footer-navigation li a, .custom-footer, .custom-footer li a {
    color: #99a9b5;
    padding-top: 15px;
}

#footer-navigation, #footer-navigation li a, .custom-footer, .custom-footer li a {
    color: #99a9b5;
    padding-top: 15px;
}
#footer-menu li+li:before {
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    left: -1px;
    top: 0;
    font-size: 0;
    border-left: 1px solid #232234;
    border-right: 1px solid #333146;
}


navigation li a, .custom-footer, .custom-footer li a {
    color: #99a9b5;
    padding-top: 15px;
}

#footer-socials {
    text-align: right;
}

#footer-socials .socials {
    text-align: right;
    margin: 0 -7px;
    display: inline-block;
    vertical-align: middle;
}

a.socials-item {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    margin: 0 5px;
    line-height: 16px;
    padding: 10px;
    border-radius: 50%;
    background-color: #141421;
    border: 1px solid #2e2e4c;
    box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05);
}

.socials-item i {
    display: inline-block;
    font-weight: normal;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-size: 16px;
    text-align: center;
    vertical-align: top;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-synthesis: weight style;
    font-variant: normal;
    font-weight: normal;
    text-rendering: auto;
}

.facebook {
    color: #4e64b5;
}

.twitter {
    color: #00aced;
}
.instagram {
    color: #9a8f62;
}
.youtube {
    color: #c82929;
}

.telegram {
    color: #2ca5e0;
}


a.socials-item:hover {
    box-shadow: 0 0px 20px rgba(84, 1, 74, 0.7);
    border-color: rgba(255, 6, 224, 0.61);
    background: linear-gradient(to right, rgba(255, 9, 9, 0.12941176470588237), #c000ffb5, rgba(255, 0, 94, 0.14));
}

.footer-bottom a:hover {
    color: white;
}


footer p, footer li {
    font-size: 15px;
    line-height: 22px;
}


.widget {
    margin-bottom: 50px;
}

.footer-title {
    margin-bottom: 40px;
    color: #fff;
    font-weight: 500;
    text-transform: capitalize;
    padding-bottom: 15px;
    font-size: 16px;
    position: relative;
}

.footer-title:after {
    width: 50px;
    background: #fff;
    opacity: 0.2;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
}

.gem-contacts-item {
    padding-top: 10px;
    font-size: 15px;
}

.gem-contacts-item i {
    padding-right: 10px;
}

footer .widget ul {
    list-style: none;
    margin-top: 5px;
}

.posts li {
    border-bottom: 1px solid #393d50;
    padding-bottom: 12px;
    padding-top: 6px;
}

footer p, footer li {
    font-size: 15px;
    line-height: 22px;
}

.gem-pp-posts-date {
    color: #00bcd4;
    font-size: 89.5%;
}

footer p {
    line-height: 24px;
    margin-bottom: 10px;font-size: 15px;
}

.wpcf7-form-control-wrap .wpcf7-form-control {
    padding: 7px!important;
    width: 100%;
}

.wpcf7-form-control-wrap input {
    background: #1c1f2f;
    overflow: hidden;
    border: 1px solid #2e344d;
    background-color: #1c1f2f;
    box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03);
    border-radius: 5px;
    transition: all 0.3s ease-in-out 0s;
}

.wpcf7-form-control-wrap input:hover {
    background-color: transparent;
    box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.wpcf7 .wpcf7-form .contact-form-footer textarea {
    height: 160px;
    width: 100%;
}

.wpcf7-form-control-wrap textarea:hover {
    background-color: transparent;
    box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.wpcf7-form-control-wrap textarea {
    background: #1c1f2f;
    overflow: hidden;
    border: 1px solid #2e344d;
    background-color: #1c1f2f;
    box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03);
    border-radius: 5px;
    transition: all 0.3s ease-in-out 0s;
}

textarea {
    overflow: auto;
    resize: vertical;
}

.wpcf7 .wpcf7-form .contact-form-footer .wpcf7-submit {
    width: 100%;
    padding: 11px;
    margin: 0;
    line-height: 0;
}
.wpcf7-form .contact-form-footer .wpcf7-submit {
    background-color: #394050;
    color: #99a9b5;
    border: none;
    cursor: pointer;
    padding: 15px 40px;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.5s;
    letter-spacing: 2px;
    color: rgba(255,255,255,.5);
    box-shadow: none;
    text-transform: uppercase;
    outline: none !important;
    background-color: #1c1f2f;
    border-radius: 5px;
    min-width: 140px;
    box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05);
    border-width: 1px 0px 0px 1px;
    border-style: solid;
    border-color: #2e344d;
    transition: all 0.3s ease-in-out 0s;
}

.wpcf7-form input[type=submit] {
    height: 40px;
    line-height: 21px;
    padding: 10px 40px;
    font-size: 14px;
}

.posts li a {
    color: #99a9b5;
}

.wpcf7-form .contact-form-footer .wpcf7-submit:hover {
    box-shadow: 0 0px 20px rgba(84, 1, 74, 0.7);
    border-color: rgba(255, 6, 224, 0.61);
    background: linear-gradient(to right, rgba(255, 9, 9, 0.12941176470588237), #c000ffb5, rgba(255, 0, 94, 0.14));
    color: white;
}

img {
    border-style: none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.widget_gallery a {
    display: inline-block;
}
footer .widget ul {
    list-style: none;
    margin-top: 5px;
}
.widget_gallery ul {
    padding-left: 0;
    display: table;
}

.widget_gallery li {
    display: inline-block;
    width: 33.33%;
    float: left;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    padding: 2px;
}

.widget_gallery.gallery-grid-4 li {
    width: 30%;
}


#waterdrop {
    height: 30px;
}

#waterdrop canvas {
    bottom: -70px !important;
}

.footer-site-info
{
  padding-top: 10px;
}
</style>
</head>
<body>
  <div class="page-wrapper">
    <div id="waterdrop"></div>
    <footer>
      <div class="footer-top">
        <div class="pt-exebar">

        </div>
        <div class="container">
          <div class="row">
            <div class="col-lg-3 col-md-12 col-sm-12 footer-col-3">
              <div class="widget footer_widget">
                <h5 class="footer-title">Address</h5>
                <div class="gem-contacts">
                  <div class="gem-contacts-item gem-contacts-address">Corporate Office :<br> Text</div>
                  <div class="gem-contacts-item gem-contacts-phone"><i class="fa fa-phone" aria-hidden="true"></i> Phone: <a href="">+0000000000</a></div>

                  <div class="gem-contacts-item gem-contacts-address mt-2">Reg. Office :<br>Text</div>
                  <div class="gem-contacts-item gem-contacts-phone"><i class="fa fa-phone" aria-hidden="true"></i> Phone: <a>+000000000</a></div>

                </div>
              </div>

            </div>
            <div class="col-12 col-lg-6 col-md-6 col-sm-12">
              <div class="row">
                <div class="col-6 col-lg-6 col-md-6 col-sm-6">
                  <div class="widget footer_widget">
                    <h5 class="footer-title">Recent News</h5>
                    <ul class="posts  styled">
                      <li class="clearfix gem-pp-posts">
                        <div class="gem-pp-posts-text">
                          <div class="gem-pp-posts-item">
                            <a href="#">Text
                            </a>
                          </div>
                          <div class="gem-pp-posts-date">Call +000000000</div>
                        </div>
                      </li>
                      <li class="clearfix gem-pp-posts">
                        <div class="gem-pp-posts-text">
                          <div class="gem-pp-posts-item">
                            <a href="#">Text
                            </a>
                          </div>
                          <div class="gem-pp-posts-date">Call +000000000</div>
                        </div>
                      </li>
                      <li class="clearfix gem-pp-posts">
                        <div class="gem-pp-posts-text">
                          <div class="gem-pp-posts-item">
                            <a href="">Text
                            </a>
                          </div>
                          <div class="gem-pp-posts-date">Call +0000000000</div>
                        </div>
                      </li>

                    </ul>
                  </div>
                </div>
                <div class="col-6 col-lg-6 col-md-6 col-sm-6">
                  <div class="widget">
                    <h5 class="footer-title">Email Us</h5>
                    <div class="textwidget">
                      <div role="form" class="wpcf7" id="wpcf7-f4-o1" lang="en-US" dir="ltr">

                        <form method="post" class="wpcf7-form" novalidate="novalidate">

                          <div class="contact-form-footer">
                            <p><span class="wpcf7-form-control-wrap your-first-name"><input type="text" name="your-first-name" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Your name"></span></p>
                            <p><span class="wpcf7-form-control-wrap your-email_1"><input type="email" name="your-email_1" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false" placeholder="Your email"></span></p>
                            <p><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Your message"></textarea></span></p>
                            <div><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-3 col-md-5 col-sm-12 footer-col-4">
              <div class="widget widget_gallery gallery-grid-4">
                <h5 class="footer-title">Our Gallery</h5>
                <ul class="magnific-image">

                  <li><a class="magnific-anchor"><img src="https://images.unsplash.com/photo-1477239439998-839196943351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=414&q=80" alt=""></a></li>
                  <li><a class="magnific-anchor"><img src="https://images.unsplash.com/photo-1477239439998-839196943351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=414&q=80" alt=""></a></li>
                  <li><a class="magnific-anchor"><img src="https://images.unsplash.com/photo-1477239439998-839196943351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=414&q=80" alt=""></a></li>
                  <li><a class="magnific-anchor"><img src="https://images.unsplash.com/photo-1477239439998-839196943351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=414&q=80" alt=""></a></li>
                  <li><a class="magnific-anchor"><img src="https://images.unsplash.com/photo-1477239439998-839196943351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=414&q=80" alt=""></a></li>
                  <li><a class="magnific-anchor"><img src="https://images.unsplash.com/photo-1477239439998-839196943351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=414&q=80" alt=""></a></li>
                  <li><a class="magnific-anchor"><img src="https://images.unsplash.com/photo-1477239439998-839196943351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=414&q=80" alt=""></a></li>
                  <li><a class="magnific-anchor"><img src="https://images.unsplash.com/photo-1477239439998-839196943351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=414&q=80" alt=""></a></li>
                  <li><a class="magnific-anchor"><img src="https://images.unsplash.com/photo-1477239439998-839196943351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=414&q=80" alt=""></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="container">
          <div class="row">

            <div class="col-md-3">
              <div class="footer-site-info">2020 Β© <a href="#" target="_blank">Top HTML & CSS Program </a></div>
            </div>

            <div class="col-md-6">
              <nav id="footer-navigation" class="site-navigation footer-navigation centered-box" role="navigation">
                <ul id="footer-menu" class="nav-menu styled clearfix inline-inside">
                  <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="#">Support</a></li>
                  <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27"><a href="#">Contact Us</a></li>
                  <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="#">Disclaimer</a></li>
                  <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">Add more</a></li>
                </ul>
              </nav>
            </div>

            <div class="col-md-3">
              <div id="footer-socials">
                <div class="socials inline-inside socials-colored">

                  <a href="#" target="_blank" title="Facebook" class="socials-item">
                    <i class="fab fa-facebook-f facebook"></i>
                  </a>
                  <a href="#" target="_blank" title="Twitter" class="socials-item">
                    <i class="fab fa-twitter twitter"></i>

                  </a>
                  <a href="#" target="_blank" title="Instagram" class="socials-item">
                    <i class="fab fa-instagram instagram"></i>
                  </a>
                  <a href="#" target="_blank" title="YouTube" class="socials-item">
                    <i class="fab fa-youtube youtube"></i>
                  </a>
                  <a href="#" target="_blank" title="Telegram" class="socials-item">
                    <i class="fab fa-telegram telegram"></i>
                  </a>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </footer>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="https://daniellaharel.com/raindrops/js/raindrops.js"></script>
 <script> jQuery('#waterdrop').raindrops({color:'#1c1f2f', canvasHeight:150, density: 0.1, frequency: 20});
</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
</body>
</html>

6. By Mads HΓ₯kansson

Made by Mads HΓ₯kansson. Fixed Footer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Merriweather:300,900);

*, *:before, *:after{
  box-sizing: border-box;
  font: 300 1em/1.5 'Merriweather', serif; color: #242424;
  padding: 0; margin: 0;
}

html, body{background: rgb(236, 240, 241);}

.content{
  width: 850px; 
  margin: auto;
  margin-bottom: 350px; /* Same height as footer */
  padding: 100px 0;
}
  h1{
    color: #111;
    font-size: 3em;
    font-weight: 900;
    padding: 0 0 20px 0;
  }
  h2{
    color: #111;
    font-size: 2em;
    font-weight: 900;
    padding: 0 0 15px 0;
  }
  p{
    font-size: 1.25em;
    padding: 0 0 40px 0;
  }

.fixed_footer{
  width: 100%;
  height: 350px;
  background: #111;
  position: fixed; left: 0; bottom: 0;
  z-index: -100;
}
   .fixed_footer p{
    color: #696969;
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 50px;
         column-gap: 50px;
    font-size: 1em;
    font-weight: 300;
  }
</style>
</head>
<body>
  <main class="content" role="main">
  <h1>Fixed footer, scroll down.</h1>
  <p>Some Text</p>
</main>

<footer class="fixed_footer">
  <div class="content">
    <p>Some Text</p>
  </div>
</footer>
</body>
</html>

7. By Andrew Canham

Made by Andrew Canham. Social media footer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdr.ttf) format('truetype');
}
html {
  background: #4f585e;
}
div.browser {
  background: #fff url(http://www.s4c.cymru/temp/unsplash-kitsune-4.jpg) no-repeat;
  background-size: cover;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.4), 0 12px 24px -6px rgba(0, 0, 0, 0.4), 0 24px 64px 12px rgba(0, 0, 0, 0.25);
  color: #323b40;
  font-family: 'Source Sans Pro', helvetica;
  overflow: hidden;
  letter-spacing: -0.05em;
  margin: 5% auto;
  max-width: 1200px;
  min-width: 320px;
  min-height: 600px;
  padding-bottom: 10%;
  position: relative;
  width: 90%;
}
div.browser div.chrome {
  background: #4f585e;
  height: 40px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
div.browser div.chrome > a {
  border-radius: 12px;
  display: block;
  float: left;
  height: 12px;
  margin: 13px 4px;
  width: 12px;
}
div.browser div.chrome > a:first-child {
  margin-left: 13px;
}
div.browser div.chrome > a.red {
  background: #fc625c;
}
div.browser div.chrome > a.amber {
  background: #fdbc40;
}
div.browser div.chrome > a.green {
  background: #34c748;
}
div.browser div.chrome div.url {
  background: #5f676d;
  border-radius: 4px;
  height: 24px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  top: 8px;
  width: 70%;
}
div.browser h1 {
  font-size: 24px;
  font-weight: 200;
  margin: 0;
  padding: 80px 40px 10px;
}
div.browser h2 {
  font-size: 48px;
  line-height: 1em;
  max-width: 16em;
  margin: 0;
  padding: 0 40px;
}
footer {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
}
footer div.social-media-links {
  background: #323b40;
  overflow: hidden;
  padding-bottom: 4px;
  text-align: center;
}
footer div.social-media-links ul {
  margin: 0;
  padding: 0;
}
footer div.social-media-links li {
  display: inline;
  margin: 0;
  padding: 0;
}
footer div.social-media-links a {
  border-bottom: 0px solid rgba(0, 0, 0, 0.95);
  border-radius: 4px;
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0), 0 6px 8px rgba(0, 0, 0, 0), 0 24px 24px rgba(0, 0, 0, 0), 0 36px 36px rgba(0, 0, 0, 0), 0 64px 64px rgba(0, 0, 0, 0), 0 64px 128px rgba(0, 0, 0, 0), 0 120px 0 rgba(0, 0, 0, 0), 0 86px 8px 6px rgba(0, 0, 0, 0);
  display: inline-block;
  height: 30px;
  padding: 20px;
  position: relative;
  transition: 0.2s ease-in;
  width: 30px;
}
footer div.social-media-links a svg {
  left: 20px;
  position: absolute;
  top: 20px;
  height: 30px;
  width: 30px;
}
footer div.social-media-links a svg.glow path,
footer div.social-media-links a svg.glow circle {
  fill: rgba(0, 0, 0, 0);
}
footer div.social-media-links a svg path,
footer div.social-media-links a svg circle {
  fill: #0096a1;
  transition: 0.2s ease-in;
}
footer div.social-media-links a:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.05), 0 24px 24px rgba(0, 0, 0, 0.05), 0 36px 36px rgba(0, 0, 0, 0.05), 0 64px 64px rgba(0, 0, 0, 0.15), 0 64px 128px rgba(0, 0, 0, 0.15), 0 86px 8px 6px rgba(14, 186, 199, 0.25), 0 83px 4px 0px rgba(14, 186, 199, 0.95);
}
footer div.social-media-links a:hover svg.glow {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><f…ter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
  filter: blur(2px);
}
footer div.social-media-links a:hover svg.glow path,
footer div.social-media-links a:hover svg.glow circle {
  fill: rgba(14, 186, 199, 0.6);
}
footer div.social-media-links a:hover svg path,
footer div.social-media-links a:hover svg circle {
  fill: #0ebac7;
}
</style>
</head>
<body>
  <div class="browser">
  <div class="chrome">
    <a href="#" class="red"></a>
    <a href="#" class="amber"></a>
    <a href="#" class="green"></a>
    <div class="url"></div>
  </div>
  <h1></h1>
  <h2>Hover over the icons at the bottom of the page.</h2>
  <footer>
    <div class="social-media-links">
      <ul>
        <li>
          <!-- twitter -->
          <a href="#">
            <svg class="glow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
              <path class="st0" d="M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
              <path class="st0" d="M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1"/>
            </svg>
          </a>
        </li>
        <li>
          <!-- facebook -->
          <a href="#">
            <svg class="glow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
              <path class="st0" d="M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
              <path class="st0" d="M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z"/>
            </svg>
          </a>
        </li>
        <li>
          <!-- youtube -->
          <a href="#">
            <svg class="glow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
              <path class="st0" d="M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
              <path class="st0" d="M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z"/>
            </svg>
          </a>
        </li>
        <li>
          <!-- instagram -->
          <a href="#">
            <svg class="glow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
              <path class="st0" d="M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z"/>
              <path class="st0" d="M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z"/>
              <circle class="st0" cx="22.9" cy="7.1" r="1.8"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
              <path class="st0" d="M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z"/>
              <path class="st0" d="M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z"/>
              <circle class="st0" cx="22.9" cy="7.1" r="1.8"/>
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </footer>
</div>
</body>
</html>

8. By Riley Shaw

Made by Riley Shaw. Simple slide-out footer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">  
<style>
main {
  position: relative;
  z-index: 1;
  margin-bottom: 180px;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
}

header {
  padding-left: 1em;
  font: bold 16px/48px sans-serif;
  color: #eee;
  background: #222;
}

main {
  color: #222;
  background: #eee;
}

article {
  width: 540px;
  margin: auto;
  padding: 60px 0 24px;
}
article h1, article p {
  margin-bottom: 1.2em;
}
article h1 {
  width: 100%;
  border-bottom: 1px solid #222;
  font: 30px serif;
}
article p {
  font: 24px/1.4em serif;
}

footer {
  text-align: center;
  background: #222;
}
footer a {
  border-bottom: 1px solid #666;
  color: #eee;
  font: 24px/180px serif;
  text-decoration: none;
}
</style>
</head>
<body>
  <header>
  <h1>
    Simple Slide-Out Footer
  </h1>
</header>
<main>
  <article>
    <h1>
      Chapter 1
    </h1>
    <p>
Text Here
    </p>
  </article>
</main>
<footer>
  <a href="#chapter2">Continue to Chapter 2</a>
</footer>
</body>
</html>