Pink Floyd pyramid

Developer
Ivan Sakoman
Size
3,054 Kb
Views
85,008
  1. Pink Floyd pyramid Previews
  2. Pink Floyd pyramid HTML Codes
  3. Pink Floyd pyramid CSS Codes
  4. Pink Floyd pyramid JS Codes

How do I make an pink floyd pyramid?

Dark side of the moon madeCSS rocks \m/. What is a pink floyd pyramid? How do you make a pink floyd pyramid? This script and codes were developed by Ivan Sakoman on 12 June 2022, Sunday.

Pink Floyd pyramid Previews
IQ Test

Pink Floyd pyramid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pink Floyd pyramid</title> <link href="https://fonts.googleapis.com/css?family=Nothing+You+Could+Do" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>PINK FLOYD</h1>
<div class="logo-wrapper"> <div class="line"></div> <div class="rainbow"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> <div class="c6"></div> </div> <svg class="pyramid" width="300px" height="260px" viewBox="0 0 300 260"> <!--INSET SHADOW--> <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer in=SourceAlpha> <feFuncA type="table" tableValues="1 0" /> </feComponentTransfer> <feGaussianBlur stdDeviation="8"/> <feOffset dx="1" dy="1" result="offsetblur"/> <feFlood flood-color="rgba(235,235,255,0.5)" result="color"/> <feComposite in2="offsetblur" operator="in"/> <feComposite in2="SourceAlpha" operator="in" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge> </filter> <!--GRADIENT--> <linearGradient id="my-gradient"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="transparent"/> </linearGradient> <polygon fill="#171717" filter="url(#inset-shadow)" points="150,0 0,260 300,260"/> <polygon fill="url(#my-gradient)" points="71,137 217.1,115.9 249.5,172.5 64.3,148.6 "/> </svg>
</div> <script src="js/index.js"></script>
</body>
</html>

Pink Floyd pyramid - Script Codes CSS Codes

body { background-color: #111; overflow: hidden; font-family: 'Nothing You Could Do', cursive;
}
h1 { color: white; letter-spacing: 4px; position: absolute; top: 70%; left: calc(50% - 110px);
}
.logo-wrapper { position: absolute; width: 100%; top: calc(50% - 200px);
}
.logo-wrapper .pyramid { position: absolute; left: calc(50% - 150px);
}
.logo-wrapper .line { width: 1500px; height: 10px; background-color: white; position: absolute; top: 280px; right: 50%; transform: rotate(-12deg);
}
.logo-wrapper .rainbow { position: absolute; left: 50%; top: 175px; transform: rotate(12deg); perspective: 100px; perspective-origin: left;
}
.logo-wrapper .rainbow div { width: 800px; height: 13px; transform: rotate3d(0, 1, 0, -10deg); margin-top: -1px;
}
.logo-wrapper .rainbow div.c1 { background-color: #bc1300;
}
.logo-wrapper .rainbow div.c2 { background-color: #cd4314;
}
.logo-wrapper .rainbow div.c3 { background-color: #ecc20e;
}
.logo-wrapper .rainbow div.c4 { background-color: #8c9f08;
}
.logo-wrapper .rainbow div.c5 { background-color: #66a8c2;
}
.logo-wrapper .rainbow div.c6 { background-color: #773676;
}

Pink Floyd pyramid - Script Codes JS Codes

// CSS only :)
Pink Floyd pyramid - Script Codes
Pink Floyd pyramid - Script Codes
Home Page Home
Developer Ivan Sakoman
Username ssaakkaa
Uploaded June 12, 2022
Rating 3.5
Size 3,054 Kb
Views 85,008
Do you need developer help for Pink Floyd pyramid?

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!

Ivan Sakoman (ssaakkaa) Script Codes
Name
3D flipping card
OnClick transition
Apple logo bubbles
Dropdown
Bootstrap example
Label expand
Responsive header
CSS tutorial
CSS work desk
Bootstrap header
Create amazing art & images 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!