Site under construction

Developer
Gianluca Guarini
Size
9,039 Kb
Views
12,144
  1. Site under construction Previews
  2. Site under construction HTML Codes
  3. Site under construction CSS Codes
  4. Site under construction JS Codes

How do I make an site under construction?

Simple splash page to use while a site is still under construction. What is a site under construction? How do you make a site under construction? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.

Site under construction Previews
IQ Test

Site under construction - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Site under construction</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<div id="fork"> <a target="_blank" href="https://github.com/GianlucaGuarini/site-under-construction">Fork this project on github</a>
</div>
<canvas id="c"></canvas>
<section class="main"> <div class="inner-content"> <header> <h1> <img src="https://gianlucaguarini.github.io/site-under-construction/demos/bower/assets/img/bower-logo.svg" /> </h1> </header> <p>Site under construction!</p> </div>
</section> <script src="js/index.js"></script>
</body>
</html>

Site under construction - Script Codes CSS Codes

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
/**
*
* Used to generate responsive styles according to the breakpoint we set into the variables file
*
*/
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden { display: none !important; visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible { visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */
}
.clearfix:after { clear: both;
}
html, body { font-family: "Questrial", sans-serif; display: table; position: relative; height: 100%; width: 100%; min-width: 320px; line-height: 1em; font-size: 1.2em; color: #fff; background: #00ACDD; overflow: hidden; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGFjZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDM1NDQiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -moz-radial-gradient(top left, #00acdd 0%, #003544 100%); background: -webkit-radial-gradient(top left, #00acdd 0%, #003544 100%); background: radial-gradient(top left, #00acdd 0%, #003544 100%);
}
@media only screen and (max-width: 320px) { html, body { font-size: 0.96em; }
}
a { color: #fff; text-decoration: none;
}
a:hover, a:active, a:focus { color: #ED1C24;
}
.main { display: table-cell; position: relative; vertical-align: middle; z-index: 1;
}
.main .inner-content { width: 40%; max-width: 400px; padding: 7% 10%; text-align: center; margin: 0 auto;
}
.main .inner-content h1 { margin: 0 0 1em;
}
.main .inner-content img { width: 100%; max-height: 100px;
}
.main .inner-content ul { margin: 1.4em 0 0;
}
.main .inner-content ul li { margin: 0.4em 0.4em 0; font-size: 1.4em; display: inline-block;
}
#c { position: absolute; top: 0; left: 0;
}
#fork { position: absolute; bottom: 20px; left: 10px; padding: 15px; font-size: 11px; background: rgba(0, 0, 0, 0.3);
}

Site under construction - Script Codes JS Codes

