Anime

Dies ist eine Einreichung für Frontend Challenge – Dezemberausgabe, Glam Up My Markup: Winter Solstice

Was ich gebaut habe

CSS

*{
Rand: 0;
Polsterung: 0;
Boxgröße: border-box;
Schriftfamilie: „Trebuchet MS“, „Lucida Sans Unicode“, „Lucida Grande“, „Lucida Sans“, Arial, serifenlos;
}

Körper{
overflow-x:hidden ;
}
.main-width{
Breite: 1400px;
maximale Breite: 95 %;
Rand: 0 automatisch;
}
.hero{
Höhe: 100 %;
Breite: 100 %;
Mindesthöhe: 100 Vh;
Hintergrundbild: url(Tanjiro1.png);
Hintergrundgröße: 100 %;
Hintergrundwiederholung: keine Wiederholung;
}

.hero header .logo h2 a{
Anzeige: blockieren;
Schriftgröße: 30px;
Schriftstärke: 600;
Textdekoration: keine;
Farbe: weiß;
Schriftfamilie:'Noto Sans JP', serifenlos;
}

.hero-Header{
Anzeige: Flex;
align-items: center;
justify-content: space-between;
Polsterung: 40px 0 30px;

}

nav ul li{
Listenstil: keiner;
Anzeige: inline-block;

}

nav ul li a{
Textdekoration: keine;
Farbe: aliceblue;
Rand links: 80px;
Schriftgröße: 20px;
Schriftstärke: 600;
Rand unten: 2 Pixel durchgehend weiß;
Übergang: 4s;

}

nav ul li:not(:last-child) a:hover
nav ul li:not(:last-child) a:focus{
Rand unten: 2 Pixel durchgehend weiß;

}

nav ul li.active a{
Rand unten: 2 Pixel durchgehend weiß;
}

nav ul li.btn a{
Hintergrund: transparent;
Farbe: weiß;
Rand: 1px fest #f5dca8;
Polsterung: 9px 20px;
Randradius: 80px;
Zeilenhöhe: 1,4;
Schriftgröße: 18px;
Schriftstärke: 600;
Rand links: 150px;

}

nav ul li.btn:hover a{
Rand: 1 Pixel einfarbig weiß;
Farbe: schwarz;
Hintergrund: weiß;
Übergang: .4s;

}

.content{
padding-top: 140px;
}

.content .main-text{
Position: relativ;
Z-Index: 2;
Rand unten: 50px;

}

.content .main-text h6{
Schriftgröße: 14px;
Schriftstärke: 400;
Farbe: weiß;
Rand unten: 40px;

}

.content .main-text h1{
Schriftgröße: 60px;
Zeilenhöhe: 1;
Farbe: weiß;
Rand: 0px 0px 45px;
Schriftfamilie: 'Permanent Marker', kursiv;

}

.content .main-text p{
maximale Breite: 100 %;
Breite: 480px;
Farbe: weiß;
Zeilenhöhe: 1,8;
Schriftgröße: 15px;
Rand unten: 50px
}

.content .main-text a{
Anzeige: inline-block;
Textdekoration: keine;
Farbe: schwarz;
Hintergrund: weiß;
Rand: 1 Pixel einfarbig weiß;
Polsterung: 9px 25px;
Zeilenhöhe: 1,4;
Randradius: 30px;
Schriftgröße: 14px;
Schriftstärke: 500;

}

.content .main-text a:hover{
transform: scale(1.2);
Rand: 1px fest #f5dca8;
Hintergrund: transparent;
Farbe: weiß;
Übergang: .4s;

}

HTML

Anime

鬼滅の刃

• Jahreszeiten
• Folgen
• Manga
• Jetzt spielen

#1 Bester Anime
Es ist eine japanische Manga-Serie, geschrieben und illustriert von Koyoharu Gotōge,

Dämonentöter

Eine Familie wird von Dämonen angegriffen und nur zwei Mitglieder überleben – Tanjiro und seine Schwester Nezuko, die sich langsam in einen Dämon verwandelt. Tanjiro macht sich auf den Weg, ein Dämonentöter zu werden, um seine Familie zu rächen und seine Schwester zu heilen.....

Jetzt ansehen

Dies ist meine exklusive Anime-Website mit den besten animierten Schaltflächen und sanften Übergängen

Alle Rechte an Swally gehören mir

Das obige ist der detaillierte Inhalt vonAnime. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!