Front Page Header

Link to article: Front Page Header.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,500&display=swap');

/* *** ALERT BAR *** */

.alertbar {
    color: #700;
    background: #fff url('https://scp-wiki.wdfiles.com/local--files/theme%3Aredtape/scp_trans.png') center center no-repeat;
    font-weight: bold;
    -webkit-box-shadow: 0px 0px 13px -7px rgba(5,5,5,0.75);
            box-shadow: 0px 0px 13px -7px rgba(5,5,5,0.75);
    font-family: 'Overpass Mono', monospace;
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
    margin: 0.5rem 0;
    padding: 0rem 0.5rem;
    -webkit-transition: -webkit-box-shadow 300ms ease-in-out;
    transition: -webkit-box-shadow 300ms ease-in-out;
    -o-transition: box-shadow 300ms ease-in-out;
    transition: box-shadow 300ms ease-in-out;
    transition: box-shadow 300ms ease-in-out, -webkit-box-shadow 300ms ease-in-out;
}

.alertbar:hover {    -webkit-box-shadow: 0px 0px 13px -4px rgba(5,5,5,0.75);    box-shadow: 0px 0px 13px -4px rgba(5,5,5,0.75);}

.alertbar > p:nth-child(1) {margin-top: 0.25rem;margin-bottom: 0.5rem;}
.alertbar > p:nth-child(n+2) {margin-bottom: 0.25rem;}
.classified {letter-spacing: 7px; font-size: 3rem;font-family: 'Inter', sans-serif;margin-left: 7px;}
.classified p {margin: -1.6rem;}
.classified a, .classified a:hover, .classified a:visited {color: #700; text-decoration: none;}

/* *** CONTEST BAR *** */

.contest {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/scp8000contesthub/banner.jpg');
    background-size: cover;
    background-position: center 31%;
    border: none;
    padding: 1rem;
    transition: all ease-in-out 500ms;
    background-color: #fff0;
    background-blend-mode: darken;
}

.contest a {
    font-family: 'Cabin', sans-serif;
    color: white;
    font-size: 300%;
    text-shadow: 2px 2px #000;
    word-break: break-word;
    line-height: 80%;
}

.contest:hover {
  background-color: #89CFF0;
}

.contest p {
    line-height: 150%;
}

@media only screen and (max-width: 666px) {
.alertbar > p:nth-child(1) {margin-bottom: 0.75rem;}
}


.goblincon {
  background-image: url("https://cdn.discordapp.com/attachments/924430974073335858/1109129953552891975/bannergoblin_frontpage.png");
  background-size: cover;
  background-position: 50% 60%;
  width: 95%;
  padding: 5px;
  font-family: 'Instrument Sans', sans-serif;
  color: white;
  font-size: 300%;
  border: none;
}

.gobtext {
  position: relative;
  top: 20%;
  transform: translate(30%, -40%);
}

.goblincon a, .goblincon a:hover, .goblincon a:visited {color: #ffffff;}

.remixcon {

}

(none)

(none)

```
box
```
```
alertbar
```
```
classified
```
```
box
```
```
alertbar
```
```
classified
```
```
box
```
```
alertbar
```
```
contest
```

[[iftags +fragment]]

[!-- EVERYTHING INSIDE THE IFTAGS IS JUST A PREVIEW -- EDIT THE VAR BLOCK BELOW IF YOU WANT TO CHANGE THE TEXT IN THE CONTEST/SURVEY MODULES --]



[[div class="box alertbar"]]
WARNING: THE FOUNDATION DATABASE IS
[[div class="classified"]]
[[[about-the-scp-foundation|CLASSIFIED]]]
[[/div]]
~~~~~
UNAUTHORIZED PERSONNEL WILL BE TRACKED, LOCATED, AND DETAINED 
[[/div]]

[[/iftags]]





[!-- VAR BLOCK -- EDIT THE TEXT IN HERE IF YOU WANNA CHANGE THE TEXT, OR THE CSS MODULE BELOW IF YOU WANT TO STYLE IT. --]


[!-- {$classified}
[[div class="box alertbar"]]
WARNING: THE FOUNDATION DATABASE IS
[[div class="classified"]]
[https://scp-wiki.wikidot.com/about-the-scp-foundation CLASSIFIED]
[[/div]]
~~~~~
UNAUTHORIZED PERSONNEL WILL BE TRACKED, LOCATED, AND DETAINED 
[[/div]]
[!-- --]

[!-- {$contest}
[[div class="box alertbar contest"]]
[https://scp-wiki.wikidot.com/scp8000contesthub SCP-8000 Contest]
[[/div]]
[!-- --]

[!-- {$survey}
= **Don't forget to fill out this year's [https://forms.gle/UKAbZMWd7BjtMAWF9 Community Survey] and help the site! Survey closes on 02.1.2024.**
[!-- --]





[[module CSS]]
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,500&display=swap');

/* *** ALERT BAR *** */

.alertbar {
    color: #700;
    background: #fff url('https://scp-wiki.wdfiles.com/local--files/theme%3Aredtape/scp_trans.png') center center no-repeat;
    font-weight: bold;
    -webkit-box-shadow: 0px 0px 13px -7px rgba(5,5,5,0.75);
            box-shadow: 0px 0px 13px -7px rgba(5,5,5,0.75);
    font-family: 'Overpass Mono', monospace;
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
    margin: 0.5rem 0;
    padding: 0rem 0.5rem;
    -webkit-transition: -webkit-box-shadow 300ms ease-in-out;
    transition: -webkit-box-shadow 300ms ease-in-out;
    -o-transition: box-shadow 300ms ease-in-out;
    transition: box-shadow 300ms ease-in-out;
    transition: box-shadow 300ms ease-in-out, -webkit-box-shadow 300ms ease-in-out;
}

.alertbar:hover {    -webkit-box-shadow: 0px 0px 13px -4px rgba(5,5,5,0.75);    box-shadow: 0px 0px 13px -4px rgba(5,5,5,0.75);}

.alertbar > p:nth-child(1) {margin-top: 0.25rem;margin-bottom: 0.5rem;}
.alertbar > p:nth-child(n+2) {margin-bottom: 0.25rem;}
.classified {letter-spacing: 7px; font-size: 3rem;font-family: 'Inter', sans-serif;margin-left: 7px;}
.classified p {margin: -1.6rem;}
.classified a, .classified a:hover, .classified a:visited {color: #700; text-decoration: none;}

/* *** CONTEST BAR *** */

.contest {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/scp8000contesthub/banner.jpg');
    background-size: cover;
    background-position: center 31%;
    border: none;
    padding: 1rem;
    transition: all ease-in-out 500ms;
    background-color: #fff0;
    background-blend-mode: darken;
}

.contest a {
    font-family: 'Cabin', sans-serif;
    color: white;
    font-size: 300%;
    text-shadow: 2px 2px #000;
    word-break: break-word;
    line-height: 80%;
}

.contest:hover {
  background-color: #89CFF0;
}

.contest p {
    line-height: 150%;
}

@media only screen and (max-width: 666px) {
.alertbar > p:nth-child(1) {margin-bottom: 0.75rem;}
}


.goblincon {
  background-image: url("https://cdn.discordapp.com/attachments/924430974073335858/1109129953552891975/bannergoblin_frontpage.png");
  background-size: cover;
  background-position: 50% 60%;
  width: 95%;
  padding: 5px;
  font-family: 'Instrument Sans', sans-serif;
  color: white;
  font-size: 300%;
  border: none;
}

.gobtext {
  position: relative;
  top: 20%;
  transform: translate(30%, -40%);
}

.goblincon a, .goblincon a:hover, .goblincon a:visited {color: #ffffff;}

.remixcon {

}
[[/module]]

Front Page Header

Module Styles

Inline Styles

Includes

CSS Classes

Page Source