/**
*
* Author: Gianluca Guarini
* Contact: [email protected]
* Website: http://www.gianlucaguarini.com/
* Twitter: @gianlucaguarini
* https://github.com/GianlucaGuarini/site-under-construction
*
* Copyright (c) Gianluca Guarini
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/
var Delaunay;
(function() { "use strict"; var EPSILON = 1.0 / 1048576.0; function supertriangle(vertices) { var xmin = Number.POSITIVE_INFINITY, ymin = Number.POSITIVE_INFINITY, xmax = Number.NEGATIVE_INFINITY, ymax = Number.NEGATIVE_INFINITY, i, dx, dy, dmax, xmid, ymid; for(i = vertices.length; i--; ) { if(vertices[i][0] < xmin) xmin = vertices[i][0]; if(vertices[i][0] > xmax) xmax = vertices[i][0]; if(vertices[i][1] < ymin) ymin = vertices[i][1]; if(vertices[i][1] > ymax) ymax = vertices[i][1]; } dx = xmax - xmin; dy = ymax - ymin; dmax = Math.max(dx, dy); xmid = xmin + dx * 0.5; ymid = ymin + dy * 0.5; return [ [xmid - 20 * dmax, ymid - dmax], [xmid , ymid + 20 * dmax], [xmid + 20 * dmax, ymid - dmax] ]; } function circumcircle(vertices, i, j, k) { var x1 = vertices[i][0], y1 = vertices[i][1], x2 = vertices[j][0], y2 = vertices[j][1], x3 = vertices[k][0], y3 = vertices[k][1], fabsy1y2 = Math.abs(y1 - y2), fabsy2y3 = Math.abs(y2 - y3), xc, yc, m1, m2, mx1, mx2, my1, my2, dx, dy; /* Check for coincident points */ if(fabsy1y2 < EPSILON && fabsy2y3 < EPSILON) throw new Error("Eek! Coincident points!"); if(fabsy1y2 < EPSILON) { m2 = -((x3 - x2) / (y3 - y2)); mx2 = (x2 + x3) / 2.0; my2 = (y2 + y3) / 2.0; xc = (x2 + x1) / 2.0; yc = m2 * (xc - mx2) + my2; } else if(fabsy2y3 < EPSILON) { m1 = -((x2 - x1) / (y2 - y1)); mx1 = (x1 + x2) / 2.0; my1 = (y1 + y2) / 2.0; xc = (x3 + x2) / 2.0; yc = m1 * (xc - mx1) + my1; } else { m1 = -((x2 - x1) / (y2 - y1)); m2 = -((x3 - x2) / (y3 - y2)); mx1 = (x1 + x2) / 2.0; mx2 = (x2 + x3) / 2.0; my1 = (y1 + y2) / 2.0; my2 = (y2 + y3) / 2.0; xc = (m1 * mx1 - m2 * mx2 + my2 - my1) / (m1 - m2); yc = (fabsy1y2 > fabsy2y3) ? m1 * (xc - mx1) + my1 : m2 * (xc - mx2) + my2; } dx = x2 - xc; dy = y2 - yc; return {i: i, j: j, k: k, x: xc, y: yc, r: dx * dx + dy * dy}; } function dedup(edges) { var i, j, a, b, m, n; for(j = edges.length; j; ) { b = edges[--j]; a = edges[--j]; for(i = j; i; ) { n = edges[--i]; m = edges[--i]; if((a === m && b === n) || (a === n && b === m)) { edges.splice(j, 2); edges.splice(i, 2); break; } } } } Delaunay = { triangulate: function(vertices, key) { var n = vertices.length, i, j, indices, st, open, closed, edges, dx, dy, a, b, c; /* Bail if there aren't enough vertices to form any triangles. */ if(n < 3) return []; /* Slice out the actual vertices from the passed objects. (Duplicate the * array even if we don't, though, since we need to make a supertriangle * later on!) */ vertices = vertices.slice(0); if(key) for(i = n; i--; ) vertices[i] = vertices[i][key]; /* Make an array of indices into the vertex array, sorted by the * vertices' x-position. */ indices = new Array(n); for(i = n; i--; ) indices[i] = i; indices.sort(function(i, j) { return vertices[j][0] - vertices[i][0]; }); /* Next, find the vertices of the supertriangle (which contains all other * triangles), and append them onto the end of a (copy of) the vertex * array. */ st = supertriangle(vertices); vertices.push(st[0], st[1], st[2]); /* Initialize the open list (containing the supertriangle and nothing * else) and the closed list (which is empty since we havn't processed * any triangles yet). */ open = [circumcircle(vertices, n + 0, n + 1, n + 2)]; closed = []; edges = []; /* Incrementally add each vertex to the mesh. */ for(i = indices.length; i--; edges.length = 0) { c = indices[i]; /* For each open triangle, check to see if the current point is * inside it's circumcircle. If it is, remove the triangle and add * it's edges to an edge list. */ for(j = open.length; j--; ) { /* If this point is to the right of this triangle's circumcircle, * then this triangle should never get checked again. Remove it * from the open list, add it to the closed list, and skip. */ dx = vertices[c][0] - open[j].x; if(dx > 0.0 && dx * dx > open[j].r) { closed.push(open[j]); open.splice(j, 1); continue; } /* If we're outside the circumcircle, skip this triangle. */ dy = vertices[c][1] - open[j].y; if(dx * dx + dy * dy - open[j].r > EPSILON) continue; /* Remove the triangle and add it's edges to the edge list. */ edges.push( open[j].i, open[j].j, open[j].j, open[j].k, open[j].k, open[j].i ); open.splice(j, 1); } /* Remove any doubled edges. */ dedup(edges); /* Add a new triangle for each edge. */ for(j = edges.length; j; ) { b = edges[--j]; a = edges[--j]; open.push(circumcircle(vertices, a, b, c)); } } /* Copy any remaining open triangles to the closed list, and then * remove any triangles that share a vertex with the supertriangle, * building a list of triplets that represent triangles. */ for(i = open.length; i--; ) closed.push(open[i]); open.length = 0; for(i = closed.length; i--; ) if(closed[i].i < n && closed[i].j < n && closed[i].k < n) open.push(closed[i].i, closed[i].j, closed[i].k); /* Yay, we're done! */ return open; }, contains: function(tri, p) { /* Bounding box test first, for quick rejections. */ if((p[0] < tri[0][0] && p[0] < tri[1][0] && p[0] < tri[2][0]) || (p[0] > tri[0][0] && p[0] > tri[1][0] && p[0] > tri[2][0]) || (p[1] < tri[0][1] && p[1] < tri[1][1] && p[1] < tri[2][1]) || (p[1] > tri[0][1] && p[1] > tri[1][1] && p[1] > tri[2][1])) return null; var a = tri[1][0] - tri[0][0], b = tri[2][0] - tri[0][0], c = tri[1][1] - tri[0][1], d = tri[2][1] - tri[0][1], i = a * d - b * c; /* Degenerate tri. */ if(i === 0.0) return null; var u = (d * (p[0] - tri[0][0]) - b * (p[1] - tri[0][1])) / i, v = (a * (p[1] - tri[0][1]) - c * (p[0] - tri[0][0])) / i; /* If we're outside the tri, fail. */ if(u < 0.0 || v < 0.0 || (u + v) > 1.0) return null; return [u, v]; } }; if(typeof module !== "undefined") module.exports = Delaunay;
})();
var Sketch = { rezizeTimer:null, init: function() { var me = this; this.canvas = document.getElementById('c'); this.setViewport(); window.onresize = function() { clearTimeout(me.rezizeTimer); me.rezizeTimer = setTimeout(function(){ me.setViewport.call(me); me.createVertices.call(me); me.render.call(me); },200); }; this.createVertices(); this.render(); }, createVertices: function() { var i, x, y, gradient; this.vertices = new Array(~~(window.innerHeight/ window.innerWidth * 64)); for (i = this.vertices.length; i--;) { do { x = Math.random() - 0.5; y = Math.random() - 0.5; gradient = { color: Math.random() - 0.5 > 0 ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)' }; } while (x * x + y * y > 0.25); x = (x * 2.96875 + 0.5) * this.canvas.width; y = (y * 2.96875 + 0.5) * this.canvas.height; this.vertices[i] = [x, y, gradient]; } }, render: function() { var ctx = this.canvas.getContext('2d'); ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); var triangles = Delaunay.triangulate(this.vertices); for (i = triangles.length; i;) { ctx.beginPath(); var x1 = this.vertices[triangles[--i]][0], y1 = this.vertices[triangles[i]][1], x2 = this.vertices[triangles[--i]][0], y2 = this.vertices[triangles[i]][1], x3 = this.vertices[triangles[--i]][0], y3 = this.vertices[triangles[i]][1]; ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); var grd = ctx.createLinearGradient(x1, y1, x2, y3); // light blue grd.addColorStop(0, this.vertices[triangles[i]][2].color); // dark blue grd.addColorStop(1, 'transparent'); ctx.closePath(); ctx.fillStyle = grd; ctx.fill(); //ctx.stroke(); } }, setViewport: function() { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; }
};
Sketch.init();
Site under construction - Script Codes
Site under construction - Script Codes
Home Page Home
Developer Gianluca Guarini
Username GianlucaGuarini
Uploaded November 04, 2022
Rating 3.5
Size 9,039 Kb
Views 12,144
Do you need developer help for Site under construction?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gianluca Guarini (GianlucaGuarini) Script Codes
Name
The 3D Worrying Cubes
The Milk Glass
Riot and es6
Drunk on Google Maps
Tocca.js
Appletv
The Best Flash Site Ever
A Pen by Gianluca Guarini
CSS3 Breathing Particles
Mario Bros
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!