Dies ist ein 404 Bootstrap Studio Projekt, welches du kostenlos herunterladen und für deine eigenen Projekte verwenden kannst. Bootstrap Studio ist eine Anwendung zur Erstellung von responsiven Webseiten und bietet zahlreiche Vorlagen und Funktionen, um die Erstellung von Webseiten zu vereinfachen. Mit diesem Projekt kannst du direkt loslegen und es als Ausgangsbasis für deine eigenen Projekte nutzen.

HTML:
<section class="fehler-seite">
    <div class="container">
        <div class="fehler-content">
            <div class="fehler-nummer">
                <h1>404</h1>
                <h2 class="fehler-heading">Hoppla! da Stimmt etwas nicht!<br /></h2>
                <p>Es tut uns leid, aber wir können die gesuchte Seite nicht finden.<br />Es ist wahrscheinlich etwas, was wir falsch gemacht haben, aber jetzt wissen wir es Bescheid<br />und wir werden versuchen, es zu beheben.<br />Probieren Sie in der Zwischenzeit eine der folgenden Optionen aus:<br /></p>
            </div>
            <div class="fehler-suche">
                <div class="input-group fehler-input-group"><input class="form-control" type="text" placeholder="SUCHE SCHLÜSSELWÖRTER . . ." /><span class="input-group-addon"><button class="btn" type="submit"><span><i class="fas fa-search" aria-hidden="true"></i></span></button></span></div>
            </div><a class="fehler-btn" href="#">zurück zur home</a>
        </div>
    </div>
</section>

CSS:
.fehler-seite {
  padding: 3rem 0 2rem;
}

.fehler-content {
  text-align: center;
}

.fehler-content .fehler-nummer h1 {
  font-size: 16rem;
}

.fehler-content .fehler-heading {
  font-size: 48px;
  font-weight: 300;
  color: #111111;
  margin-bottom: 26px;
  line-height: 1.2;
}

@media only screen and (max-width: 575px) {
  .fehler-content .fehler-heading {
    font-size: 30px;
  }
}

.fehler-content p {
  width: 70%;
  margin: 0 auto 55px;
  color: #777;
  font-size: .89rem;
}

@media only screen and (max-width: 575px) {
  .fehler-content p {
    width: 100%;
  }
}

.fehler-content .fehler-suche .fehler-input-group {
  border: 1px solid #d7d7d7;
  height: 60px;
  border-radius: 4px;
  padding: 0 1rem;
  max-width: 540px;
  margin: 50px auto;
}

