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