-1
に分割されていて、このページを約4〜5時間作成することを学んでいて、なぜnavbar-logoと同じ行にナビゲーションリンクが表示されないのかわかりません。私はこのコードをより効率的で、より依存しない/エラーを起こしやすいようにする方法はありますか？ウェブページのレイアウトが
もう1つ質問したいのは、このウェブページでフレックスボックスを使用することができますか？使用されているCSSアニメーションはここで効率的ですか？ここで
body{
background-color: #000;
\t color: #f1f1f1;
\t animation: fade-in 2s 1;
}
header{
width: 100%;
height: 10%;
margin: auto;
}
.navbar-logo{
padding: 2px 0px 2px 100px;
\t position: absolute;
\t z-index: 100;
}
.navbar-logo-sub{
padding: 55px 0px 0px 200px;
}
#logo-main{
font-family: 'Didact Gothic', sans-serif;
\t color: white;
\t font-size: 40px;
\t font-weight: 800;
\t margin: 0;
}
.parenthesis1{
color: #b22121;
\t font-family: 'Bungee', cursive;
}
.parenthesis2{
color: #787878;
\t font-family: 'Bungee', cursive;
}
#logo-sub{
color: white;
\t font-size: 14px;
\t font-weight: 20;
\t font-family: 'Coming Soon', cursive;
}
#banner-image{
width: 50%;
\t padding-left: 20%;
\t filter: blur(3px);
\t position: relative;
\t padding-top: 5%;
}
#banner-text{
\t top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
\t font-size: 50px;
\t text-align: left;
}
nav{
\t padding: 0px 0px 0px 60%;
}
li{
\t float: left;
\t margin-right: 100px;
\t list-style-type: none;
}
a{
text-decoration: none;
\t color: white;
}
h1{
\t margin-top: 0px;
\t margin-bottom: -50px;
\t font-family: 'Permanent Marker', cursive;
\t font-weight: 300;
\t text-shadow: 4px 2px rgba(238, 238, 238, 0.5);
\t opacity: 0;
\t -webkit-animation: slide-in 3s 1 forwards;
}
div h1:nth-of-type(2){
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
div h1:nth-of-type(3){
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
div h1:nth-of-type(4){
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
div h1:nth-of-type(5){
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
div h1:nth-of-type(6){
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
div h1:nth-of-type(7){
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
div h1:nth-of-type(8){
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
div h1:nth-of-type(9){
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
@keyframes slide-in {
0%{
transform: rotateY(90deg) translateY(-50%);
opacity: 0.0;
}
100%{
transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
@-webkit-keyframes slide-in {
0%{
-webkit-transform: rotateY(90deg) translateY(25%);
opacity: 0.0;
}
100%{
-webkit-transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
@keyframes fade-in {
0%{
opacity: 0.0;
}
50%{
\t opacity: 0.5;
}
100%{
opacity: 1.0;
}<html>
<head>
\t <title>.whatsthecode.</title>
\t <link rel="stylesheet" href="index.css">
\t <link href="https://fonts.googleapis.com/css?
family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet">
</head>
<body>
\t <header>
\t <div class="navbar-logo">
\t <p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span>
<span class="parenthesis2">)</span></p>
\t </div>
\t <div class="navbar-logo-sub"><p id="logo-sub">{<html><span style="color: #b22121"><style></span><span style="color: #787878"><script></span>}</p></div>
\t \t <nav>
\t <ul>
\t <li><a href="index.html">Home</a></li>
\t <li><a href="index.html">FAQ</a></li>
\t <li><a href="index.html">About</a></li>
\t </ul>
</nav>
\t </header>
\t <section>
\t <div class="banner">
\t <img src="banner-background.png" id="banner-image">
\t <div id="banner-text"><h1>Your</h1><h1>web development</h1>
<h1>develops</h1><h1>here.</h1></div>
\t </div>
\t </section>
</body>
</html>