.fehler-content .fehler-suche .fehler-input-group .form-control {
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  color: #111111;
  font-size: 14px;
  height: 60px;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon {
  display: flex;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button {
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button span:before {
  color: #646464;
  font-size: 20px;
  font-weight: 700;
  margin-left: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button:hover span {
  color: #111111;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button:hover span:before {
  color: #111111;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button:focus {
  outline: none;
}

.fehler-content .fehler-suche .fehler-input-group input.form-control::-webkit-input-placeholder, .fehler-content .fehler-suche .fehler-input-group textarea.form-control::-webkit-input-placeholder {
  color: #646464;
  font-size: 14px;
}

.fehler-content .fehler-suche .fehler-input-group input.form-control::-moz-placeholder, .fehler-content .fehler-suche .fehler-input-group textarea.form-control::-moz-placeholder {
  color: #646464;
  font-size: 14px;
}

.fehler-content .fehler-suche .fehler-input-group input.form-control:-ms-input-placeholder, .fehler-content .fehler-suche .fehler-input-group textarea.form-control:-ms-input-placeholder {
  color: #646464;
  font-size: 14px;
}

.fehler-content .fehler-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background-color: #111111;
  border-radius: 4px;
  padding: 14px 35px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.fehler-content .fehler-btn:hover {
  -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.5);
}

.fehler-seite {
  padding: 3rem 0 2rem;
}

.fehler-content {
  text-align: center;
}

.fehler-content .fehler-nummer h1 {
  font-size: 16rem;
}

.fehler-content .fehler-heading {
  font-size: 48px;
  font-weight: 300;
  color: #111111;
  margin-bottom: 26px;
  line-height: 1.2;
}

@media only screen and (max-width: 575px) {
  .fehler-content .fehler-heading {
    font-size: 30px;
  }
}

.fehler-content p {
  width: 70%;
  margin: 0 auto 55px;
  color: #777;
  font-size: .89rem;
}

@media only screen and (max-width: 575px) {
  .fehler-content p {
    width: 100%;
  }
}

.fehler-content .fehler-suche .fehler-input-group {
  border: 1px solid #d7d7d7;
  height: 60px;
  border-radius: 4px;
  padding: 0 1rem;
  max-width: 540px;
  margin: 50px auto;
}

.fehler-content .fehler-suche .fehler-input-group .form-control {
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  color: #111111;
  font-size: 14px;
  height: 60px;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon {
  display: flex;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button {
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button span:before {
  color: #646464;
  font-size: 20px;
  font-weight: 700;
  margin-left: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button:hover span {
  color: #111111;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button:hover span:before {
  color: #111111;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button:focus {
  outline: none;
}

.fehler-content .fehler-suche .fehler-input-group input.form-control::-webkit-input-placeholder, .fehler-content .fehler-suche .fehler-input-group textarea.form-control::-webkit-input-placeholder {
  color: #646464;
  font-size: 14px;
}

.fehler-content .fehler-suche .fehler-input-group input.form-control::-moz-placeholder, .fehler-content .fehler-suche .fehler-input-group textarea.form-control::-moz-placeholder {
  color: #646464;
  font-size: 14px;
}

.fehler-content .fehler-suche .fehler-input-group input.form-control:-ms-input-placeholder, .fehler-content .fehler-suche .fehler-input-group textarea.form-control:-ms-input-placeholder {
  color: #646464;
  font-size: 14px;
}

.fehler-content .fehler-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background-color: #111111;
  border-radius: 4px;
  padding: 14px 35px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.fehler-content .fehler-btn:hover {
  -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.5);
}

.fehler-seite {
  padding: 3rem 0 2rem;
}

.fehler-content {
  text-align: center;
}

.fehler-content .fehler-nummer h1 {
  font-size: 16rem;
}

.fehler-content .fehler-heading {
  font-size: 48px;
  font-weight: 300;
  color: #111111;
  margin-bottom: 26px;
  line-height: 1.2;
}

@media only screen and (max-width: 575px) {
  .fehler-content .fehler-heading {
    font-size: 30px;
  }
}

.fehler-content p {
  width: 70%;
  margin: 0 auto 55px;
  color: #777;
  font-size: .89rem;
}

@media only screen and (max-width: 575px) {
  .fehler-content p {
    width: 100%;
  }
}

.fehler-content .fehler-suche .fehler-input-group {
  border: 1px solid #d7d7d7;
  height: 60px;
  border-radius: 4px;
  padding: 0 1rem;
  max-width: 540px;
  margin: 50px auto;
}

.fehler-content .fehler-suche .fehler-input-group .form-control {
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  color: #111111;
  font-size: 14px;
  height: 60px;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon {
  display: flex;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button {
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button span:before {
  color: #646464;
  font-size: 20px;
  font-weight: 700;
  margin-left: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button:hover span {
  color: #111111;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button:hover span:before {
  color: #111111;
}

.fehler-content .fehler-suche .fehler-input-group .input-group-addon button:focus {
  outline: none;
}

.fehler-content .fehler-suche .fehler-input-group input.form-control::-webkit-input-placeholder, .fehler-content .fehler-suche .fehler-input-group textarea.form-control::-webkit-input-placeholder {
  color: #646464;
  font-size: 14px;
}

.fehler-content .fehler-suche .fehler-input-group input.form-control::-moz-placeholder, .fehler-content .fehler-suche .fehler-input-group textarea.form-control::-moz-placeholder {
  color: #646464;
  font-size: 14px;
}

.fehler-content .fehler-suche .fehler-input-group input.form-control:-ms-input-placeholder, .fehler-content .fehler-suche .fehler-input-group textarea.form-control:-ms-input-placeholder {
  color: #646464;
  font-size: 14px;
}

.fehler-content .fehler-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background-color: #111111;
  border-radius: 4px;
  padding: 14px 35px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.fehler-content .fehler-btn:hover {
  -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.5);
}

Bootstrap Studio Projekt Download | Bootstrap Studio Version: 6.4.1 | Bootstrap Version: 5.2