Question:
So I am making my portfolio and such, and I want the navbar to be transparent but have a blurred background so it looks sleek. The home-button element is also supposed to scale like the other svg’s in the navbar.
Repl link:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Login/Register Template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-1">
<div class="navbar">
<div class="home-button">
<a href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M6.906.664a1.749 1.749 0 0 1 2.187 0l5.25 4.2c.415.332.657.835.657 1.367v7.019A1.75 1.75 0 0 1 13.25 15h-3.5a.75.75 0 0 1-.75-.75V9H7v5.25a.75.75 0 0 1-.75.75h-3.5A1.75 1.75 0 0 1 1 13.25V6.23c0-.531.242-1.034.657-1.366l5.25-4.2Zm1.25 1.171a.25.25 0 0 0-.312 0l-5.25 4.2a.25.25 0 0 0-.094.196v7.019c0 .138.112.25.25.25H5.5V8.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v5.25h2.75a.25.25 0 0 0 .25-.25V6.23a.25.25 0 0 0-.094-.195Z"/></svg>
<h1>Home</h1>
</a>
</div>
<svg class="gift" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232c.268.318.497.668.68 1.042c.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793c-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707c-.337.392-.646.975-.879 1.793Z"/></svg>
<svg class="forums" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7 18q-.425 0-.713-.288T6 17v-2h13V6h2q.425 0 .713.288T22 7v12.575q0 .675-.613.938T20.3 20.3L18 18H7Zm-1-5l-2.3 2.3q-.475.475-1.088.213T2 14.575V3q0-.425.288-.713T3 2h13q.425 0 .713.288T17 3v9q0 .425-.288.713T16 13H6Zm9-2V4H4v7h11ZM4 11V4v7Z"/></svg>
</div>
<h1 class="author">SalladShooter</h1>
</div>
<div class="page-2">
<h1>Page-2</h1>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@900&display=swap');
@keyframes moveUp {
0% { transform: translateY(0em); }
50% { transform: translateY(-0.05em); }
100% { transform: translateY(0em); }
}
:root {
--fore: white;
--glow: rgba(5, 155, 5, 1);
--background: black;
}
body {
overflow-x: hidden;
margin: 0;
}
html {
height: 100vh;
width: 100%;
font-family: 'M PLUS Rounded 1c', Arial, sans-serif;
background: url(home-page.gif) no-repeat;
background-size: cover;
margin: 0;
}
.page-1,
.page-2 {
overflow-x: hidden;
margin: 0;
padding: 0;
}
.page-2 {
margin-top: 15em;
height: 100vh;
color: var(--fore);
background: var(--background);
}
* {
box-sizing: border-box;
}
.navbar::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
border-radius: 10px;
background-size: cover;
filter: blur(1px);
z-index: -1;
}
.navbar {
background-color: transparent;
text-align: center;
display: flex;
position: fixed;
top: 0;
width: calc(100% - 2em);
padding: 4px;
margin: 0.5em;
border: 4px solid var(--fore);
border-radius: 10px;
justify-content: space-between;
z-index: 1;
}
.navbar svg {
margin: 2px;
margin-top: auto;
margin-bottom: auto;
width: 4em;
height: 4em;
color: var(--fore);
}
.home-button {
display: flex;
margin-right: auto;
width: calc(100% - 2em);
}
.home-button h1 {
margin-left: 2px;
font-weight: 900;
font-size: 2em;
}
.home-button a {
display: flex;
text-decoration: none;
color: var(--fore);
}
.home-button a:hover {
text-decoration: underline;
}
body {
margin-top: 60px;
}
.author {
animation: 2s moveUp infinite;
text-align: center;
font-weight: 900;
font-size: 10vw;
margin-top: 30vh;
color: var(--fore);
text-shadow:
0 0 10px var(--glow),
0 0 20px var(--glow),
0 0 30px var(--glow),
0 0 40px var(--glow);
}
/* Media queries for responsive design */
@media (max-width: 768px) {
.navbar svg {
width: 3em;
height: 3em;
}
.home-button a {
font-size: 1em;
}
.author {
font-size: 5vw;
}
}