Verwandte Themen

VuroxDerWeeb
16.11.2022, 16:44
Mit Bildern
Mit Links
navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}
Bild zum Beitrag
HTML, Webseite, CSS, Webentwicklung
1 Antwort
durmics
06.11.2022, 00:15
Mit Bildern
React Webseite mit Suchfunktion mit mehreren Seiten?

Hallo,

ich hatte mal früher kleine Anwendungen mit VB.NET für Windows-Systeme entwickelt und möchte jetzt mit React anfangen. Ich würde mich komplett als Anfänger bezeichnen und muss deshalb Fragen stellen.

Als Projekt habe ich mir folgendes vorgestellt:

Es gibt ein Kanal auf YouTube und es werden Fragen von Leuten vorgelesen und sie werden im Video beantwortet.

Ich möchte eine Webseite erstellen mit all diese Fragen und zu jeder Frage ein "Button", wenn man ihn anklickt ist unten oder irgendwo an der Seite ein Video-Player von YouTube und das Video wird abgespielt ab dem Zeitpunkt wo die Frage im Video vorgelesen wird.

Ich habe mir alle Fragen bereits aufgeschrieben und hätte alle Links zu den Fragen im Video.

Da es mehrere Videos gibt, möchte ich eine Suchfunktion integrieren, aber ich weiß nicht, ob ich für jedes Video (Teil1, Teil2,...) eine neue Seite im React erstellen soll und wie ich dann die Suchfunktion so programmiere, dass alle Seiten durchgesucht werden. Ich habe im Internet gesucht und viele benutzen .JSON für Suchfunktion, aber ich denke, dass bei mir mit .JSON nicht funktionieren wird.

Es sind über 80+ YouTube-Videos mit jeweils ca. 15-30 Fragen.

Ich möchte alles selber machen/lernen und möchte auch nicht, dass jemand mir alles vorprogrammiert.. Es wäre mir sehr hilfreich mir die richtige Richtung zu zeigen, kurz und grob erklären, mit welchen Komponenten ich arbeiten soll usw.

Hier ein Beispiel wie es ausschauen soll ungefähr:

Das design ist nicht so wichtig wie die Funktion und Struktur der Programmierung.

Vielen Dank schon mal!

Bild zum Beitrag
Webseite, JavaScript, React, JSON
1 Antwort
unangepasstTREU
05.11.2022, 18:03
An die Webdesigner: was kostet es in etwa eine Website mit folgendem Inhalt programmieren zu lassen?

Ich plane im Moment (momentan noch rein hypothetisch) die Gründung einer kleinen eigenen Firma, bzw plane mich solo selbständig zu machen als Grafik Designerin, aber auch als Künstlerin. Also ich möchte neben den üblichen Grafik Design Arbeiten auch Kunst verkaufen. Handgemachte Zeichnungen und Malereien sowie digitale Illustrationen auf verschiedenen Printmedien, z.b als Postkarte, Poster, Jahreskalender, Kinder Bilderbücher etc. Dazu also auch einen kleinen online shop haben wo ich meine Kunst verkaufen kann. + möchte anbieten das Kunden mir eigene Bilder von sich, ihrem Haustier oder sonstiges einreichen könnem, damit ich diese als Vorlage für Zeichnungen und Malereien verwenden und dem Kunden verkaufen kann.

Und jetzt bin ich eben gerade dabei mir in etwa die Kosten auszurechnen die ich zu Beginn der Firmengründung hätte. Also wie viel Startkapital ich brauchen werde. Dazu möchte ich gerade mal wissen wie viel alleine die Website mich schon kosten wird. Ich kann die Website zwar selbst designen, aber nicht programieren. Das macht es aber denke ich zumindest schon mal etwas günstiger, als wenn der Webdesigner auch die komplette kreative Gestaltung der Website übernehmen müsste.

Daher meine Frage:

Mit wie viel Kosten (ungefähr) für die Programmierung (nach meinem eigenen Design) einer kleinen einfachen Website für mich als Grafik Designerin, mit Button zum gelangen auf einen separaten kleinen einfachen online Shop, muss ich rechnen?

Online-Shop, Webseite, Webdesign, Webentwicklung
5 Antworten
JonasGiesskanne
02.11.2022, 14:33
Mit Umfrage
Wie findet ihr das neue YouTube-Design?

Seit kurzem sieht YouTube mal wieder komplett anders aus, die Buttons sind jetzt stark abgerundet genauso wie die Thumbnails und der Abo-Button ist jetzt weiß und nicht mehr rot. Aber die wohl größte Änderung ist das Ambiente-Licht um das Video herum, wirklich cool finde ich.

Habe das Design zuerst auf meinem TV bekommen, später auf der mobilen Website und gestern oder vorgestern auch in der Android-App.

Ich persönlich find das Design echt klasse, sieht noch moderner aus und die Like, Clips usw. Button sind jetzt weniger groß und man kann glaube ich auch mehr vom Top-Comment lesen ohne auf die Kommentare zu gehen.

Finde auch, dass es jetzt viel besser zusammenpasst von den verschiedenen Geräten, selbe Buttons z.B. auf TV und mobile App. Wirkt mehr wie aus einem Guss.

Das einzige was ich nur wirklich doof finde ist, dass man in der TV-App jetzt nicht mehr direkt den ganzen Titel und vorallem das Upload-Datum sehen kann. Als der Titel usw. noch oben im Bild stand konnte man beides noch komplett sehen wenn ohne deaufzuklicken. Bei Videos wo z.B. relativ weit hinten im Titel 1/2 oder 2/2 steht muss man jetzt erst auf den Titel um zu sehen welcher Teil es ist. Was natürlich cool ist ist dass man am TV jetzt auch die Videobeschreibung lesen kann. Das einzige was nun noch fehlt ist eine Kommentar-Ansicht 😄

Aber am TV ist meiner Meinung nach das beste neue Feature dass man die Kapitel sehen kann, das ist wirklich super cool und man kommt schneller dahin wo man will. Außerdem sieht man jetzt auch dort welche Stelle am meisten geschaut wurde.

Ist okay 39%
Finde es mega gut 👍 28%
Ist mir egal 🤷‍♂️ 17%
Mag es überhaupt nicht 👎 11%
Finde es genauso gut wie das alte 6%
iPhone, Video, cool, YouTube, App, Fernsehen, TV, Google, Webseite, Design, Social Media, Android, neues design..., TV app, youtube design, YouTube-Kanal
4 Antworten

Meistgelesene Beiträge zum Thema Webseite
Mehr meistgelesene Fragen zu Webseite