Geometric Header

Developer
Alexander Hadik
Size
4,345 Kb
Views
14,168
  1. Geometric Header Previews
  2. Geometric Header HTML Codes
  3. Geometric Header CSS Codes
  4. Geometric Header JS Codes

How do I make an geometric header?

What is a geometric header? How do you make a geometric header? This script and codes were developed by Alexander Hadik on 30 December 2022, Friday.

Geometric Header Previews
IQ Test

Geometric Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Geometric Header</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id='header' class="header header--frameA"> <div class="header__background header__background--orange"></div> <div class="header__background header__background--blue"></div> <div class="header__background header__background--green"></div> <div class="header__background header__background--ruby"></div> <div class="header__title"> <h3>Introduction</h3> <h1>What Is A Design System?</h1> </div> <div class="header__decorators header__decorators--left"> <div class="header__decorator"></div> <div class="header__decorator"></div> <div class="header__decorator"></div> </div> <div class="header__decorators header__decorators--right"> <div class="header__decorator"></div> <div class="header__decorator"></div> <div class="header__decorator"></div> </div>
</section>
<section class="controls"> <button id="orange">Orange</button> <button id="blue">Blue</button> <button id="green">Green</button> <button id="ruby">Ruby</button>
</section> <script src="js/index.js"></script>
</body>
</html>

Geometric Header - Script Codes CSS Codes

html, body { width: 100%; height: 100%;
}
body { display: flex; justify-content: center; align-items: center; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: white; flex-direction: column;
}
h1 { font-size: 3rem; margin: 0;
}
h3 { margin: 0; font-size: 1.5rem;
}
.header { width: 80%; height: 200px; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; background: transparent; transition: background 2s;
}
.header__background { position: absolute; width: 100%; height: 100%; opacity: 1; transition: opacity .4s;
}
.header__background--out.header__background--orange, .header__background--out.header__background--blue, .header__background--out.header__background--green, .header__background--out.header__background--ruby { opacity: 0;
}
.header__background--orange { background: linear-gradient(45deg, #ffdb70, #FFC20A);
}
.header__background--blue { background: linear-gradient(45deg, #83c4e4, #309cd1);
}
.header__background--green { background: linear-gradient(45deg, #76e295, #2ac858);
}
.header__background--ruby { background: linear-gradient(45deg, #e2526a, #b01e36);
}
.header__title { width: 50%; z-index: 1;
}
.header--frameA .header__decorator:nth-of-type(1) { transform: translate(-37%, 0px);
}
.header--frameA .header__decorator:nth-of-type(2) { transform: translate(-3%, 100px);
}
.header--frameA .header__decorator:nth-of-type(3) { transform: translate(-13%, 200px);
}
.header--frameB .header__decorator:nth-of-type(1) { transform: translate(-10%, 0px);
}
.header--frameB .header__decorator:nth-of-type(2) { transform: translate(-25%, 100px);
}
.header--frameB .header__decorator:nth-of-type(3) { transform: translate(-3%, 200px);
}
.header--frameC .header__decorator:nth-of-type(1) { transform: translate(-57%, 0px);
}
.header--frameC .header__decorator:nth-of-type(2) { transform: translate(-20%, 100px);
}
.header--frameC .header__decorator:nth-of-type(3) { transform: translate(-5%, 200px);
}
.header--frameD .header__decorator:nth-of-type(1) { transform: translate(-37%, 0px);
}
.header--frameD .header__decorator:nth-of-type(2) { transform: translate(-20%, 100px);
}
.header--frameD .header__decorator:nth-of-type(3) { transform: translate(-8%, 200px);
}
.header__decorators { position: absolute; width: 50%; height: 100%;
}
.header__decorators--left { left: 0px; bottom: 0; transform: translate(-5%, -20%) rotate(165deg);
}
.header__decorators--right { right: 0; transform: translate(5%, 20%) rotate(-15deg);
}
.header__decorator { position: absolute; height: 100px; width: 100%; background: linear-gradient(75deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.25) 100%); transition: transform .2s;
}

Geometric Header - Script Codes JS Codes

'use strict';
var orange = document.querySelector('#orange');
var blue = document.querySelector('#blue');
var green = document.querySelector('#green');
var ruby = document.querySelector('#ruby');
var orangeHeader = document.querySelector('.header__background--orange');
var blueHeader = document.querySelector('.header__background--blue');
var greenHeader = document.querySelector('.header__background--green');
var rubyHeader = document.querySelector('.header__background--ruby');
var headerBackgrounds = [orangeHeader, blueHeader, greenHeader, rubyHeader];
var headerFrameClasses = ['header--frameA', 'header--frameB', 'header--frameC', 'header--frameD'];
var header = document.querySelector('#header');
function transitionBackgroundsOut() { for (var _iterator = headerBackgrounds, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { var _ref; if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; } var headerBackground = _ref; headerBackground.classList.add('header__background--out'); }
}
function clearHeaderFrameClasses() { for (var _iterator2 = headerFrameClasses, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { var _ref2; if (_isArray2) { if (_i2 >= _iterator2.length) break; _ref2 = _iterator2[_i2++]; } else { _i2 = _iterator2.next(); if (_i2.done) break; _ref2 = _i2.value; } var frameClass = _ref2; header.classList.remove(frameClass); }
}
orange.addEventListener('click', function () { transitionBackgroundsOut(); clearHeaderFrameClasses(); orangeHeader.classList.remove('header__background--out'); header.classList.add('header--frameA');
});
blue.addEventListener('click', function () { transitionBackgroundsOut(); clearHeaderFrameClasses(); blueHeader.classList.remove('header__background--out'); header.classList.add('header--frameB');
});
green.addEventListener('click', function () { transitionBackgroundsOut(); clearHeaderFrameClasses(); greenHeader.classList.remove('header__background--out'); header.classList.add('header--frameC');
});
ruby.addEventListener('click', function () { transitionBackgroundsOut(); rubyHeader.classList.remove('header__background--out'); header.classList.add('header--frameD');
});
Geometric Header - Script Codes
Geometric Header - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded December 30, 2022
Rating 3
Size 4,345 Kb
Views 14,168
Do you need developer help for Geometric Header?

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!

Alexander Hadik (ahadik) Script Codes
Name
Pricing Cards V3
IOPS Selector
Pricing Table
Basil Tree
Pricing Cards V2
HSL SVG Gradient
Transcriptic Typography
Red Pill or Blue Pill But Only CSS
Pricing View with Map
Loader
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!