@font-face {
font-family: segoeuithis;
src: url('');
}
@font-face {
font-family: segoeuithis;
src: url('');
font-weight: bold;
}
@font-face {
font-family: segoeuithis;
src: url('');
font-style: italic;
}
@font-face {
font-family: segoeuithis;
src: url('');
font-style: italic;
font-weight: bold;
}
@font-face {
font-family: "SegoeMC";
src: url("") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
font-family: 'segoeuithis';
margin: 0;
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0,0,0,1.5);
/* aquarium image - maybe change */
background-image:
linear-gradient(to bottom, rgba(0,0,0,0) 85%, rgba(0,0,0,0.9) 100%),
url('');
background-repeat: no-repeat, no-repeat;
background-position: center top, center top;
background-size: cover, cover;
/* smiley face*/
background-attachment: fixed, fixed;
background-color: #000; /* fallback */
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100vh;
display: flex;
flex-direction: column;
max-width: 1100px;
margin: 0 auto;
flex-wrap: nowrap;
}
#flex {
display: flex;
gap: 10px;
flex-wrap: nowrap;
align-items: flex-start;
}
.bg-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
pointer-events: none;
z-index: -1;
}
* {
box-sizing: border-box;
}
#container a {
color: #6ACBF1;
font-weight: bold;
text-decoration: none;
}
#container li a:hover {
color: #F0FFFF;
} aside { background: linear-gradient(to bottom, #2a5298cc, #1b365dcc); padding: 20px; font-size: smaller; border: 1px solid #4d72b1; border-radius: 8px; backdrop-filter: blur(2px); box-shadow: 0 0 10px #1b365d99; }
#header {
width: 100%;
background-color: #2050a8;
height: 150px;
background-image: var(--header-image);
background-size: 100%;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 50px 5px rgba(120, 180, 255, 0.5);
}
#navbar ul {
position: relative;
z-index: 1;
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar {
position: relative;
height: 40px;
width: 100%;
background: linear-gradient(to right, #1b365dcc, #2a5298cc, #1b365dcc);
border: 1px solid #4d72b1;
border-radius: 12px;
z-index: 0;
backdrop-filter: blur(3px);
box-shadow: 0 0 10px #1b365d99;
margin: 20px auto 10px auto;
overflow: hidden;
}
#navbar::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 8px;
width: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
z-index: -1;
pointer-events: none;
}
#navbar li {
padding-top: 10px;
}
#navbar li a {
color: #6ACBF1;
font-weight: 800;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
}
#navbar li a:hover {
color: #F0FFFF;
}
aside {
background: linear-gradient(to bottom, #2a5298cc, #1b365dcc);
width: 100%;
padding: 20px;
font-size: smaller;
border: 1px solid #4d72b1;
border-radius: 8px;
backdrop-filter: blur(2px);
box-shadow: 0 0 10px #1b365d99;
}
#leftSidebar h2:first-of-type {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.title-with-flag {
display: flex;
align-items: center;
justify-content: center;
gap: 15px; /* space between madobe gif (used to be flags may change later) + text */
font-size: 30px;
pointer-events: none;
}
.sidebar-header {
text-align: center;
margin-bottom: 10px;
}
.sidebar-header img {
display: block;
width: 160px;
height: auto;
margin: -10px auto -25px;
filter: drop-shadow(0 0 6px rgba(120,180,255,0.45));
}
.sidebar-header-divider {
width: 100%;
height: 1px;
margin: 10px 0 20px;
background: linear-gradient(
to right,
transparent,
rgba(200,230,255,0.6),
transparent
);
}
.title-flag {
width: 55px;
height: 70px;
}
Windows Template
members + links
latest releases
visor radio chanel
visor.net webpage
music
music.
here you can
© HTML5-Templates.com