Danilo Di Cuia
3 years ago
commit
9d863a3bb2
12 changed files with 260 additions and 0 deletions
@ -0,0 +1,114 @@ |
|||||||
|
/* |
||||||
|
* Globals |
||||||
|
*/ |
||||||
|
|
||||||
|
/* Links */ |
||||||
|
a, |
||||||
|
a:focus, |
||||||
|
a:hover { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.cover-container { |
||||||
|
position:relative; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Base structure |
||||||
|
*/ |
||||||
|
|
||||||
|
html, |
||||||
|
body { |
||||||
|
height: 100%; |
||||||
|
/* background-color: #333; */ |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
display: -ms-flexbox; |
||||||
|
display: -webkit-box; |
||||||
|
display: flex; |
||||||
|
-ms-flex-pack: center; |
||||||
|
-webkit-box-pack: center; |
||||||
|
justify-content: center; |
||||||
|
color: #fff; |
||||||
|
/* text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); */ |
||||||
|
/* box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); */ |
||||||
|
} |
||||||
|
|
||||||
|
.cover-container { |
||||||
|
max-width: 42em; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
* Header |
||||||
|
*/ |
||||||
|
.masthead { |
||||||
|
margin-bottom: 2rem; |
||||||
|
} |
||||||
|
|
||||||
|
.masthead-brand { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-masthead .nav-link { |
||||||
|
padding: .25rem 0; |
||||||
|
font-weight: 700; |
||||||
|
color: rgba(255, 255, 255, .5); |
||||||
|
background-color: transparent; |
||||||
|
border-bottom: .25rem solid transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-masthead .nav-link:hover, |
||||||
|
.nav-masthead .nav-link:focus { |
||||||
|
border-bottom-color: rgba(255, 255, 255, .25); |
||||||
|
} |
||||||
|
|
||||||
|
.nav-masthead .nav-link + .nav-link { |
||||||
|
margin-left: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-masthead .active { |
||||||
|
color: #fff; |
||||||
|
border-bottom-color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 48em) { |
||||||
|
.masthead-brand { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
.nav-masthead { |
||||||
|
float: right; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
* Cover |
||||||
|
*/ |
||||||
|
.cover { |
||||||
|
padding: 0 1.5rem; |
||||||
|
} |
||||||
|
.cover .btn-lg { |
||||||
|
padding: .75rem 1.25rem; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
* Footer |
||||||
|
*/ |
||||||
|
.mastfoot { |
||||||
|
color: rgba(255, 255, 255, .5); |
||||||
|
} |
||||||
|
|
||||||
|
.social { |
||||||
|
width:35px; |
||||||
|
margin:20px; |
||||||
|
} |
||||||
|
|
||||||
|
#canvas { |
||||||
|
position: absolute; |
||||||
|
top:0; |
||||||
|
left:0; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,71 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
<meta |
||||||
|
name="viewport" |
||||||
|
content="width=device-width, initial-scale=1, shrink-to-fit=no" |
||||||
|
/> |
||||||
|
<meta name="description" content="" /> |
||||||
|
<meta name="author" content="" /> |
||||||
|
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico" /> |
||||||
|
|
||||||
|
<title>Cover Template for Bootstrap</title> |
||||||
|
|
||||||
|
<link |
||||||
|
rel="canonical" |
||||||
|
href="https://getbootstrap.com/docs/4.0/examples/cover/" |
||||||
|
/> |
||||||
|
|
||||||
|
<link |
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" |
||||||
|
rel="stylesheet" |
||||||
|
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" |
||||||
|
crossorigin="anonymous" |
||||||
|
/> |
||||||
|
<!-- Custom styles for this template --> |
||||||
|
<link href="cover.css" rel="stylesheet" /> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body class="text-center"> |
||||||
|
<div id="canvas"></div> |
||||||
|
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> |
||||||
|
<!-- <header class="masthead mb-auto"> |
||||||
|
<div class="inner"> |
||||||
|
<h3 class="masthead-brand">Cover</h3> |
||||||
|
<nav class="nav nav-masthead justify-content-center"> |
||||||
|
<a class="nav-link active" href="#">Home</a> |
||||||
|
<a class="nav-link" href="#">Features</a> |
||||||
|
<a class="nav-link" href="#">Contact</a> |
||||||
|
</nav> |
||||||
|
</div> |
||||||
|
</header> --> |
||||||
|
|
||||||
|
<main role="main" class="inner cover"> |
||||||
|
<img src="logo.svg" width="400" /> |
||||||
|
<div class="inner"> |
||||||
|
<a title="facebook" href="https://www.facebook.com/letsswingmateraa" |
||||||
|
><img class="social" src="icons/facebook.svg" |
||||||
|
/></a> |
||||||
|
<a title="instagram" href="https://www.instagram.com/letsswingmatera/" |
||||||
|
><img class="social" src="icons/instagram.svg" |
||||||
|
/></a> |
||||||
|
<a |
||||||
|
title="tiktok" |
||||||
|
href="https://www.tiktok.com/login?redirect_url=https%3A%2F%2Fwww.tiktok.com%2F%40letsswingmatera&lang=en&enter_method=mandatory" |
||||||
|
><img class="social" src="icons/tiktok.svg" |
||||||
|
/></a> |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
|
||||||
|
<footer class="mastfoot mt-auto"></footer> |
||||||
|
</div> |
||||||
|
|
||||||
|
<script |
||||||
|
type="text/javascript" |
||||||
|
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js" |
||||||
|
></script> |
||||||
|
|
||||||
|
<script src="sketch.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
var images = []; |
||||||
|
function preload() { |
||||||
|
for (let i = 1; i < 5; i++) { |
||||||
|
images.push(new Forma(loadImage(`forme/${i}.png`))); |
||||||
|
} |
||||||
|
} |
||||||
|
function setup() { |
||||||
|
const myCanvas = createCanvas(window.innerWidth, window.innerHeight); |
||||||
|
myCanvas.parent("canvas"); |
||||||
|
} |
||||||
|
|
||||||
|
function draw() { |
||||||
|
blendMode(BLEND); |
||||||
|
background(255); |
||||||
|
blendMode(MULTIPLY); |
||||||
|
images.forEach((d) => d.draw()); |
||||||
|
} |
||||||
|
|
||||||
|
class Forma { |
||||||
|
constructor(img) { |
||||||
|
this.img = img; |
||||||
|
this.x = random(0, window.innerWidth); |
||||||
|
this.y = random(0, window.innerHeight); |
||||||
|
this.dx = random(-1, 1) * 0.5; |
||||||
|
this.dy = random(-1, 1) * 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
draw() { |
||||||
|
this.x += this.dx; |
||||||
|
this.y += this.dy; |
||||||
|
if (this.x > window.innerWidth + 400) { |
||||||
|
this.dx = -this.dx; |
||||||
|
} |
||||||
|
if (this.x < -400) { |
||||||
|
this.dx = -this.dx; |
||||||
|
} |
||||||
|
|
||||||
|
if (this.y > window.innerHeight + 400) { |
||||||
|
this.dy = -this.dy; |
||||||
|
} |
||||||
|
if (this.y < -400) { |
||||||
|
this.dy = -this.dy; |
||||||
|
} |
||||||
|
|
||||||
|
image(this.img, this.x, this.y); |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue