The header of my website was heavily inspired from the way Allan Mckay created his.
Firstly, I chose a template to fit my website header. One thing to accomplish first was the simple change in the strip's background color which was #96CBD8 on the color palette. Then I moved on to add my brand name "Hipno" with the Lulo Clean font and an effect of a hologram.
For the search bar that my website contains I utilized HTML code in order to design it and give it the function for searching within my website. I simply put in this code as follows:
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Search Bar Demo</title>
<style>
body {
background-color: #96CBD8;
margin: 10px 40%;
}
form {
background-color: #96CBD8;
width: 300px;
height: 44px;
border-radius: 5px;
display:flex;
flex-direction:row;
align-items:center;
}
input {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 100%;
padding: 6px 10px;
}
::placeholder {
color: #fff;
opacity: 0.7;
}
svg {
color: #fff;
fill: currentColor;
width: 24px;
height: 24px;
padding: 10px;
}
button {
all: unset;
cursor: pointer;
width: 44px;
height: 44px;
}
</style>
</head>
<body>
<form role="search" id="form">
<input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
<button>
<svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171
.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79
.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.36
4 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'pagedart.com';
function submitted(event) {
event.preventDefault();
const url = google + site + '+' + q.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', submitted);
</script>
</body>
</html>
I replaced certain parts of this HTML code to match the color of the strip background that I have set that was #96CBD8 on the color palette. The template for the tabs of my website was already there when I was only starting out in the website creation. I only changed the color of the button and the color whenever the cursor hovers over each tab you would select. That would be the finished product of my header of the website for Hipno.
It is good that you posted this. Please remove the white formatting using the 'T' button in your edit post section (as shown in class), and keep the formatting/ font colours consistent. You also need to add more screenshots of how you changed your header. It is great you attempted changing the colour via the hex code in the existing HTML code, to get your desired colour, however only paste the code you changed. Don't copy a huge chunk of code without explaining or highlighting bits that you changed. State where did you find the search bar code? Why have you decided to include it? Are you happy with the end result?
ReplyDelete