Build 5 vollständige und moderne UI-Design-Vorlagen

1. Einführung: Willkommen zu dem brandneuen Kurs, in dem Sie lernen können, wie Sie moderne und schöne Designvorlagen für Ihre Websites erstellen moderne und schöne Designvorlagen für Ihre Wenn Sie Ihr Portfolio aufbauen und anpassen möchten, werden Sie ein erfahrener Entwickler und Designer und lassen Sie sich einstellen. Dann ist dies der richtige Kurs für Sie. Wir werden zusammen fünf vollständige und moderne responsive Websites mit den drei Kerntechnologien HTML, CSS und JavaScript erstellen fünf vollständige und moderne responsive Websites mit den drei Kerntechnologien HTML, . Wenn Sie über Grundkenntnisse dieser Technologien verfügen. Und trotzdem haben Sie einige Probleme beim Erstellen der Websites. Oder wenn Sie Ihre Entwickler- und Designerfähigkeiten verbessern möchten , sind Sie bei uns genau richtig. Wir haben diesen Kurs entwickelt, um den Teilnehmern die besten Erfahrungen mit drei Kerntechnologien zu bieten den Teilnehmern die besten Erfahrungen und es ihnen zu ermöglichen, die am besten gestalteten Vorlagen zu erstellen , die ihre Kunden begeistern werden Wer wird fünf verschiedene komplette Websites erstellen. Und nicht nur die Teile von Grund auf neu, sie werden voller moderner, schöner und schöner Effekte und Designs sein. Wir werden mit relativ einfachen Projekten beginnen und uns auch mit einigen fortgeschrittenen Teilen befassen. In diesem Kurs können Sie sich die Inspirationen holen, die Ihnen helfen, Ihre Projekte zu verbessern und sie in Ihr Portfolio aufzunehmen Beherrschung nur dieser Kerntechnologien der Frontend-Webentwicklung Du kannst tolle und moderne Themes erstellen und einfach angestellt werden. Außerdem werden Sie über genügend Wissen verfügen, um weiterzumachen und andere Technologien zu erlernen, wie z. B. einige Frontend-Frameworks und Bibliotheken, die heutzutage sehr beliebt und sehr gefragt sind . 2. Über die Projekte: Hallo und willkommen zum Kurs. Wir freuen uns, Sie hier zu sehen. Wie Sie bereits wissen, werden wir fünf verschiedene vollständig responsive Websites mit HTML, CSS und JavaScript erstellen . In diesem Video werden wir jeden von ihnen durchgehen. Ich möchte eine Sache erwähnen. Wie bereits erwähnt, werden die Projekte auf der Grundlage von drei Kerntechnologien erstellt : HTML, CSS und JavaScript. Du solltest also über gute HTML- und CSS-Kenntnisse und einige Grundkenntnisse in JavaScript verfügen, um den Vorlesungen folgen zu können. In Ordnung, also lassen Sie uns weitermachen und die Projekte beschreiben. Unser erstes Projekt wird eine Website über Möbel sein . Das Projekt wird einfach sein. Wir werden nur HTML und CSS verwenden. Aber ich denke, Sie werden es genießen, weil das Projekt modern aussieht und wunderschön ist. Lassen Sie uns weitermachen und das Projekt beschreiben. Es wird aus verschiedenen Abschnitten bestehen. Beginnt mit einer Navigation, die ein paar verschiedene Elemente wie ein Logo, eine Suchleiste und einige Symbole in den Navigationselementen enthält verschiedene Elemente wie ein Logo, eine . Auf die Navigation folgt der Header der Website. Es hat einen blauen Hintergrund und ich habe schönes Banner mit etwas Text und Buttons. Als nächstes haben wir einen Projektabschnitt, der aus verschiedenen Überschriften besteht Und dann haben wir sechs Karten mit schönen Icons. Wenn wir den Mauszeiger über die Symbole wird ein schöner und gleichmäßiger Effekt erzielt Danach wird ein Preisbereich erstellt. Dieser Abschnitt wird aus zwei verschiedenen Teilen bestehen. Der erste Teil besteht aus Bild, Überschrift und Unterseite. den zweiten Teil angeht, werden Sie feststellen Ihre sechs Autos mit unterschiedlichen Preisen einen schönen Übereffekt haben. Als nächstes haben wir einen Blog-Bereich, in dem Sie ein Magazin und einige Artikel über die Trends finden. Auf den Blog-Bereich folgt der Kontaktbereich. Und schließlich haben wir hier eine einfache und gut aussehende Fußzeile der Website In Ordnung, das sind also die Abschnitte unserer ersten Website. Jedes Projekt im Kurs reagiert auf unterschiedliche Bildschirmgrößen. Wenn ich die Seite untersuche, wechsle ich in den responsiven Modus und überprüfe das Projekt auf vier verschiedenen Bildschirmgrößen. Sie werden feststellen, dass das Projekt responsiv ist und auf jeder Bildschirmgröße gut aussieht. Die Projekte im Kurs wurden für extra große Bildschirme erstellt. Ich meine, das stimmt mit 1920 Pixeln Breite und 1080 Pixeln Höhe Wenn Sie also eine relativ kleinere Bildschirmgröße verwenden, sollten Sie während der Vorlesungen in den responsiven Modus wechseln und Breite und Höhe wie folgt angeben. Andernfalls sieht das Projekt auf einer kleineren Bildschirmgröße nicht gut aus , bis wir es responsiv gemacht haben. Also bitte berücksichtigen Sie es. Okay, das nächste Projekt wird also eine persönliche Portfolio-Website sein. Heutzutage ist diese Art von Website sehr beliebt und sehr gefragt, daher denke ich, dass sie für Sie interessant sein wird. In dem Projekt geht es also um einen Webentwickler mit all seinen Fähigkeiten, Arbeiten, Projekten, Kontext usw. Lassen Sie uns weitermachen und das Projekt beschreiben. Wir haben hier also einen Header der Website, in dem wir ein Logo, ein Banner und ein Hamburger-Menüsymbol haben . Wenn ich darauf klicke, Mann, erscheint die Navigation mit einigen netten Effekten. Das Banner besteht aus verschiedenen Elementen, darunter dem Bild eines Entwicklers. X, wir haben einen Abschnitt mit Fähigkeiten, der uns die Technologien und den Wissensstand eines Webentwicklers zeigt . den Abschnitt Fähigkeiten folgt der Abschnitt Projekt in dem Sie verschiedene Arbeiten eines Entwicklers finden. Danach haben wir hier einen Kontaktbereich mit einigen Kontaktdaten und Eingabefeldern. Und schließlich findet ihr ihn in der einfachen und schönen Fußzeile. Das nächste Projekt wird eine Website über Architektur sein . Das Projekt besteht aus verschiedenen Abschnitten. Wir werden mit der Erstellung des Projekts beginnen indem wir an der Navigationsleiste und der Navigation arbeiten Wir haben hier das Logo, die Suchleiste und das Hamburger-Menüsymbol. Wenn ich darauf klicke, wird die Navigation gut angezeigt. Wenn ich mit der Maus über die Navigationselemente fahre, bekommen Sie diesen schönen und coolen Effekt Nach der Navigation erstellen wir dieses schöne und einfache Banner , in dem wir ein paar verschiedene Elemente haben. die Binärdatei folgt ein Abschnitt Über uns, der aus zwei Teilen besteht. Auf der linken Seite haben wir einige Textelemente und die Schaltfläche besteht, wie auf der rechten Seite, wie auf der rechten Seite, aus einem Rahmen und einem Bild. Und außerdem haben wir hier einen schönen und coolen Teil am Ende dieses Abschnitts. Als nächstes haben wir den Abschnitt Projekte , der fünf Karten mit einigen schönen Schwebeeffekten enthält Danach kommt der Kundenbereich, der aus zwei verschiedenen Karten besteht. Dann haben wir unten einen Kontaktbereich und eine einfache Fußzeile In Ordnung, als Nächstes werden wir eine Website für Innenarchitekten erstellen Dieses Feld ist heute sehr beliebt und sehr gefragt. Ich denke also, dass diese Art von Website für Sie interessant und hilfreich sein wird . Wir haben hier einen Header der Website, der das Logo, das Hamburger-Menüsymbol und dann das animierte Banner enthält das Hamburger-Menüsymbol . Wenn ich auf das Menüsymbol klicke, wird die Navigation gut angezeigt. Die animierten Binärdateien, wie ich sehen kann, ändern sich die Textelemente mit einigen Fade-Effekten Als nächstes haben wir einen Abschnitt „Über uns“ , der mit einem Fade-Effekt gut aussieht. Wir werden diesen Effekt für jeden Abschnitt in diesem Projekt verwenden . Der Abschnitt Über uns besteht aus einem Bild und einigen Details über den Designer. Als nächstes haben wir den Abschnitt Services, uns zeigt, was der Designer anbieten kann. Danach finden Sie die Projekte des Designers. Ich bin im Portfolio ihrer Arbeiten. Dann kommt der Leistungsbereich , in dem wir animierte Zähler haben Und zu guter Letzt findet ihr hier einen einfachen und schönen Footer. Okay, das letzte Projekt und dieser Kurs werden also eine Website über Kaffeehäuser sein Das Projekt wird aus verschiedenen Teilen bestehen und viele modern aussehende Designs und Funktionen bieten Wir beginnen mit einer Navigation , die oben auf der Seite festgelegt ist. Sobald wir nach unten scrollen, ändert es seinen Hintergrund. Danach funktioniert die Navigation auf dem Banner, das über eine Slideshow verfügt Wir werden eines der Plug-ins namens Swipe Integer verwenden namens Swipe Ja. Es ist zu sehen, dass Slideshow automatisch funktioniert Aber außerdem können Sie diese Controller verwenden. Und Sie können die Folien auch mit der Maus ziehen. Okay, als nächstes haben wir im Abschnitt Über uns einige Informationen. Auf diesen Abschnitt folgt ein Menü. Danach haben wir einige Daten mit animierten Zählern und mit einigen netten Effekten Im nächsten Abschnitt geht es um die Kunden, die wir hier haben, um die Meinungen der Kunden, die von Cost Netly platziert wurden. Als nächstes folgt der Kontaktbereich, in dem Sie das Haus kontaktieren oder einen Tisch reservieren können. Und schließlich haben wir hier eine einfache Fußzeile. In Ordnung, das war's mit unseren Projekten. Ich hoffe, sie werden dir gefallen. Lernen Sie etwas Neues und lassen Sie sich inspirieren , um Ihr eigenes Portfolio zu verbessern. Lass uns weitermachen. 3. SET-UP: Hallo und willkommen zum Kurs. Wir freuen uns, dass Sie hier sind und hoffen, dass Ihnen der Kurs gefällt , bevor wir tiefer tauchen und mit der Erstellung unserer Projekte beginnen. Zuallererst müssen wir unser Arbeitsumfeld vorbereiten. Ich bin mir sicher, dass die meisten von Ihnen bereits bereit sind , den Code zu schreiben. Wenn ja, können Sie dieses Video gerne überspringen und sofort mit den Projekten beginnen. Aber wenn nicht, dann ist das nicht das Problem. Lassen Sie uns weitermachen und einige Tools einrichten. In diesem Kurs benötigen wir zwei Haupttools, nämlich einen modernen Webbrowser und einen Texteditor. Als Webbrowser werde ich hauptsächlich Google Chrome verwenden. Und in einigen Fällen benötigen wir auch die Hilfe von Mozilla Firefox. Ich bin mir sicher, dass Sie bereits wissen, wie man diese Webbrowser installiert, und ich denke, Sie haben sie alle bereits. Aber wie dem auch sei, schauen wir uns an, wie man sie herunterlädt. Um Google Chrome zu erhalten, müssen wir hier zu dieser URL gehen und den Webbrowser herunterladen. Der Installationsvorgang ist ziemlich einfach, daher werde ich ihn nicht durchführen. Für Mozilla Firefox müssen Sie diese URL verwenden und den Webbrowser von hier herunterladen Beide Links werden dieser Vorlesung beigefügt. In Ordnung, lassen Sie uns weitermachen und über den Texteditor sprechen. Wir werden Visual Studio Code verwenden, weil es derzeit einer der besten Texteditoren der Welt ist. Natürlich können Sie sich frei fühlen und Ihren Lieblingstexteditor verwenden. Es liegt an Ihnen, aber ich empfehle, den VS-Code zu verwenden. Um Missbrauchscode herunterzuladen, müssen Sie diese Website besuchen und den Texteditor entweder für Windows oder Mac oder Linux herunterladen. Dieser Link wird ebenfalls dieser Vorlesung beigefügt. Der Installationsvorgang des Visual Studio Codes ist sehr einfach, zweitens , daher bin ich mir sicher, dass er damit keine Probleme haben wird. In Ordnung, sobald Sie beide Tools installiert haben, können Sie loslegen Also lasst uns gleich zu den Projekten springen 4. Projekt 1 - Erstelle und gestalte die Navigation der Website: In Ordnung, also habe ich einen neuen Ordner auf dem Desktop erstellt. Lassen Sie uns weitermachen und es im VS-Code öffnen. Ich werde hier zwei verschiedene Dateien erstellen, eine für HTML und die zweite für das CSS. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Lass uns weitermachen und den Titel ändern. Ich werde ein Möbel einrichten. Und ich werde auch die CSS-Datei verlinken. Lassen Sie uns weitermachen und das Projekt im Browser ausführen. Außerdem werde ich den Browser und den Editor nebeneinander platzieren . So wie. Weil ich unseren Arbeitsprozess bequemer und einfacher gestalten möchte . Als Nächstes werde ich mir einige Links wie Font Awesome CDN schnappen, weil wir während des gesamten Projekts einige Font Awesome-Icons verwenden werden gesamten Projekts einige Font Awesome-Icons Lass uns weitermachen und uns den Link schnappen. Dann öffne den Link-Tag und füge ihn hier ein. Der Link. Außerdem werden wir einige Google-Schriftarten verwenden. Besuchen wir also die Google Fonts-Website und suchen Sie nach verschiedenen Schriftarten. Die erste wird eine Schrift namens Kenia sein. Wählen wir den Stil aus und suchen dann nach einer anderen Schrift, MCT1 Ich werde ein paar verschiedene Stile auswählen. Dann müssen wir uns den Link von hier holen. Fügen wir es in das Hauptelement ein. In Ordnung, ich denke, wir sind bereit. Fangen wir an, HTML-Markup zu erstellen. Zunächst werde ich hier einige Kommentare weitergeben. Dann lassen Sie uns weitermachen und DIV-Tag mit dem Klassencontainer öffnen. Als nächstes brauchen wir vorerst natürlich noch einen Kommentar. Und dann werde ich das HTML5-Nav-Tag mit der Klasse navbar einführen HTML5-Nav-Tag mit der Klasse navbar Als Nächstes erstelle ich einen Deep-Tag , der für Teil oben ausreichend sein wird. Und es wird ein Logo enthalten. Ich gebe Ihnen ein Font Awesome-Symbol mit den Klassennamen fa, solid, FAA, couch Hier haben wir also das Font Awesome-Symbol. Dann füge ich hier ein Span-Tag ein, das angibt, wer Wertmöbel besteuert hat In Ordnung, das war's mit dem Logo. Dann erstelle ich eine Suchleiste. Lassen Sie uns hier ein Eingabe-Tag mit einem Typtext und mit dem Platzhalterattribut einrichten, das den folgenden Text enthält Wonach suchst du? Dann brauchen wir wieder ein Font Awesome Icon, Klassennamen , eine Lupe Hier haben wir also Eingaben und das Suchsymbol. Danach erstelle ich ein weiteres Deep-Tag mit dem Klassenbenutzer. Und ich werde hier ein paar verschiedene Icons weitergeben. Der erste wird ein solider FA sein, beim Einkaufen erwischt. Dann gebe ich Ihnen einen Span-Tag, der den Wert, in dem ich mich befinde, das Dollarzeichen und einige Zahlen enthält . Dann verwende ich eine andere Schrift, Awesome Icon, F, einen normalen FAA-Hit. Und zum Schluss werde ich hier ein weiteres Symbol pausieren. Es wird ein solider Benutzer sein. Also hier haben wir unsere Icons. Danach. Ich werde die Navigationsliste erstellen, die ein paar verschiedene Navigationselemente enthalten wird . Lass uns einmischen In einer anderen Schrift, tolles Symbol, es wird ein fettes , solides Fanhaus sein. Und ich werde hier auch das Span-Tag mit dem Wert home verwenden. Lassen Sie uns das Navigationselement ein paar Mal duplizieren und dann die Klassennamen und die Werte dieser Pentax ändern die Klassennamen und die Werte dieser Pentax Wir brauchen hier Couch und Produkte. Das nächste wird das Dollarzeichen und die Preisgestaltung sein . Das nächste Symbol wird Blogger sein. Lass uns hier pausieren Blog. Dann werden wir Starverkäufe haben. Und das letzte Symbol wird eine Nachricht sein. Und das Spannelement wird Kontakt sein. Ordnung, hier haben wir die Symbole, aber wie Sie sehen können, wird eines der Symbole nicht angezeigt Lass uns nachschauen. Wir brauchen hier also Fa-Marken statt solider. Jetzt ist das Problem behoben. Okay, lassen Sie uns über das HTML-Markup sprechen. Fangen wir an, etwas CSS zu schreiben. Ich werde hier einige Kommentare zu Standardstilen weitergeben. Lassen Sie uns weitermachen und alle Elemente mit einem Sternchen auswählen alle Elemente mit einem Sternchen Lassen Sie uns Margin und Padding für beide auf Null setzen. Außerdem definiere ich die Eigenschaft „ Box-Sizing und setze sie auf Border-Box Der nächste wird skizziert. Machen wir es nicht. Und ich werde auch die allgemeine Formularfamilie definieren. Es wird ein Modell ohne Serifen sein. Es ist also zu sehen, dass die Standardstile angewendet werden. Als Nächstes ändere ich die Schriftgröße des HTML-Elements, da ich RAM als Maßeinheit verwenden möchte . Lassen Sie uns die Schriftgröße auf 62,5 Prozent setzen. In diesem Fall entspricht ein RAM zehn Pixeln. Ordnung, lassen Sie uns weitermachen und einige Kommentare für Container abgeben Und auch für Navbar. Zuerst werde ich genug Elemente stylen. Definieren wir die Breite. Ich werde es zu 100% schaffen. Und ich werde auch die Höhe definieren, die 19 RAM betragen wird. Dann ändern wir die Hintergrundfarbe. Ich setze es auf weiß. Als Nächstes verwende ich Display Flex und ändere die Richtung. Es wird eine Kolumne sein. Verwenden Sie dann die Option „Elemente mittig ausrichten“. Wie Sie sehen können, befinden sich die Elemente in der Mitte. Außerdem werde ich einen kleinen Schatteneffekt verwenden. Bei Verwendung von Box-Shadow sind die Werte 01, Rang fünf RAM als Farbe Ich werde den RGBA-Wert verwenden. Es wird eine schwarze Farbe mit geringerer Opazität sein, 0,1. Es ist also zu sehen, dass wir hier Box Shadow haben. Das nächste Element, das ich mir ansehen werde , ist , dass das Top nicht schlecht ist. Stellen wir zunächst das Display auf Flex ein. Dann müssen wir die Elemente in der Mitte vertikal ausrichten. Und lassen Sie uns auch Padding definieren. Es wird auf RAM und Null gehen. In Ordnung? Danach wählen wir die Elemente im oberen Bereich aus, der nicht schlecht ist. Definieren wir die Marge. Es wird Null sein und das Forum auf der linken und rechten Seite. Dann wähle ich das Logo aus. Ich meine das Font Awesome-Symbol und das Logo. Ändern wir die Schriftgröße, machen wir sechs RAM daraus. Also werde ich die Farbe ändern. Lassen Sie uns hier f887 für When verwenden, um auf der rechten Seite etwas Platz zu schaffen , indem Sie margin-right mit dem Wert für die Rampe verwenden Also hier haben wir unser Logo, das viel besser aussieht. Als Nächstes kümmere ich mich um die Span-Elemente, die neben dem Symbol platziert werden. Lassen Sie uns also die Schriftfamilie ändern. Du siehst, dein Handy heißt Kenia. Kursiv. Schriftgröße. Lass es uns größer machen. Für RAM verwenden. Schaffen Sie außerdem etwas Abstand zwischen den Buchstaben und ändern Sie die Farbe. Ich werde deine Farbe 07372 verwenden. Hier haben wir also unser Span-Element, das Todd ist und gut aussieht Wählen wir hier das Logo aus, ich meine die Wrapper-Elemente Ich werde die Anzeige so einstellen, dass sie gebeugt wird und die Elemente mittig ausrichten , um das Symbol und die Wirbelsäulenelemente zu zentrieren. Als nächstes kümmern wir uns um die Suchleiste. Zunächst wähle ich die Eingabeelemente aus und ändere ihre Breite. Es werden 50 sein, um zu rammen. Als Nächstes müssen wir etwas Platz innerhalb des Eingabesatzes schaffen , indem einen Punkt zum Rampen oben als einen Punkt für RAM auf der rechten Seite, einen Punkt zum RAM unten und 3,7 RAM auf der linken Seite Als Nächstes ändere ich die Hintergrundfarbe. Es wird ein Eff Three sein. Also hier haben wir die Suchleiste, ich meine das Eingabeelement. Lassen Sie uns die Grenze loswerden. Ich werde keinen draus machen. Und außerdem werde ich Border-Radius 2.5 auf Run setzen. Als nächstes kümmern wir uns um die Schrift. Lassen Sie uns die Schriftgröße ändern und daraus 1,6 RAM machen. Außerdem setze ich die Schriftstärke auf 300 und ändere die Farbe. Benutze es hier. Blaue Farbe. Es kann also sehen, dass das Eingabeelement schöner aussieht. Lassen Sie uns weitermachen und den Platzhalter auswählen. Ändere die Schriftgröße, mache es auf 1.7 R& Ändern Sie auch die Schriftstärke. Benutze hier 300. Und ich setze die Farbe auf Blau. Okay. Jetzt ist es an der Zeit, mit dem Stylen des Font Awesome-Symbols zu beginnen. Ich bin im Suchsymbol. Definieren wir diese Position, machen wir sie absolut. Und wir müssen auch die Position der übergeordneten Elemente relativ machen. Weil wir die Elemente entsprechend den Eltern positionieren müssen . Dann definiere, dass die Spitzenposition 50 Prozent sein wird. Für die linke Position gibt es einen Punkt für RAM. Außerdem werde ich die Elemente perfekt horizontal zentrieren. Dafür benötigen wir Transform Translate, Y -50 Prozent Also Icons positioniert. Als Nächstes werde ich die Schriftgröße erhöhen. Es wird 1,5 RAM sein. Ändere die Farbe. Du siehst dich wieder, blaue Farbe. Die Suchleiste ist also fertig. Lassen Sie uns weitermachen und den Benutzer auswählen. Ändern Sie die Schriftgröße, stellen Sie sie in den Arbeitsspeicher und definieren Sie auch die Farbe. Wie Sie sehen können, benötigen wir etwas Abstand zwischen den Artikeln. Also wähle ich Benutzer und Benutzerbereich aus und definiere Margin-Right, Make it one point to run In Ordnung? Wie Sie sehen können, ist die Oberseite der Navigationsleiste fertig. Lassen Sie uns weitermachen und uns um die Navigationsliste kümmern. Definieren wir Display, Flex. Definieren Sie die Höhe. Es wird 8,5 RAM sein. Dann brauchen wir oben etwas Platz, indem wir oben Polsterung zum RAM verwenden Danach wähle ich Entwicklungen in der Navigationsliste aus. Die Breite wird also 16 RAM betragen. Außerdem verwende ich wieder Display Flex und ändere dann die Richtung, mache es zu einer Spalte. Richten wir die Elemente in der Mitte aus und verwenden Sie auch Justify-Content Center, um die Elemente perfekt zu zentrieren Richtig? Danach erstelle ich Ränder auf der linken Seite der Elemente, die Rahmen links 2.1 RAM fest setzen . Und als Farbe werde ich E9 Ad verwenden. Also lass uns weitermachen. Wir haben hier Grenzen, aber wir müssen die Grenze am Anfang entfernen. Lassen Sie uns also weitermachen und den Romanautor Div mit dem n-ten Kind auswählen Romanautor Div mit dem n-ten Kind Wir wählen hier das erste Element aus und setzen den Rand auf None. Es ist also zu sehen, dass das Problem behoben ist. Und unsere Navigationselemente sehen viel besser aus. Lassen Sie uns den Cursortyp ändern und ihn zeigen lassen. Okay, also lass uns weitermachen und Symbole auswählen, die Schriftgröße erhöhen und es zu Ram schaffen. Ändere auch die Farbe. Benutze hier die blaue Farbe. Dann werde ich unten etwas Platz schaffen , indem ich Margin Bottom mit dem Wert eins RAM verwende. Man kann also sehen, dass die Icons wirklich gut aussehen. Dann wähle ich Span-Elemente aus. Ich meine, die Schriftgröße des Artikels wird 1,6 RAM betragen. Und dann müssen wir auch die Farbe ändern. Du kannst auch malen, ich werde etwas Abstand zwischen den Buchstaben schaffen. Man kann also sehen, dass die Artikel wirklich gut aussehen. 5. Projekt 1 - Vorschau: Hallo und willkommen zu unserem zweiten Projekt , einer persönlichen Portfolio-Website. Heutzutage ist diese Art von Website sehr beliebt und sehr gefragt, daher denke ich, dass sie für Sie interessant sein wird. In dem Projekt geht es um einen Webentwickler mit all seinen Fähigkeiten, Arbeiten, Projekten, Kontakten usw. Lassen Sie uns weitermachen und das Projekt beschreiben. Wir haben hier also einen Header der Website, in dem wir ein Logo, ein Banner und ein Hamburger-Menüsymbol haben . Wenn ich darauf klicke, erscheint die Navigation mit einigen netten Effekten. Das Banner besteht aus verschiedenen Elementen, darunter dem Bild eines Entwicklers. Als nächstes haben wir einen Abschnitt mit Fähigkeiten, der uns die Technologien und den Wissensstand eines Webentwicklers zeigt . Abschnitt Fähigkeiten folgt der Abschnitt Projekt, in dem wir verschiedene Arbeiten eines Entwicklers finden. Danach haben wir hier einen Kontaktbereich mit einigen Kontaktdaten und Eingabefeldern. Und schließlich findest du hier eine einfache und nette Fußzeile. Das Projekt reagiert auf verschiedene Bildschirmgrößen. Wenn ich die Seite untersuche, wechsle ich in den responsiven Modus und überprüfe das Projekt auf vier verschiedenen Bildschirmgrößen. Sie werden feststellen, dass das Projekt responsiv ist und auf jeder Bildschirmgröße gut aussieht. Auch hier werden alle Projekte für extra große Bildschirmgrößen erstellt. Ich befinde mich auf diskreten Websites mit 1920 Pixeln Breite und 1080 Pixeln Höhe Wenn Sie also eine relativ kleinere Bildschirmgröße verwenden, sollten Sie während der Vorlesungen in den responsiven Modus wechseln und Breite und Höhe wie folgt angeben. Andernfalls sieht das Projekt auf einer kleineren Bildschirmgröße nicht gut aus , bis wir es responsiv gemacht haben. Also bitte berücksichtigen Sie es. Okay, das war's also mit unserem zweiten Projekt. Jetzt können wir weitermachen und anfangen, es zu bauen 6. Projekt 1 - Erstelle den Header der Website: Ordnung, jetzt ist es an der Zeit, unseren nächsten Abschnitt zu erstellen, der die Landung sein wird Lassen Sie uns neue Kommentare für die Kreditvergabe verfassen. Dann öffne ich hier das Sektionselement mit einer Klasse Landing. Das erste Element , das wir hier einfügen werden , wird der Hintergrund sein. Als Nächstes füge ich hier ein Banner ein , das aus verschiedenen Elementen bestehen wird. Das erste wird ein Bild sein. Geben wir hier den Pfad des Bildes an. Wir müssen das Bannerbild auswählen. Lassen Sie uns außerdem den Kurs Banner IMG einrichten. Dann öffne ich das H1-Tag mit der Überschrift „ Klassenbanner“ Der Text wird Luxusmöbel sein. Dann haben wir zwei verschiedene Knöpfe. Weisen wir den Button-Klassen Banner, BTN und auch Banner den Wert 101 zu Fügen wir es hier ein. Geh einkaufen. Ich werde dieses Element duplizieren und den Klassennamen sowie den Wert ändern. Es wird erforscht werden. Ordnung, das war's also mit dem HTML-Markup des zweiten Lass uns anfangen, die Elemente zu stylen, die weniger sensibel sind, deine Kommentare. Und dann wähle Section Element mit der Klasse Landing, ich möchte eine Breite definieren. Es werden 100% sein. Was die Höhe angeht, werde ich sie auf eine Viewport-Höhe von 90 Als Nächstes wähle ich den Hintergrund aus. Lassen Sie uns seine Position auf absolut setzen. Außerdem müssen wir die Position für das übergeordnete Element definieren . Machen wir es relativ. Dann definiere ich die Spitzenposition. Es wird voller RAM sein. Was die Lag-Position angeht, werde ich sie zu 50% machen. Und dann lassen Sie uns die Elemente horizontal zentrieren , wenn Sie Translate X -50% transformieren Außerdem werde ich die Breite definieren. Es werden 90% sein. Was die Höhe angeht, werde ich 65 Runs drauflegen. Dann ändere die Hintergrundfarbe und mache sie auf 3954 Und runden Sie die Ecken auch mit dem Randradius ab. Drei Runden. Also hier haben wir den blauen Hintergrund. Als Nächstes wähle ich Banner aus. Definieren wir die Breite und machen sie zu 60%. Dann definiere die Höhe als 65. Reim. Stellen Sie die Position auch auf absolut ein. Dann müssen wir das Bildelement auswählen. Definieren wir Breite zu 100%. Außerdem müssen wir die Höhe als 100% definieren. Also hier haben wir das Bild. Richtig? Als Nächstes ändere ich die Position des Banners, sagen wir die oberste Position auf acht RAM. Definieren Sie dann die linke Position mit Geschenk. Und auch für die Zentrierung verwende ich den X-Wert von Transform Translate -50 Prozent. Danach definiere ich das Hintergrundbild. Wir benötigen einen linearen Gradienten mit RGBA-Wert. Wählen wir eine schwarze Farbe mit einer Opazität von 0,5. Und dann wieder werde ich dieselbe Farbe mit derselben Opazität verwenden dieselbe Farbe mit derselben Opazität Danach definieren wir den Randradius mit dem Wert drei RAM Für das Bild mit dem Value-Cover benötigen wir Objektfüße. Und dasselbe benötigen wir auch für den Radius für das Bild. Lassen Sie uns abschließend die Opazität verwenden und dabei acht gehen. In Ordnung, das Bild sieht also gut aus. Lassen Sie uns weitermachen und uns um die Banner-Überschrift kümmern. Definieren wir seine Position als absolut. Dann müssen wir die Top-Position definieren und daraus zehn RAM machen, daraus zehn RAM machen wird die richtige Position fünf Runs sein. Wie Sie sehen können, befindet sich die Überschrift auf der rechten Seite. Definieren wir die Schriftgröße , es wird ein Atrium sein Und ändere auch die Farbe des Elements, mache es weiß. In Ordnung, als Nächstes setze ich die Breite auf 40 Prozent. Und lassen Sie uns auch den Abstand zwischen den Wörtern verringern. Setzt die Zeilenhöhe auf eins. Richtig. Als Nächstes richte ich den Text an der rechten Seite aus. Verwenden Sie auch den Schatteneffekt einiger Texte mit den Werten 03 RAM, drei RAM. Und als Farbe verwenden wir den RGBA-Wert. Wie Sie jetzt sehen können, sieht die Überschrift wirklich gut aus. Als Nächstes kümmere ich mich um die Knöpfe. Setzen wir die Position auf absolut. Verfeinere dann die obere Position, was 28 RAM ergibt. Die Breite wird 18 RAM betragen. Auch die Höhe wird den vollen Rang haben. Dann brauchen wir eine Grenze. Es wird keins sein. den Randradius ändern, die Tasten abgerundet machen, würden drei RAM an Wert verlieren Sie können hier also den Button sehen. Ich werde die Schriftgröße ändern. Machen wir 1,6 RAM draus. Kann der Cursor ihn auch zum Zeiger machen? In Ordnung. Lassen Sie uns weitermachen und die Schaltfläche Wald auswählen. Die Position wird stimmen. 25 RAM. Die Hintergrundfarbe wird orange sein. Die Farbe des Textes wird weiß sein. Also der erste Knopf, er sieht gut aus. Lass uns weitermachen und uns um den zweiten kümmern. Verwenden Sie den gleichen Code und ändern Sie den Klassennamen. Die Position wird Five Prime sein. Auf der rechten Seite ändern Sie auch die Hintergrundfarbe. Es wird weiß sein. Was die Farbe des Textes angeht, so wird es orange sein. Also alles sieht wirklich gut aus. Ich werde den Hover-Effekt erzeugen. Für den ersten Button. Beim Schweben. Ich werde die Hintergrundfarbe ändern. Machen wir es weiß. Ändere auch die Farbe. Mach es orange. Asphalt. Der zweite Knopf. Wir brauchen das Gegenteil. Ich meine, wir müssen die Hintergrundfarbe ändern, ihn orange machen. Was die Farbe des Textes angeht, so wird es weiß sein. Und zum Schluss verwenden wir Übergangswerte, alle 0,3 s. Okay, das war's. Das Landing ist gestylt und jetzt müssen wir weitermachen und uns um den nächsten Abschnitt kümmern 7. Projekt 1 - Produktbereich erstellen: Okay, jetzt ist es an der Zeit, weiterzumachen und mit der Erstellung unseres nächsten Abschnitts zu beginnen , der der Bereich Produkte sein wird. Ich fange an, HTML-Markup zu erstellen. Lassen Sie uns also weitermachen und Ihre Kommentare für Produkte einfügen. Dann öffne ich das Abschnittselement mit der Klasse Produkte. Das erste Element, das ich hier einfügen werde, ist, der Klasse Produkte top zuzuweisen. Wir werden hier ein h3-Überschriftenelement mit einer Wertesuche Dann haben wir H2 für 15.000 und H1 für Regierung . Mit einem Text Produkte. Danach werde ich eine weitere Entwicklung erstellen, bei der es sich um Produktsymbole handeln wird. Öffnen wir den DIV-Tag mit dem Klassenzimmer. Ich werde ein Bild unsicher machen, denn das Symbol wird Schlafzimmer-PNG sein Außerdem werden wir hier ein Spannelement für das Textschlafzimmer haben . Lassen Sie uns diese Elemente ein paar Mal duplizieren. Dann ändere die Klassennamen. Wird gepuffert. Ändern Sie auch den Namen des Bildes und ändern Sie den Textwert des Span-Elements auf den gleichen Wert für das nächste Element, es wird Essen sein. Lassen Sie uns den Bildnamen und auch die Spanne ändern. Dann müssen wir diese Pfanne bis jetzt ändern. Der nächste Tagesordnungspunkt ist die Tabelle. Und der letzte Gegenstand wird die Garderobe sein. Lassen Sie uns also den Namen des Bildes und auch dieses Span-Elements ändern . In Ordnung, das war's also mit dem HTML-Markup. Wir haben hier alle benötigten Elemente. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Ich werde die Kommentare, Produkte und Produkte einrichten. Wählen Sie dann die Abschnittselemente aus und definieren Sie ihre Breite, 100% betragen soll. Das ist wahrscheinlich Höhe. Ich werde die Höhe des Viewports auf 85 erhöhen. Als nächstes benötigen wir Display Flex. Und wir müssen die Richtung ändern. Machen wir daraus eine Kolumne. Und richten Sie auch Elemente in der Mitte aus. Es ist also zu sehen, dass die Elemente in der Mitte platziert sind. Lassen Sie uns weitermachen und Produkte auswählen. Oberste definierte Breite, sie wird 60% betragen. Dann werde ich unten etwas Platz schaffen, indem ich den RAM am Rand unter acht verwende. Als Nächstes wähle ich Produkte aus. H3, Überschriftenelement, vergrößerte Schriftgröße, mach es zu Ram. Ändere auch die Farbe, die ich hier verwenden werde, blaue Farbe. Lassen Sie uns diesen Code duplizieren. Ändern Sie H3N2, H12. Ich werde die Schriftgröße ändern, sieben RAM draus machen und auch die Farbe ändern. Benutze hier orange Farbe. Richtig? Lassen Sie uns weitermachen und die dritte Überschrift, H1, stylen Ändere die Schriftgröße, mache neun RAM draus. Ändere auch die Farbe. Ich werde hier die blaue Farbe verwenden. Außerdem werde ich den Abstand am oberen Rand verkleinern, indem Margin Top mit einem negativen Wert minus phi prime verwende. Okay, lassen Sie uns sehen, dass die Überschriften ziemlich gut aussehen. Lassen Sie uns weitermachen und Produkte und Symbole auswählen. Ich definiere Breite. Machen wir 60% draus. Dann stelle ich das Display auf Flex ein. Schaffen Sie einen gewissen Abstand zwischen den Elementen indem Sie den Inhaltsbereich gleichmäßig ausrichten. Wie Sie sehen können, haben wir hier einen gleichmäßigen Abstand zwischen den Artikeln. Als Nächstes wähle ich „Elemente der Produkte verschenken“ aus . Stellen wir das Display auf Flex ein. Ändere auch die Richtung, mache es zu einer Spalte. Dann richte ich die Elemente in der Mitte aus. Als nächstes definieren wir die Breite und machen daraus 18 RAM. Definieren Sie auch die Höhe 20 RAM. Und schaffen Sie etwas Platz auf der rechten Seite, indem Sie Margin-Right to Run verwenden Okay. Als Nächstes ändern wir die Hintergrundfarbe. Ich werde deine Farbe F7, F7, C7 verwenden. Schaffen Sie dann mithilfe von Polstern Platz im Inneren des Artikels. Als Nächstes erstelle ich Randradius von 2AM und ändere auch den Cursor, mache ihn zum Zeiger Richtig. Als Nächstes entferne ich das Leerzeichen auf der rechten Seite des letzten Elements. Also müssen wir das letzte Kind auswählen. Dann müssen wir das Margin-Right auf Null setzen. In Ordnung. Lassen Sie uns weitermachen und Bild auswählen. Schaffen Sie unten etwas Platz, indem Sie die unteren drei Ränder verwenden. Als Nächstes wähle ich das Span-Element aus. Lassen Sie uns das Bild in eine Spanne umwandeln. Ändern Sie die Schriftgröße, machen Sie 2,5 RAM daraus. Ändere auch die Farbe. Benutze deine Farbe. Blau. Als Nächstes erstelle ich einen Hover-Effekt Ich werde die Hintergrundfarbe ändern . Lass es uns weiß machen. Und verwende auch Box-Shadow mit den Werten 01 RAM, drei RAM Und als Farbe verwende ich schwarze RGBA-Farbe mit einer Opazität Und auch hier brauchen wir einen Übergang, um einen reibungslosen Effekt zu erzielen. Man kann also sehen, dass wir hier einen schönen Übereffekt haben. Das letzte, was ich tun werde, ist, mit Make it five prime eine Polsterung innerhalb des Bereichs an der oberen Seite zu erstellen Polsterung innerhalb des Bereichs mit Make it five prime eine Polsterung innerhalb des Bereichs an der oberen Seite Richtig? Also alles sieht gut aus und der Bereich Produkte ist fertig. Gehen wir zum nächsten über. 8. Projekt 1 - Preisgestaltung und -gestaltung: In Ordnung, es ist Zeit weiterzumachen. Antworten Sie, um unseren nächsten Abschnitt zu erstellen , der ein Preisbereich sein wird. Lassen Sie uns weitermachen und neue Kommentare, Preisgestaltung und Preisgestaltung, einfügen . Dann öffne ich einen Abschnitt Elementklasse Pricing. Fügen wir hier den DIV-Tag Pricing top ein , der ein paar verschiedene Elemente beinhalten wird. Also werde ich hier ein Bild weitergeben. Lassen Sie uns weitermachen und hier den Pfad des Bildes angeben. Es werden Möbel für PNG sein. Als Nächstes übergebe ich dein DIV-Tag Pricing Top Content. Öffnen wir das H1-Überschrift-Tag mit den Texten machen wir uns bereit für Weihnachten Und ich werde hier auch ein Muster platzieren , aktuelle Trends. Richtig? Also lass es uns sehen Über die Oberseite. Jetzt müssen wir ein paar Karten erstellen. Lassen Sie uns Preiskarten mit DIV-Tags erstellen und dann das Auto selbst einrichten. Wir werden hier also Preiskarten-Symbole haben. Ich meine, die Font Awesome-Icons werden drei davon haben. Der erste wird F sein, ein solider FAA-Link Dann wird der nächste fett, regulär sein. Sehr heiß. Was das dritte Symbol angeht, verwende ich hier F, einen Vollton, eine Lupe Plus. In Ordnung, hier haben wir unsere Font Awesome Icons Als Nächstes werde ich den Wrapper für das Bild einrichten. Was das Bild betrifft, wählen wir den Pfad aus. Es wird Pricing Armchair sein. Dann öffne ich das H3-Heading-Tag. Es wird der Name Sessel sein. Nun, wir werden hier Sterne haben. Verwenden wir wieder Font Awesome. Die Symbole werden insgesamt fünf Sterne haben. Wir brauchen also einen soliden Stern. Lass es uns viermal duplizieren. Und zum Schluss übergebe ich hier H4, das Überschriftenelement für den Preis In Ordnung, also lassen Sie uns über die Karte sprechen. Werde sechs davon haben. Also lass uns weitermachen und es fünfmal duplizieren. Und dann müssen wir einige Änderungen vornehmen. Also die zweite Karte, es wird um die Couch gehen. Wir müssen den Weg ändern, auch die Richtung. Und wir werden hier einen anderen Stern haben. Es wird ziemlich unregelmäßig sein. Und auch der Preis wird 129$ betragen. In der nächsten Karte geht es um Beleuchtung. Ändern wir den Preis, machen wir 59$ draus. Dann werden wir eine Karte darüber haben, wie es soweit ist. Lass uns die Überschrift ändern. Ändere auch den Preis. Fahren Sie dann mit der nächsten Karte fort. Es wird ein voller Tisch sein. Eigentlich werde ich die Sterne gegen die Sofar eintauschen. Wir brauchen hier. Fa, unregelmäßig Dann ändere den Preis für den Tisch. Es wird 49$ kosten Und jetzt müssen wir die Details für die letzte Karte ändern, es wird Garderobe sein. Ändern wir die Überschrift und ändern wir auch den Stern. Wir brauchen hier ein unregelmäßiges Telefon. Schließlich werde ich den Preis ändern, oder? Also hier haben wir unsere sechs Karten mit Bildern und den Details. Und das letzte Element in diesem Abschnitt wird ein Muster sein. Geh einkaufen. In Ordnung, das war's also mit dem HTML-Markup. Jetzt ist es an der Zeit, weiterzumachen und mit dem Schreiben von CSS zu beginnen. Lassen Sie uns neue Kommentare für die Preisgestaltung einfügen. Dann wähle ich Abschnittselemente aus. Definieren wir die Breite. Es werden 100% sein. Auch hier brauchen wir eine Körpergröße von 100%. Dann stelle ich das Display auf Flex ein, und dann ändern wir die Richtung, machen es zu einer Spalte. Dann richte ich die Elemente in der Mitte aus. Es ist also zu sehen, dass die Elemente in der Mitte des Abschnitts platziert sind . Als Nächstes werde ich unten mit Margin etwas Platz schaffen , unten 20 RAM. Aber hier haben wir etwas Platz , der sich um das Abschnittelement dreht. Lassen Sie uns weitermachen und Pricing top auswählen. Ich stelle das Display auf Flex ein. Und dann lassen Sie uns die Elemente ausrichten. Und das Zentrum. Außerdem werde ich unten etwas Platz schaffen. Du hast also dieses Tempo. Als Nächstes wähle ich die Top-Bilder zur Preisgestaltung aus. Das Bild. Lassen Sie uns auf der rechten Seite etwas Platz schaffen. Machen wir 20 RAM draus. Dann wähle ich die wichtigsten H1-Überschriftenelemente für die Preisgestaltung aus. Erhöhen wir die Schriftgröße, machen wir sieben RAM daraus. Ändere auch die Farbe. Ich werde deine blaue Farbe verwenden. Also werde ich die Breite definieren. Machen wir 50 RAM draus und ändern auch die Zeilenhöhe, machen wir eins draus. Als Nächstes werde ich unten etwas Platz schaffen, indem ich den Arbeitsspeicher von Margin-Bottom Three verwende Ich kann sehen, dass die Überschrift ziemlich gut aussieht. Lassen Sie uns weitermachen und die Schaltfläche auswählen. Ändern wir die Breite, machen wir 18 RAM daraus. Deshalb müssen wir die Höhe ändern. Machen wir es für RAM. Als Nächstes definiere ich die Hintergrundfarbe. Es wird weiß sein. Wir brauchen hier also einen Rand mit Werten von 0,1 g Feststoff, und die Farbe wird orange sein. Also hier haben wir den Button. Machen wir es ein bisschen abgerundet, indem border-radius mit dem Wert drei Also werde ich die Schriftgröße ändern. Es wird 1.6 R& sein. Als Nächstes ändere ich die Farbe. Verwenden Sie hier die orange Farbe und ändern Sie auch den Cursor, lassen Sie ihn zeigen. Wie Sie sehen können, sieht der Button gut aus. Jetzt ist es an der Zeit, weiterzumachen und die Preiskarte auszuwählen. Ändern wir die Breite, machen wir 30 RAM draus. Dann ändere die Höhe. Es werden 45 RAM sein. Außerdem werde ich die Hintergrundfarbe ändern. Machen wir es F7, F7, F7. Also hier haben wir die Karten. Lassen Sie uns mit Margin, einem RAM, etwas Speicherplatz schaffen. Außerdem werde ich die Ecken abgerundet machen, indem ich den Randradius als Rampe verwende Also hier haben wir die Änderungen. Verwenden Sie dann Display-Flex und ändern Sie auch die Richtung, machen Sie es zu einer Spalte. Außerdem werde ich die Elemente in der Mitte ausrichten. So kann man sehen, dass die Gegenstände in der Mitte platziert sind. Ich meine in der Mitte, vertikal. Lassen Sie uns außerdem den Inhaltsabstand ausrichten verwenden um einen gewissen Abstand zwischen den Flex-Elementen zu schaffen. Dann werde ich Polsterung verwenden, um etwas Platz in der Karte zu schaffen Verwenden wir hier fünf Primzahlen und Null und ändern auch den Cursortyp, machen ihn zu einem Zeiger. In Ordnung, die Gerichte sehen also nett aus. Dann müssen wir einen Wrapper-Entwicklungs-Preiskarten auswählen einen Wrapper-Entwicklungs-Preiskarten , um die Karten zunächst auszurichten Verwenden wir die Breite und machen sie zu 60% Stellen Sie dann das Display auf Flex. Es ist zu sehen, dass die Karten nebeneinander platziert sind Verwenden Sie jetzt „Inhalt ausrichten“ mit dem Wertezentrum Und danach wickle ich die Elemente mit Flex Wrap, Wrap ein. Okay, wie Sie sehen können, sind die Karten gut ausgerichtet. Verwenden wir Margin Bottom mit dem Wert fünf RAM, um unten zwischen den Einkaufswagen und der Schaltfläche etwas Platz zu schaffen unten zwischen den Einkaufswagen und der Schaltfläche Als Nächstes wähle ich die Preiskartensymbole aus. Zuerst werde ich sie mit Display None ausblenden. Dann lass uns weitermachen und Image Wrapper auswählen. Ich definiere Breite. Machen wir 20 RAM draus. Nun, definieren wir die Höhe. Es werden 18 RAM sein. Außerdem werde ich unten etwas Platz schaffen. Machen wir fünf Primzahlen draus. Stellen Sie dann das Display auf Flex. Und platzieren Sie auch den Vertrag und die Zentrale mithilfe des Justify-Content Richtig? Danach wähle ich die Überschrift drei aus. Lassen Sie uns die Schriftgröße ändern. Es wird 1,61 sein. Außerdem werde ich die Schriftstärke ändern. Lassen Sie uns den Wert auf 300 setzen und etwas Abstand zwischen den Buchstaben schaffen. Machen Sie 0,1 R& draus. Als Nächstes ändere ich die Farbe. Benutze deine blaue Farbe. Sehen wir uns also die Überschriftenelemente an. Sieh nett aus. Als Nächstes wähle ich die Sterne aus. Ich meine die Ikone. Lassen Sie uns die Schriftgröße ändern und daraus 1,6 RAM machen. Ändere auch die Farbe. Du siehst eine Orange. Wie Sie sehen können, sehen Sterne gut aus. Und jetzt ist es an der Zeit, das H, die vier Überschriftenelemente, das ist der Preis, anzupassen vier Überschriftenelemente, das ist der Preis, die Schriftgröße zu ändern. Ändere auch die Farbe. Wie Sie sehen können, sehen Überschriften gut aus. Okay, jetzt brauchen wir die gleichen Styles für den Button unten Wie Sie sehen können, sind diese Kacheln angebracht und der Button sieht gut aus. Als letztes müssen Sie in diesem Abschnitt die Symbole der Karte anpassen . Lassen Sie uns den Wrapper auswählen und die Position definieren Machen wir es absolut. Wir benötigen eine relative Position für das übergeordnete Element, um die Elemente entsprechend dem übergeordneten Element auszurichten. Lassen Sie uns die ersten beiden auf RAM und die rechte Position auch auf RAM setzen . Als Nächstes benötigen wir Display-Flex und wir müssen die Richtung ändern, es zu einer Spalte machen. Wie Sie sehen können, sind die Font Awesome-Symbole in der oberen rechten Ecke der Karte angeordnet Jetzt müssen wir das Symbol selbst anpassen und gestalten. Ich meine das Font Awesome-Symbol. Lassen Sie uns die Breite auf drei RAM setzen und auch die Höhe definieren . Machen wir es ebenfalls auf 31. Die Hintergrundfarbe muss weiß sein. Dann werde ich die Symbole mit einem Randradius von 50 Prozent abgerundet machen Schaffen Sie auch am unteren Rand etwas Platz , indem Sie den Rand verwenden, unten ein RAM. Und dann platziere ich die Symbole mithilfe von Display Flex, Justify Content Center in der Mitte der Kreise. Außerdem müssen wir die Artikel in der Mitte ausrichten. Lassen Sie uns gleich danach einige Schatteneffekte mit Box-Shadow erstellen einige Schatteneffekte mit Box-Shadow Verwenden Sie Ihre Werte 0,5 RAM, ein RAM und die schwarze RGBA-Farbe mit einer geringeren Und jetzt ändern wir die Schriftgröße, machen einen Punkt auf RAM und ändern auch die Farbe. Benutze blaue Farbe. Ordnung, die Symbole sehen also gut aus, und jetzt müssen wir sie ausblenden, weil sie erscheinen sollten, wenn Sie mit der Maus darauf zeigen Lassen Sie uns die Symbole ausblenden und sie mit Transform leicht verschieben . Übersetze den Y-Wert in eine Rampe. Wie Sie sehen können, sind die Symbole versteckt. Jetzt müssen wir einen Übereffekt erzeugen. Wählen wir die Preiskarte aus, indem wir den Mauszeiger bewegen. Und wir müssen auch die Symbole auswählen. Beim Schweben. Wir müssen die Symbole wieder anzeigen und auch die Eigenschaft Transform Translate Y auf die Standardposition setzen. Ich meine, wir brauchen hier Null. Und verwenden Sie auch den Übergang für einen gleichmäßigen Effekt. Wie Sie sehen können, haben wir hier einen wirklich schönen und einfachen Schwebeeffekt Und mit dem Preisbereich sind wir fertig. Fahren wir also fort und fahren wir mit dem nächsten Abschnitt fort. 9. Projekt 1 - Erstelle einen Blog-Bereich: Okay, jetzt ist es an der Zeit, weiterzumachen. Um unseren nächsten Abschnitt zu erstellen , der ein Blog-Bereich sein wird, fügen wir Ihre neuen Kommentare Blog und Blog ein. Und dann öffne den Abschnitt-Tag mit einem Klassennamen, Blog. Ich füge hier ein DIV-Tag mit dem Inhalt des Klassenblogs ein, in das ich hier ein weiteres einfüge der Klassenblock oben steht. Wir brauchen hier wieder einen DIV-Tag mit einem Klassenmagazin. Und ich werde auch das Urinbild weitergeben. Wählen wir ein Bild aus, das Magazine Dot PNG sein soll. Richtig? Als Nächstes benötigen wir das DIV-Tag mit einer Klasse, Trends und dann das H1-Heading-Tag mit dem Wert Wintertrends. 2023. Kam als Nächstes. Ich werde den Download-Button verwenden. Und dann verwenden wir das DIV-Tag mit der Klasse. Blog. Die Artikel werden drei verschiedene Artikel enthalten, in denen ich die Jahresspanne mit einer Zahl von eins durchgehen werde. Dann brauchen wir ein weiteres Span-Element mit etwas Blindtext. Lass uns den Artikel zweimal duplizieren, denn wie gesagt, wir brauchen insgesamt drei Artikel. Also lasst uns die Zahlen ändern. In Ordnung, das war's also mit dem HTML-Markup. Lassen Sie uns fortfahren und mit der Anpassung dieses Abschnitts beginnen. Ich werde neue Kommentare einführen. Wählen Sie dann die definierte Breite des Abschnittelements aus. Es werden 100% sein. Für die Höhe. Ich werde es auf Viewport-Höhe einstellen auf Viewport-Höhe Außerdem werde ich die Hintergrundfarbe ändern. Es wird blaue Farbe haben. Dann werde ich Flexbox verwenden. Lassen Sie uns die Elemente mithilfe von Justify-Content Center und Align Items Center in der Mitte platzieren mithilfe von Justify-Content Center und Align Items Center in und Align Okay, als Nächstes wähle ich Blockinhalt aus. Definieren wir eine Welle. Es werden 50 Prozent sein. Dann wird die Höhe 50 Rampen betragen. Ich werde die Hintergrundfarbe ändern. Ich werde eine orange Farbe verwenden. Dann lassen Sie uns die Ecken mithilfe des Randradius abgerundet machen. Also hier haben wir den Inhalt. Lassen Sie uns weitermachen und Blog top auswählen. Benutze Flexbox. Ich schlage vor, dass die via-Inhalte gleichmäßig verteilt sind. Außerdem werde ich die Elemente in der Mitte ausrichten. Als Nächstes wählen wir das obere Blockbild aus. Ich bin wie das Magazin. Lassen Sie uns oben etwas Platz einrichten , indem wir den Rand der oberen fünf RAM verwenden. Das Bild sieht also gut aus. Als Nächstes verwende ich Trends, H1-Überschriftenelemente. Das hat die Schriftgröße geändert. Es werden sechs RAM sein. Außerdem werde ich die Breite ändern. Setzen wir es auf fünf Primzahlen und überprüfen auch den Abstand zwischen den Wörtern anhand der Zeilenhöhe Eins. Dann ändere die Farbe, mach es weiß, dann ändere die Farbe, mach es weiß. Und nutzen Sie auch etwas Platz an der Unterseite. Richtig. Danach fahren wir fort und wählen Schaltfläche. Definieren wir die Breite. Es werden 18 RAM sein. Dann definiere ich die Höhe. Es wird voller RAM sein. Ändern Sie auch die Hintergrundfarbe. Verwenden wir blaue Farbe. Löscht den Standardrahmen. Also hier haben wir den Button. Ich werde es mit Border-Radius abgerundet machen. Drei RAM. Außerdem wird die Schriftgröße auf 1,6 RAM geändert. Ändern Sie dann die Farbe, machen Sie es weiß und machen Sie auch den Cursorzeiger. Richtig. Danach werde ich anfangen, an Artikeln zu arbeiten. Lassen Sie uns Flexbox verwenden. Wir brauchen das Justify-Content Center. Außerdem benötigen wir oben etwas Platz , indem wir den Rand oben zum RAM verwenden. Also hier haben wir die Artikel. Wählen wir den Artikel selbst aus. Definierte Breite, es werden 23 RAM sein. Außerdem müssen wir die Höhe definieren, die zehn RAM beträgt. Dann schaffen Sie mit dem Rand etwas Platz. Danach werde ich Flexbox verwenden. Lassen Sie uns die Elemente in der Mitte ausrichten und auch den Cursorzeiger verwenden. Okay, als Nächstes wähle ich im Artikel Span-Elemente aus. Lassen Sie uns die Schriftgröße erhöhen, in den RAM übertragen und auch die Farbe ändern. Ich werde weiße Farbe verwenden. Als Nächstes mache ich den Text in Großbuchstaben. Und ändere auch die Zeilenhöhe. Mach es zu einem. Sie erhalten also den Text der Artikel. Lassen Sie uns diesen Code duplizieren und nun das erste Span-Element mit dem n-ten Child-Selektor auswählen Ich werde die Schriftgröße auf fünf RAM erhöhen . Dann Farbe loswerden, Eigentum besteuern. Und auch die Zeilenhöhe. Ich werde die Schriftstärke zusammen mit dem Wert Bolt verwenden. Und lassen Sie uns auch etwas Platz auf der rechten Seite schaffen , indem wir eine Rampe am Rand rechts verwenden Wie Sie sehen können, ist der Blog-Bereich fertig und er sieht gut aus. Gehen wir zum nächsten über. 10. Projekt 1 - Kontaktabschnitt erstellen: Ordnung, also lass uns weitermachen und beginnen, unseren nächsten Abschnitt zu erstellen , der ein Kontaktbereich sein wird Ich werde Ihre neuen Kommentare, Kontakt und Konflikt, einfügen . Öffnen Sie dann die Abschnittselemente mit dem Klassennamen Kontakt. Ich füge hier ein DIV-Tag mit einem Klassenkonfliktinhalt ein. Let's Institute und andere DIV, die zufrieden sein werden. Links. füge Ihre H2-Überschriftenelemente in den Text ein Abonniere unseren Newsletter und sichere dir 30%, die im Span-Element platziert werden. Als Nächstes werde ich das U DIV-Tag mit dem Klasseninhalt platzieren , oder? Darin füge ich ein Eingabe-Tag mit dem Typ E-Mail und mit einem Platzhalterattribut Ihre E-Mail-Adresse Außerdem füge ich deinen Button mit dem Text Anmelden ein. In Ordnung, das war's also mit dem HTML-Markup. Lassen Sie uns anfangen, CSS in die Kommentare, Kontakte und Kontakte zu schreiben , die ich im Kontaktbereich auswählen werde. Definieren wir die Breite. Es werden 100% sein. Außerdem werde ich die Höhe definieren. Es wird 40 sein, Viewport-Höhe. Dann verwende ich Display Flex. Und ich werde den Inhalt mithilfe von Justify-Content Center und Align Items Center in der Mitte platzieren mithilfe von Justify-Content Center und Align Items Center Wie Sie sehen können, befindet sich der Inhalt in der Mitte. Lassen Sie uns weitermachen und den Inhalt auswählen und die Breite definieren. Es werden 50% sein. Außerdem werde ich definieren, dass die Höhe 15 RAM beträgt. Dann werde ich wieder Flexbox benutzen. Nehmen wir also an, dass die Elemente horizontal nebeneinander angeordnet sind Dann lassen Sie uns weitermachen und den linken Inhalt auswählen und die Breite definieren. Es werden 40 Prozent sein. Dann definiere ich die Höhe als hundertprozentig. Ich gehöre zu 100% zu den Eltern. Dann ändern wir die Hintergrundfarbe. Ich werde orange Farbe verwenden. Also hier haben wir die linke Seite. Lassen Sie uns die Ecken abgerundet machen indem wir den Randradius für RAM und 00 für den Außerdem werde ich Flachsbücher verwenden. Und ich möchte die Gegenstände in der Mitte platzieren. Lassen Sie uns außerdem mithilfe von Polstern etwas Platz auf der linken Seite schaffen mithilfe von Polstern etwas Platz auf der linken Seite Danach wähle ich den linken Inhalt und die Überschriftenelemente aus. Definieren wir eine Welle. Es werden 2% sein. Außerdem werde ich die Schriftgröße ändern. Stellen wir es auf 2,2 RAM ein. Dann ändere ich die Farbe, es wird weiß sein. Außerdem müssen wir die Zeilenhöhe verringern. Es wird ein Punkt sein. Für. Jetzt wähle ich diese Span-Elemente aus, die 30% von enthalten Lassen Sie uns die Schriftgröße ändern, 2,5 RAM daraus machen und auch die Farbe ändern. Ich werde deine blaue Farbe verwenden. Richtig? Die linke Seite sieht also wirklich gut aus. Lassen Sie uns weitermachen und die rechte Seite auswählen. Definieren wir die Breite. Es werden 60% sein. Außerdem definiere ich die Höhe als 100 Prozent. Dann ändere die Hintergrundfarbe, verwende die blaue Farbe. Dann werde ich die Ecken mithilfe des Randradius abgerundet In diesem Fall benötigen wir Null für RAM, für RAM. Und Null. Verwenden Sie auch Flexbox. Um die Elemente in der Mitte auszurichten, müssen wir die Elemente in der Mitte und auch in der Mitte ausrichten . In Ordnung, lassen Sie uns weitermachen und die Eingabeelemente auswählen. Zunächst definiere ich , dass die Breite 35 RAM beträgt . Definieren Sie dann die Höhe. Machen wir es mit vollem RAM. Ändern Sie die Hintergrundfarbe. Ich werde hier eine Farbe 17469 verwenden. Sagen wir hellere blaue Farbe. Als Nächstes werde ich mithilfe von Padding etwas Platz in der Eingabe schaffen mithilfe von Padding etwas Platz in der Eingabe Dann wird der Standardrand entfernt und Create for the radius 0.5 RAM ändert auch die Farbe. Ich werde die Farbe weiß machen und mit dem Rand etwas Platz auf der rechten Seite schaffen, oder? Willst du, dass Ram wurde. Wie Sie sehen können, sieht das Eingabeelement also besser aus. Lassen Sie uns weitermachen und erneut die Eingabe auswählen. Hier Platzhalter. Lass uns die Farbe ändern. Machen Sie es weiß und ändern Sie auch die Schriftgröße. Machen Sie einen Punkt daraus. Für RAM. In Ordnung. wähle ich die Eingabe mit Fokus aus. Apropos, ich werde die Grenze ändern. Machen wir es zu einem festen Raum von 0,1. Und als Farbe werde ich Orange verwenden. Sobald wir die Eingabe fokussieren, ändert sich die Grenze. Richtig? Jetzt ist es an der Zeit, die Schaltfläche anzupassen, die sich neben dem Eingabeelement befindet. Definieren wir eine Breite, machen wir daraus zehn RAM. Dann definiere ich die Höhe. Es wird voller RAM sein. Ändern Sie auch die Hintergrundfarbe. Verwenden wir hier die orange Farbe. Dann. Ich werde die Grenze loswerden. Machen wir eine Nonne und verwenden für den Radius, um die Ecken des Knopfes abgerundet zu machen. Dann ändere ich die Schriftgröße auf 1,6 RAM. Ändern Sie die Farbe des Textes. Machen wir es weiß und ändern wir auch den Cursortyp, machen es zu einem Zeiger. In Ordnung, das war's mit der Kontaktabteilung. Es sieht wirklich nett aus. Fahren wir mit dem nächsten Abschnitt fort. 11. Projekt 1 - Erstelle und gestalte den Footer der Website: Okay, jetzt ist es an der Zeit, unseren letzten Abschnitt des Projekts zu erstellen , der eine Fußzeile sein wird Eigentlich wird die Fußzeile einfach sein. Lassen Sie uns Ihre Kommentare für die Fußzeile einfügen. Dann öffne ich das HTML5-Fußzeilen-Tag. Wir nehmen die Fußzeile der Klasse. Dann fügen wir das U DIV-Tag mit dem Klassen-Copyright ein, in dem ich einen Absatz platzieren werde , die HTML5-Entität enthält Ich meine das Copyright-Zeichen, gefolgt vom Text. Alle Rechte vorbehalten. 2023. Und dann mit Code erstellen und erstellen. Außerdem werden wir hier ein Logo haben. Ich meine das Font Awesome-Symbol der Couch, gefolgt von der H1-Überschrift, Element Furniture Okay, das ist es also. Alle Elemente werden erstellt. Lassen Sie uns weitermachen und diesen Abschnitt anpassen. Stattdessen Kommentare für die Fußzeile. Dann wähle ich das Fußzeilenelement aus und definiere seine Breite Es werden 50 Prozent sein. Dann wird die Höhe fünf RAM betragen. Außerdem benötigen wir hier einen Rand oder Sie müssen das Element zentrieren. Und benutze auch Display, Flex. Begründen Sie den Abstand zwischen den Inhalten, um Platz zwischen den Elementen zu schaffen. Außerdem müssen wir hier die Elemente in der Mitte ausrichten , um die Elemente vertikal zu zentrieren. Als Nächstes verwende ich border top mit den Werten 0.1 RAM Solid. Und wie die Farbe. Verwenden wir den CCC. In Ordnung, das war's mit der Fußzeile Als Nächstes werde ich die Copyright-Entwicklung anpassen. Lassen Sie uns die Schriftgröße auf 1,6 RAM setzen. Ändere auch die Farbe, blaue Farbe. Als Nächstes kümmere ich mich um die rechte Seite der Fußzeile Verwenden wir Display Flex, um die Elemente nebeneinander zu platzieren. Außerdem müssen wir hier die Gegenstände zentriert ausrichten. Die Elemente sind gut angeordnet. Als Nächstes wählen wir das Font Awesome-Symbol aus. Erhöhen Sie die Schriftgröße und bringen Sie sie in den RAM. Und ändere auch die Farbe, die ich hier verwenden werde, Orange. Und dann brauchen wir etwas Platz auf der rechten Seite, indem Marginalwert rechts mit dem Wert 1,5 Gramm In Ordnung, das war's mit der Ikone. Als Nächstes möchte ich die H1-Überschriftenelemente auswählen. Lassen Sie uns die Schriftfamilie ändern. Benutze hier den Kenia-Kurs. Es stellt auch die Schriftgröße so ein, dass läuft und einen Buchstabenabstand von 0,3 RAM verwendet. Und ändere auch die Farbe. Benutze deine blaue Farbe. In Ordnung, also schauen wir uns das über die Fußzeile an. Es sieht gut aus und tatsächlich wird das Projekt, das wir als nächstes fertig haben, wir müssen es responsiv machen 12. Projekt 1 - Mache das Projekt responsiv: In Ordnung, jetzt ist es an der Zeit, unser Projekt an verschiedene Bildschirmgrößen anzupassen Ich werde die Seite überprüfen und in den Responsive-Modus wechseln. Das Projekt ist für extra große Bildschirme konzipiert. Und jetzt müssen wir die Bruchpunkte finden , an denen wir einige Änderungen vornehmen müssen. Eigentlich denke ich, dass das Projekt nach 1.600 Pixeln einige Änderungen benötigt Gehen wir also zurück zum Editor. Und zuerst füge ich neue Kommentare für Responsive ein. Dann erstelle ich eine CSS-Medienabfrage. Und als Bildschirmgröße definiere ich hier 1.600 Pixel Zuallererst werde ich mich um das Banner kümmern. Lassen Sie uns also weitermachen und ein Banner auswählen. Ich werde die Breite ändern. Machen wir 70% draus. Ordnung, als Nächstes nehmen wir eine kleine Änderung für die Produkte Wählen wir es aus und setzen Padding Top auf zehn RAM. Außerdem werde ich die Höhe ändern , sie wird 100 Viewport-Höhe sein Richtig? Wie Sie sehen können, sieht der Bereich Produkte besser aus. Als Nächstes wähle ich oben Produkte aus und ändere die Breite auf 70%. Also werde ich mich um die Produkte kümmern, um die Icons. Lassen Sie uns ebenfalls mit zwei 70% beginnen. Jetzt haben wir also ein viel besseres Ergebnis. Ordnung, als Nächstes kümmere ich mich um die Preiskarten Ändern wir also die Breite. Es werden 70% sein. Als Nächstes werde ich mich um den Blog-Bereich kümmern. Lassen Sie uns also weitermachen und Blog-Inhalt auswählen. Definierte Breite. Es werden wieder 70% sein. Jetzt haben wir ein besseres Ergebnis. Lassen Sie uns dann weitermachen und Kontaktinhalt auswählen. Ändern Sie erneut die Breite und machen Sie sie auf 70%. Der Kontaktbereich sieht gut aus. Und schließlich müssen wir uns um die Fußzeile kümmern. Lassen Sie uns das mit zwei 70% ändern. In Ordnung, also ich finde, alles sieht gut aus. Lassen Sie uns weitermachen und den nächsten Breakpoint finden , der meiner Meinung nach bei 1.400 Pixeln liegen wird Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen. Und als maximale Breite setzen wir hier 1.400 Ich werde die Schriftgröße der HTML-Elemente ändern. Setzen wir es auf 54 Prozent. Dadurch werden alle Elemente etwas kleiner und es wird uns helfen , das Projekt responsiv zu gestalten. Als Nächstes kümmere ich mich um die Preisgestaltung, die wichtigsten Elemente, die ich im Bild habe. Lass uns die Breite ändern, 60 RAM draus machen und auch den Platz auf der rechten Seite ändern, Margin-Right auf zehn Rampen setzen Jetzt haben wir bessere Ergebnisse. Und eigentlich all die anderen Abschnitte. Sieh nett aus. Lassen Sie uns also weitermachen und mit der Arbeit am nächsten Breakpoint beginnen , der meiner Meinung nach 1.200 Pixel groß sein wird Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen. Und als maximale Breite geben wir hier 1.200 Lassen Sie uns zunächst die Schriftgröße der HTML-Elemente ändern . Ich setze es auf 51% Wie Sie sehen können, wurden alle Elemente kleiner. Als Nächstes wähle ich Banner aus. Lassen Sie uns die Breite ändern und es zu 80 Prozent machen Damit das Banner gut aussieht. Als Nächstes werde ich hier den Produktbereich betrachten. Wählen wir Produkte Top aus. Ändere seine Breite, mache es zu 80 Prozent. Und ändern Sie auch die Breite der Produktsymbole. Lassen Sie uns ihn ebenfalls auf 8% setzen. In Ordnung, als nächstes haben wir hier eine Preiskarte. Also wähle ich Preiskarten aus und setze die Breite auf acht Prozent. Wir haben also wieder drei Karten auf jeder Linie. In Ordnung, lassen Sie uns weitermachen und uns um den Blog-Bereich kümmern. Wählen wir den Blockinhalt aus und ändern wir seine Breite, machen wir ihn zu acht Prozent. Als Nächstes wähle ich das obere Blog-Bild aus, also Magazin. Stellen wir die Breite auf 40 RAM ein. Also wähle ich Blogartikel aus und setze die Margenobergrenze auf Null. In Ordnung, der Blog-Bereich sieht also gut aus. Und jetzt müssen wir uns um den Kontaktbereich und auch um die Fußzeile kümmern Lassen Sie uns also die Breite für Kontaktinhalte auf 8% setzen und auch die Breite ändern, auch die Fußzeile In Ordnung, das sind die Sitze in Bezug auf diesen Breakpoint. Lass uns weitermachen und den nächsten finden. Also ich denke, die nächsten Breakpoints werden tausend Pixel sein Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage mit einer maximalen Breite von tausend Pixeln erstellen neue CSS-Medienabfrage mit einer maximalen Breite von tausend Pixeln Zunächst werde ich die Schriftgröße des HTML-Elements verringern. Machen wir 46% daraus. Weiter. Ich kümmere mich um die Navigation. Wählen wir ein Nickerchen oder eine Top-Entwicklung und ändern wir die Marschrichtung. Machen Sie 0,2 Rem auf der linken und rechten Seite. Also zumindest die Navigation, sie sieht besser aus. Als Nächstes wähle ich Suchleiste, Eingabeelement aus. Und ich werde die Breite ändern. Machen wir es zum Laufen. Das war's also mit der Navigation. Lassen Sie uns die Banner-Überschrift auswählen und die Schriftgröße ändern. Machen wir sechs RAM draus. Dann kümmere ich mich um den Bereich Produkte. Lassen Sie uns Produkte auswählen und die Höhe definieren. Lassen Sie uns die Höhe des Viewports auf 90 festlegen. Und außerdem werde ich das Polsteroberteil auf Five-Prime setzen. Als Nächstes wähle ich Produkte aus. Oben Sie H2, das Überschriftenelement, und stellen Sie die Schriftgröße auf fünf REM Ordnung, duplizieren wir diesen Code und dasselbe für das H-Eins-Element Ich setze die Schriftgröße auf sieben Rampen. Richtig? Fahren wir fort und fahren mit dem nächsten Abschnitt fort, dem Abschnitt Preisgestaltung. Ich wähle das oberste Bild „ Preisgestaltung“ aus. Stellen wir die Breite auf 40 RAM ein. Als Nächstes müssen wir Pricing auswählen, oberste H1-Überschriftenelement Ändern wir die Schriftgröße, machen wir fünf Primzahlen draus. Und außerdem werde ich mit 23 bis fünf R& beginnen. In Ordnung, also ich finde, die Oberseite sieht gut aus. Jetzt kümmern wir uns um die Karten. Stellen wir die Breite auf 90% ein. Also noch einmal, wir haben drei Karten auf jeder Linie. Und eigentlich sieht alles gut aus. Lassen Sie uns weitermachen und den nächsten Breakpoint finden , der meiner Meinung nach 800 Pixel groß sein wird Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage mit einer maximalen Breite von 800 Pixeln auswählen neue CSS-Medienabfrage mit einer maximalen Breite von 800 Pixeln Lassen Sie uns erneut die Schriftgröße der HTML-Elemente ändern. Ich werde es auf 139 Prozent setzen. Als Nächstes wähle ich ein Logo aus. Ich bin im Font Awesome-Symbol und ändere die Schriftgröße, mache es für RAM. Danach wähle ich Suchleiste , Eingabeelement. Und ich werde die Breite ändern. Machen wir 30 Rampen draus. Okay, jetzt müssen wir uns um den Bereich Produkte kümmern Ich denke, wir haben viel Platz in diesem Bereich Wählen wir also Produkte aus und suchen wir nach einer Höhe von 75, um eine Viewporthöhe von 75 Und ändern Sie auch die Polsterung an der Oberseite. Setzen wir es auf Null. In Ordnung. Als Nächstes wähle ich Icons Development aus. Lassen Sie uns die Höhe auf 18 RAM setzen. Außerdem müssen wir die Größe der Symbole verringern. Wählen wir also Bilder aus und setzen die Breite auf fünf Primzahlen. Jetzt sehen sie viel besser aus. Außerdem wähle ich Span-Elemente aus und verringere die Schriftgröße. Machen wir die Rampe 1.8. Ordnung, als Nächstes kümmern wir uns um den Abschnitt mit der Preisgestaltung Wählen Sie Preisgestaltung für das oberste Bild und legen Sie die Breite auf drei fest, damit es ausgeführt werden kann. Außerdem müssen wir uns um die Preiskarte kümmern. Stellen wir die Breite auf 27 RAM ein. Jetzt sind die Bilder u2, größer. Also kümmern wir uns darum. Wählen Sie das Bild der Preiskarte aus und definieren Sie die Breite. Machen wir 18 RAM daraus. Jetzt sehen sie viel besser aus. Jetzt müssen wir uns um den Blockabschnitt kümmern. Lassen Sie uns also weitermachen und den Blockinhaltssatz mit zwei 90% auswählen . Außerdem wähle ich das obere Blog-Bild aus. Und ich werde seine Breite als drei bis zur Rampe definieren. Richtig? Lassen Sie uns als Nächstes weitermachen und uns um die Trends kümmern. H1-Überschriftenelemente. Ich werde die Schriftgröße ändern. Stellen wir es auf vollen RAM ein. Und ändere auch die Breite, mache 30 Rampen draus. Okay, danach wähle ich Blogartikel aus. Und lassen Sie uns den oberen Rand auf fünf RAM setzen , um die Artikel nach unten zu verschieben. In Ordnung, das war's mit der Blog-Sektion. Lassen Sie uns weitermachen und uns um den Abschnitt „Verhalten“ kümmern, Kontaktinhalt auswählen und mit 90% ändern. Eigentlich brauchen wir hier ein Prozentzeichen. Außerdem wähle ich die rechte Seite. Ich meine das Eingabeelement. Stellen wir es mit 230 RAM damit der Kontaktbereich gut aussieht, und gehen wir zur Fußzeile über, ändern die Breite und machen ihn zu 90% In Ordnung, das war's also mit diesem Breakpoint. Lass uns weitermachen und den nächsten finden. Ich denke, der nächste Breakpoint wird 600 Pixel sein Lassen Sie uns also eine neue CSS-Medienabfrage erstellen und die maximale Breite auf 600 Pixel festlegen. Zunächst ändere ich erneut die Schriftgröße des HTML-Elements. Es werden 35% sein. Als Nächstes wähle ich Logo-Span-Elemente aus. Und ich werde die Schriftgröße ändern. Machen wir drei RAM draus. Wir müssen uns also um die Eingabeelemente der Suchleiste kümmern. Lassen Sie uns seine Breite auf 26 RAM festlegen. Außerdem müssen wir uns um die Navigationselemente kümmern . Also wie Entwicklung und Veränderung mit make it 12 RAM. Wie Sie sehen können, sieht die Oberseite der Website nun gut aus. Gehen wir zur Landung über. Ich ändere die Höhe. Es wird eine Viewport-Höhe von 75 haben. Außerdem wähle ich die Überschriftenelemente aus, die auf dem Banner platziert werden, und lass uns seine Breite ändern es zu Ram machen. Weiter. Wir müssen uns um den Knopf kümmern. Bei den Batesons setzen wir die Breite auf 15 RAM. Als Nächstes wählen wir den ersten Batson und ändern die Position, in der ich mich befinde Die richtige Position wird 20 sein, um hochzufahren. Okay, das war's also mit dem Header der Website. Lassen Sie uns weitermachen und uns um den Bereich Produkte kümmern. Lassen Sie uns die Höhe auf 90 Viewport-Höhe setzen. Jetzt kann man sehen, dass wir den Logspace nicht mehr haben. Wählen wir also Produkte aus. Oben. Wir brauchen die Textausrichtung in der Mitte und wir müssen den Rand am unteren Rand ändern Stellen wir es auf drei Rampen ein. Ordnung, wählen wir die Symbole aus und setzen ihre Breite auf 70% Außerdem benötigen wir Flex-Wrap zum Wickeln, um die Symbole auf verschiedenen Zeilen zu platzieren. Als Nächstes müssen Sie Entwicklung auswählen und die Breite auf 16 RAM einstellen. Außerdem müssen wir die Marge festlegen, um zu rennen. Es wird also davon ausgegangen, dass der letzte Artikel auf der linken Seite einen Rand hat. Also werde ich das Problem beheben. Wählen wir Entwicklung aus. Ich bin im letzten Element der Liste. Setzen wir den Spielraum auf, um zu rennen. Kann sehen, dass das Problem jetzt behoben ist. In Ordnung? Als Nächstes müssen wir uns um den Blockabschnitt kümmern , da der Abschnitt mit den Preisen gut aussieht. Lassen Sie uns also weitermachen und Artikel und Span-Element auswählen. Ändern Sie die Schriftgröße. Stellen wir es auf 1,5 RAM ein. Jetzt sieht es gut aus. Und mit diesem Breakpoint sind wir eigentlich fertig. Lassen Sie uns weitermachen und den nächsten Breakpoint finden , der der letzte sein wird Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage als maximale Breite des Bildschirms erstellen neue CSS-Medienabfrage als maximale Breite des Bildschirms Ich gebe hier 450 Pixel an. Lassen Sie uns zunächst die Schriftgröße des HTML-Elements ändern . Es werden 32% sein. Als Nächstes kümmere ich mich um das Logo. Ich denke, es wäre nett, wenn wir den Text verstecken würden. Ich bin in diesem Parlament und benutze überhaupt kein Display. Als Nächstes werde ich mich um den Bereich Produkte kümmern. Wählen wir Produkte aus und sagen wir auf Höhe des Viewports Hallo. Ordnung, lassen Sie uns als Nächstes weitermachen und uns um die obere Seite des Preisbereichs kümmern die obere Seite des Preisbereichs Ich wähle ein Bildelement aus. Stellen wir die Breite auf 25 RAM ein. Und lassen Sie uns auch die Überschrift H1 anpassen. Ich werde die Schriftgröße ändern. Lassen Sie uns die Schriftgröße auf 3,5 RAM setzen. Und dann ändere die Breite, mache 25 Wickel draus. In Ordnung. Jetzt musste ich mich um den Kontaktbereich kümmern. Lassen Sie uns weitermachen und die linke Seite auswählen. Ich meine Inhalt links, H2, Überschriftenelement. Lassen Sie uns die Schriftgröße auf einen Punkt setzen, eine Falle. Als Nächstes wähle ich Element mit linker Spanne kontaktieren aus. Und um die Schriftgröße zu ändern. Machen wir es bis zur Rampe. In Ordnung, lass uns weitermachen und uns um die rechte Seite kümmern. Wähle Inhalt aus, oder? Eingabeelemente. Verringern Sie die Breite, machen Sie es zu 25 RAM. Jetzt kann es also alles sehen. Sieht gut aus und wir können sagen , dass unser Projekt auf verschiedene Bildschirmgrößen reagiert. In Ordnung, mit diesem Projekt sind wir fertig. Ich hoffe es hat dir gefallen. Jetzt können wir weitermachen und mit der Erstellung unseres nächsten Projekts beginnen , dem ich hoffe, dass es interessant sein wird und Sie etwas Neues lernen werden. In Ordnung, lass uns weitermachen. 13. Projekt 2 - Vorschau: Hallo und willkommen zu unserem zweiten Projekt , einer persönlichen Portfolio-Website. Heutzutage ist diese Art von Website sehr beliebt und sehr gefragt, daher denke ich, dass sie für Sie interessant sein wird. In dem Projekt geht es um einen Webentwickler mit all seinen Fähigkeiten, Arbeiten, Projekten, Kontakten usw. Lassen Sie uns weitermachen und das Projekt beschreiben. Wir haben hier also einen Header der Website, in dem wir ein Logo, ein Banner und ein Hamburger-Menüsymbol haben . Wenn ich darauf klicke, erscheint die Navigation mit einigen netten Effekten. Das Banner besteht aus verschiedenen Elementen, darunter dem Bild eines Entwicklers. Als nächstes haben wir einen Abschnitt mit Fähigkeiten, der uns die Technologien und den Wissensstand eines Webentwicklers zeigt . Abschnitt Fähigkeiten folgt der Abschnitt Projekt, in dem wir verschiedene Arbeiten eines Entwicklers finden. Danach haben wir hier einen Kontaktbereich mit einigen Kontaktdaten und Eingabefeldern. Und schließlich findest du hier eine einfache und nette Fußzeile. Das Projekt reagiert auf verschiedene Bildschirmgrößen. Wenn ich die Seite untersuche, wechsle ich in den responsiven Modus und überprüfe das Projekt auf vier verschiedenen Bildschirmgrößen. Sie werden feststellen, dass das Projekt responsiv ist und auf jeder Bildschirmgröße gut aussieht. Auch hier werden alle Projekte für extra große Bildschirmgrößen erstellt. Ich befinde mich auf diskreten Websites mit 1920 Pixeln Breite und 1080 Pixeln Höhe Wenn Sie also eine relativ kleinere Bildschirmgröße verwenden, sollten Sie während der Vorlesungen in den responsiven Modus wechseln und Breite und Höhe so angeben. Andernfalls sieht das Projekt auf einer kleineren Bildschirmgröße nicht gut aus , bis wir es responsiv gemacht haben. Bitte berücksichtigen Sie dies. Okay, das war's mit unserem zweiten Projekt. Jetzt können wir weitermachen und anfangen, es zu bauen. 14. Projekt 2 - Erstelle und gestalte den Header der Website: In Ordnung, es ist an der Zeit, mit dem Aufbau unserer Projekte zu beginnen. Ich habe hier einen Ordner, Portfolio-Website. Lassen Sie uns weitermachen und es in VS Code öffnen. Und dann erstellen Sie unsere Arbeitsdateien für HTML, CSS und auch für JavaScript. Dann lassen Sie uns weitermachen und die Datei index.html öffnen und ein einfaches HTML-Dokument erstellen. Ich ändere den Titel. Es wird eine Portfolio-Website sein. Dann werde ich die CSS-Datei verlinken. Und lassen Sie uns auch die JavaScript-Datei mit dem Script-Tag verknüpfen. In Ordnung, öffnen wir den Projektbrowser. Und außerdem werde ich den Editor und den Browser quasi nebeneinander platzieren Browser quasi nebeneinander Außerdem werde ich ein paar verschiedene Links verwenden. Die erste wird Google Fonts sein. Während des gesamten Projekts werden wir eine Schrift namens Writed These verwenden. Lassen Sie uns ein paar verschiedene Stile auswählen. Dann suchen wir nach einer anderen Google-Schrift, die Cabot heißt Wählen Sie verschiedene Stile aus. Kopieren Sie dann den Link und fügen Sie ihn in das Hauptelement ein. In Ordnung, als nächstes brauchen wir Font Awesome CDN. Weil wir ein paar verschiedene Schriftarten verwenden werden, tolle Icons. Schnappen wir uns den Link, öffnen dann das Link-Tag und das Hauptelement und fügen das CDN In Ordnung, also ist alles bereit. Lassen Sie uns anfangen, HTML-Markup-Kommentare für Container zu erstellen HTML-Markup-Kommentare für Container Dann füge ich hier das DIV-Tag mit dem Klassencontainer ein. Dann brauchen wir noch einen Kommentar zur Navigation. Lassen Sie uns HTML-Markup für die Navigation erstellen, wir benötigen hier das DIV-Tag mit dem Klassenmenüsymbol, das zwei verschiedene Zeilen enthalten wird Die Entwicklung wird zwei Klassen haben, Linie und Zeile eins. Als nächstes brauchen wir Navigation. Ich bin im Nav-Element mit der Klasse Navigation. Es wird die Abschnittsgrenze beinhalten. Und dann haben wir hier Navi Items. Lassen Sie uns Ihr Link-Element mit Home einfügen , das ein paar Mal dupliziert wurde, und die Navigationselemente ändern Im zweiten wird es darum gehen, dann werden wir Projekte haben. Als nächstes wird die Galerie sein. Dann werden wir Blog-Kunden haben. Als nächstes folgt die Preisgestaltung und dann Kontakt. In Ordnung, das ist Eignungsnavigation. Lassen Sie uns neue Kommentare für Landing verfassen. Öffnen wir den Abschnittstag mit der Klasse Landing. Ich werde das DIV-Tag mit der Klasse Section und der Überschrift PG mit dem Text Web Developer einführen. Eigentlich wird es H1-Überschrift, Tag und nicht das Team sein Tag und nicht das Team Als nächstes benötigen wir ein Logo mit Span-Element mit dem Textweb. Und dann erneut das Element mit dem Text-Tab überspannen. Richtig? Danach werde ich Banner erstellen. Fügen wir hier den Abschnittsrand ein. Und wir werden hier auch Entwicklerinformationen haben. Es wird eine H3-Überschrift mit der Begrüßung der Klasse enthalten. Lass uns eine SMS an die Institution schreiben, hallo. Dann haben wir ein Span-Element. Mein Name ist Lassen Sie uns Ihre H1-Überschriftenelemente mit einem Klassennamen einfügen und dann Ihr Span-Tag mit dem Text John Smith einfügen. In Ordnung. Danach füge ich dein h3-Überschrift-Tag mit der Klasse ein Prof. Ich meine Beruf. Lassen Sie uns einige Texte vorstellen. Dann. Ist es Span Tag, der Content Web Developer. Ordnung, als Nächstes fügen wir einen Absatz ein, in dem die Klasse behandelt wird. Und ich werde einen Scheintext einrichten. Gleich danach. Ich werde ein paar Social-Media-Icons einrichten. Aber zuerst öffnen wir den DIV-Tag mit den sozialen Medien der Klasse. Und dann platziere ich dir Font, Awesome Icons. Die erste wird die FAA einer Marke sein, Facebook F. Dann wird die zweite die FAA einer Marke auf Instagram sein den dritten betrifft, wird es sein, wenn meine Marken ein Twitter haben. In Ordnung, hier haben wir unser HTML-Markup. Lassen Sie uns weitermachen und mit der Arbeit am Lebenslauf beginnen. Ich werde die Taste mit der Typtaste und mit einer Klasse einrichten. BTN, CV, BTN. Und auch Institutstext. Lebenslauf ablehnen. Als nächstes brauchen wir hier ein Span-Tag mit dem Text, meine Fähigkeiten. Als Nächstes werde ich ein DIV-Tag mit dem Klassennamen Developer Image einrichten. Dann fügen wir Ihren Image-Rapper ein. Ich meine, die Entwicklung wird der Class Deaf Image Wrapper sein. Fügen wir das Bild-Tag ein und wählen Sie dann den Pfad des Bildes aus. Wenn Sie Punkt PNG entwickeln. In Ordnung. das Bild folgt ein tiefes Element mit dem Klassennamen Deep Experience. Und es hat auch eine weitere Klasse Deep Work Institute Span-Tag mit der Nummer 15. Und wir brauchen auch eine weitere Spanne. Jahrelange Erfahrung. Lassen Sie uns diesen Code duplizieren. Ändere hier. Der Klassenname, wir brauchen Projekte, hat eine Nummer geändert, es werden 400 plus sein. Ändere auch den Text. Wir werden abgeschlossene Projekte ins Leben rufen. Ordnung, also schauen wir mal , dass wir hier unser HTML-Markup für die Navigation und für den Header haben unser HTML-Markup für die Navigation und für den Header Fangen wir an, stattdessen einige CSS-Kommentare für Standardstile zu schreiben . Dann wähle ich jedes Element mit einem Sternchen aus, setze den Rand und setze beide auf Null. Außerdem werde ich Box-Sizing, Border-Box definieren. Dann müssen wir die Textdekoration loswerden. Lassen Sie uns außerdem die Gliederung auf Null setzen. Und legen Sie die Schriftfamilie fest. Um diese sensorischen zu aktivieren. Okay, danach setze ich die Schriftgröße des HTML-Elements auf 62,5 Prozent, weil ich RAM als Maßeinheit verwenden werde RAM als Maßeinheit verwenden Ein RAM entspricht zehn Pixeln. Als Nächstes füge ich Ihre Kommentare für den Container ein. Wählen wir den Container aus. Definieren Sie mit 100% und definieren Sie die Höhe auch als 100 Viewport-Höhe Dann ändere den Hintergrund. Ich werde deinen linearen Farbverlauf mit ein paar verschiedenen Farben verwenden . Der erste wird 23293 sein , der zweite wird 3138 sehen und auch den dritten hier haben Es wird 232932 sein. Hier haben wir also die Hintergrundfarbe mit einem linearen Farbverlauf Als Nächstes werde ich Kommentare für die Landung eingeben. Wählen wir den Entwickler-Image-Wrapper und setzen seine Breite auf 60 RAM Denn im Moment ist das Bild zu groß. Wir brauchen hier Höhe 60 RAM. Ebenfalls. Wählen wir das Bild selbst und definieren Breite und Höhe als 100%. Jetzt wurde das Bild kleiner. Als Nächstes wähle ich das Abschnittelement aus. Lassen Sie uns mit Make it zu Hunderten Prozent definieren. Ändern Sie auch die Höhe und legen Sie sie auf eine Viewport-Höhe von 200 fest. Ich ändere dir die Höhe des Containers. Addieren wir es zu 100%. Jetzt wähle ich die Überschrift „ Abschnittshintergrund“ aus. Lassen Sie uns seine Position auf absolut setzen. Und wir müssen auch die Position für das übergeordnete Element ändern . Setzen wir es auf relativ. Dann setze den unteren Wert auf Null. Und außerdem brauchen wir 50 Prozent übrig. Und dann müssen wir für eine perfekte Zentrierung transformieren X mit -50% übersetzen Danach werde ich die Schriftgröße erhöhen. Es wird vorbei sein, um zu rennen. Wir haben hier also eine Hintergrundüberschrift. Ändern wir die Breite auf 100%. Ebenfalls. Ich werde die Ausrichtung anpassen, die Mitte besteuern und dann die Schriftfamilie ändern In diesem Fall verwende ich Schrift namens Cabinet Cursor. Jetzt sieht die Überschrift viel besser aus. Als nächstes müssen wir die Farbe ändern. Es wird 3136 3D sein. Es ist wie eine graue Farbe. Außerdem benötigen wir eine Opazität von 0,5. Jetzt sieht es wirklich gut aus. Lassen Sie uns weitermachen und Banner auswählen. Ich werde seine Position auf absolut setzen. Dann brauchen wir eine schwierige Position, um zu 50% links zu Fuß zu sein . Und dann müssen wir es mit Transform Translate zentrieren (-50 Prozent) Und wieder -50 Prozent, weil wir die Elemente vertikal und horizontal zentrieren müssen In Ordnung, danach wähle ich Logo aus. Lassen Sie uns seine Position auf absolut setzen. Dann brauchen wir eine schwierige Position, um vollen RAM zu haben. Und dann lass fünf RAM positionieren. Dann ändern wir die Schriftgröße. Es werden drei RAM sein. Wir haben also hier ein Logo, es befindet sich in der oberen linken Ecke der Seite. Als Nächstes wähle ich Span-Elemente aus. Das erste Spannelement. Lass uns die Farbe ändern, sie weiß machen. Hier haben wir also das erste Spanelement. Lassen Sie uns diesen Code duplizieren und den Klassennamen ändern. müssen wir. Wir tauschen die Schriftgröße Es werden fünf RAM sein. Und ich werde auch die Schriftfamilie ändern. Ich werde Vorbehalt verwenden. Natürlich, die Schriftstärke wird fett sein. Und ich werde auch die Farbe ändern. Ich werde die grüne Farbe verwenden, 298587. In Ordnung, wir haben hier unser Logo, das meiner Meinung nach ziemlich gut aussieht Als Nächstes zeige ich Flex für das Banner an. Und dann wähle ich Abschnittsgrenze aus. Stellen wir seine Breite auf 2,3 RAM ein. Die Höhe wird 55 RAM betragen. Dann ändere ich die Hintergrundfarbe. Verwenden wir hier BBB. Schaffen Sie auch etwas Platz auf der rechten Seite, indem Sie Margin-Right Ten RAM verwenden Hier haben wir also Abschnittsgrenze, die Grenze für die Navigation. Also werde ich jetzt die Navigation für eine Weile ausblenden. Lassen Sie uns also Kommentare einholen. Wählen Sie dann Navigation und weisen Sie der Anzeige nicht zu. Wir werden in einer Weile zur Navigation zurückkehren. Lassen Sie uns weitermachen und den Header der Website weiter anpassen. Also wähle ich vorher Abschnittsgrenze mit einer Pseudoklasse aus Lassen Sie uns den Inhalt auf leer setzen. Dann setze ich die Breite auf drei RAM. Die Höhe wird drei Rahm betragen. Eigentlich bilden wir hier den Kreis. Lassen Sie uns also den Rand so einstellen , dass er in der Farbe BBB durchgehend rammen Außerdem benötigen wir eine Hintergrundfarbe von 1d22 bis acht. Stellen Sie dann die Position auf die absolute relative Position für das übergeordnete Element ein. Wir haben hier also schon einmal Pseudoelemente. Machen wir es abgerundet, indem wir den vorhandenen Randradius verwenden. Dann lief die Position, in der ich mich befinde, die linke Position wird -1,65 sein, wie folgt Es ist eine Position, es wird minus drei RAM sein. Du wirst den Kreis haben. Lassen Sie uns diesen Code duplizieren. Wir brauchen einen weiteren Kreis, in diesem Fall verwenden wir das Pseudoelement after Wir müssen hier ein paar Dinge ändern. Wir brauchen. Untere Position. Minus drei Rampen. Eigentlich müssen wir nichts anderes ändern. Dann brauchen wir einen Gruß. Lassen Sie uns die Schriftgröße ändern. Es wird 1,6 RAM sein. Dann wandle ich Text in Großbuchstaben um. Ändere die Farbe, mach es weiß. Außerdem benötigen wir etwas Abstand zwischen den Buchstaben. Hier haben wir einen Grußtext. Als Nächstes wähle ich Span-Elemente aus, die Begrüßung. Lass uns die Farbe ändern, sie grün machen. Als Nächstes wähle ich einen Namen aus. Ändern wir die Schriftgröße, machen wir zehn RAM draus. Wir brauchen mit 60 RAM. Schaffen Sie außerdem etwas Platz um das Element, das sich im Rand befindet für RAM Null bis RAM Null, dann wird die Farbe weiß sein. Also hier haben wir den Namen. Fügen wir etwas Schatten mit RGBA hinzu, schwarze Farbe mit geringerer Opazität Wir haben hier also einen kleinen Schatteneffekt. Als Nächstes wähle ich das Span-Element aus, das innerhalb des Namens platziert wird. Die Farbe wird grün sein. Also der Vorname ist jetzt grün und es sieht gut aus. Als Nächstes wähle ich Prof. Lassen Sie uns die Schriftgröße ändern. Es wird 1.8 R& sein. Außerdem werde ich die Schriftstärke ändern. Setzen wir es auf 300. Wandelt Text in Großbuchstaben um. Ändere auch die Farbe Hier, weiße Farbe. Und dann schaffen Sie etwas Abstand zwischen den Buchstaben, die festlegen, dass a auf RAM zeigt. Schaffen Sie auch etwas Platz im unteren Bereich, indem Sie die Miete von Margin Bottom Six Rent verwenden Richtig? Jetzt wähle ich das Span-Element von Prof. change the font family aus. Es wird ein Vorbehalt sein, ätzend. Und außerdem werde ich die Schriftgröße auf drei R& setzen. Als Nächstes ändere ich die Schriftstärke, sie wird fett sein. Dann wandle Text in Großbuchstaben um. Erstellen Sie außerdem etwas Platz, indem Sie den linken Rand verwenden, um einen Punkt auszuführen Also hier haben wir den zweiten Teil des Prof. als Nächstes brauchen wir etwa, Lass uns die Breite auf 60 RAM setzen. Ändere die Schriftfamilie, es wird ein Vorbehalt und Kursivschrift sein. Außerdem muss die Schriftgröße 2,5 RAM betragen. Dann ändere ich die Zeilenhöhe Setzen wir sie auf eins und ändern die Farbe Mach eine Neun draus, eine BAE. Also hier haben wir ungefähr einen Absatz. Lassen Sie uns den unteren Rand auf fünf RAM setzen , um unten etwas Platz zu schaffen. Jetzt müssen wir uns um die Social-Media-Icons kümmern. Lassen Sie uns die Margin Bottom auf fünf RAM setzen. Dann werde ich drei Icons anpassen. Es ist also wie in den sozialen Medien. Irland. Erhöhen Sie die Schriftgröße. Es wird 2,5 RAM sein. Dann ändere die Farbe Weiß. Ich werde auf der rechten Seite etwas Platz schaffen , indem ich Margin-Right to RAM verwende Und dann benutze einen Schatteneffekt. Die Werte 0,5 Gramm oder ein RAM und das RGB eine schwarze Farbe mit der Opazität 0,3 Okay, die Icons sehen also viel besser aus. Lassen Sie uns den Cursortyp ändern, damit er zeigt. In Ordnung, das war's mit den Social Media-Icons. Jetzt muss ich mich um den Knopf kümmern. Stellen wir die Breite auf 20 RAM ein. Dann wird die Höhe sechs RAM betragen. Außerdem werde ich Rand auf Punkt setzen, um feste Farbe mit einer BBB-Farbe zu Denn der Radius wird drei RAM betragen. Ich möchte das Muster abgerundet machen. Dann ändere die Hintergrundfarbe und mache sie transparent. Du wirst also den Knopf haben. Kümmern wir uns um den Text. Die Schriftgröße wird ein Punkt für RAM sein. Ändern, transformieren, in Großbuchstaben schreiben. Außerdem müssen wir die Farbe auf Weiß setzen und auch den Cursor ändern, damit er zeigt. In Ordnung. Als Nächstes werde ich auf der rechten Seite etwas Platz schaffen, es werden sieben RAM sein. Und jetzt müssen wir einen Schwebeeffekt erzeugen. Wir müssen vorher BGN auswählen. Fügen wir Inhalt zu leer hinzu. Bei wird es 100% sein. Die Körpergröße wird ebenfalls 100% betragen. Dann ändere die Hintergrundfarbe, du siehst eine grüne Farbe. Außerdem werde ich den Grenzradius auf drei RAM setzen. Es sollte wie die Unterseite abgerundet sein. Stellen Sie dann die Position auf absolut ein. Wir müssen die relative Position hören , da die Schaltfläche das übergeordnete Element ist. Hier haben wir also das vorherige Pseudoelement. Setzen wir die obere Position auf Null und diese Position ebenfalls auf Null. Bevor wir also die Schaltfläche aufdecken, lassen Sie uns das Problem beheben, indem wir den Indexeigenschaftswert minus zehn verwenden den Indexeigenschaftswert minus zehn In Ordnung, jetzt sieht es ziemlich gut aus. Und wir müssen diese Elemente mit Transform Scale Zero verstecken. Sobald wir den Mauszeiger über die Schaltfläche bewegen, sollte das Pseudoelement erscheinen Wählen wir also BTN mit über, gefolgt vom vorherigen Pseudoelement Lassen Sie uns die Skala auf eins setzen. Und wir brauchen auch Ihren Übergang, um intelligentere Fakten zu machen. Lassen Sie uns auch hier Transition verwenden. Okay, jetzt müssen wir eine Zeile neben dem Button erstellen. Wählen wir also CVP Ten mit dem Pseudoelement danach aus. Lassen Sie uns den Inhalt auf leer setzen. Dann finden wir die Breite. Es werden fünf RAM sein. Wir brauchen die Höhe, die genau zum RAM passt. Dann ändere die Hintergrundfarbe. Es wird BBB sein. Stellen Sie die Position also auf absolut. Dann wird die Spitzenposition bei 50 Prozent liegen. Was die richtige Position angeht, so wird es minus fünf Riesen sein. Also hier haben wir eine Linie. Fügen wir hier Transform, Translate Y -50 Prozent hinzu, um die Linie perfekt zu zentrieren In Ordnung. Jetzt brauchen wir CV span. Lassen Sie uns die Schriftgröße ändern. Es wird ein Punkt für RAM sein. Schriftstärke. Ich setze es auf 300. Verwandeln Sie Text auch in Großbuchstaben und ändern Sie dann die Farbe, machen Sie ihn weiß Ordnung, das ist also ungefähr auf der linken Seite Lass uns weitermachen und uns um die rechte Seite kümmern. Ich füge hier eine Hintergrundfarbe hinzu. Verwenden wir grüne Farbe als nötig, Grenzradius sollte 50 Prozent betragen. Fügen wir hier Padding mit verschiedenen Werten auf verschiedenen Websites Auch hier brauchen wir einen Schatteneffekt. Die Werte 01 RAM, ein RAM und RGBA, die schwarze Farbe und mit dem Opazitätspunkt um einen Schatteneffekt zu haben Lassen Sie uns den Teil des Bildes mithilfe von overflow hidden ausblenden. Okay, jetzt brauchen wir etwas Abstand zwischen der linken und rechten Seite Wählen wir die Entwicklerinformationen und setzen Sie die Marge rechts auf 15 Ran. Jetzt haben wir hier also ein viel besseres Ergebnis. Wählen wir das Werk aus. Stellen Sie die Breite auf 25 RAM, dann beträgt die Höhe neun RAM. Außerdem muss hier die Hintergrundfarbe eins sein, T22 zu a. Dann ändere die Schriftgröße. Dann ändere die Schriftgröße Es wird ein Punkt für RAM sein. Der Text muss in Großbuchstaben geschrieben werden. Ändere die Farbe, mach es weiß. Also wird er diese Arbeit haben. Das ist eine festgelegte Grenze, die auf Ram, Solid und BBB zeigt. Außerdem benötigen wir sechs RAM mit Border-Radius. Jetzt haben wir hier also ein viel besseres Ergebnis. Stellen wir das Display auf Flex ein. Wir müssen den Text mithilfe von Justify-Content Center und Alignment Items Center an den Text senden Justify-Content Center und Alignment Items Center Lassen Sie uns außerdem Padding verwenden, Null, um zu rampen. Dann verwende Box-Shadow mit den Werten 0,5 Gramm 1 Gand, die schwarze RGBA-Farbe mit dem Opazitätspunkt In Ordnung, als Nächstes setzen wir die Position auf absolut. Und hier brauchen wir auch relative Position für das übergeordnete Element, das das Entwickler-Image ist. Dann müssen wir diese Arbeit separat auswählen. In diesem Fall setzen Sie Schritt für Schritt Erfahrung die unterste Position auf zehn RAM. Außerdem wird die rechte Position vier bis RAM sein. Ein Element ist also korrekt platziert. Wählen wir aus, dass die Projekte die untere Position auf ein RAM setzen, und dann wird die rechte Position minus zwei Rampen sein. In Ordnung, also alles sieht gut aus. Jetzt wähle ich diese Arbeitsspanne aus. NTH-Kind eins. Das erste Spannelement. Lassen Sie uns die Schriftgröße auf drei RAM setzen, was 50 Prozent entspricht. Lassen Sie uns außerdem den Text und die Mitte ausrichten. Also hier haben wir, lass uns diesen Code duplizieren und nth-child in ändern, um Textalign Center loszuwerden Außerdem Schriftgröße und dann Farbe auf Grün setzen. In Ordnung, das war's also. Alles sieht toll aus. Fahren wir mit der nächsten Vorlesung fort. 15. Projekt 2 - Stil und Umsetzung der Navigation: Okay, sobald wir mit einem Header fertig sind, ist es jetzt an der Zeit, weiterzumachen und an der Navigation zu arbeiten, die momentan versteckt ist weil wir ihr keine Anzeige zugewiesen haben Lassen Sie uns weitermachen und das Menüsymbol anpassen. Ich gehe mit 23 RAM los. Dann wird die Höhe drei RAM betragen. Und ich unterschreibe temporäre Hintergrundfarbe, C, C, C. Dann müssen wir die Position definieren. Es wird repariert. Die oberste Position werden fünf RAM sein. Was die richtige Position angeht, werden es auch fünf RAM sein. Wie Sie sehen können, haben wir hier ein Menüsymbol. Lassen Sie uns diese temporäre Hintergrundfarbe entfernen und dann die Linie auswählen. Stellen wir zwei oder drei RAM ein, damit die Höhe auf RAM zeigt. Und dann setzen wir die Hintergrundfarbe auf BBB. Also hier haben wir Linien. Ich werde das Display für das Menüsymbol auf Flex einstellen. Und dann müssen wir die Richtung ändern. Machen wir es zu einer Spalte und verwenden Sie auch den Bereich „Inhalt ausrichten“ gleichmäßig. Außerdem müssen wir die Objekte in der Mitte ausrichten und auch den gröberen Punkt ändern, ihn auf einen Nullpunkt setzen Wie Sie sehen können, haben wir hier ein nettes Menüsymbol mit zwei Zeilen. Als Nächstes entferne ich die Anzeige von „Keine Anzeige“ aus der Navigation und der definierten Position. Make it fixed. Dann müssen wir, falls meine Zwischenposition Null sein soll Und wir brauchen auch hier, richtige Position, um Null zu sein. Dann lass uns mit 250 RAM loslegen. Denn die Höhe wird hundert Viewport-Höhe sein. Dann ändere ich die Hintergrundfarbe. Es wird eine graue Farbe haben. Hier haben wir die Navigation. Lassen Sie uns die Indexeigenschaft auf 100 setzen , um die Navigation anzuzeigen. Ordnung, jetzt brauchen wir auch einen Z-Index für das Menüsymbol Jetzt wird das Symbol angezeigt. Als Nächstes stelle ich die Anzeige auf Flex und wir müssen die Navigationselemente mithilfe von Align Items Center ausrichten. Außerdem werde ich eine Polsterung für das linke Atrium verwenden. Dann lassen Sie uns weitermachen und Artikel auswählen. Wir brauchen Display-Flex und wir müssen die Richtung ändern. Machen wir es zu einer Kolumne. Die Gegenstände werden also vertikal platziert. Als Nächstes wähle ich das Navigationselement selbst aus. Ich meine das Link-Element. Lassen Sie uns die Schriftgröße auf drei RAM setzen. Ändern Sie auch die Schriftstärke. Es werden 300 sein. Dann transformieren wir Text in Großbuchstaben Schaffen Sie etwas Abstand zwischen den Buchstaben und ändern Sie die Farbe. Mache Farbe II. Außerdem benötigen wir etwas Speicherplatz, ist im Spielraum, ein RAM und Null. Wie Sie sehen können, sehen die Navigationselemente gut aus. Als Nächstes wähle ich Linkelemente mit dem Mauszeiger aus. Lassen Sie uns die Farbe ändern, sie grün machen und auch den Übergang verwenden, um einen gleichmäßigen Effekt zu erzielen. Schauen wir uns nun an, dass wir hier einen schönen Smooth-Hover-Effekt haben schönen Smooth-Hover-Effekt In Ordnung, jetzt ist es an der Zeit, die Navigation zum Laufen zu bringen. Verstecken wir es. Oppositionell auf minus acht gesetzt. Ähm, was die richtige Position angeht, brauchen wir -63 RAM Außerdem werde ich Transform Rotate verwenden. Z. Der Wert wird -15 Grad betragen. Wenn ich die Position auf absolut setze, sehen wir die Position der Navigation. Gehen wir zurück, feste Position. Sobald wir auf das Symbol klicken, sollte die Navigation erscheinen. Wir benötigen JavaScript. Lassen Sie uns einige Variablen erstellen. Menüsymbol, Wählen wir es mit der QuerySelector-Methode aus. Wir müssen hier den Klassennamen und das Menüsymbol angeben. Lassen Sie uns diesen Code duplizieren. Wir brauchen hier. Container hat auch den Namen der Variablen geändert. Es wird ein Container sein. Als Nächstes füge ich dem Menüsymbol mit einem Klick auf Event einen Event-Listener Und wir müssen auch eine Callback-Funktion übergeben. Es wird eine Pfeilfunktion sein Sobald wir auf das Menüsymbol klicken, müssen wir dem Container eine Klasse hinzufügen. Also brauchen wir hier eine Klassenlisteneigenschaft als die Toggle-Methode. Und wir müssen deinen Klassennamen angeben , der geändert wird. Okay, jetzt müssen wir Navigation mit Klassenwechsel auswählen Navigation mit Klassenwechsel und einige Styles anwenden, um zu essen, oberste Position Null und rechte Position Null. Außerdem brauchen wir hier Transform, Rotate Z. Und wir müssen hier die Standardposition Null übergeben. Sobald wir auf das Menüsymbol klicken, erscheint die Navigation. Damit sich das auf den Motor auswirkt, müssen wir alle Punkte um 6 s umstellen . Jetzt funktioniert also alles einwandfrei und wir haben hier einen schönen Effekt. Als Nächstes setze ich die Opazität für die Versuche in der Nähe auf Null und die Sichtbarkeit auf ausgeblendet Wir müssen die Navigationselemente verstecken. Wählen wir Navigation aus. Dann Abschnittsgrenze. Wir müssen auch die Grenze verstecken. Wir brauchen also wieder Opazität Null und versteckte Sichtbarkeit. Okay, also jetzt müssen wir sie anzeigen, will die Navigation angezeigt werden Wir müssen erneut die Klasse wechseln und dann die Gegenstände navigieren. Setzen wir die Opazität auf eins und die Sichtbarkeit auf sichtbar. Verwenden Sie dann den Übergang mit einer gewissen Verzögerungszeit. Denn sobald wir es in der Navigation und dann die Elemente anzeigen müssen , machen wir dasselbe für den Abschnittsrand. Benutze den Klassenwechsel und setze die Opazität auf eins und die Sichtbarkeit , um es zu erhitzen, sorry, sichtbar Und benutze auch den Übergang, der wiederum die Zeit etwas verzögert. Okay, jetzt funktioniert alles gut. Wir haben hier einen coolen Effekt. Sobald wir das Menüsymbol angezeigt haben. In Ordnung, endlich kümmere ich mich um die Leitungen. Wir müssen die Transformationseigenschaft so einstellen Z um 45 Grad gedreht wird. Es wird für die erste Zeile sein. Außerdem müssen wir übersetzen , um die Linie mit dem Wert 0,7 RAM und -0,1 Rampe zu verschieben die Linie mit dem Wert 0,7 RAM und -0,1 Rampe Machen wir dasselbe für die zweite Zeile. Wir brauchen hier -45 Grad. Und wir müssen auch umstellen. Sobald wir auf das Menüsymbol klicken, wird es in eine X-Schaltfläche zum Schließen umgewandelt. Es funktioniert also alles perfekt. In Ordnung, das war's mit der Navigation. Fahren wir mit der nächsten Vorlesung fort. 16. Projekt 2 - Erstelle und passe Skills-Abschnitt an: Okay, jetzt ist es an der Zeit, unseren nächsten Abschnitt zu erstellen , der ein Skills-Bereich sein wird Lassen Sie uns weitermachen und neue Kommentare für den Bereich Fähigkeiten einfügen . Öffnen Sie dann den Abschnitt und geben Sie einen Klassennamen ein. Fähigkeiten. füge ich Ihnen ein paar Überschriften ein Die erste wird die Hintergrundüberschrift für den Abschnitt H1 sein Hintergrundüberschrift für den Abschnitt H1 Es wird wahrscheinlich Richtung Sektion gehen. Meine Fähigkeiten. Dann um Ihnen und anderen H1-Überschriftenelementen Anweisungen Nun, die Überschrift des Abschnitts mit dem Klassennamen. Lassen Sie uns Ihre beruflichen Fähigkeiten einfügen. Danach füge ich das h3-Überschriftenelement ein, das eine Unterüberschrift sein wird Und es wird einen Span-Tag enthalten. Mit Fähigkeiten. Danach brauchen wir Section Border, die Grenze, die wir im ersten Abschnitt haben. Und danach werde ich Karten erstellen. Insgesamt wird es sechs verschiedene Karten geben. Öffnen wir den DIV-Tag mit der Skills-Karte der Klasse. Wir werden hier also über Kenntnisse im Umgang mit Span-Elementen, HTML und dem Prozentsatz der Verzerrung (95% Dann werde ich einen Absatz mit einem Blindtext einleiten Und wir brauchen auch den Fortschritt, der den Prozentsatz dieses Würfels angibt. In Ordnung, das war's also. Ich werde den Code fünfmal duplizieren , da es insgesamt sechs Karten haben wird. Und dann werde ich die Technologien und auch die Prozentwerte ändern . Das zweite wird CSS sein, 90%. Dann werden wir JavaScript bei 5% haben. Der nächste wird React JS 75% sein. Dann wird der nächste NodeJS sein, 85%. Und die letzte Technologie wird mit einem Prozentwert von 75 in der Zukunft liegen. Okay, das HTML-Markup für den Skills-Bereich ist fertig und jetzt ist es an der Zeit, etwas CSS zu schreiben Lassen Sie uns zunächst auf Ihre Kommentare antworten. Fähigkeiten und Fertigkeiten. Wählen Sie dann das Abschnittselement und definieren Sie Breite und Höhe. Die Breite wird 100% betragen. Was die Höhe angeht, wird es 100 sein. Höhe des Viewports. Und auch definierte Position, Make it route. Okay, danach wähle ich die Abschnittsgrenze mit den Fähigkeiten, dem Klassennamen und setze die Position auf absolut Und dann, um Luck zu finden, wird die Position 20 Rampe sein. Dann müssen wir es präsent positionieren. Und um die Elemente vertikal zu zentrieren, verwenden wir Transform Translate Y -50 Prozent Wie Sie sehen können, ist die Grenze also schön platziert. Als Nächstes verwende ich Flexbox für dieses Abschnittselement. Ändere die Richtung, mache es zu einer Spalte. Richten Sie die Elemente in der Mitte aus. Es ist also zu sehen, dass die Elemente horizontal in der Mitte platziert sind. Als Nächstes wähle ich die Abschnittsüberschrift aus. Lassen Sie uns es anpassen. Ändere die Schriftgröße, mache sechs RAM draus, dann brauchen wir Schriftstärke, es wird 300 sein Transformieren Sie außerdem Text in Großbuchstaben. Erstellen Sie dann einen Abstand zwischen dem Gitter, stellen Sie es so ein, dass es rammen soll, ändern Sie die Farbe, machen Sie es weiß und schaffen Sie auch etwas Platz am unteren Rand Drei RAM. Die Überschrift sieht also gut aus. Jetzt ist es an der Zeit, die Unterüberschrift anzupassen. Lassen Sie uns die Schriftgröße ändern. Es wird im RAM sein Dann brauchen wir Farbe. Lass es uns grün machen. 29587. Transformiere auch Text in Großbuchstaben Also hier haben wir diese, die Polsterung. Jetzt müssen wir das Span-Tag auswählen, das in der Unterüberschrift platziert wird Lassen Sie uns die Schriftfamilie ändern. Es wird ätzend wirken. Also werde ich die Schriftgröße ändern. Stellen wir es auf 3,5 RAM ein. Transformieren Sie dann die Taxing-Methode so, dass sie groß statt in Großbuchstaben geschrieben wird, und ändern Sie auch Es wird weiß sein. Ordnung, das ist also, die Polsterung, sieht wirklich gut aus Und jetzt müssen wir weitermachen und uns um die Karten kümmern. Wählen wir einen Wrapper aus. Stellen Sie die Breite auf 140 RAM ein. Dann setz dich auf den zweiten Platz, Atrium oben, Null Auf der rechten Seite, Null am Boltzmann-Can-RAM auf der linken Seite Dann müssen wir Flex Wrap und auch Flex Wrap mit der Value Wrap machen. Danach wähle ich die Karte selbst aus. Definieren wir zunächst die Breite. Es werden vier bis RAM sein. Definieren Sie dann die Höhe mit dem Wert 18 RAM. Stellen Sie den Rand auf drei und laufen Sie auf allen vier Seiten. Wir brauchen also etwas Padding mit den Werten 0,3 RAM und ändern auch die Hintergrundfarbe Ccc für eine Weile. Hier haben wir also alle sechs Karten gut platziert. Als Nächstes wähle ich den Skill aus und setze ihn auf Flex. Außerdem müssen wir den Abstand zwischen den Inhalten rechtfertigen , um etwas Platz zu schaffen. Außerdem werde ich unten etwas Platz schaffen, indem ich den Rand unten zum Rammen verwende. Als Nächstes wähle ich Span-Tags aus, setze die Schriftgröße auf, um sie auszuführen. Ändern Sie die Farbe, machen Sie sie zu E und entfernen Sie dann diese temporären Hintergrundfarben. Es kann also die Technologie sehen und der Prozentsatz sieht gut aus. Als Nächstes wähle ich Span-Elemente aus, was das zweite ist. Lass uns die Farbe ändern, sie grün machen. Jetzt haben wir bessere Ergebnisse. Danach werde ich mich um den Absatz kümmern. Lassen Sie uns die Schriftfamilie ändern. Es wird Vorbehalt und Zwang sein. Als Nächstes ändere ich die Schriftgröße. Stellen wir es auf, zu rammen. Ändere die Farbe, mach BBB draus. Ändere auch den Rand unten, sorry, zwei für RAM. Der Absatz sieht also wirklich gut aus. Jetzt müssen wir uns um den Fortschrittsbalken kümmern . Lassen Sie uns mit 2,5 RAM beginnen. Die Höhe wird 2,5 RAM betragen , dann benötigen wir eine Hintergrundfarbe von 122228 Dann brauchen wir einen Grenzpunkt, um solide zu rammen. Die Farbe wird BBB sein. Außerdem werde ich Elemente mit einem Randradius von 50 Prozent abgerundet und Position ebenfalls auf absolut setzen Eigentlich brauchen wir eine relative Position für den Elternteil, der in Skills Caught sein wird . Als Nächstes benötigen wir eine untere Position von -1,25 RAM. Hier haben wir also die Kreise, und jetzt müssen wir die Linien erstellen. Kopieren wir also den Klassennamen und verwenden ihn. Setzen Sie vor dem Pseudoelement den Inhalt auf leer. Dann müssen wir die Höhe so einstellen, dass sie auf den RAM zeigt. Dann ändere die Hintergrundfarbe. Verwenden Sie grüne Farbe. Position bis absolut. Dann brauchen wir eine schwierige Position , um bei 50 Prozent zu sein. Um Central Design zu verwenden, verwenden wir Transform Translate Y -50 Prozent Okay, danach wählen wir die Skills-Karte, das n-te Kind eins, gefolgt von den Fähigkeiten namens Fortschritt, wir müssen die Position so löschen, dass sie zehn Prozent ist n-te Kind eins, gefolgt von den Fähigkeiten namens Fortschritt, wir müssen die Position so löschen, wir müssen die Position so löschen Für das erste Element. Lassen Sie uns diesen Code duplizieren und vor dem Pseudoelement die richtige Position auswählen Es wird 2,5 RAM sein. Und auch die Breite, es wird die 30. sein. Wir rampen. Also hier haben wir die Leitung. Kopieren wir diesen Code. Und jetzt benutze nach Pseudoelementen. Die Farbe wird 777 sein. Außerdem werde ich diesen Code hier duplizieren. Verwandle das Vorher in das Nachher. Dann wird die Breite voller RAM sein. Für die richtige Position benötigen wir hier -4,3 RAM In Ordnung, jetzt haben wir Linien. Lassen Sie uns diesen Code duplizieren. Ändere die Zahlen, die wir hier brauchen. Die richtige Position wird 50 Prozent sein als die Breite wird 31,5 RAM betragen Was die richtige Position angeht, benötigen wir hier -6,1 RAM und die Breite wird 5,8 betragen In Ordnung, die zweite Karte ist fertig. Lassen Sie uns diesen Code duplizieren. Ändere die Zahlen. Wir brauchen hier. Drei. Die richtige Position wird bei 20 Prozent liegen. Dann ändere ich die Breite. Es wird 29,8 RAM sein. Entschuldigung, fünf RAM. Außerdem ändere ich hier die richtige Position, acht Punkte auf RAM. Und auch die Breite der Rampe wird 7,9 betragen. Okay, also die ersten drei Akkorde sind fertig. Lassen Sie uns nun diesen Code duplizieren. Ändere die Zahlen. Es wird für die richtige Position sein, werden nur 30% sein. Dann ändere ich die Breite. Es wird 25,5 RAM sein. Und außerdem müssen wir hier die Y-Position 12 Punkte bis zur Rampe haben. Was die Breite angeht, so wird es 12 Runden sein. In Ordnung. Als Nächstes kopiere ich die dritte Karte, da wir einige ähnliche Werte benötigen. Ändern wir die Zahl auf fünf. Lassen Sie uns also sehen, dass der Fortschritt fertig ist. Dann kopiere ich die vierte Karte. Ändere die Zahlen, mach sechs draus. Jetzt ist also alles bereit. Wir haben die Arbeit am Bereich Fähigkeiten abgeschlossen. Gehen wir zum nächsten über. 17. Projekt 2 - Abschnitt für Projekte erstellen: Ordnung, sobald wir mit dem Abschnitt Fähigkeiten fertig sind , klingt es jetzt, fahren Sie fort und beginnen Sie mit der Arbeit am nächsten Abschnitt , der ein Projektabschnitt sein wird Lassen Sie uns hier Ihre Kommentare für den Abschnitt Projekte einfügen . Dann öffne ich das Abschnitt-Tag mit einem Klassennamen, Projekte. Lassen Sie uns weitermachen und diesen Code von hier kopieren , da wir hier ähnliche Überschriftenelemente benötigen. Lass uns weitermachen und hier meine Projekte ändern. Dann brauchen wir hier ein Portfolio. Und ändere dir auch dieses Element. Dann projiziert es. Richtig? Als Nächstes öffne ich das DIV-Tag für die Projektkarten der Klasse. Dann brauchen wir die Karte selbst. Es wird ein Projektimage mit Div-Elementen enthalten. Öffnen wir das Image-Tag. Wählen Sie dann das Bild aus dem Bilderordner aus, den wir hier für das erste Projekt benötigen, PNG. Außerdem werde ich hier und andere DIV-Tags mit den Klassentexten einfügen . Verwenden Sie stattdessen Pontiac, es wird HTML sein. Dann brauchen wir ein weiteres Span-Tag, CSS. Und das dritte wird JavaScript sein. Als Nächstes verwende ich das H3-Heading-Tag mit einem Klassenprojektnamen In diesem Fall nehmen wir Kontakt auf für die Überschrift, für die Überschrift gefolgt von einem Absatz mit einem Klassennamen, einer Projektbeschreibung und einer Aufgabe. Lassen Sie uns einen Scheintext vorstellen. Und danach brauchen wir einen Knopf. Der Typ wird eine Schaltfläche sein. Außerdem brauchen wir hier einen Klassennamen, Projekt, BTN. Fügen wir es hier ein. Siehe Projekt. Dann brauchen wir ein Font Awesome Icon für den Pfeil. Fscharf, F, ein durchgehender Pfeil. Richtig? Okay, das war's mit der Karte. Lass es uns fünfmal duplizieren, denn insgesamt werden wir sechs verschiedene Projektkarten haben. Lassen Sie uns weitermachen und die Details, die wir für die Projektion benötigen, auf PNG ändern . Dann ändere die Überschrift. Es wird ein Taschenrechner sein. Das nächste Projekt wird Projekt drei sein. Dann werden wir Projekt vier haben. Die Überschrift wird Website sein. Als nächstes werden wir Projekt fünf haben. Der Name wird Menu sein. Für die letzte Karte werden wir Projekt sechs haben. Und die Überschrift wird Profilkarte sein. Richtig? Das war's mit den Karten. Das letzte Element, das wir hier benötigen, ist die Unterseite mit einer Typschaltfläche. Außerdem brauchen wir hier einen Klassennamen. Es wird BTN sein Und lassen Sie uns Ihre Ansicht weiter einfügen. Abschließend füge ich Ihr DV-Element ein, den Klassenabschnitt In Ordnung, hier haben wir also unsere Elemente. Im Moment sieht dieser Abschnitt hässlich aus. Also lassen Sie uns weitermachen und uns darum kümmern. Ich werde anfangen, etwas CSS zu schreiben, wir brauchen hier neue Kommentare für Projekte. Dann wähle ich das Projektbild aus. Lass uns mit der Rampe 236 loslegen. Die Höhe wird 20 RAM betragen. Als Nächstes müssen wir das Bild selbst auswählen. Fangen wir mit 200 Prozent an. Dann wird die Höhe 100% betragen. Jetzt wurden die Bilder kleiner und jetzt haben wir ein viel besseres Ergebnis. Wählen wir Abschnittselemente aus. Definieren Sie die Breite. Es werden 100% sein. Dann wird die Höhe ebenfalls 100% betragen. Als Nächstes setze ich Position auf Relativ. Außerdem brauchen wir hier ein Flux-Bücher. Lassen Sie uns die Richtung ändern, die Spalte wird. Außerdem müssen wir Elemente in der Mitte ausrichten, die Option Elemente in der Mitte ausrichten verwenden. Die Karten werden in die Mitte gelegt. Außerdem haben wir hier den Rand und die Hintergrundüberschrift des Abschnitts. In Ordnung, als Nächstes wählen wir Abschnittsrand aus. Stellen wir die Höhe auf 140 RAM ein. Veränderung. Die Position wird absolut sein. Die Spitzenposition wird bei 50% liegen. Die rechte Position wird Rampe 15 sein. Außerdem müssen wir die Grenze zentrieren, indem Transform Translate Y mit dem Wert -50 Prozent Außerdem werde ich Margin Zero verwenden. Sehen wir uns also an, dass wir hier einen Abschnittsrand haben , der sich auf der rechten Seite dieses Abschnitts befindet . Lassen Sie uns weitermachen und die Projektkarte auswählen. Stellen Sie die Breite auf vier ein, um zu rammen. Die Höhe wird 55 RAM betragen , dann müssen wir die Hintergrundfarbe ändern. Du siehst 1222 vor acht. Dann wähle ich Projektkarten aus. Die schnelle Entwicklung führte zu einer Breite von 140 Rampen. Also brauchen wir hier Flex-Bücher. Verwenden Sie dann das Justify-Content Center um an die Elemente zu senden Außerdem müssen wir die Flex-Artikel einwickeln und an der Oberseite einen Rand schaffen. Außerdem benötigen wir unten etwas Platz, indem wir Padding-Bottom verwenden, um Padding-Bottom verwenden Ordnung, die Karten sind also schön in der Mitte des Abschnitts platziert Als nächstes müssen wir etwas Platz zwischen den Karten schaffen. Verwenden Sie Margin und stellen Sie es auf, um zu starten. Außerdem brauchen wir eine Auffüllung des RAM. Dann verwende ich Border-Radius. Wird der Value One RAM Flexbox verwenden? Wir müssen hier die Richtung ändern. Es wird eine Kolumne sein. Und ich werde auch justify content space between verwenden. Ordnung, wie Sie sehen können, deckt die Hintergrundüberschrift die Karte Lassen Sie uns dieses Problem also mithilfe der Index-Eigenschaft beheben. Setzen wir es auf 100. Jetzt ist das Problem behoben. Als Nächstes kümmere ich mich um die Bilder, für die wir Objektfüße benötigen, um sie abzudecken. Und lassen Sie uns außerdem border-radius mit dem Wert eins RAM verwenden. Ändere den Cursor, lass ihn zeigen. In Ordnung, die Autos sehen also besser aus. Lassen Sie uns weitermachen und uns um den Schwebeeffekt kümmern. Sobald wir den Mauszeiger über die Bilder bewegen, sollten sie breiter werden. Lassen Sie uns also Transform Scale 1.3 verwenden und dann Transition verwenden, um einen gleichmäßigen Effekt zu erzielen. Es kann also sein, dass wir hier einen Schwebeeffekt haben, aber wir müssen ein Problem lösen Die Bilder überlappen sich. Die Einkaufswagen, also müssen wir voller versteckter Werte sein. Okay, jetzt haben wir eine viel bessere Wirkung. Verwenden wir hier border-radius mit einem Wert von einem RAM. Jetzt sieht der Hover-Effekt noch besser aus. Danach kümmere ich mich um die Texte. Ich meine, IT-Technologien. Lassen Sie uns die Schriftgröße ändern. Es wird 1,6 RAM sein. Dann brauchen wir eine Schriftstärke von 300. Transformiere auch Text in Großbuchstaben. Ändere die Farbe, mach es grün. Hier haben wir also die Technologien. Lass uns etwas Platz schaffen. Mach 0,1 Miete draus, oder? Als Nächstes wähle ich den Text-Wrapper aus. Lassen Sie uns den oberen Rand von zwei minus drei RAM festlegen. Um die Spannelemente aufzustellen. Als Nächstes wähle ich den Projektnamen aus. Lassen Sie uns die Schriftgröße ändern. Es werden drei sein. Rampe. Ändern Sie die Schriftstärke, also 300, und ändern Sie die Farbe. Wir brauchen hier eine weiße Farbe. Als nächstes benötigen wir den oberen Rand, der minus zwei RAM ist. Wir müssen den Namen nach oben verschieben. Als Nächstes. Ich wähle eine Projektbeschreibung aus. Lassen Sie uns die Schriftfamilie ändern. Es wird ein Vorbehalt sein. Kursiv. Ändern Sie auch die Schriftgröße und stellen Sie sicher, dass sie auf die Rampe zeigt. Ändere die Farbe, die ich hier verwenden werde, C, C. Die Beschreibung sieht also gut aus. Als Nächstes kümmere ich mich um den Button. Ich meine, dass das Projekt BTN mit 220 RAM eingestellt ist, dann wird die Höhe voll RAM sein Ändere die Hintergrundfarbe, sie wird transparent sein. Als Nächstes benötigen wir eine Schriftgröße von 1,8 RAM. Richten wir den Text an der linken Seite aus. Ändere die Farbe, mach es weiß. Und außerdem muss für den Kurs kein Rand übrig sein, also wird es ein Nullzeiger sein. Okay? Als Nächstes wähle ich Schrift, Fantastisches Symbol. Ich meine den Pfeil. Lass uns die Farbe ändern, sie grün machen. Und wir brauchen auch einen Rand auf der linken Seite. Fügen wir es zu einer Zeile hinzu. Okay? Der Button sieht also gut aus. Lassen Sie uns einen kleinen Schwebeeffekt erzeugen. Wählen Sie Ionen aus, wenn Sie mit der Maus darüber fahren, und ändern Sie den Rand auf der linken Seite. Stellen wir es auf, auf RAM und verwenden wir auch den Übergang, um einen glatteren Effekt zu erzielen. Verbleibender Spielraum bei Iteration 0,3 s. Okay, jetzt haben wir hier einen netten kleinen Effekt Als Nächstes wähle ich die Schaltfläche aus, die sich unten befindet. Lassen Sie uns den Rand oben auf fünf Frames und auf den restlichen Seiten auf Nullen setzen auf den restlichen Seiten auf Nullen Jetzt sieht alles gut aus. Und mit diesem Abschnitt sind wir fertig. Lass uns weitermachen. 18. Projekt 2 - Kontaktbereich erstellen und gestalten: Ordnung, sobald wir mit dem Abschnitt Fähigkeiten fertig sind, ist es jetzt an der Zeit, weiterzumachen und Erstellung unseres nächsten Abschnitts zu beginnen , der ein Kontaktbereich sein wird Lassen Sie uns weitermachen und neue Kommentare für den Kontaktbereich einfügen . Dann öffne ich den Abschnitt und überprüfe den Klassennamen. Kontakt. Als Nächstes werde ich einige Überschriften aus dem vorherigen Abschnitt übernehmen, da wir hier ähnliche Überschriftenelemente haben werden Fügen wir diese Elemente also hier ein. Außerdem müssen wir die Textwerte ändern. Wir müssen mich kontaktieren. Dann wird die nächste Überschrift Kontakte sein. Dann haben wir, lassen Sie uns ein gewisses Drehmoment haben , das das Element innerhalb dieser Spannweite ersetzt. Richtig? Danach öffne ich den Chat, die Grenze zwischen den Klassenabschnitten. Wir werden auch in diesem Abschnitt dieselbe Grenze haben. Nach der Abschnittsgrenze öffne ich das DIV-Tag mit der Klasse Contact Content, in das ich links einen weiteren Entwicklungskontakt einfügen werde . Auf der linken Seite werden wir die Adresse haben. Lassen Sie uns hier das Font Awesome-Symbol einfügen, das durchgehend angezeigt wird wenn eine Position punktet. Als Nächstes füge ich hier ein DIV-Tag mit dem Klassennamen Contact Info ein, in dem wir Span-Elemente, Adresse, haben werden, gefolgt von einem weiteren, span, New York, USA. Als Nächstes füge ich deine und andere Deep-Elemente mit dem Klassennamen freelance ein, in das ich das Font Awesome-Symbol mit den Klassen fa, regulärer Benutzer einfüge. Dann brauchen wir Deep Dark mit der Klasse Kontaktinformationen, in die ich wie im vorherigen Fall zwei Span-Elemente einfüge . Wir brauchen hier. Freiberuflich. Was das zweite Span-Element betrifft, so wird es sofort verfügbar sein. Ordnung, lassen Sie uns diesen Code zweimal kopieren und den Klassennamen ändern Es wird eine E-Mail sein. Als Nächstes müssen wir den Klassennamen ändern das Font Awesome-Symbol in Umschlag umgewandelt wird. Ändere auch die Span-Elemente, E-Mail und einige dumme E-Mails John Smith auf dem Schild, web tab.com. Okay, als Nächstes lege ich dein Handy hin. Ändere auch die Schrift. Ein fantastisches Symbol wird ein Phased-Solid-Fa-Telefon sein Dann ändere die Span-Elemente, wird dein Handy haben. Und ich gebe hier eine dumme Telefonnummer ein, Nummern 1-9 Okay, danach werde ich eine weitere Entwicklung eröffnen , die die richtige Seite sein wird. Öffnen wir das Formular-Tag. Entfernen Sie das Aktionsattribut. In das Formularelement füge ich das DIV-Tag mit den Klasseneingabegruppen ein. Dann werden wir eine Eingabegruppe haben. Öffnen wir das Labelelement. Ich werde hier deinen vollen Namen und das Font Awesome-Symbol eintragen, das wird sehr solide sein. Ein Sternchen. Als Nächstes füge ich hier ein Eingabe-Tag mit einem Typtext ein. In Ordnung, lassen Sie uns weitermachen und die Eingabegruppe duplizieren. Ändern Sie das for-Attribut. Es wird per E-Mail gesendet. Außerdem benötigen wir hier Ihre E-Mail-Adresse. Ändern Sie den Typ. Als Nächstes kopiere ich diesen Code. Ändern Sie das for-Attribut, es wird ein Betreff sein. Ändere auch deinen Text, deinen Betreff und wir bitten dich, A bis B einzugeben, um besteuert zu werden In Ordnung, fügen wir hier noch einmal die Eingabegruppe ein. Ändere das Etikett, es wird eine Nachricht erhalten. Ändere deinen Text , wird deine Nachricht sein. Anstelle des Eingabe-Tags werde ich hier den Textbereich verwenden. Danach öffne ich die Button-Elemente. Der Typ wird Button sein. Außerdem wird sich Ihre Klasse an BTN wenden. Und lassen Sie uns hier eine Nachricht senden einfügen. Okay, lassen Sie uns über das HTML-Markup sprechen. Alle Elemente sind erstellt und jetzt müssen wir etwas CSS schreiben. Lassen Sie uns weitermachen und neue Kommentare für den Kontaktbereich einfügen . Zunächst wähle ich Abschnittselemente aus. Fangen wir mit 200 Prozent an. Dann wird die Höhe hundert Viewport-Höhe sein, und die Position wird relativ sein Als Nächstes werde ich Flexbox verwenden. Lass uns die Richtung ändern. Es wird eine Kolumne sein. Außerdem werde ich die Elemente in der Mitte ausrichten. Hier können Sie also sehen, dass die Gegenstände in der Mitte platziert sind. Als Nächstes wähle ich Abschnittsrand aus. Definieren wir, dass diese Position absolut ist. Stellen Sie die Beinposition auf 20 RAM ein. Das ist wahrscheinlich eine schwierige Position, es werden 30% sein. Wie Sie sehen können, befindet sich dieser Abschnitt, der Abfüller, auf der linken Seite dieser Aktion Als Nächstes wähle ich Contact Content aus. Ich definiere Breite. Es werden 120 RAM sein, dann wird die Position absolut sein. Die Position wird bei 50% liegen. Linke Position, ebenfalls 50 Prozent. Und dann verwende ich für eine perfekte Zentrierung Transform Translate -50% und erneut -50 Als Nächstes setze ich die Rampe für die Margenobergrenze auf sieben. Danach werde ich Flexbox verwenden. Das rechtfertigt den Abstand zwischen den Inhalten. Und dann verwende „Elemente ausrichten“. Zentrum. Okay, wie Sie sehen können, sind beide Seiten gut platziert. Ich bin auf der linken und rechten Seite. Als Nächstes nehme ich dich von der linken Seite ab. Wählen Sie links unter Kontakt das tiefe Element aus. Stellen Sie das Display auf Flex ein. Verwenden Sie dann „Elemente ausrichten, zentrieren“. Und wir brauchen Spielraum. Es werden drei Rampen und Null sein. Okay? Danach wähle ich auf der linken Seite die Font Awesome-Symbole Stellen wir es mit 25 RAM ein. Dann wird die Höhe ebenfalls fünf Frames betragen. Als Nächstes ändere ich die Hintergrundfarbe. Es wird ein D22 sein Grenze zu Punkt zu Rampe fest setzen Die Farbe wird BBB sein. Also hier haben wir die Icons. Als Nächstes werde ich diese Kästchen mit einem Randradius von 50 Prozent abgerundet machen diese Kästchen mit einem Randradius von 50 Prozent abgerundet Und außerdem werde ich die Gegenstände mit Flexbox in der Mitte platzieren die Gegenstände mit Flexbox in der Mitte Wir brauchen das Justify-Content-Center und das Alignment Items Center. Man kann also sehen, dass die Symbole perfekt in der Mitte platziert sind . Als Nächstes werde ich die Schriftgröße erhöhen. Es wird eine Rampe sein. Dann ändere ich die Farbe. Es wird E sein. Schaffen Sie außerdem etwas Platz auf der rechten Seite, es werden neun RAM sein. Jetzt kann es die Symbole sehen. Sieh nett aus. Lassen Sie uns weitermachen und das Symbol auswählen, gefolgt vom Pseudoelement danach Der Kontinent wird leer sein. Dann werden wir Breite haben. Für RAM. Die Höhe wird Punkt zur Rampe sein. Wir kreieren Melodielinien. Als Nächstes haben wir die Hintergrundfarbe BBB und die Position wird absolut sein Außerdem müssen wir hier die Position relativ zum übergeordneten Element haben. Danach definieren wir, dass Spitzenposition 50 Prozent betragen wird . Außerdem müssen wir die Linie mithilfe von Transform, Translate Y mit dem Wert -50 Prozent zentrieren Lassen Sie uns auch definieren, dass die richtige Position minus 4 M sein wird Wie man sieht, haben wir hier Linien auf der rechten Seite der Icons. Als Nächstes wählen wir Kontaktinformationen mit 220 RAM aus. Dann müssen wir Flexbox verwenden. Die Richtung ändern wird eine Spalte sein. Wir haben hier. Der Infotext ist mittig ausgerichtet. Als Nächstes wähle ich Span-Elemente aus. Ändern Sie die Breite. Es werden hundert Prozent sein. Danach wähle ich ersten Span-Elemente mit dem hier angegebenen F-Child-Selektor Erstens, ändern Sie die Schriftfamilie. Es wird natürlich ein Vorbehalt sein. Dann müssen wir die Schriftgröße erhöhen. Stellen wir es auf drei RAM ein. Ändern Sie die Schriftstärke. Ich werde es auf fett stellen. Die Farbe wird weiß sein. Außerdem werde ich ein spezielles Unterteil mit Margin Bottom 0,5 RAM erstellen Unterteil mit Margin Bottom 0,5 , damit Sie Span-Elementnamen im ersten Element sehen können. Sieht gut aus. Lassen Sie uns weitermachen und den zweiten auswählen. Ändere hier die Zahl, es werden zwei sein. In diesem Fall beträgt die Schriftgröße 1,6 RAM. Die Schriftstärke wird 300 betragen. Was die Farbe angeht, werde ich sie 777 machen. Jetzt sehen beide Span-Elemente ziemlich gut aus. Lassen Sie uns weitermachen und die rechte Seite auswählen. Ich stehe im Vertrag, oder? Stellen Sie die Breite auf 60 RAM ein. Die Höhe wird ebenfalls 60 RAM betragen. Verwenden Sie dann erneut Flexbox, gefolgt von Justify-Content Center und Alignment Items Center und In Ordnung. Danach fahren wir fort und wählen Eingabegruppen aus. Verwenden Sie erneut Display Flex. Als Nächstes wähle ich die Eingabegruppe selbst aus. Auch hier Display-Flex. Ändere die Richtung, mache es zu einer Spalte. Also Schritt für Schritt, die Eingabeelemente. Immer netter. Als Nächstes benötigen wir das Eingabegruppenlabel Ändern Sie die Schriftgröße. Es werden 1,6 RAM sein, dann brauchen wir Font-Weight 300. Und schaffen Sie auch etwas Abstand zwischen den Buchstaben. Benutze das nur als Grundlage. Als Nächstes müssen wir Text in Großbuchstaben umwandeln und auch die Farbe ändern und ihn weiß machen Danach setzen wir die Margin auf 001.5 ramp und to ramp. Es kann also das Etikett sehen. Sieh gut aus. Als Nächstes benötigen wir das Element Eingabe, Gruppe, Bezeichnung. Ich bin auf dem Font Awesome-Symbol, dem Sternchen. Lassen Sie uns die Schriftgröße auf einen Punkt setzen , um die Farbe zu ändern. Verwenden Sie grüne Farbe. Richtig? Danach wähle ich die Eingabegruppeneingabe aus, gefolgt vom Textbereich Wir brauchen ein paar ähnliche CSS-Kacheln, sagen wir Hallo zu sechs RAM. Außerdem muss die Marge 03, Rampe, fünf REM und Null sein. Dan, ich ändere die Hintergrundfarbe. Es wird eins sein, da eine Grenze gesetzt ist, die auf Rams Solid und 777 zeigt Jetzt sehen die Eingaben gut aus. Als Nächstes benötigen wir den Randradius , um die Ecken abzurunden. Stellen Sie ihn auf drei Rampen. Ändern Sie die Schriftgröße auf 1,6 R&, dann beträgt die Schriftstärke 300 und ändern Sie die Farbe, machen Sie sie weiß Als nächstes benötigen wir etwas Platz in den Eingängen. Stellen Sie das Padding auf eine Rampe oder eine Rampe ein, dann wieder auf ein RAM und um Manu auf der linken Seite zu lesen Danach wähle ich die Eingabe selbst aus und setze die Breite auf 35 RAM. Und dann wähle ich den Textbereich aus. Ich werde seine Höhe ändern. Machen wir es mit 12 Rampen, außerdem brauchen wir hier den unteren Rand zum RAM. Und ich werde die Funktion zur Größenänderung deaktivieren. Lassen Sie uns die Größenänderung auf Null setzen. Okay, zum Schluss werde ich die Schaltfläche unten anpassen. Wählen wir es also aus. Stellen Sie die Breite so ein 100% minus drei RAM berechnet werden, dann beträgt die Höhe fünf Rampen Lassen Sie uns die Farbe wieder ändern und grüne Farbe verwenden. Außerdem benötigen wir Randpunkte zum Rammen und die Farbe wird Bb B sein. Als Nächstes müssen wir die Ecken mithilfe des Randradius abgerundet machen die Ecken mithilfe des Randradius abgerundet Der Wert wird drei RAM sein. Ändere die Farbe, mach es weiß. Und auch hier müssen wir Text in Großbuchstaben umwandeln. Als Nächstes ändern wir die Schriftgröße. Es wird 1,6 RAM sein. Und außerdem müssen wir hier eine Schriftstärke von 300 haben. Erstellen Sie etwas Platz, indem Sie den Buchstabenabstand von Punkt zu Rampe verwenden, und wir müssen den Cursor ändern. Lass es uns klarstellen. Ordnung, nehmen wir an, der Kontaktbereich sieht ziemlich gut aus Fahren wir mit dem nächsten Abschnitt fort. 19. Projekt 2: Erstelle und passe die Fußzeile der Website an: Ordnung, also nach dem Kontaktbereich muss ich jetzt weitermachen und beginnen, den letzten Teil der Website zu erstellen , der eine Fußzeile sein wird Die Fußzeile wird einfach sein. Lassen Sie uns weitermachen und die Kommentare anzeigen einfügen. Dann öffne ich eine Fußzeile und verstecke die Fußzeile der Klasse. Lass uns dich einfügen. Behalte den Überblick mit den Klassensymbolen. Ich werde mir diese Social-Media-Icons von hier aus holen. Lassen Sie uns weitermachen und sie in die Symbole einfügen. Ich werde TikTok öffnen, um das Urheberrecht zu überprüfen. Lassen Sie uns einen Absatz mit urheberrechtlich geschützten Texten verunsichern. Wir brauchen hier ein Copyright-Zeichen, das eine HTML5-Entität ist Dann folgt das Textweb. Und dann brauchen wir ein Span-Tag mit dem Wert taub. Außerdem gebe ich Ihnen alle Rechte vorbehalten weiter. 2023. Als Nächstes öffnen wir Daten mit der Klassenreihenfolge N, Paragraph, der durch Span-Elemente und Code erstellt wurde, und erstellen. Okay, das war's also mit dem HTML-Markup für die Fußzeile. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Fügen Sie hier eine Fußzeile und eine Fußzeile ein. Ich bin in den Kommentaren. Dann wähle ich Fußzeile aus. Fangen wir mit 200 Prozent an. Die Höhe wird zehn Rampen betragen. Also setze ich Boulder an die Spitze, wobei die Werte 0,1 durchgegangen sind und die Farbe 444 sein wird Außerdem werde ich Display Flex verwenden, um den Inhaltsbereich gleichmäßig auszurichten. Außerdem werde ich die Ausrichtung von Objekten in der Mitte verwenden , um die Flex-Elemente zu zentrieren. Okay, danach wählen wir die Symbole aus, gefolgt von der Insel. Wir brauchen hier die Schriftgröße, um runterzufahren, wird die Farbe weiß sein. Also werde ich Margin verwenden, oder? Zu rennen. Und dann hast du einen Schatteneffekt mit Textschatten, 0,5 Gramm 1 Gand Bei der Farbe verwende ich RGBA, schwarze Farbe mit geringerer Opazität Und auch ein Kurswechsel wird es deutlich machen. Okay, das war's also mit den Social Media-Icons. Als Nächstes kümmere ich mich um den Copyright-Text. Und ich werde auch den Autor auswählen. Stellen Sie die Schriftgröße auf 1,6 RAM ein. Farbe ändern, weiß. Sie können also sehen, dass der Text weiß und größer wurde. Verwenden wir das Urheberrecht, Span. Stellen Sie die Schriftfamilie auf Kursivschrift ein. Also setze ich die Schriftgröße auf 2,5. Reim. Ändere die Schriftstärke, sie wird fett und ändere auch die Farbe Ich werde grüne Farbe verwenden. Stellen Sie als Nächstes den rechten Rand auf eine Rampe ein. In Ordnung, wir haben hier ein Logo. Lassen Sie uns weitermachen und die Autorenspanne auswählen. Eigentlich werde ich diesen Code von hier kopieren. Also los geht's, der Footer sieht wirklich nett und eigentlich sind alle Abschnitte fertig Wie Sie sehen können, haben wir hier ein kleines Problem. Die Navigation wird hinter dem Einkaufswagen angezeigt. Lassen Sie uns das Problem also mit dem Index 150 beheben . Okay, das ist es also. Alles sieht perfekt aus. Das einzige, was ich tun musste, war, das Projekt an verschiedene Bildschirmgrößen anzupassen. Also lass uns weitermachen. 20. Projekt 2: Mache das Projekt responsiv: Ordnung, wir haben die Erstellung und Anpassung unserer Abschnitte des Projekts abgeschlossen , und jetzt müssen wir es für verschiedene Bildschirmgrößen Lassen Sie uns die Seite überprüfen und in den Responsive-Modus wechseln. Wir müssen unseren ersten Breakpoint finden, an dem wir einige Änderungen vornehmen müssen. Ich denke also, dass der erste Breakpoint 1.700 Pixel sein wird Lassen Sie uns weitermachen und neue Kommentare für den Responsive-Modus einfügen . Und dann verwende CSS Media Query. Ich gebe hier die maximale Breite mit 1.700 Pixeln an. Als erstes müssen sie also die Schriftgröße des HTML-Elements ändern. Machen wir 57% draus. Die Elemente wurden also relativ kleiner. Als Nächstes wähle ich Navigation und ändere die richtige Position. Es wird minus sieben für RAM sein. Außerdem wähle ich für den Abschnitt Fähigkeiten die Option Abschnittsgrenze aus. Ändern wir die Längenposition, machen wir zehn RAM draus. Dann wähle ich die Grenze des Kontaktbereichs aus. Ändern wir die linke Position, machen wir zehn Rennen. Schauen wir uns also das Projekt an. Eigentlich müssen wir S einhalten, weil der Code nicht funktioniert hat. Okay, als Nächstes müssen wir einen weiteren Breakpoint finden Und ich denke, es sollten 1.500 Pixel sein. Lassen Sie uns also eine neue CSS-Medienabfrage erstellen und hier die maximale Breite angeben, die 1.500 Pixel betragen wird Auch hier ändere ich die Schriftgröße des HTML-Elements. Lassen Sie uns den Wert auf 52% setzen. Als Nächstes passe ich den Namen an. Ändern wir die Schriftgröße, machen wir sieben RAM draus. Ändere auch die Breite, wird zum Laufen sein. Okay, als Nächstes wähle ich Über und ändere die Breite. Machen wir 45 RAM draus. Danach wähle ich den Developer Image Wrapper aus. Lassen Sie uns die Breite auf 40 RAM setzen. Definieren Sie auch die Höhe und machen Sie es ebenfalls auf 40 RAM. Als nächstes müssen wir uns um die Dapp-Arbeit kümmern. Lassen Sie uns die Breite ändern. Es werden 20€ Miete für die Höhe sein, ich mache sieben RAM draus. Dann beträgt das Padding 0,1 RAM auf der linken und rechten Seite Als Nächstes müssen wir die Positionen für ihre Arbeit ändern. Wählen Sie das Spanelement aus. NTH-Kind eins. Ändere die Schriftgröße, mach es auf Rampe. Und die Breite wird 35 sein. Anwesend. Okay, jetzt wähle ich den Tab Erfahrung und ändere. Die unterste Position wird 22 Runs für die richtige Position sein , ich setze sie auf 25 Runs. Als Nächstes kümmere ich mich um die Gehörlosen. Projekte. Veränderung. Die unterste Position wird bei 14 Mieten liegen. Für die richtige Position mache ich es minus vier Rampen. In Ordnung. Als Nächstes kümmere ich mich um die Hintergrundüberschrift. Wählen wir die Überschrift Abschnitt BG aus und ändern Sie die Schriftgröße. Es wird 23 R& sein. Als Nächstes kümmern wir uns um den Abschnitt Fähigkeiten. Ich wähle Fähigkeiten aus und ändere die Körpergröße um 100 Prozent. Lassen Sie uns außerdem das Padding auf zehn RAM und Null setzen, dann auf 20 RAM und Null Dann wähle ich Karten aus, wickle sie, ändere die Breite und lasse es auf 100 laufen wickle sie, ändere die Breite lasse es auf 100 In Ordnung, jetzt sehen die Karten ziemlich gut aus. Als Nächstes wählen wir Abschnitt, Rand für den Abschnitt Fähigkeiten aus. Und ich werde die Höhe ändern. Es wird bei fünf RAM sein. Jetzt finde ich, dass die Grenze ziemlich gut aussieht. Lassen Sie uns als Nächstes weitermachen und uns um den Abschnitt Projekt kümmern. Wählen wir Projektkarten aus. Ich meine, der Wrapper hat die Breite auf 100 Ren gesetzt. Also jetzt sieht alles gut aus. Wir müssen uns um die Kontaktabteilung kümmern. Wählen wir Contact Content und setzen die Breite auf 110 RAM. Ok, also alles sieht gut aus. Und lassen Sie uns zum nächsten Breakpoint übergehen. Der nächste Breakpoint wird also, glaube ich, 1.200 Pixel sein glaube ich, 1.200 Pixel Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen. Setze die maximale Breite auf 100, leider 1.200 Pixel. Ändern Sie die Schriftgröße des HTML-Elements. Ich setze es auf 45%. Als Nächstes kümmere ich mich um die Aktion Projekte. Wählen wir also Projekte aus, gefolgt vom Abschnittsrand. Veränderung. Die richtige Position wird zehn RAM sein. Jetzt sieht es gut aus. Als nächstes müssen wir uns um den Kontaktbereich kümmern. Wählen Sie Kontaktinhalt aus und stellen Sie die Breite auf 100 Rampe ein. Außerdem müssen wir Inhalte ändern und rechtfertigen. Sorgen Sie für einen gleichmäßigen Abstand. Dann müssen wir Kontakt auswählen, oder? Verwenden wir Margin-Right, machen es -15 RAM. Außerdem müssen wir Eingabegruppen anpassen. Lassen Sie uns die Richtung ändern, Spalte erstellen. Dann. Wir müssen Eingabegruppen auswählen, gefolgt von den Eingaben. Ändern Sie die Breite. Machen wir 60 Ran draus. Okay, jetzt sieht der Kontaktbereich gut aus. Und tatsächlich können wir weitermachen und den nächsten Breakpoint finden , der 900 Pixel groß sein wird Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen. Stellen Sie die maximale Breite auf 900 Pixel ein. Wir müssen die Schriftgröße des HTML-Elements ändern. Es werden 39 Prozent sein. Dann wähle ich den Abschnittsrand und verstecke ihn für all diese Abschnitte überhaupt. Als Nächstes wähle ich Abschnitt, Hintergrundüberschrift aus. Ändern Sie die Schriftgröße. Es werden 20 R&. Als Nächstes kümmere ich mich um den Kontaktbereich. Also lass uns weitermachen und Contact Content auswählen und die Breite so ändern , dass sie hundert Rampen sein wird . Außerdem wähle ich Kontakt aus, oder? Setzen wir die Marge nach rechts, zwei minus fünf RAM. Der Kontaktbereich sieht also gut aus. Und tatsächlich können wir weitermachen und den nächsten Breakpoint finden , der 700 Pixel sein wird Lassen Sie uns also eine neue Caesars-Medienabfrage erstellen. Ändere die maximale Breite, es werden 700 Pixel sein. Wählen Sie HTML und ändern Sie die Schriftgröße. Jetzt werden es 35% sein. Als Nächstes wähle ich die Überschrift „ Abschnittshintergrund“ und ändere die Schriftgröße. Stellen wir es auf 17 RAM ein. Dann wähle ich das Entwicklerbild aus und verstecke es. Danach wählen wir die Fähigkeitskarten aus. Ich meine das Wrapper-Set mit 260 RAM. Dann werde ich diesen Code duplizieren und Fähigkeiten in Projekte umwandeln. Und danach müssen wir den Kontaktbereich hierher bringen. Also lass uns weitermachen und Kontakt links auswählen und ihn ausblenden. Außerdem wähle ich Contact Content aus und setze seine Breite auf 70 Ran. Okay, also am Breakpoint, ich denke, wir sind fertig Jetzt ist es an der Zeit, den letzten Breakpoint zu finden. Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage erstellen. Dann gebe ich die maximale Breite als 500 Pixel an. Schauen wir uns hier die Navigation an. Ich möchte es auf der Seite erweitern. Lassen Sie uns also mit 200 Prozent beginnen und auch die richtige Position ändern. Es wird -100 Riesen kosten, als wir das Justify-Content Center benötigen , um die Artikel in den Mittelpunkt zu stellen Okay, danach wähle ich Banner aus und setze die Breite auf 70%. Dann müssen wir die Abschnittsüberschrift auswählen und Textausrichtung in der Mitte verwenden, um die Überschriften in der Mitte der Abschnitte auszurichten die Überschriften in der Mitte der Abschnitte Als Nächstes müssen Sie sich um den Kontaktbereich kümmern. Lassen Sie uns also weitermachen und Contact Content Set mit 255 Rampe auswählen . Außerdem müssen wir das Eingabeelement auswählen. Stellen Sie die Breite auf 50 ein. Lauf. Okay, also ich finde, alles sieht ziemlich gut aus. Wir können hier noch eine Sache hinzufügen. Weißt du, es sieht niedlich aus, Karten und die Breite ist auch auf 55 RAM eingestellt . Danach wähle ich die Symbole der Fußzeile aus und mache sie hoch. Okay, also ich denke, endlich sind wir fertig und alles sieht ziemlich gut aus. Das Projekt ist responsiv. Also ich denke, dir hat dieses Projekt gefallen. Jetzt können wir weitermachen und mit der Erstellung des nächsten beginnen. 21. Projekt 3 - Vorschau: Hallo und willkommen zu deinem nächsten Projekt, das eine Website über Architektur sein wird. Das Projekt besteht aus verschiedenen Abschnitten. Lassen Sie uns also weitermachen und jeden von ihnen durchgehen. Wir werden mit der Erstellung des Projekts beginnen, indem an The Not Poor und der Navigation arbeiten. Wir haben hier das Logo, die Suchleiste und ein Hamburger-Menüsymbol. Wenn ich darauf klicke, wird die Navigation gut angezeigt. Wenn ich mit der Maus über die Navigationselemente fahre, bekommen wir hier diesen schönen und coolen Effekt Nach der Navigation erstelle dieses nette und einfache Banner , in dem wir ein paar verschiedene Elemente haben. das Banner folgt ein Abschnitt Über uns, der aus zwei Teilen besteht. der linken Seite haben wir einige Textelemente und die Schaltfläche heißt rechte Seite. Es besteht aus einem Rahmen und einem Bild. Und außerdem haben wir hier einen schönen und coolen Teil am Ende der Sektion. Tatsächlich werden diese Elemente in jedem Abschnitt erscheinen. Als nächstes haben wir den Projektabschnitt , der fünf Karten mit einigen schönen Overeffekten enthält. Danach folgt der Kundenbereich , der aus zwei verschiedenen Karten besteht. Unten hatten wir einen Kontaktbereich und eine einfache Fußzeile Das Projekt reagiert auf verschiedene Bildschirmgrößen. Wenn ich die Seite untersuche, wechsle ich in den responsiven Modus und überprüfe das Projekt auf vier verschiedene Bildschirmgrößen. Sie werden feststellen, dass das Projekt responsiv ist und im Durchschnitt gut aussieht , unterschiedliche Bildschirmgröße. Auch hier sind die Projekte für extra große Bildschirmgrößen erstellt . Ich bin dabei. Dies entspricht einer Breite von 1920 Pixeln und einer Höhe von 1080 Pixeln Wenn Sie also eine relativ kleinere Bildschirmgröße verwenden, sollten Sie während der Vorlesungen in den responsiven Modus wechseln und die Breite und Höhe so angeben. Andernfalls sieht das Projekt auf kleinen Bildschirmen nicht gut aus , bis wir es responsiv gemacht haben. Also bitte berücksichtigen Sie es. In Ordnung, das war's mit unserem dritten Projekt. Lass uns weitermachen und anfangen, daran zu arbeiten 22. Projekt 3: Erstelle und gestalte die Navigation - Teil 1: In Ordnung, also lass uns weitermachen und anfangen ein neues Projekt zu erstellen Ich habe hier einen Ordner. Lassen Sie uns weitermachen und es in VS Code öffnen. Und dann müssen wir Dateien für HTML, CSS und JavaScript erstellen oder bearbeiten. Wir brauchen index.html, dann style.css. Und der nächste wird script.js sein. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Zuallererst werde ich den Titel ändern, es wird Architektur sein. Dann müssen wir unsere Dateien verlinken. Die erste wird eine CSS-Datei sein. Und dann öffne ich das Script-Tag und gebe im Quellattribut den Pfad der JavaScript-Datei an. Öffnen wir das Projekt im Browser und platzieren Sie dann den Editor und den Browser nebeneinander. So wie. In Ordnung, ich werde mir ein paar verschiedene Links schnappen. Das erste wird Font Awesome CDN sein, weil wir während des gesamten Projekts einige Font Awesome-Icons verwenden gesamten Projekts einige Font Awesome-Icons Kopieren wir den Link. Dann öffne ich das Link-Tag im Hauptelement und füge hier das CDN Als Nächstes werde ich die Google Fonts-Website besuchen , da wir einige Google-Schriftarten verwenden werden. Lassen Sie uns weitermachen und nach einer Schrift namens Able suchen. Ich wähle diese Kachel aus. Das nächste wird unser erstes Labor sein. Wählen wir den Stil aus. Dann kopiere ich den Link und füge ihn in den Kopf ein. In Ordnung, wir sind bereit, mit dem Schreiben des Codes zu beginnen. Zuallererst werde ich HTML-Markup erstellen. Lassen Sie uns Ihre Kommentare für den Container einfügen. Dann öffne ich das DIV-Tag mit dem Klassennamen-Container, in das ich Kommentare für die Navigationsleiste einfüge Öffnen Sie dann das HTML5-Navigationselement mit dem Klassennamen navbar, in das ich ein DIV-Tag mit den Klassen brand, brand einfügen werde ein DIV-Tag mit den Klassen brand, brand Jetzt vier. Dann öffne ich ein anderes DIV-Tag mit dem Klassenlogo. Eins. Lassen Sie uns hier die Klassennamen ändern. Wir brauchen ein Logo und Logo drei. Als Nächstes benötigen wir hier Span-Elemente , in die ich Textarchitektur einfügen werde. Okay, das war's mit dem Logo. Als Nächstes müssen wir eine Suchleiste erstellen. Fügen wir hier Eingabeelemente mit einem Typtext und einem Platzhalterattribut ein Wonach suchst du? Und außerdem brauchen wir hier ein Font Awesome-Symbol, das als Suchsymbol dient. Wir brauchen Unterricht, Fett, Lupe. Okay, das war's mit dem ersten Teil der Navigation. Jetzt müssen wir ein Hamburger-Menü erstellen. Fügen wir hier das Menüsymbol ein, das aus drei Zeilen besteht, Zeile eins, Zeile zwei und Ebene drei. Als Nächstes benötigen wir das DIV-Tag, das eine Navigation sein wird. Ich werde hier ein paar verschiedene Links einfügen. Der erste wird zu Hause sein. Dann werden wir ungefähr die nächsten Projekte haben. Dann werden wir einen Blog haben. Als nächstes werden Kunden sein Und für den letzten Artikel werde ich hier Kontakt eintragen. Okay, lassen Sie uns also eigentlich über das HTML-Markup sprechen. Jetzt fange ich an, etwas CSS zu schreiben. Lassen Sie uns zunächst Kommentare zu den Standardstilen abgeben. Als Nächstes wähle ich jedes Element mit einem Sternchen Und ich werde die Marge setzen und beide auf Null auffüllen Dann müssen wir die Box-Größe der Border-Box festlegen. Außerdem werde ich die Schriftfamilie ändern. Verwenden wir hier die Tabelle. Sans-Serif Ebenfalls. Ich werde die Textdekoration loswerden Es wird keiner sein. Und ich werde auch keine Gliederung vorgeben. Die Standardstile werden also auf die Elemente angewendet. Als Nächstes ändere ich die Schriftgröße des HTML-Elements. Es werden 62,5 Prozent sein , weil wir RAM als Maßeinheit verwenden Okay, lassen Sie uns weitermachen und mit der Anpassung des Containers beginnen . Fügen Sie hier die Kommentare ein und wählen Sie dann den Container aus. Zuallererst werde ich die Breite festlegen. Es werden 100% sein. Was die Höhe angeht, werde ich sie auf eine Viewport-Höhe von 100 Als Nächstes ändern wir die Hintergrundfarbe. Es wird 2020/20 sein. Es ist wie eine dunkelgraue Farbe. Dann werde ich deine Kommentare für die Navigationsleiste platzieren. Lassen Sie uns weitermachen und die Breite auf 100% setzen. Was die Höhe angeht , so wird es sein. Kann RAM. Außerdem werde ich die Hintergrundfarbe ändern. Verwenden wir hier die gleiche Farbe , die wir für den Behälter verwenden. Dann definiere ich, dass die Position festgelegt werden soll. Die oberste Position wird Null sein. Die Lag-Position wird ebenfalls Null sein. Und danach wähle ich Logo eins aus. Stellen wir es mit 26 RAM dann wird die Höhe ebenfalls sechs RAM betragen. Setzen wir die Grenze auf 2.4 RAM, solide. Und die Farbe wird H1B sein, es ist wie, und gelbe Farbe Lassen Sie uns diesen Code duplizieren und den Klassennamen ändern. Wir brauchen dein Logo zwei, lass uns Breite und Höhe ändern. Ich werde sie auf fünf RAM setzen. Entfernt den Rand und ändert die Hintergrundfarbe. Verwenden Sie hier dunkelgraue Farbe. Okay, im Moment ist Logo zwei nicht sichtbar, weil wir hier die gleiche Farbe haben Lassen Sie uns die Position auf absolut setzen. Eigentlich werde ich Marken auswählen und die Position ebenfalls auf Absolut setzen. Dann müssen wir uns auf 50% positionieren. Zum Glück wird eine Straßenbahn sein. Außerdem müssen wir die Elemente mit Transform Translate Y zentrieren — 50 Prozent. Okay. Gehen wir zurück zum Logo, um die Position auf ein RAM zu setzen die Position auf ein RAM zu wird die linke Position ebenfalls ein RAM sein. Jetzt ist das Element sichtbar. Als Nächstes wähle ich Logo drei aus. Der dritte Teil des Logos. Setzen wir die Breite auf fünf RAM, dann beträgt die Höhe auch für M fünf. Ändere die Grenze. Es wird ein Nullpunkt für RAM sein, durchgehend mit gelber Farbe. Als Nächstes ändere ich die Hintergrundfarbe. Es wird dunkelgrau sein. Und jetzt müssen wir uns um die Position kümmern. Es wird absolut sein. Die oberste Position wird das Rammen sein. Diese Position wird auch darin bestehen, zu rammen. Jetzt sieht das Logo besser aus. Stellen wir hier Display-Flex ein. Dann wähle ich Span Element und die Marke aus. Lassen Sie uns die Schriftgröße ändern. Es werden drei Widder sein. Als Nächstes ändere ich die Farbe. Stellen wir es auf weiß. Außerdem benötigen wir etwas Abstand zwischen den Buchstaben. Stellen wir die Rampe auf 0,3 ein. Wir haben hier also dieses Pfannenelement. Als Nächstes werde ich etwas Platz schaffen, sagen wir, auf der linken Seite Spielraum für 1,5 Rampe und 0,03 RAM. Danach wähle ich die Suchleiste aus. Lassen Sie uns die Position auf absolut setzen. Dann müssen wir uns auf 50% positionieren. Die rechte Position wird 15 RAM sein. Außerdem müssen wir das Element mit Transform Translate Y vertikal zentrieren — 50 Prozent Okay, die Suchleiste ist also auf der rechten Seite der Navigationsleiste Wählen wir die Eingabeelemente aus. Breite wurde auf 45 RAM verfeinert dann wird die Höhe als voller RAM angegeben. Außerdem werde ich die Hintergrundfarbe ändern. Ich werde hier 3341 verwenden. Es ist eine graue Farbe, aber die hellere. Dann brauchen wir keine Grenze. Und ich werde Polsterungen verwenden, um etwas Platz zu schaffen. Stellen wir es auf RAM ein, um wieder zwei REM laufen zu lassen und Forum auf der linken Seite. Ändern Sie auch die Schriftgröße. Es wird 1,6 RAM sein. Dann ändere ich die Farbe des Textes. Stellen wir es auf weiß. Ändern Sie den Randradius, machen Sie 0,5 RAM daraus. Jetzt sieht das Eingabeelement viel schöner aus. Als Nächstes wähle ich das Platzhalterattribut aus. Stellen wir die Farbe auf C. C, C . Jetzt muss ich mich um das Font Awesome-Symbol kümmern. Ich bin im Suchsymbol. Lassen Sie uns die Position auf absolut setzen. Dann müssen wir uns auf 50% positionieren. Die Glücksposition wird 1,5 RAM sein. Außerdem müssen wir die Elemente vertikal zentrieren, indem wir Transform Translate Y -50 Prozent verwenden und die Schriftgröße ändern Es wird 1,6 RAM sein. Und außerdem setze ich die Farbe auf C. C, C. In Ordnung, das war's also mit der Suchleiste Als nächstes müssen wir weitermachen und anfangen, ein Hamburger-Menü zu erstellen 23. Projekt 3: Erstelle und gestalte die Navigation - Teil 2: Ordnung, also lass uns weitermachen und mit der Arbeit am Hamburger-Menü beginnen Arbeit am Hamburger-Menü Ich wähle das Menüsymbol aus. Zuallererst werde ich das Menüsymbol anzeigen. Stellen wir die Breite also auf vier RAM ein. Wir benötigen eine Höhe von 2,5 RAM als die Hintergrundfarbe. Es wird CCC sein. Eigentlich benötigen wir diese Hintergrundfarbe aus vorübergehenden Gründen. Als Nächstes gehe ich zur Position des Absoluten. Die Position wird also bei 50% liegen. Dann brauchen wir hier richtige Position, das sind acht RAM. Außerdem müssen wir das Symbol mit Transform Translate Y zentrieren — 50 Prozent Als Nächstes ändere ich den Cursorzeiger. Also haben wir hier das Menüsymbol. Lassen Sie uns diese temporäre Hintergrundfarbe tatsächlich loswerden und dann die Linie auswählen. Die Breite wird den vollen Rang haben. Dann brauchen wir eine Höhe, die als Punkt zum Rammen gilt. Als Nächstes ändere ich die Hintergrundfarbe auf CCC Im Moment sind die Linien also nicht sichtbar. Lassen Sie uns die HTML-Datei überprüfen. Eigentlich müssen Sie eine separate Klassenzeile hinzufügen. Jetzt sollten die Linien sichtbar sein. Immer noch. Wir haben hier ein Problem. Ja, wir brauchen hier den DIV-Tag und nicht die Zeile Tog. Entschuldigung für den Fehler. Jetzt können Sie hier die Linien sehen. Lassen Sie uns weitermachen und sie getrennt voneinander ausrichten. Dafür werde ich Flexbox verwenden. Wir brauchen Display Flex. Dann müssen wir die Richtung ändern. Es wird eine Kolumne sein. Und wir müssen einen gewissen Abstand zwischen den Zeilen schaffen , indem wir den Abstand zwischen den Inhalten rechtfertigen. Jetzt haben wir hier das Menüsymbol mit drei verschiedenen Zeilen. Okay? werde ich mich um die Navigation selbst kümmern. Lassen Sie uns die Breite festlegen. Es werden hundert Prozent sein. Dann müssen wir die Höhe definieren, die 100 sein wird, die Höhe des Viewports Als Nächstes ändere ich die Hintergrundfarbe. In diesem Fall verwende ich 0 B, 0 B, eins, weil es wie eine dunkelblaue Farbe ist. Als Nächstes werde ich sitzen, die Position wird absolut sein. Die oberen und unteren Positionen, beide sollten Null sein. Als Nächstes kümmere ich mich um die Navigationselemente. Sie sollten in der Mitte platziert werden. Lassen Sie uns nun Flexbox verwenden, um die Elemente zu zentrieren Zuerst müssen wir die Richtungsspalte biegen und dann die Inhaltsmitte ausrichten und Elemente mittig ausrichten. Hier haben wir also die Elemente vertikal in der Mitte angeordnet. Als Nächstes wählen wir Navigationselemente aus. Ich meine, das Link-Element hat der Schriftfamilie zwei Alphas Lab gesetzt , eins, gröber als die Schriftgröße zu erhöhen Es werden fünf RAM sein. Nun, also werde ich die Farbe ändern. Stellen wir es auf weiß. Als Nächstes werde ich etwas Abstand zwischen den Buchstaben schaffen. Stellen wir es auf 0,3 RAM ein. Außerdem brauchen wir hier einen Rand am unteren Rand. Stellen wir es auf 1 g ein. Wie Sie sehen können, sehen die Navigationselemente also ziemlich gut aus. Als Nächstes wähle ich das vorherige Pseudoelement aus. Lassen Sie uns den Inhalt auf leer setzen. Dann definiere ich eine Breite. Es wird 15 RAM sein dann wird die Höhe 0,5 RAM betragen. Ändern Sie die Hintergrundfarbe. Ich werde hier die gelbe Farbe verwenden, um die Position auf die absolute Position zu setzen die Position auf die absolute Position zu , die 50 Prozent betragen wird. Jetzt sollte die linke Position die Rampe -17 sein. Und außerdem müssen wir transformieren, Y -50 Prozent übersetzen, um die Elemente vertikal zu zentrieren. Im um die Elemente vertikal zu zentrieren Moment ist das vorherige Pseudoelement nicht machbar, weil wir die Position der übergeordneten Elemente, in diesem Fall das Link-Element, auf relativ setzen müssen Position der übergeordneten Elemente, in diesem Fall das Link-Element, auf relativ in diesem Fall das Link-Element Es ist also zu sehen, dass wir hier jetzt die Linien auf der linken Seite der Artikel haben. Wir brauchen dasselbe auf der rechten Seite. Dafür verwende ich After-Pseudoelemente. Wir müssen nur die Position ändern. Wir brauchen hier die richtige Position. Jetzt haben wir Linien auf beiden Seiten. Diese Linien werden für den Hover-Effekt verwendet. Zuallererst müssen wir sie mit Transform Scale verstecken. Es sollte Null sein, damit die Linien versteckt sind. Als Nächstes wähle ich den Navigationslink aus und bewege den Mauszeiger Und auch hier brauchen wir vorher ein Pseudoelement. also mit der Maus darüber fahren, müssen wir die Skala erhöhen und sie auf ihren Standardwert setzen, der eins ist Verwenden wir den Übergang für einen gleichmäßigen Effekt. Wie Sie sehen können, erscheint müssen wir die Linie von der rechten Seite anzeigen, sobald Sie den Mauszeiger über das Element bewegen und die Linie Dafür müssen wir also den Ursprung der Transformation ändern . In der Standardeinstellung ist es auf die Mitte eingestellt. Und jetzt brauchen wir, richtig. Jetzt erscheint die Linie von der rechten Seite. Das Gleiche brauchen wir auch für das Pseudoelement danach. Also lassen Sie uns diese Codeänderung vorher und nachher hierher kopieren. Und auch hier müssen wir den Ursprung und den Übergang transformieren. Um den Ursprung zu transformieren, bleibt in diesem Fall übrig. Auch das Getriebe brauchen wir genauso. Wenn wir also den Mauszeiger über die Navigationselemente bewegen, haben wir diesen schönen und coolen Effekt In Ordnung, als Nächstes muss das Menüsymbol angezeigt werden , da es gerade ausgeblendet ist Verwenden wir also die Indexeigenschaft. Jetzt sehen wir hier das Menüsymbol. Und jetzt ist es an der Zeit, etwas JavaScript zu schreiben , damit die Navigation funktioniert Ich werde eine Variable erstellen, nennen wir es Menüsymbol, das mit der Abfrageauswahlmethode ausgewählt wurde . Wir müssen hier den Klassennamen angeben, der das Menüsymbol sein wird. Lassen Sie uns diesen Code duplizieren. Wir benötigen die zweite Variable, die in der Navbar ausgewählt wird Hier Klassenname navbar. Als Nächstes füge ich dem Menüsymbol einen Event-Listener hinzu, indem ich auf ein Ereignis klicke Außerdem müssen wir hier eine Pfeilfunktion einfügen, die eine Callback-Funktion sein wird Also werde ich Napa einen Klassennamen mit der Umschaltmethode hinzufügen Napa einen Klassennamen mit der Umschaltmethode Dieser Klassenname wird, sagen wir, geändert werden. Danach müssen wir die Navigation verstecken. Stellen wir die Position zwei auf eine Viewporthöhe von -100 ein. Und dann müssen wir Navigation mit einem geänderten Klassennamen auswählen . Wir müssen die Position wieder auf Null setzen. Verwenden wir den Übergangseffekt. Wir brauchen hier oben. Und die Dauer wird 0,3 s betragen . Wenn wir also auf das Menüsymbol klicken, passiert nichts. Schauen wir uns also die Seite an. Wir haben hier keine Fehler. Lassen Sie uns das HTML5 überprüfen. Wir müssen hier Punkt JS hinzufügen , da der Name der Datei nicht korrekt angegeben wurde. Jetzt funktioniert die Navigation einwandfrei. Und ich habe hier einen schönen Effekt. Als Nächstes verstecke ich die Navigationselemente mit Opazität Null und ausgeblendeter Sichtbarkeit Als Nächstes wähle ich einen Klassenwechsel mit einem Navigationslink aus, der die Opazität auf Null und die Sichtbarkeit auf sichtbar Ebenfalls. Ich wähle das erste Navigationselement mit einem Klassenwechsel aus. Nehmen wir an, der Übergang zu allen 0,3 s. Und dann benötigen wir eine verzögerte Zeit von 0,3 s. Wir müssen das Navigationselement separat mit einer anderen Verzögerungszeit anzeigen , wodurch ein wirklich netter Effekt entsteht. Lassen Sie uns also die Verzögerungszeit ändern. Wir benötigen 0,4 s, dann 0,5 s für den dritten Artikel. Dann dauert der nächste Artikel 0,6 s. Dann benötigen wir für den fünften Artikel 0,7 s. Und für den letzten Artikel werden Dann benötigen wir für den fünften Artikel 0,7 s. Und für den letzten Artikel es 0,8 s sein. Schauen wir uns also die Ergebnisse an. Und wie ihr seht, haben wir hier einen wirklich schönen und coolen Effekt. Ordnung, jetzt müssen wir uns um das Menüsymbol kümmern. Ich bin in den Warteschlangen. Wählen wir Mit Zeile eins ändern aus. Lassen Sie uns mit zwei 55% beginnen. Und wir brauchen hier auch Transformieren, Z-Richtung drehen -15 Grad. Außerdem müssen wir die Zeile eins verschieben, indem minus Nullpunkte in RAM umrechnen und 0,8 Rampe verwenden. Lassen Sie uns diesen Code duplizieren. Benutze deine Zeile drei. In diesem Fall müssen wir das Minenzeichen von der Rotationsfunktion entfernen . Und auch hier brauchen wir -0,8 RAM. Lassen Sie uns außerdem Transition verwenden, um reibungslose Effekte zu erzielen. Lassen Sie uns das Ergebnis überprüfen. Wie Sie sehen können, haben wir hier einen schönen und coolen Effekt. Das Menüsymbol verwandelt sich in einen Pfeil. In Ordnung, das war's also mit der Navigation. Lass uns weitermachen und mit der Erstellung des nächsten Teils der Website beginnen Erstellung des nächsten Teils der Website 24. Projekt 3: Erstelle und gestalte den Header der Website: Ordnung, sobald wir mit der Navigation fertig sind , ist es an der Zeit, weiterzumachen und mit der Erstellung des nächsten Abschnitts unseres Projekts zu beginnen Lassen Sie uns weitermachen und Kommentare einfügen. Zur Landung. Wir werden einen Header der Website erstellen, der ein Open-Section-Tag mit der Klasse Landing ist. Ich füge das U DIV-Tag mit der Klasse Landing Image ein, in dem wir das Bildelement platzieren. Ich wähle ein Bild aus dem Bilderordner aus. Es wird Landing BG sein. Ordnung, als Nächstes benötigen wir Banner, in das ich H1-Überschriftenelemente mit dem Klassennamen Banner-Überschrift einfüge H1-Überschriftenelemente mit dem Klassennamen Banner-Überschrift Der Text wird sich innerhalb des Span-Elements befinden. Traumhaus. Als Nächstes füge ich hier ein DIV-Tag mit einem Klassennamen ein, Banner-Inhalt, in dem wir einen Absatz mit etwas Scheintext haben werden Absatz mit etwas Scheintext haben Und außerdem werde ich Bateson einweihen. Lesen Sie mehr. Okay, das war's also mit dem HTML-Markup. Lassen Sie uns fortfahren und mit der Anpassung dieses Abschnitts beginnen. Ich werde Ihre Kommentare einfügen, Landing und of Landing. Dann lass uns weitermachen und Landing Image auswählen und die Breite auf 92% setzen. Als nächstes brauchen wir Höhe. Es wird 70 sein, Viewport-Höhe. Dann müssen wir das Bild selbst auswählen. Definieren wir eine Breite als 100%. Laut Angaben wird die Höhe ebenfalls 100% betragen. Und außerdem brauchen wir dein Objekt, das für Kohlenstoff geeignet ist. In Ordnung, wir haben hier das Bild. Weiter. Ich wähle das Abschnittelement aus und definiere seine Breite. Es werden 100% sein. Folgen wir der Höhe. Ich werde es auf eine Viewport-Höhe von 90 setzen. Als Nächstes setze ich die Position für den Image-Wrapper auf absolut Und hier brauchen wir auch die relative Position für das Abschnittselement, das ein übergeordnetes Element ist. Als Nächstes definieren wir, dass die Top-Position 11 ist. Was die linke Position angeht, brauchen wir hier 50 Prozent. Außerdem müssen wir das Bild mit Transform, Translate X -50% zentrieren mit Transform, Translate X -50% In Ordnung? Als Nächstes müssen wir die Opazität für das Bild verringern Danach fahren wir fort und wählen Banner aus. Ich werde seine Position auf absolut setzen. Dann müssen wir hier unten 15 RAM haben. Was die Laborposition angeht, so wird es 20 Rampen sein. Es ist also zu sehen, dass das Banner unten positioniert ist. Als Nächstes wähle ich Überschriftenelemente aus. Lassen Sie uns die Schriftgröße auf neun setzen. Widder. Die Farbe wird weiß sein. Als Nächstes wähle ich die Span-Elemente in der Überschrift aus. Lassen Sie uns die Schriftfamilie ändern. In diesem Fall verwende ich ein Telefon namens Alpha Flap One Cursive Und ich werde mich auch ändern. Die Schriftgröße beträgt acht RAM dann wird die Farbe gelb sein. Also werde ich etwas Abstand zwischen den Buchstaben schaffen. Jetzt sieht die Überschrift ziemlich gut aus. Als Nächstes wählen wir den Banner-Inhalt aus. Wir brauchen hier Flexbox. Außerdem müssen wir die Elemente in der Mitte ausrichten. Als Nächstes wähle ich den Banner-Inhalt aus, gefolgt vom Absatz. Lassen Sie uns die Breite auf 45 RAM setzen. Und die Schriftgröße wird dem RAM entsprechen. Außerdem werde ich die Farbe ändern, die hier ist. Angestellter. Schaffen Sie etwas Platz auf der rechten Seite, indem Sie den rechten Rand für die Rampe verwenden Der Absatz sieht also gut aus. Jetzt müssen wir uns um den Button kümmern. Definieren wir, dass die Breite 15 R& sein wird. Als nächstes brauchen wir hier eine Höhe, die fünf Riesen wäre. Ich werde die Hintergrundfarbe ändern. Stellen wir es auf transparent ein. Außerdem müssen wir den Rand so gestalten, dass er eine durchgehende Rampe von 0,3 hat, und die Farbe wird hell sein. Als nächstes kümmern wir uns um die Farbe. Es wird weiß sein. Also werde ich die Schriftgröße erhöhen. Stellen wir es auf 1,6 RAM ein, dann wird die Schriftstärke fett angezeigt. Und auch wenn ich den Cursor ändern möchte. Lass es uns klarstellen. In Ordnung, also schauen wir uns den doppelten Header der Website an Es sieht nett aus. Also können wir stattdessen mit der Arbeit am nächsten Abschnitt fortfahren. 25. Projekt 3 - Baue den Abschnitt über: Ordnung, wir sind mit dem Header der Website fertig und jetzt ist es an der Zeit, weiterzumachen und mit der Arbeit am nächsten Abschnitt des Projekts zu beginnen Der nächste Abschnitt wird also der Abschnitt Über uns sein. Lassen Sie uns Ihre Kommentare für den Abschnitt Über uns einfügen. Und dann, wie immer, lassen Sie uns den Abschnitt-Tag mit der Klasse über öffnen. Ich werde das U DIV-Tag About left platzieren, in dem wir das H1-Überschriftenelement benötigen Mit einem Text. Wir sind kreatives Unternehmen für Gebäudedesign. Auf das Überschriftenelement folgt der Absatz mit etwas Blindtext Als nächstes brauchen wir nach dem Absatz den Button hier. Lesen Sie mit dem Text mehr. Danach erstelle ich die rechte Seite, auf der wir einen Rahmen haben werden. Und wir werden auch deinen Image-Wrapper haben , in den ich dein Bild selbst einfüge Wählen wir ein Bild aus dem Bilderordner aus. Es wird About dot JPG sein. Als Nächstes müssen wir ein U-DIV-Tag mit einem Klassennamen verwenden. Und wir brauchen auch eine weitere Klasse, Sektion unten. Fügen Sie Ihr H1-Überschriftenelement ein, 20 Jahre. Und dann brauchen wir ein h3-Überschriftenelement bei dem das Texterlebnis funktioniert Okay, das ist es also. Alle Elemente sind erstellt und jetzt müssen wir diesen Abschnitt anpassen. Eigentlich werde ich die Höhe des Containers auf 100% ändern und nicht auf die Höhe des Viewports von 100 Jetzt fügen wir Ihre Kommentare ein, wahrscheinlich über den Abschnitt „Über“. Dann. Zuallererst werde ich mich um das Bild kümmern. Es ist momentan zu groß. Stellen wir also 250 RAM ein und die Höhe wird zertifiziertes RAM für den Wrapper des Images sein Als Nächstes wähle ich das Bild selbst aus. Definieren wir innerhalb der Höhe, die Breite soll 100% betragen. Für die Höhe werden es ebenfalls 100% sein. Außerdem müssen wir das Bild mithilfe des Object-Feed-Cover anpassen . Okay, jetzt haben wir also ein viel besseres Ergebnis. Jetzt kümmere ich mich um das Abschnittelement. Fangen wir mit 200 Prozent an. Die Höhe wird 75 Viewport-Höhe betragen. Dann ändere ich die Hintergrundfarbe. Es wird 313133 sein. Es ist eine graue Farbe, eine hellere. Dann werde ich Flexbox verwenden. Lassen Sie uns die Elemente in der Mitte ausrichten. Und ich werde dich auch benutzen , um Inhalte mit Werten zu rechtfertigen , die sich auszahlen. Die linke und rechte Seite sind also gut ausgerichtet. Als Nächstes wähle ich Über das linke H1-Überschriftenelement aus. Stellen wir die Schriftgröße auf fünf REM ein, dann wird die Farbe weiß sein. Außerdem werde ich die Breite ändern, es werden 50 Runs sein. Dann brauchen wir unten etwas Platz. Es werden sechs RAM sein. Eigentlich. Dieses Jahr brauchen wir nicht. Als Nächstes wähle ich einen Absatz aus. Stellen wir die Schriftgröße zwei auf RAM ein. Ändere auch die Farbe. Die Farbe wird weiß sein. Wir brauchen eine Breite von 50 RAM. Und wir brauchen auch eine Mindestmarge von fünf Primzahlen. Okay, lassen Sie uns als Nächstes weitermachen und uns um den Bateson kümmern. Ich setze mit 218 RAM ein, dann brauchen wir eine Höhe von fünf RAM. Außerdem setze ich die Hintergrundfarbe auf transparent, dann benötigen wir einen Randpunkt, um durchgehend zu rammen. Und die Farbe wird Tba eight 1-p sein Tba eight 1-p Ich meine, die gelbe Farbe. Als Nächstes setze ich die Farbe wieder auf Gelb. Wir benötigen also 1,8 RAM vor Ort . Wir brauchen etwas Abstand zwischen den Buchstaben. Setzen wir es auf 0.1 run. Und wir brauchen auch Caruso, um auf den Punkt zu kommen. Okay, der Button sieht also ziemlich nett aus. Und mit der linken Seite sind wir fertig. Lassen Sie uns weitermachen und uns um den Rahmen kümmern, der sich auf der rechten Seite befindet. Fangen wir mit 250 RAM an. Dann müssen wir eine Rahmenhöhe von 35 cm haben. Also werde ich einen Rand verwenden, bei dem es sich um drei REM-Volumenkörper mit der Farbe 555 handelt. Lassen Sie uns die Position auf absolut setzen. Als nächstes müssen wir die Position auf 15 RAM einstellen. Was die richtige Position angeht, werde ich sie auf 40 RAM einstellen. Eigentlich benötigen wir die relative Position für das übergeordnete Element. Deshalb sehen wir hier den Rahmen nicht. Also jetzt ist es hier. Ich werde die Position für den Image-Wrapper auf absolut setzen , damit zwei Positionen ein Dram sind Die richtige Position wird 33 RAM sein. Jetzt haben wir wirklich gute Ergebnisse. Als Nächstes kümmere ich mich um den unteren Abschnitt. Lassen Sie uns die Position auf absolut setzen. Wir müssen hier unten sein, um RAM zu haben. Dann ist die richtige Position 33 Rampe. Und außerdem müssen Sie definieren, dass die Höhe 12 sein wird. Rahm. Als nächstes brauchen wir eine Grenze auf der rechten Seite. Stellen wir es auf einen durchgehenden RAM-Wert ein und die Farbe wird gelb sein. Also hier haben wir die Grenze auf der rechten Seite. Lassen Sie uns den Text so ausrichten, dass er geschrieben wird. Und wir brauchen auch etwas Platz auf der rechten Seite mit Polsterung, oder Zu rennen. Okay, jetzt haben wir zwei Stylen Sie die Überschriften Beginnen wir mit den H1-Überschriftenelementen. Ich setze die Schriftfamilie auf Alpha Slab One. Die kursive Schriftgröße wird 61 sein. Als Nächstes ändere ich die Farbe. Lassen Sie uns auch Ihre 555 verwenden, wir brauchen Leerzeichen zwischen den Buchstaben. Sagen wir, 2,5 sind gelaufen. Die erste Überschrift. Sieht echt nett aus. Als Nächstes wähle ich die zweite Überschrift aus, nämlich H drei. Ich setze die Schriftgröße auf 2,5 Primzahl. Dann wird die Farbe weiß sein. Also jetzt sieht Section Bottom wirklich gut aus. Wir haben hier ein kleines Problem. Wir müssen die Navigation anzeigen. Dafür. Wir müssen die Indexeigenschaft mit dem Wert 100 verwenden. Okay, das ist es also. Alles sieht gut aus. Wir können weitermachen und mit der Arbeit am nächsten Abschnitt beginnen. 26. Projekt 3: Projektabschnitt erstellen und anpassen: Ordnung, jetzt ist es an der Zeit, weiterzumachen und mit der Erstellung unseres nächsten Abschnitts dieses Projekts zu beginnen Erstellung unseres nächsten Abschnitts dieses Projekts Im nächsten Abschnitt geht es um Projekte. Also werde ich neue Kommentare für die neuen Sektionsprojekte und Projekte einfügen . Und dann öffne ich den Abschnitt-Tag mit einem Klassennamen, Projekten. In diesem Abschnitt werde ich das H1-Überschriftenelement mit dem Klassennamen Projects-Überschrift einfügen Lassen Sie uns die neuesten Projekte initiieren. Als Nächstes öffne ich den DIV-Tag mit den Klassenkarten, in denen ich genannt werde. Die Karte wird ein Bild enthalten. Wählen wir ein Bild aus dem Bilderordner aus. Außerdem werde ich ein weiteres DIV-Tag mit dem Klassennamen Content öffnen , in dem wir H1-Überschriftenelemente mit einem Text haben werden Ihr Traumhaus ist da. Als Nächstes. Wir werden hier einen Absatz mit einem Blindtext haben Das war's also mit der Karte. Ich werde dieses Element ein paar Mal duplizieren und die Bilder ändern. Insgesamt werden wir fünf verschiedene Karten haben. Ordnung, danach öffne ich den DIV-Tag mit den Klassendesigns Und dann Abschnitt unten. Das haben wir bereits genutzt. Im letzten Abschnitt. Öffnen wir das H1-Überschrift-Tag mit den Texten. Fantastisch. Dann brauchen wir ein h3-Heading-Tag mit einem Textdesign Hier haben wir also HTML-Markup. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Ich werde neue Kommentare für den Abschnitt Projekte einfügen . Dann kümmere ich mich um die Karte. Lassen Sie uns die Breite auf 32 RAM setzen. Dann setze ich die Höhe auf 50 RAM. Als Nächstes wähle ich das Bild aus und definiere seine Breite. Es werden 100% sein. Nehmen wir an, die Höhe wird ebenfalls 100% betragen. Außerdem müssen wir das Bild anhand des Objektdeckels anpassen. Jetzt haben wir hier also relativ kleinere Bilder. Und wir haben auch hier unten, tolle Designs. Also werde ich es unten notieren. Wählen wir das Element Abschnitt aus und legen dessen Breite auf 200% fest. Die Höhe wird hundert Viewport-Höhe sein. Außerdem setze ich Position auf Relativ. Jetzt befindet sich das untere Element des Abschnitts unten. Als Nächstes wähle ich Projekte aus, die, lass uns ihre Schriftgröße als Straßenbahn definieren. Dann ändere ich die Farbe. Es wird weiß sein. Ich werde Platz zwischen den Buchstaben schaffen. Stellen wir es so ein, dass es auf die Rampe zeigt. Als Nächstes werde ich mit Margin etwas Speicherplatz mit den Werten Sudden RAM, 010 RAM und Nine RAM schaffen mit Margin etwas Speicherplatz mit den Werten Sudden RAM, . Also hier haben wir die Überschrift. Danach wählen wir Karten aus. Ich meine, der Wrapper hat die Breite auf 90% gesetzt. Dann benötigen wir Margin Auto , um das Element in der Mitte zu platzieren. Dann brauchen wir Flexbox. Man kann also sehen, dass die Karten schön horizontal platziert sind. Lass uns mit Margie etwas Platz auf der rechten Seite jeder Karte schaffen , oder? 2,5 ARBEITSSPEICHER. Und außerdem müssen wir den Cursor als Zeiger verwenden. Wir haben hier also ein viel schöneres und besseres Ergebnis. Als Nächstes wähle ich den Inhalt des Warenkorbs aus. Fangen wir mit 200% an. Auch die Höhe wird bei hundert Prozent liegen. Dann müssen wir so positioniert sein , dass wir absolut sind. Außerdem benötigen wir die relative Position für das übergeordnete Element, das in diesem Fall aufgerufen wird. Als Nächstes setze ich die Spitzenposition auf Null. Die linke Position wird ebenfalls Null sein. Hier haben wir den Karteninhalt. Lassen Sie uns die Hintergrundfarbe ändern. Ich werde deine RGBA-Farbe verwenden. Ich habe die schwarze Farbe mit einer geringeren Opazität, 0,9. Als Nächstes wähle ich das H1-Überschriftenelement im Warenkorbinhalt Stellen wir die Schriftgröße auf RAM ein, dann wird die Farbe weiß sein. Also setze ich die Position auf absolut. Sie haben die Position eingenommen, dass es voller RAM sein wird. die Führungsposition angeht, werde ich sie ebenfalls auf 4 M setzen. Wechseln Sie mit, es wird 15 Rennen sein. Hier haben wir also das H1-Überschriftenelement. Als Nächstes müssen wir den Absatz des Kabeljauinhalts auswählen. Definieren wir die Schriftgröße als 1,6. Die Farbe wird weiß sein. Und ich werde auch definieren, dass die Position absolut ist und wir müssen die Position auf 13 RAM setzen. Was die linke Position angeht, werde ich sie für RAM verwenden, die Breite beträgt 17 Rampen. In Ordnung. Also der Überschriftenabsatz oder Anpassen. Als Nächstes wähle ich den aufgerufenen Inhalt mit vorherigen Pseudoelementen Lassen Sie uns den Inhalt auf leer setzen. Als Nächstes definiere ich die Breite. Es werden 92% sein. Dann brauchen wir Höhe. Es wird 0,1 RAM sein. Außerdem müssen wir die Hintergrundfarbe, die ich hier verwenden werde , und die gelbe Farbe ändern . Lassen Sie uns die Position als absolut festlegen. Wir müssen die Let-Position auf Null setzen. Ich hatte das Gefühl, dass es Position zu RAM genommen hat. Hier haben wir also schon einmal Pseudoelemente. Als Nächstes müssen wir eine weitere Zeile mit Pseudoelementen nach erstellen eine weitere Zeile mit Pseudoelementen nach In diesem Fall haben wir eine vertikale Linie. Lassen Sie uns die Breite ändern. Soweit die Höhe reicht, werden es 0,1 RAM sein. Ich setze es auf 94%. Die linke Position wird zwei REM sein. Lassen Sie uns die zwei Positionen, die wir brauchen, hier angeben, Null. Also hier haben wir jetzt die zweite vertikale Linie. Jetzt erstelle ich einen Hover-Effekt. Sobald wir den Mauszeiger über die Karte bewegen, müssen wir den Karteninhalt Lassen Sie uns hier eigentlich die Hintergrundfarbe platzieren. Dann verwende ich Übergangshintergrundfarbe mit einer Dauer von 0,6 s. Sobald wir den Mauszeiger über die Karte bewegen, ändert sich die Hintergrundfarbe Als Nächstes gehe ich mit Transform zu beiden Linien nach Hyde. Skala. Der Wert sollte Null sein und dann müssen wir den Mauszeiger gefolgt von dem vorherigen verwenden Mauszeiger gefolgt von dem vorherigen Pseudoelemente. Wir müssen die Skala ändern. Und Sie sehen hier den Standardwert eins. Wir müssen also einen Übergang vornehmen, um einen reibungslosen Effekt zu erzielen. Sobald wir den Mauszeiger über die Schnittlinie bewegen, wird sie angezeigt. Eigentlich müssen wir den Ursprung der Transformation ändern den Ursprung der Transformation , weil wir die Linie von links anzeigen müssen. Jetzt haben wir also ein viel besseres Ergebnis. Und jetzt brauchen wir dasselbe für die zweite Zeile. Ich meine das Pseudoelement danach Verwenden wir hier den Mauszeiger, ändern wir das Pseudoelement, das wir hier danach benötigen Und wir müssen den Ursprung so transformieren, dass er an Spitze steht und mit einer Transformation übergehen. In Ordnung, jetzt haben wir hier einen schönen Schwebeeffekt. Als Nächstes werde ich die Überschrift und den Absatz mithilfe von Opazität und Sichtbarkeit ausblenden und den Absatz mithilfe von Opazität und Sichtbarkeit Und sobald wir den Mauszeiger über die Karte bewegen, müssen wir sie wieder anzeigen. Also brauchen wir hier Opazität eins und Sichtbarkeit, sichtbar. Kopieren wir diesen Code und verwenden wir ihn auch für den Absatz. Um hier den Selektor hier zu ändern P. Und außerdem brauchen wir einen Übergang für beide Elemente Außerdem müssen wir den Übergang auch mit dem Mauszeiger und mit einer gewissen Verzögerung durchführen. Okay, wie Sie sehen können, haben wir hier eine viel bessere Tatsache. Eigentlich denke ich, dass alles gut funktioniert. Wir müssen nur die Position der unteren Elemente des Abschnitts ändern . Stellen wir die richtige Position auf Runde 12 ein. In Ordnung, also alles sieht gut aus. Und mit diesem Abschnitt sind wir fertig. Also lass uns weitermachen. 27. Projekt 3: Kundenbereich erstellen und gestalten: Ordnung, sobald wir mit dem Projektbereich fertig sind , können wir weitermachen und unseren nächsten Abschnitt erstellen , der ein Kundenbereich sein wird Also werde ich Ihre bekannten Kommentare für den Kundenbereich platzieren . Dann lassen Sie uns weitermachen und Abschnittsnamen mit einem Klassennamen öffnen. Kunden. Ich füge Ihr H1-Überschriftenelement mit einer Überschrift der Klasse Kunden ein Lassen Sie uns Ihre Kunden als Textwert einfügen. Als Nächstes öffne ich Tip Check mit dem Clusternamen Customers content, in dem ich ein weiteres Geschenk platzieren werde. Und es wird eine Kundenkarte sein. In die Karte füge ich also ein Bild ein. Lassen Sie uns weitermachen und ein Bild aus dem Bilderordner auswählen. Es wird wie ein Tumor sein. Außerdem wird hier ein DIV-Tag mit dem Inhalt der Kundenkarte stehen. In diesem Element werde ich die H1-Überschrift mit dem Namen John Smith platzieren H1-Überschrift mit dem Namen John Smith Dann haben wir die Überschrift H3 und es wird dem Co-Manager zugeordnet Als Nächstes werden wir ein Font Awesome-Symbol haben. Es wird FAA sein, es sind noch solide Zitate übrig. Dann brauchen wir Ihren Absatz mit etwas Blindtext. Lassen Sie uns weitermachen und die Kundenkarte duplizieren. Als Nächstes füge ich hier das DIV-Tag ein, das unten im Client-Abschnitt steht. Die Elemente aus den vorherigen Abschnitten. Wir werden hier also H1-Überschriftenelemente mit den Textclients Und außerdem brauchen wir hier h3-Überschriftenelement mit dem Text, okay, das war's Wir haben hier HTML-Markup. Eigentlich müssen wir hier das Bild ändern. Es wird Kunde zwei sein. Jetzt ist das Bild geändert. Wir sind fertig mit dem HTML-Markup. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Wir brauchen hier neue Kommentare für den Kundenbereich. Dann wähle ich Abschnittselemente aus, die einen Klassennamen Customers haben Definieren wir die Breite. Es werden 100% sein. Das ist wahrscheinlich Höhe. Ich werde es auf Viewport-Höhe einstellen Und wir müssen auch die Hintergrundfarbe ändern. In diesem Fall verwende ich 313133. Dann brauchen wir oben etwas Platz mit Polsterung, Top 7 R& Als Nächstes wähle ich das Kartenbild der Kunden aus , um sie zu verkleinern. Fangen wir mit 220 RAM an. Jetzt wurden die Bilder kleiner und es ist jetzt komfortabler zu arbeiten. Also brauchen wir hier die relative Position für das Abschnittelement. Wie Sie sehen können, ist dieser Abschnitt unten gut platziert. Als Nächstes wähle ich die Überschrift Kunden aus. Definieren wir die Schriftgröße. Es wird acht Rampen sein. Dann brauchen wir Farbe. Es wird weiß sein. Außerdem werde ich Speicherplatz mit Margin mit dem Wert 0010 RAM und dann neun RAM auf der linken Seite erstellen mit Margin mit dem Wert 0010 RAM und dann neun RAM auf der linken Seite Schaffen Sie auch etwas Abstand zwischen den Buchstaben. Stellen wir es so ein, dass es auf RAM zeigt. Hier haben wir also die Überschrift des Abschnitts. Als Nächstes wähle ich, als Nächstes wähle ich Kundeninhalte aus. Definieren wir Welle. Es werden 80 Prozent sein. Dann haben wir Ihre Randreihe um das Element zu zentrieren. Dann werde ich Flexbox verwenden. Wir müssen den Inhaltsbereich gleichmäßig begründen, um einen gleichmäßigen Abstand zwischen den flexiblen Elementen zu schaffen. Als Nächstes kümmern wir uns um den Karteninhalt des Kunden. Die Breite wird 50 R& betragen. Dann haben wir die Höhe, die 22 RAM betragen wird Als Nächstes ändere ich die Hintergrundfarbe. Es wird 777 sein. Außerdem benötigen wir hier einen Randradius von 0,5 RAM. Als nächstes werden wir einen Schatteneffekt mit den Werten 01 RAM haben . Dann wieder ein RAM und die RGBA-Farbe, schwarze Farbe mit geringerer Opazität Als Nächstes benötigen wir etwas Platz, indem wir den Füllwert zum Umwickeln verwenden. Okay, also Schritt für Schritt, die Karte sieht gut aus. Als Nächstes werde ich die Position für das Bild festlegen, sie wird absolut sein. Dann wähle ich Kundenkarte aus, die ein übergeordnetes Element für das Bild ist. Und wir brauchen hier eine relative Position. Danach lassen Sie uns weitermachen und definieren. Die Position wird minus fünf Primzahlen betragen. Und wir brauchen hier auch die richtige Position, es wird eine Rampe sein. Wir brauchen hier also einen Grenzradius von 0,5 REM. Als nächstes brauchen wir einen Schatteneffekt. Werden die Werte 0,5 RAM, 0,5 RAM und die Farbe wird RGBA-Farbe mit geringerer Opazität sein RGBA-Farbe mit geringerer Opazität In Ordnung, die Bilder sind also gut ausgerichtet. Als Nächstes werde ich mich um die H1-Überschriftenelemente des Kabeljauinhalts kümmern die H1-Überschriftenelemente des Kabeljauinhalts Die Schriftgröße wird 2,5 RAM betragen. Dann haben wir Farbe. Es wird weiß sein. Ebenfalls. Ich werde unten etwas Platz schaffen. Stellen wir es auf ein RAM ein. Die Überschriften sehen also gut aus. Das nächste Element zum Anpassen wird das h3-Überschriftenelement sein Lassen Sie uns die Schriftgröße ändern. Es wird auch 1,8 Dram sein. Die Farbe werde ich C, C, C verwenden . Und der Rand unten wird aus drei Rampen bestehen. Danach kümmere ich mich um das I-Element, das Font Awesome-Icon, zitiert Emily, lass uns die Schriftgröße zwei rammen. Die Farbe wird ebenfalls hell sein. Die unterste Marge, wir müssen sie loswerden. Die Codes sehen also gut aus. Jetzt müssen wir uns um den Absatz kümmern. Lassen Sie uns die Schriftgröße auf 1,6 Runden setzen. In Ordnung, das war's also. Das war's mit dem Kundenbereich. Es sieht wirklich nett aus. Und jetzt können wir weitermachen und mit der Arbeit am nächsten Abschnitt beginnen. 28. Projekt 3: Kontaktbereich aufbauen: Ordnung, es ist an der Zeit, weiterzumachen und unseren nächsten Abschnitt des Projekts zu erstellen Der nächste Abschnitt wird ein Kontaktbereich sein. Lassen Sie uns also weitermachen und neue Kommentare für den Abschnitt „ Verhalten“ einfügen . Dann öffne ich den Abschnitt-Tag mit dem Klassennamen Kontakt. Innerhalb des Abschnittelements. Ich öffne den Deep-Tag , der Contact Content sein wird. Dann brauchen wir den Kontakt links, die linke Seite, diesen Abschnitt. Öffnen wir H1-Überschrift, Tag und Institut. Bleiben Sie dran und erhalten Sie die neuesten Updates. Als Nächstes benötigen wir Contact right, in das ich ein Eingabe-Tag mit dem Typ E-Mail und mit dem Platzhalter-Attributwert Ihre E-Mail-Adresse einfüge ein Eingabe-Tag mit dem Typ E-Mail und mit dem Platzhalter-Attributwert Ihre E-Mail-Adresse einfüge Als Nächstes benötigen wir das Font Awesome-Symbol, das ein fester Pappteller sein wird. Okay, also lass uns sehen. Das HTML-Markup ist fertig. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Lassen Sie uns Ihre neuen Kommentare für Kontakt einfügen. Als Nächstes wähle ich Kontaktelemente aus. Ich meine diese Abschnittselemente. Zelle mit 200 Prozent, die Höhe wird 25 Rampen betragen. Dann brauchen wir Flexbox und Justify Content Center. Außerdem müssen wir die Elemente in der Mitte ausrichten , um den Inhalt in diesem Abschnitt zu zentrieren. Als Nächstes wähle ich Kontaktinhalt und gebe die Breite an. Es werden 80 Prozent sein. Dann müssen wir Flex anzeigen um die Artikel nebeneinander zu platzieren Dann verwende ich den Bereich „ justify content space“ und muss sogar einen bösen Raum zwischen den Flex-Elementen schaffen. Als Nächstes wählen wir das Überschriftenelement Contact Content H1 Also die Schriftgröße auf drei RAM. Dann wandle ich Text in Großbuchstaben um. Ändere auch die Farbe. Es wird CCC sein. Hier haben wir das Überschriftenelement. Lassen Sie uns weitermachen und Eingabeelemente auswählen. Ich setze die Breite auf 45 RAM. Dann wird die Höhe für R& sein. Außerdem werde ich die Hintergrundfarbe ändern. Stellen wir es auf transparent ein. Als Nächstes werde ich mit Padding, 1,5 RAM und dann 1,5 g Speicherplatz in der Eingabe schaffen mit Padding, 1,5 RAM und dann 1,5 g Speicherplatz in der Eingabe 1,5 RAM und dann 1,5 . Als Nächstes müssen wir auf RAM und Null zeigen Danach verwende ich Grenze und setze ihn auf None. Dann brauchen wir den Boden. Es wird 0,1 Reime durchgehend sein und die Farbe wird 777 sein Also hier haben wir die Grenze unten. Als Nächstes setzen wir die Schriftgröße auf 1.8 Ran. Außerdem benötigen wir, dass Ihre Farbe CCC ist. Danach wähle ich das Eingabeelement aus, gefolgt von der Fokus-Pseudoklasse Sobald wir das Eingabeelement fokussiert haben, müssen wir den Rahmen ändern, ich meine die Farbe des Randes, und er wird gelb sein. Außerdem brauchen wir hier einen Übergang für einen reibungslosen Effekt. In Ordnung? Sobald wir also das Eingabeelement und den unteren Rand fokussiert haben, ändern Sie seine Farbe. Als Nächstes wähle ich das Platzhalterattribut und möchte die Farbe ändern Machen wir es CCC und verwenden Sie auch den Buchstabenabstand, 0,1 RAM. Okay? Das war's also mit dem Eingabeelement. Jetzt werde ich Sie vom Font Awesome-Symbol entfernen. Nehmen wir an, die Schriftgröße beträgt ungefähr 1,8. Dann wird die Position absolut sein. Ich werde die Position auf 20 Prozent erhöhen. Was die richtige Position angeht, wird Null sein und auch die Farbe ändern. Machen Sie es zu C, C, C. Als Nächstes ändern wir den Cursor, lassen Sie ihn zeigen. Das Symbol ist also nicht sichtbar, da wir Ihre relative Position für das übergeordnete Element vergessen haben . Schauen wir uns also den Konflikt an, oder? Und legen Sie die Position für die Route fest. Okay, das ist es also. Der Kontaktbereich sieht gut aus, also können wir weitermachen und uns um den Indexbereich kümmern 29. Projekt 3: Erstelle und passe die Fußzeile der Website an: Ordnung, jetzt ist es an der Zeit, unseren letzten Abschnitt des Projekts zu erstellen unseren letzten Abschnitt des Projekts Es wird eine Fußzeile sein. Die Fußzeile wird einfach sein. Fügen wir neue Kommentare für die Fußzeile ein. Dann öffne ich das HTML5-Fußzeilen-Tag, gefolgt vom Klassennamen Footer gefolgt vom Klassennamen Öffnen wir das DIV-Tag mit dem Inhalt der Klasse Footer , in dem ich das Logo platzieren werde Wir müssen hier mit den Klassen sprechen, mit der Marke und dann mit der Marke Footer Innerhalb der Entwicklung wird es drei Elemente geben. Ich meine Logo, eins, Logo bis Level drei, als ob es in der Navigation steht. Und auch hier brauchen wir ein Span-Element mit einer Textarchitektur. Okay, als nächstes brauchen wir hier den Copyright-Textabschnitt mit einem Copyright-Zeichen. Und auch mit dem Text. Alle Rechte vorbehalten. Hergestellt durch Codierung von Create. Ordnung, das war's also mit dem HTML-Markup der Fußzeile Lassen Sie uns weitermachen und diesen Abschnitt gestalten. Fügen wir neue Kommentare für die Fußzeile ein. Dann wähle ich das Fußzeilenelement aus. Definieren wir eine Breite. Es werden 100% sein. Es gibt wahrscheinlich eine Höhe. Ich werde es auf sieben R& setzen es auf sieben R& Als nächstes benötigen wir eine Hintergrundfarbe. Es wird 2020 auf Null gehen. Außerdem benötigen wir oben einen Rand, 0,1 g Feststoff. Die Farbe wird drei sein, e3, e4, eins. Hier haben wir also den Rand oben in der Fußzeile. Als Nächstes wähle ich Branch Footer aus und setze die Position auf absolut Dann benötigen wir die relative Position für das übergeordnete Element, das die Fußzeile ist Die oberste Position wird 3,5 RAM sein. Für die linke Position setze ich ihn auf 20%. Okay, hier haben wir das Logo. Wählen wir das erste Frankfurter Logo aus, das drei RAM sein wird Das sind wahrscheinlich Höhen. Ich werde es auch auf drei RAM einstellen. Dann haben wir hier Randpunkte zum Rammen, durchgehend, und die Farbe wird gelb sein. Als Nächstes dupliziere ich diesen Code und ändere den Klassennamen. Es wird auf Breite und Höhe auf 2,5 RAM gesetzt. Und wir brauchen keine Grenze. Lassen Sie uns die Hintergrundfarbe ändern. Es wird 2020/20 sein. Außerdem brauchen wir eine schwierige Position mit einer Rampe von 0,7. Das ist es, was die Position geführt hat. Es wird auch eine 0,7-Rampe sein. Der zweite Teil ist also fertig. Lassen Sie uns diesen Code duplizieren und den Klassennamen ändern. Wir brauchen hier ein Logo drei. Eigentlich kopieren wir den Rahmen von hier und fügen ihn hier ein. Dann müssen wir die Top- und Let-Positionen wechseln. Stellen wir beide auf 1,3 RAM ein. Also hier haben wir das Logo. Als Nächstes wähle ich das Span-Element aus. Stellen wir die Schriftgröße auf, um zu starten. Was den oberen Rand angeht, werden es 0,5 RAM sein. Wir können also sagen, dass das Logo und die linke Seite der Fußzeile fertig sind Lassen Sie uns weitermachen und uns um den Copyright-Text kümmern. Ich schicke die Position an Absolute, dann wird die Spitzenposition bei 50% liegen. Wir müssen die Elemente mit Transform Translate Y zentrieren — 50 Prozent Für die richtige Position werden es 20% sein. Als nächstes müssen wir die Schriftgröße ändern. Machen wir daraus eine Münze, sechs R&. Ändere auch die Farbe. Setzen wir es auf CCC. Das ist es also. Die Fußzeile ist schon, sieht gut aus. Und eigentlich können wir sagen, dass das Projekt abgeschlossen ist. Das einzige, was wir tun mussten, war, es an verschiedene Bildschirmgrößen anzupassen. 30. Projekt 3: Mache das Projekt responsiv: Ordnung, sobald wir alle Abschnitte unseres Projekts erstellt haben , versuchen wir nun, es an verschiedene Bildschirmgrößen anzupassen Ich werde die Seite überprüfen und in den Responsive-Modus wechseln. Dann füge ich Ihre neuen Kommentare für den Responsive-Modus in die CSS-Datei ein. Wir werden also den Breakpoint finden , an dem wir einige Änderungen vornehmen müssen Und dann mussten wir CSS Media Query verwenden. Also lass es uns erstellen und die maximale Breite angeben. Es werden 1.700 Pixel sein. Als erstes wähle ich Banner aus und ändere die Position. Es wird 12 R& sein. Als Nächstes wähle ich About, richtig, ich meine die rechte Seite des About-Abschnitts aus und definiere marginin-right als 20er-Rampe Danach wählen wir den Rahmen aus und ändern die Breite. Es werden 45 RAM sein. Außerdem müssen wir die Höhe ändern. Es wird bei 30 RAM sein. Als Nächstes ändere ich die richtige Position. Stellen wir es auf 20 RAM ein. Also werde ich die Position des Frames ändern und er wird auf die rechte Seite verschoben. Als Nächstes wählen wir Über Image Wrapper aus und ändern die Breite Es wird 45 RAM sein, dann wird die Höhe 30 RAM sein. Und ich werde auch die richtige Position ändern. Es werden 13€ Miete sein. Jetzt sieht die rechte Seite gut aus. Als Nächstes ändere ich die Position des unteren Abschnitts. Also brauchen wir hier Erfahrung und ändern die richtige Position. Stellen wir es auf Rampe 20 ein. Okay, als Nächstes kümmern wir uns um den Abschnitt Projekt. Wählen Sie das Abschnittselement und stellen Sie die Höhe auf 200 Prozent ein. Dann müssen wir Karten auswählen und mit zwei 80% setzen. Außerdem werde ich die Flex-Artikel mit Flex Wrap , Wrap einwickeln. Und wir brauchen auch das Justify-Content Center. Als Nächstes werde ich unten etwas Platz schaffen, indem ich eine Polsterung verwende. Stellen wir die Rampe auf 25 Okay, die Karten sind also verpackt, aber wir müssen hier etwas Platz schaffen. Dafür. Ich wähle die Karte selbst aus und setze den Rand auf 1,5. Okay, jetzt sieht alles gut aus. Als Nächstes kümmere ich mich um den Kundenbereich. Wählen wir Kundeninhalte aus. Stellen Sie die Breite auf 90% ein. Und wir müssen auch die Position des unteren Abschnitts ändern. Setzen wir die richtige Position auf 20 Ran. Okay? Als Nächstes wähle ich Kontaktinhalt aus. Ändern wir die Breite auf 90%. Außerdem müssen wir die Markenfußzeile auswählen und die linke Position ändern Es werden 16% sein. Und lassen Sie uns dasselbe für das Urheberrecht tun. Lassen Sie uns die richtige Position ebenfalls auf 16% setzen. Okay, ich denke also, an einem Breakpoint sieht alles gut aus. Lass uns weitermachen und den nächsten finden. Ich denke also, dass der nächste Breakpoint 1.400 Pixel groß sein wird Also werde ich eine neue CSS-Medienabfrage erstellen. Und ich gebe hier die maximale Breite als 1.400 Ich werde die Schriftgröße des HTML-Elements verringern. Setzen wir es auf 55%. Dadurch werden alle Elemente relativ kleiner. Als Nächstes wähle ich im Abschnitt Über mich den Frame aus. Stellen wir die Breite auf 40 RAM ein. Die Höhe wird 25 RAM betragen. Und wir müssen auch die richtige Position ändern. Stellen wir es auf 15 RAM ein. Das Gleiche gilt für das Bild. Ich habe die Hülle des Bildes gemacht. Lassen Sie uns die Breite auf 40 RAM setzen und die Höhe beträgt 25 von. Und wir haben auch die richtige Position geändert. Und in diesem Fall wäre die richtige Position eine Straßenbahn. Okay? Also auf der rechten Seite des About-Bereichs, es sieht gut aus. Lassen Sie uns Ihnen von der Erfahrung erzählen. Die richtige Position wurde geändert und auf Rampe 12 gesetzt. In Ordnung, also alles sieht gut aus. Lass uns weitermachen und den nächsten Breakpoint finden. Ich denke also, dass der nächste Breakpoint 1.200 Pixel betragen sollte Lassen Sie uns also eine neue CSS-Medienabfrage erstellen und die maximale Breite auf 1.200 Pixel festlegen Ich werde die Schriftgröße des HTML-Elements erneut ändern , lassen Sie uns sie auf 49% setzen. Dann kümmere ich mich um den Abschnitt Über mich. Wählen wir also die linke Seite des Abschnitts Über uns aus. Und auch hier müssen wir den Absatz auf eine Breite von 40 R& setzen. Weiter. Ich werde mich um den Kundenbereich kümmern, weil die Karten zu nahe beieinander liegen. Wählen wir also die Inhalte der Kunden aus und legen wir mit 200 Prozent fest. Als Nächstes brauchen wir Kunden und wir müssen die richtige Position ändern, das wird zehn Rampen sein. Okay. Danach kümmern wir uns um den Kontaktbereich. Lassen Sie uns die Breite des Kontaktinhalts auf 200 Prozent festlegen. Und ich werde mich auch um den Footer kümmern. Wir müssen die Beinposition ändern. Setzen wir es auf zehn Prozent. Ich muss auch die Position des Urheberrechts ändern. Eigentlich brauchen wir hier die Glücksposition und nicht die richtige. Wir brauchen die richtige Position für das Urheberrecht. Setzen wir es also auch auf zehn Prozent. Okay, also ich finde, alles sieht ziemlich gut aus. Lassen Sie uns weitermachen und uns um den nächsten Breakpoint kümmern. Ich denke, der nächste Breakpoint sollte bei 900 Pixeln liegen. Lassen Sie uns weitermachen und erneut eine neue CSS-Medienabfrage erstellen neue CSS-Medienabfrage und die maximale Breite auf 900 Pixel angeben Zunächst ändere ich die Schriftgröße des HTML-Elements. Setzen wir es auf 45 Prozent. Als Nächstes kümmere ich mich um die Suchleiste. Ich meine das Eingabeelement. Lassen Sie uns seine Breite ändern und 30 Rampen machen. Also nein, wir haben keine Probleme mit der Navbar. Als Nächstes müssen wir uns um die Überschrift auf dem Banner kümmern , wobei die Schriftgröße auf sieben Rampen eingestellt ist. Außerdem wähle ich in der Banner-Überschrift Span-Elemente aus. Lassen Sie uns die Schriftgröße ändern und sie ebenfalls auf sieben Rum setzen. Okay, danach wähle ich absatzunabhängigen Inhalt aus. Lassen Sie uns die Schriftgröße ändern. Es wird eine Rampe von 1,7 m haben, da wahrscheinlich die Breite ist. Ich werde es auf so einstellen , dass fünf gelaufen sind. Als nächstes müssen wir uns um den Abschnitt Über uns kümmern , weil hier alles durcheinander Also lass uns weitermachen und links Über uns auswählen. H1-Überschriftenelemente. Ändern Sie die Schriftgröße. Stellen wir es auf drei Durchläufe ein. Außerdem werde ich mit 235 RAM beginnen. Dann wähle ich auf der linken Seite „Über“ einen Absatz aus. Lassen Sie uns die Schriftgröße ändern. Es wird Rampe 1.7 sein. Und ändere auch die Breite. Ich werde es wie bei den Überschriftenelementen auf 35 Rampen setzen. Als nächstes müssen wir uns um den Rahmen kümmern. Auf der rechten Seite. Das hat sich geändert. Die Breite wird 30 R& betragen. Außerdem müssen wir die Höhe bei 30 bis 15 RAM ändern , bevor wir den Rand ändern. Ich meine die Breite des Randes, es wird 1,5 RAM sein. Außerdem müssen wir die richtige Position ändern. Setzen wir es auf zehn R&. Als nächstes müssen wir uns um den Image-Wrapper kümmern . Wir müssen die Breite ändern, die es haben wird. Um zu rennen, müssen wir also die Höhe ändern. Stellen wir es auf Rampe 15 ein. Und ich muss mich auch um die Positionen kümmern. Die oberste Position wird 12 Rampe sein. Und wir müssen uns auch um die richtige Position kümmern. Lernen wir bis zur Rampe sieben. Okay, die rechte Seite sieht also gut aus. Als Nächstes müssen wir das Erlebnis anpassen. Das heißt, ändere die richtige Position und setze sie auf sieben R& Als nächstes müssen wir uns um den Kundenbereich kümmern. Lassen Sie uns also weitermachen und Kunden auswählen. Das Abschnittelement setzt die Höhe auf 100%. Und wir brauchen auch eine Polsterung an der Unterseite, damit die Rampe 12 ist. Dann wähle ich Kundeninhalte aus und ändere die Richtung der Flexbox. Das sind nur zwei Spalten. Und wir müssen hier die Artikel in der Mitte ausrichten. Jetzt werden die Karten vertikal übereinander gelegt. Lassen Sie uns mithilfe der Margin-H-Rampe etwas Abstand zwischen ihnen schaffen. Also jetzt der Kundenbereich. Sieht gut aus. Wir müssen dich zur Kontaktabteilung bringen. Wählen wir Kontaktinhalt aus. Ändere die Richtung und mache sie wie im vorherigen Abschnitt zu einer Spalte. Außerdem müssen wir hier die Elemente ausrichten, zentrieren, dann Kontakt links auswählen und den Rand unten verwenden. Das sind nur zwei zur Miete. Okay. Ich denke, am Breakpoint sieht alles gut aus. Schauen wir uns die Navigation an. Jetzt müssen wir uns also um den nächsten Breakpoint kümmern. Enacting ist der letzte. Lassen Sie uns also neu erstellen, sehen Sie, dass diese Medienabfrage die maximale Breite auf 600 Pixel festlegt. Das erste, was ich tun muss, ist die Schriftgröße des HTML-Elements zu ändern. Setzen wir es auf 35 Prozent. Dann nehme ich dich mit nach Navbar. Wählen wir die Marke aus. Und wählen wir Span-Elemente aus und die Marke ist jetzt schlecht und versteckt sich, indem wir keine anzeigen. Also wir haben hier und nur das Logo. Ebenfalls. Wir müssen uns um die Navigationselemente kümmern . Wählen wir also Navigation, gefolgt vom Link-Element. Also Schriftgröße auf drei RAM. Und wir müssen uns auch um die Leitungen kümmern. Sie sind zu lang. Wir brauchen ein Element mit einem vorhergehenden Pseudoelement, und wir brauchen auch ein nachfolgendes Pseudoelement Stellen wir die Breite auf can run ein. Dann wähle ich die vorherigen Pseudoelemente separat Lassen Sie uns diese Position ändern Es wird die Rampe -13 sein. Und dasselbe müssen wir auch für das Pseudoelement danach tun. In diesem Fall müssen wir die richtige Position finden. Jetzt denke ich, dass das Problem behoben ist. Schauen wir uns als Nächstes das Banner an. Sie müssen die linke Position ändern. Es werden fünf RAM sein und wir müssen auch die untere Position ändern. Ich setze es auf 18 R&. Als Nächstes wählen wir Überschriftenelemente und ändern die Schriftgröße Stellen wir sie auf fünf RAM ein. Außerdem werde ich Span-Elemente innerhalb der Banner-Überschrift auswählen, diese Zelle, ihre Schriftgröße zwei für R& In Ordnung, als Nächstes müssen wir uns um den Abschnitt Über uns kümmern. Wählen wir also „Über Rechte und machen es mithilfe der Anzeige ausgeblendet. Keine. Eigentlich. Wir müssen dieses Element aus der Entwicklung herausnehmen , weil es versteckt war. Als Nächstes wähle ich den Abschnitt Über mich aus und setze seine Höhe auf 100%. Und verwenden Sie auch das Justify-Content Center. Wir brauchen auch eine Polsterung, die zehn RAM (0,25 Gramm) beträgt. In Ordnung. Danach wähle ich die linke Seite. Lass uns die Airline-Texte in der Mitte schreiben. Also ändere den rechten Rand, mach ihn auf Null. Ich finde, dass Section jetzt ziemlich gut aussieht. Lassen Sie uns Sie von der Überschrift des Projektabschnitts abbringen. Wählen Sie also die Projektüberschrift aus, ändern Sie die Schriftgröße und machen Sie sechs RAM daraus. Als Nächstes werde ich den Kundenbereich überprüfen. Wählen Sie die Überschrift „Kunden“ und die Schriftgröße bis zu sechs RAM aus. In Ordnung. Ich denke, alles sieht gut aus und unser Projekt reagiert auf alle verschiedenen Bildschirmgrößen. Ich hoffe es hat dir gefallen und du hast etwas Neues gelernt. Lass uns weitermachen und unser nächstes Projekt erstellen. 31. Projekt 4 - Vorschau: Hallo und willkommen zu unserem nächsten Projekt. In diesem Abschnitt werden wir eine Website für Innenarchitekten erstellen. Dieses Feld ist heute sehr beliebt und sehr gefragt. Ich denke also, dass diese Art von Website für Sie interessant und hilfreich sein wird. Lassen Sie uns weitermachen und das Projekt beschreiben. Wir haben hier einen Header der Website, der das Logo, das Hamburger-Menüsymbol und ein animiertes Banner enthält das Hamburger-Menüsymbol . Wenn ich auf das Menüsymbol klicke, wird die Navigation gut angezeigt. Das Banner ist animiert. Wie Sie sehen, ändern sich die Textelemente mit einigen Fade-Effekten. Als nächstes haben wir einen Abschnitt „ Über uns“, der mit einem Fade-Effekt gut aussieht. Wir werden diesen Effekt für jeden Abschnitt und dieses Projekt verwenden . Der Abschnitt Über uns besteht aus einem Bild und einigen Details über den Designer. Als nächstes haben wir den Bereich Services, der uns zeigt, was der Designer anbieten kann. Danach finden Sie die Projekte des Designers. Ich bin im Portfolio ihrer Werke. Dann kommt der Leistungsbereich , in dem wir animierte Zähler haben Und schließlich findest du hier eine einfache und nette Fußzeile. Das Projekt reagiert auf verschiedene Bildschirmgrößen. Wenn ich die Seite untersuche, wechsle ich in den responsiven Modus und überprüfe dann das Projekt auf vier verschiedene Bildschirmgrößen. Sie werden feststellen, dass das Projekt responsiv ist und auf allen Bildschirmgrößen gut aussieht. Auch hier sind alle Projekte und dieser Kurs für extra große Bildschirme konzipiert. Ich meine, das stimmt mit einer Breite von 1920 Pixeln und einer Höhe von 1080 Pixeln Wenn Sie also eine relativ kleinere Bildschirmgröße verwenden, sollten Sie während der Vorlesungen in den responsiven Modus wechseln und Breite und Höhe wie folgt angeben. Andernfalls sieht das Projekt auf einer kleineren Bildschirmgröße nicht gut aus , bis wir es responsiv gemacht haben. Bitte berücksichtigen Sie dies. In Ordnung, das war's mit unserem vierten Projekt. Lass uns weitermachen und anfangen, es zu bauen 32. Projekt 4: Erstelle und mache die Navigation zum Laufen: In Ordnung, also lass uns weitermachen und mit der Erstellung unseres Projekts beginnen Ich werde diesen Ordner in VS Code öffnen. Und dann erstelle ich unsere Arbeitsdateien. Wie für HTML üblich, index.html, für CSS und JavaScript. Als Nächstes öffne ich die Indexpunkt-HTML-Datei und erstelle ein einfaches HTML-Dokument. Lassen Sie uns zunächst den Titel ändern. Es wird eine Website für Innenarchitekten sein. Dann werde ich die CSS-Datei verlinken. Geben wir hier den Namen der Datei an und wir benötigen außerdem Script-Tag. Das Quellattribut. Wir benötigen ein Skript wie den Namen der JavaScript-Datei. Öffnen wir den Projektbrowser. Und dann werde ich den Browser und den Editor Seite an Seite platzieren . Wie. Also. Um unseren Arbeitsprozess komfortabler zu gestalten. Okay, als nächstes brauchen wir jetzt die Links wie die Font Awesome Icons Schauen wir uns Font Awesome, C, D und J Ja, und dann holen wir uns den ersten Link von hier. Ich öffne das Link-Tag im Hauptelement und füge dann das CDN Außerdem werde ich Google-Telefone verwenden. Lassen Sie uns also weitermachen und die Google Fonts-Website besuchen. Ich suche nach einer Schrift namens Railway. Lassen Sie uns ein paar verschiedene Stile auswählen. Von hier aus. Als Nächstes suche ich nach einem anderen Telefon namens Can-It Wählen wir noch einmal ein paar verschiedene Stile aus. Kopieren Sie dann den Link und fügen Sie ihn in den gewünschten Header ein. In Ordnung, wir sind bereit, mit dem Schreiben von HTML-Markup zu beginnen. Lassen Sie uns Ihre Kommentare für den Container einfügen. Dann öffne ich das DIV-Tag mit dem Klassencontainer. Als nächstes benötigen wir das DIV-Tag für das Rechteck. Es braucht zwei Klassen, Rechteck und Rechteck, außerdem brauchen wir hier Rechteck zwei Als Nächstes füge ich Kommentare für die Navigation ein. Dann lassen Sie uns weitermachen und genügend Inhaltsverzeichnis mit einem Klassennamen öffnen genügend Inhaltsverzeichnis mit einem Klassennamen Nun vier, in denen wir ein weiteres Element mit dem Klassennamen-Designer haben werden . Lass uns dein Bild einfügen. Ich wähle ein Bild aus dem Bilderordner aus. Es wird ein Designer sein, das JPEG. Als Nächstes benötigen wir das DIV-Tag, in das ich span mit dem Namen und Smith einfüge. Außerdem benötigen wir ein weiteres Span-Element mit dem Text Interior Designer. Okay, danach erstelle ich das Menüsymbol, in dem ich Ihr DIV-Tag mit den Klassennamen platzieren werde . Zeile Zeile eins. Wir brauchen drei Zeilen. Lassen Sie uns also weitermachen und die Klassennamen ändern. Es wird an und auf drei liegen. Dann erstelle ich die Navigation selbst. Lass uns hören. Jetzt, links mit dem Bild, wähle ich ein Bild aus dem Bilderordner aus. Es wird Nafta JPG sein. Als Nächstes müssen wir die rechte Seite der Navigation erstellen , in die ich Sie einen Track mit dem Klassennamen X BTN einfügen werde einen Track mit dem Klassennamen X BTN Es wird das X sein, das Batson schließt. freundlichen Grüßen, dein DIV-Tag mit den Klassen XS-Zeile, X, Zeile eins, und dann brauchen wir X-Zeile zwei In Ordnung, schauen wir uns die X-Taste an. Als nächstes benötigen wir hier H1-Überschriftenelemente mit einem Text und Smith Danach füge ich DIV-Tag mit mindestens einem Klassennamen ein , der Navigationselemente enthält. Der erste Link wird die Startseite sein. Dann werde ich dieses Element ein paar Mal duplizieren . Beim zweiten geht es darum, dann werden wir Dienstleistungen haben. Als Nächstes füge ich Ihr Portfolio ein. Dann haben wir einen Blog. Und schließlich werde ich mich einmischen, Kontakt Alright, also lass uns sehen Das HTML-Markup wird erstellt. Als Nächstes kümmere ich mich um das CSS. Lassen Sie uns die CSS-Datei öffnen und neue Kommentare für die Standardstile einfügen . Ich wähle jedes Element mit einem Sternchen aus. Lassen Sie uns zunächst die Margin und das Padding von beiden auf Null setzen Padding von beiden auf Null Als Nächstes lege ich die Box-Größe für die Border-Box fest. Ebenfalls. Wir brauchen hier Textdekoration , damit es keine gibt. Gefunden. Die Gliederung, sie wird auch bekannt sein. Außerdem werde ich die Schriftfamilie für jedes Element ändern . Es wird Railway Sensory sein. In Ordnung? Außerdem werde ich die HTML-Schriftgröße ändern die HTML-Schriftgröße da wir RAM als Maßeinheit verwenden werden. Wir brauchen eine Zeile, die zehn RAM entspricht. Das HTML-Element sollte also eine Schriftgröße von 62,5 Prozent haben Als Nächstes erstelle ich Hörkommentare für den Container. Lassen Sie uns Kommentare einfügen und die Navigation unterbrechen. Dann wähle ich Navigation aus. Lassen Sie uns die Anzeige auf „Keine“ setzen. Ich werde es für eine Weile verstecken. In Ordnung. Danach wähle ich den Container aus. Definieren wir seine Breite. Es wird zu 100% über der Höhe liegen. Es wird eine Viewport-Höhe von 100 haben. Ich werde die Hintergrundfarbe ändern. Verwenden wir Farbe. Eins-zwei, eins-zwei, eins-zwei Als Nächstes wähle ich ein Rechteck aus. Definieren wir seine Breite. Es werden 70 RAM sein. Außerdem brauchen wir hier eine Höhe, es werden 40 RAM sein. Dann setze ich Border 2.1 RAM Solid ein. Und die Farbe wird RGBA bis fünf bis fünf bis fünf Es ist eine weiße Farbe mit einer geringeren Opazität, 0,1. Als Nächstes setzen wir die Position auf fest. Wir haben hier also das Rechteck, wir müssen seine Position ändern Aber jetzt wähle ich das erste Rechteck aus. Machen wir uns an die Position und machen 48 Prozent draus. Die linke Position wird bei -21% liegen. Jetzt. Also müssen wir hier transformieren, mit der Z-Richtung drehen und der Wert wird 20 Grad betragen. Als Nächstes müssen wir den Container relativ positionieren. Also hier haben wir das erste Rechteck. Als Nächstes entferne ich Sie vom Rechteckwerkzeug. Stellen wir die Position auf minus acht RAM ein, dann brauchen wir die richtige Position. Stellen wir es auf minus zehn RAM ein. Und schnappen Sie sich auch transformiertes Eigentum. Der Wert wird 60 Grad betragen. In Ordnung? Also hier haben wir das zweite Rechteck Eigentlich werde ich die Position für das Rechteck so ändern , dass die Position zwei 8% betragen wird Und wir brauchen hier die richtige Position minus zehn Prozent statt RAM, oder? Als Nächstes wählen wir das Designerbild aus. Und bei einer Breite von sechs RAM wird die Höhe ebenfalls sechs Rom betragen. Und auch hier benötigen wir Objektfüße , damit sie zum Bild passen. Außerdem werde ich den Grenzradius ändern. Es werden 50 Prozent sein. Hier haben wir also das Bild des Designers. Als nächstes fahren wir fort und wählen Navbar aus. Stellen Sie die Position auf absolut ein. Dann wird es auf Position Null sein, auf der linken Position wird es ebenfalls Null sein. Und wir müssen die Breite auf 100% festlegen. Und die Höhe wird zehn RAM betragen. Dann wähle ich den Designer aus. Setzen wir die Position auf absolut. Zweitens, Position ist Rammen , angeblich linke Position. Ich werde es auf ein Drittel RAM setzen. Dann brauchen wir hier Flexbox, um die Elemente auszurichten. Verwenden wir „Elemente ausrichten, zentrieren“. Okay, hier haben wir das Bild und die Span-Elemente. Lassen Sie uns tiefe Elemente innerhalb des Designers auswählen. Also werde ich wieder Flexbox benutzen Dann müssen wir hier die Richtung ändern Es wird eine Kolumne sein. Ebenfalls. Ich richte den Text in der Mitte aus. Als nächstes brauchen wir etwas Platz auf der linken Seite. Stellen wir es auf „Laufen“ ein. Hier haben wir also diese Parlamente. Jetzt können wir tatsächlich jedes dieser Pan-Elemente anpassen. Lassen Sie uns weitermachen und den Sinus oder die Spanne auswählen. Das erste Span-Element, das den n-ten Child-Selektor verwendet. Die Schriftgröße wird also 1,8 RAM betragen. Dann brauchen wir hier die Schriftstärke, sie wird fett sein. Lassen Sie uns Text festlegen, ihn in Großbuchstaben umwandeln und die Farbe ändern Es wird weiß sein. Als Nächstes benötigen wir etwas Abstand zwischen den Buchstaben, indem wir den Buchstabenabstand von Punkt zu Punkt verwenden. Hier haben wir also den Namen des Designers, das erste Spanelement. Lassen Sie uns weitermachen und diesen Code duplizieren. Ändern Sie den Kinderwähler, den wir auch hier benötigen. Ich werde die Schriftgröße ändern. Setzen wir es für RAM auf einen Punkt. Und außerdem wird die Farbe 999 sein. Lassen Sie uns die Ergebnisse überprüfen. Wir haben hier also das zweite Spanelement. Danach kümmere ich mich um das Menüsymbol, das auf der rechten Seite platziert wird. Lassen Sie uns die Position auf absolut setzen. Dann ist es eine Position, die drei RAM haben wird. Wir brauchen die richtige Position. Bei RAM wird es so sein. Und stellen Sie auch die Breite ein. Machen wir fünf RAM draus. Dann. Die Höhe wird drei RAM betragen. Und auch hier brauchen wir eine temporäre Hintergrundfarbe. Verwenden wir CCC. Hier haben wir also das Menüsymbol auf der rechten Seite der Navigation. Lassen Sie uns weitermachen und die Linie auswählen. Lassen Sie uns die Breite auf 100% setzen. Die Höhe wird Punkt auf RAM sein. Außerdem muss die Hintergrundfarbe hier weiß sein. Lassen Sie uns diese temporären Hintergrundfarben aus dem Menüsymbol entfernen . Hier haben wir also die Linien, jetzt müssen wir sie ausrichten. Und dafür werde ich Flexbox verwenden. Wir brauchen Display Flex. Dann müssen wir die Richtung ändern. Es wird eine Kolumne sein. Außerdem benötigen wir einen gewissen Abstand zwischen den Zeilen indem wir den Inhaltsraum gleichmäßig verteilen. Also hier haben wir das Menüsymbol, das jetzt gut aussieht. Lassen Sie uns den Cursor ändern. Mach es zum Zeiger. Als Nächstes wähle ich das Menüsymbol mit dem Mauszeiger Lassen Sie uns die Transformation maßstabsgetreu anpassen. Warum? 1,4? Außerdem müssen wir einen Übergang vornehmen, um einen reibungslosen Effekt zu erzielen. Sobald wir den Mauszeiger über das Menüsymbol bewegen, wird dieses K hier erhöht. Netter und cooler Effekt. Okay, lassen Sie uns aufhören, sie in der Navigation anzuzeigen , weil wir dafür sorgen werden, dass es funktioniert. Zuallererst werde ich mich um die linke Navigation kümmern . Lassen Sie uns die Breite auf 30% setzen. Dann müssen wir eine Körpergröße von 100% haben. Lassen Sie uns weitermachen und das linke Bild von Nafta auswählen, da das Bild im Moment zu größer ist Lassen Sie uns die Breite auf 100% setzen. Höhe. Es werden auch 100% sein. Auch hier benötigen wir Objektfüße mit dem Value-Cover. Hier haben wir also das Bild, das sich auf der linken Seite der Navigation befindet . Lassen Sie uns die Breite für die Navigation festlegen. Es werden 100% sein. Dann wird die Höhe 100 Viewport-Höhe sein. Außerdem benötigen wir hier eine Hintergrundfarbe, die dunkelschwarze Farbe. Dann setze ich die Position auf Fest. Die obere Position wird Null sein und die linke Position wird ebenfalls Null sein. In Ordnung, also lass es uns sehen. Bild sieht gut aus. Verwenden wir Display Flex. Hier haben wir also zumindest die Navigation. Als Nächstes werde ich die Opazität leicht verringern. Stellen wir 0,5 für das Bild ein. Danach wähle ich die rechte Seite aus. Lassen Sie uns die Breite auf 70% setzen , dann wird die Höhe auf 100% gesetzt. Danach kümmere ich mich um den X-Schließknopf. Stellen wir die Breite auf vier RAM ein dann wird die Höhe ebenfalls voll REM sein. Wenn Sie also Hintergrundfarbe hören, meine ich die temporäre Hintergrundfarbe, dann lege ich die Position fest, um sie zu korrigieren. Die Spitzenposition wird fünf RAM sein. Was die richtige Position angeht, werde ich sie auch für ihn auf fünf setzen. Lassen Sie uns außerdem den Kurs von einem guten Punkt aus ändern. Hier haben wir also den X-Schließknopf. Lassen Sie uns diese temporären Hintergrundfarben loswerden und uns um die Linien kümmern , um den X-Sinus zu erzeugen. Lassen Sie uns also mit zwei für RAM beginnen. Die Höhe wird Punkt zur Rampe sein , dann ist die Hintergrundfarbe weiß. Hier haben wir also die Linien und jetzt müssen wir sie transformieren und daraus X machen. Also wähle ich die erste Zeile aus, die Transform verwendet. Drehe die Z-Richtung als den Wert, den ich deinen -45 Grad platzieren werde Die erste Zeile wird also gedreht. Lassen Sie uns diesen Code duplizieren. Benutze deine Ex-Linie, um das Minuszeichen von hier aus loszuwerden . Außerdem benötigen wir hier die Translate-Funktion, die Elemente um einen Minuspunkt in den RAM und dann um -0.1 in die Rampe zu verschieben um einen Minuspunkt in den RAM und dann um -0.1 in die Rampe Jetzt haben wir hier und den X-Button. Als Nächstes nehme ich hier die H1-Überschriftenelemente auf der rechten Seite der Navigation Stellen wir die Schriftfamilie ein. Es wird offen sein, serifenlos. Dann brauchen wir hier die Schriftgröße, es werden fünf RAM sein. Wir werden die Schriftstärke ändern. Fügen wir es zu 300 hinzu. Ich werde Text in Großbuchstaben umwandeln. Ändere auch die Farbe. Ich setze es auf weiß. Hier haben wir also das H1-Überschriftenelement, das der Name des Designers ist Als Nächstes setzen wir die Position auf absolut. Ich werde die Spitzenposition auf 20 Prozent setzen. Was die Spitzenposition angeht, so werden es 50 Prozent sein. Also hier sind wir glücklich. Die Überschrift war gut ausgerichtet. Als Nächstes nehmen wir Sie wenigstens von der Navigation ab. Ich werde Display Flex verwenden. Dann ändere ich die Richtung, weil wir die Elemente vertikal ausrichten müssen. Als Nächstes setzen wir die Position auf absolut. Die Spitzenposition wird ebenfalls bei 30% liegen. Die linke Position, ich setze sie auf 50% Wahrscheinlichkeit in Richtung. Also hier haben wir die Navigationspunkte. Lassen Sie uns weitermachen und nicht zuletzt ein Element auswählen. Ich meine, die Links, ich werde die Schriftfamilie ändern, es wird offen und seriös sein Als Nächstes definieren wir die Schriftgröße. Ich werde es auf fallenden RAM einstellen. Außerdem muss die Farbe hier CCC sein. Dann brauchen wir Margin, 0,5 RAM als Null. Jetzt sehen die Navigationselemente besser aus. Als Nächstes wählen wir den ersten Link mit dem n-ten Child-Selektor Ich ändere die Farbe. Verwenden wir rote Farbe. CEO 374. Alles okay, Sie haben also den ersten Artikel, der gelesen wird. Als Nächstes verwende ich einen Hover-Effekt. Ich ändere die Farbe beim Bewegen und verwende wieder diese rote Farbe Und wir müssen auch umstellen, um einen reibungslosen Effekt zu erzielen. Okay, sobald wir Mauszeiger über die Navigationselemente bewegen, ändern sie ihre Farbe und werden gelesen Als Nächstes werde ich etwas JavaScript verwenden. Lassen Sie uns eine Variable erstellen. Es wird ein Menüsymbol sein. Lassen Sie uns weitermachen und das Menüsymbol mithilfe der Abfrageauswahlmethode auswählen . Wir müssen angeben, wer der Klassenname ist, der das Menüsymbol sein soll Lassen Sie uns diese Variable zweimal duplizieren. Wir müssen hier den X-Button auswählen. Und ich werde auch deine Navigation benutzen. Geben wir hier den richtigen Klassennamen an. Schifffahrt. Jetzt füge ich dem Menüsymbol mit einem Klick-Event und einer Callback-Funktion Also müssen wir der Navigation eine Klasse hinzufügen. Sobald wir auf die Schaltfläche klicken. Diese Klasse wird navigieren sein. Das ist, kopiere diesen Code. Jetzt brauchen wir hier den X-Button. Sobald Sie auf die X-Schaltfläche klicken, müssen wir die Klasse aus der Navigation entfernen. Als Nächstes verwenden wir die neu erstellte Cluster-Navigation. Aber zuerst müssen wir die Navigation ausblenden, indem wir Opazität Null und Sichtbarkeit ausgeblendet verwenden Als nächstes benötigen wir die Navigation, gefolgt von der Navigation. Und wir müssen die Navigation mit Opazität eins und Visibility Visibility wieder anzeigen mit Opazität eins und Visibility Visibility Nun müssen wir alle 0,3 s übergehen . Sobald wir also auf das Menüsymbol klicken, wird die Navigation angezeigt. Und sobald wir auf die X-Schaltfläche klicken, wird sie ausgeblendet. In Ordnung, das war's mit der Navigation. Lass uns weitermachen. 33. Projekt 4: Erstelle ein animiertes Banner: Ordnung, sobald wir mit der Navigation fertig sind, ist es jetzt an der Zeit, weiterzumachen Und so zwei Erstellen Sie den nächsten Teil des Projekts. Der nächste Teil wird ein animiertes Banner sein. Also werde ich Ihre neuen Kommentare für Landing einfügen. Als Nächstes öffne ich ein Abschnitt-Tag mit dem Klassennamen Landing, in dem ich das DIV-Tag mit dem Klassenbanner öffne. Dieses Element wird also einen anderen Deep Chug mit zwei Klassen beinhalten , Überschriftenfolie und Überschriftenfolie Eine insgesamt wird aus zwei Folien bestehen. Fügen wir hier H3-Überschriftenelemente mit dem Text Hallo bin ich. Dann haben wir H1-Überschriftenelemente mit einem Text und Smith Lass uns duplizieren. Elemente, ändere den Klassennamen. Und wir müssen auch den Text ändern. Also hier haben wir aus London. Also brauchen wir hier und Innenarchitektur. In Ordnung, also schauen wir uns das mit dem HTML-Markup an. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Ich werde Ihre Kommentare für Landing einfügen. Dann wähle ich Landing aus. Ich bin in diesem Abschnittselement. Stellen wir 200% dann wird die Höhe 100 Viewport-Höhe sein Als Nächstes wähle ich Banner aus. Lassen Sie uns die Position auf absolut setzen. Dann benötigen wir die relative Position für das übergeordnete Element, bei dem es sich um ein Abschnittselement handelt. Dann setzen wir eine Position auf 35%. linke Position wird bei 50 Prozent liegen und wir müssen das Banner zentrieren Transform Translate X mit -50 Prozent verwenden In Ordnung, als nächstes müssen wir hier die Breite definieren. Es werden 100% sein. Was die Höhe angeht, werde ich sie auf 40 RAM einstellen. Außerdem benötigen wir hier die Textausrichtung in der Mitte. Es ist also zu sehen, dass das Banner in der Mitte platziert ist. Lassen Sie uns weitermachen und Überschriftenelemente der Überschriftenfolie h3 auswählen Überschriftenelemente der Überschriftenfolie h3 Ich setze die Schriftgröße auf, um sie auszuführen und die Texttransformation in Großbuchstaben umzuwandeln Ich ändere die Farbe, es wird 999 sein. Dann brauchen wir etwas Abstand zwischen dem Gitter, indem wir den Buchstabenabstand 0,3 ran verwenden Außerdem werde ich unten etwas Platz schaffen Margin Bottom verwende, es wird laufen. Also hier haben wir Überschriften. Lassen Sie uns diesen Code duplizieren und den Selektor ändern, den wir hier benötigen H1-Überschriftenelement Die Schriftgröße wird sechs RAM betragen. Außerdem werde ich die Schriftstärke verwenden, um fett zu sein. Dann ändere die Farbe. Lass es uns weiß machen. Außerdem müssen wir diesem Patienten 0,25 RAM geben und die Marge loswerden Okay, das ist es also. Die Überschriften sehen ziemlich nett aus. Als Nächstes müssen wir die Folie „Überschrift“ auswählen. Stellen Sie die Position auf absolut ein. Die Breite wird 100% betragen. Jetzt werden die Überschriften übereinander gelegt. Ich werde Transform, Translate Z minus Atrium verwenden und außerdem die Opazität auf Null setzen und die Sichtbarkeit auf ausgeblendet Jetzt sind die Überschriften versteckt. Als Nächstes erstelle ich CSS-Keyframes. Der Name der Animation wird animate header sein. Bei Null Prozent benötigen wir also diese drei Codezeilen. Dann ändere ich bei acht Prozent ändere ich den Wert der Übersetzungsfunktion auf Null und wir müssen auch die Überschrift anzeigen. Der nächste Schritt wird 48% sein. Wir brauchen hier den gleichen Code. Als nächstes benötigen wir 56%. Und wir brauchen diesen Code von hier aus, vom ersten Schritt an. Der nächste Schritt wird zu 100% sein. Es wird der letzte Schritt sein. Wir brauchen hier. Derselbe Code. Jetzt müssen wir diese Regeln auf die Elemente, Ihre Animationseigenschaft und dann den Namen der Animation anwenden. Als nächstes brauchen wir Dauer und unendlich und auch linear. Lassen Sie uns diesen Code duplizieren und den Klassennamen ändern. Eigentlich brauchen wir hier Tempo. Für die zweite Folie benötigen wir eine Verzögerungszeit von 4 s. Wie Sie sehen können, haben wir hier also eine wirklich nette und coole Animation. Okay, das war's also mit dem Banner. Lass uns weitermachen. 34. Projekt 4 - Baue den Abschnitt über: In Ordnung, jetzt ist es an der Zeit, weiterzumachen. Und so zwei Erstellen Sie den nächsten Abschnitt des Projekts. Der nächste Abschnitt wird also ein Abschnitt über uns sein. Lassen Sie uns weitermachen und neue Kommentare für einen Abschnitt über uns einfügen , den ich öffnen werde. Abschnittstyp mit dem Kurs über. In dem ich Deep Tag mit einem Kurs über Linke eröffnen werde . Es wird die linke Seite sein, auf der wir ein Bild haben werden. Lassen Sie uns weitermachen und ein Bild aus dem Bilderordner auswählen. Es wird About dot JPG sein. Als Nächstes benötigen wir die rechte Seite, auf der wir H1-Überschriftenelemente haben werden Ungefähr. Als Nächstes haben wir H, drei Überschriften, Elemente, High und Smith. Als nächstes benötigen wir hier das DIV-Tag mit den Klasseninformationen, in dem ich den Absatz mit einem Blindtext eröffnen werde Als nächstes haben wir hier ein DIV-Tag mit der Klasse Social Media, in das ich einfügen werde. Jetzt ein paar Icons. Die erste werden Fanmarken sein. Ein Hochtöner. Lass es uns zweimal duplizieren und die Klassennamen ändern. Das zweite wird Facebook sein, F, und das dritte wird Instagram sein. Sie werden also das HTML-Markup haben. Als Nächstes müssen wir ein paar andere Elemente erstellen. Wenn Sie H4-Überschriftenelemente im Text hören , kontaktieren Sie mich Hier. Als Nächstes öffne ich das Span-Tag, in das ich die E-Mail einfüge. Dann wird es ein vollständiger Link sein , den ich weitergeben werde. Und Smith von design.com, eine dumme E-Mail-Adresse Lassen Sie uns diesen Code duplizieren. Ändern Sie hier, senden Sie eine E-Mail an das Telefon und verunsichern Sie eine Scheinnummer In Ordnung, also mit dem HTML-Markup sind wir fertig. Lass uns weitermachen und anfangen, CSS zu schreiben. Fügen Sie neue Kommentare für unseren neuen Abschnitt ein. Ich meine den Abschnitt Über uns. Dann wähle ich Abschnittselemente aus und setze ihre Breite auf 100%. Was die Höhe betrifft, so wird die Höhe des Viewports 100 sein. Als Nächstes werde ich Flexbox verwenden. Dann brauchen wir das Justify-Content Center. Außerdem werde ich oben etwas Platz schaffen, Polsterung verwende, die Oberseite kann eine Rampe Es ist also so konzipiert, dass die linke und die rechte Seite Seite an Seite angeordnet sind . Als nächstes müssen wir hier die Höhe des Containers ändern. Es werden 100% sein. Jetzt haben wir hier auch den dunklen Hintergrund im Abschnitt Über uns. Als Nächstes wähle ich die linke Seite aus. Lassen Sie uns die Breite auf 40% setzen. Lassen Sie uns diesen Code duplizieren und auch die Breite für die rechte Seite ermitteln. Es werden 60 Prozent sein. Als Nächstes wähle ich das Bild aus, das im linken Teil geschlossen ist. Lassen Sie uns die Breite auf 33 RAM setzen. Ändere die Höhe, es werden 55 RAM sein. Dann müssen wir das Bild mithilfe von Objekten anpassen. Futterdeckel. Stellen Sie außerdem die Position ein und machen Sie sie absolut. Dann brauchen wir eine relative Position für das übergeordnete Element , das sich ungefähr links befindet. Definieren wir zwei Positionen , die minus zehn RAM sein werden. Jetzt brauchen wir die richtige Position. Setzen wir es auf Null. Okay? Also hier haben wir das Bild. Als Nächstes kümmern wir uns um die H1-Überschriftenelemente auf der rechten Seite Stellen wir die Schriftfamilie auf Can-it sans-Serif ein. Dann brauchen wir hier die Schriftgröße, es werden jetzt 20 RAM sein, also werde ich Schriftstärke verwenden Machen wir es mutig. Dann wandle ich Text in Großbuchstaben um. Danach werde ich etwas Abstand zwischen den Buchstaben schaffen. Außerdem wird die Farbe auf 222 geändert. Und dann werde ich die Position ändern sie wird absolut sein. Wir brauchen eine relative Position für das übergeordnete Element für die ungefähr richtige Entwicklung. Als Nächstes setze ich die Spitzenposition auf -20 RAM. Was die linke Position betrifft , so werden es 15 RAM sein. Die Überschrift sieht also gut aus und ist gut ausgerichtet. Als Nächstes benötigen wir H3-Überschriftenelemente auf der rechten Seite. Die Schriftfamilie wird also gezählt. San-Serif Als Nächstes werde ich die Schriftgröße erhöhen. Es wird voller RAM sein. Als Nächstes setze ich die Schriftstärke auf 300. Außerdem muss die Farbe weiß sein. Dann werde ich die Position wechseln. Setzen wir es auf absolut. Und wir müssen die Position so platzieren, dass sie minus sieben RAM ist, als wir brauchen, die Rundenposition wird 25 RAM sein. Hier haben wir also die zweite Überschrift über der ersten Überschrift angeordnet, und sie sieht ziemlich gut aus. Als Nächstes wähle ich Info aus. wir die Position auf absolut, Stellen wir die Position auf absolut, auf Position 25 RAM. Dann brauchen wir die linke Position, die 25 RAM beträgt. Danach wähle ich einen Absatz in der Information aus. Stellen wir die Schriftfamilie auf Can It San-Serif ein. Dann ändere ich die Schriftgröße. Es wird 1,8 RAM sein. Als Nächstes lege ich die Breite fest. Machen wir 45 RAM draus. Die Farbe des Absatzes wird 777 sein. Außerdem müssen wir die Zeilenhöhe ändern . Fügen wir es zu 1.8 hinzu. Und wir brauchen unten etwas Platz, indem wir Margin Bottom verwenden Machen wir fünf RAM daraus. Also hier haben wir den Absatz. Weiter. Lassen Sie uns weitermachen und uns um die sozialen Medien kümmern. Ich stelle das Display auf Flex ein. Dann brauchen wir Platz am unteren Rand, indem wir die Margin Bottom Five Ran verwenden. Und jetzt können wir das Font Awesome-Symbol anpassen. Wählen wir also soziale Medien aus, gefolgt vom I-Element. Stellen wir den Weg auf sechs RAM ein. Und die Höhe wird ebenfalls sechs RAM betragen. Wir brauchen einen Grenzradius von 50%. Und wir brauchen auch eine Hintergrundfarbe. Verwenden wir 202 O2O. Also hier haben wir die Kreise. Ich werde Display Flux verwenden. Dann, um das Symbol mittig zu platzieren, wenn Sie Contact Center und die Einzelposten in der Mitte ausrichten. Also werde ich die Schriftgröße erhöhen. Machen wir 2,5 RAM draus. Jetzt werden die Symbole in der Mitte der Kreise platziert. Als Nächstes verwende ich etwas Speicherplatz auf der rechten Seite, indem ich Margie direkt zum RAM verwende Und auch die Farbe wird rot sein, was wir in den vorherigen Vorlesungen verwendet haben. Und ändere auch den Cursor, lass ihn zeigen. Die Font Awesome Icons sehen also ziemlich gut aus. Als Nächstes kümmere ich mich um die Information H, die vier Elemente. Lassen Sie uns die Schriftgröße auf 1,8 RAM setzen. Dann benutze Farbe, mach es weiß. Danach wähle ich Span-Elemente aus. In der Info. Lassen Sie uns die Schriftgröße auf 1,6 RAM setzen. Ändere die Schriftstärke, sie wird fett. Dann müssen wir die Farbe 777 haben. Außerdem werde ich den Display-Block verwenden und dann zu RAM und Null marschieren Schließlich müssen wir Link-Elemente auswählen. Lassen Sie uns die Schriftfamilie ändern. Es wird als serifenartig gewertet werden. Und wenn wir dann die Farbe ändern sollen, verwenden wir die rote Farbe. In Ordnung, dieser Abschnitt ist also tatsächlich maßgeschneidert. Es sieht ziemlich nett aus. Jetzt haben wir zwei Create Fade-Effekte. Zuallererst müssen wir das Bild verstecken. Lassen Sie uns die Opazität auf Null setzen und dann die Sichtbarkeit. Versteckt Und außerdem müssen wir das Bild mit der Rampe Transform, Translate Y 20 nach unten bewegen . Lassen Sie uns diesen Code auch für die rechte Seite des About-Abschnitts verwenden. Jetzt ist der Inhalt versteckt und wir müssen etwas JavaScript schreiben. Ich werde dem Fensterobjekt mithilfe von Scroll-Ereignissen und einer Callback-Funktion einen Event-Listener hinzufügen mithilfe von Scroll-Ereignissen und einer Callback-Funktion einen Event-Listener Als Nächstes müssen wir eine Variable erstellen, in der es um Folgendes geht Wählen wir die Elemente mithilfe der Abfrageauswahlmethode Und jetzt müssen wir die If-Else-Anweisungen verwenden, Ihre Bedingung ist ein Fensterpunkt . Der Seitenversatz von Seite Y ist größer oder gleich 200. Tatsächlich zeigt uns diese Eigenschaft die Entfernung, die wir nach unten scrollen. Als Nächstes müssen wir den Klassenwechsel zum About hinzufügen. Wenn diese Bedingung zutrifft. In der else-Anweisung benötigen wir dieselbe Bedingung, aber mit entfernten Elementen. Also müssen wir die Change-Class aus dem About entfernen. Schauen wir uns die Y-Offset-Eigenschaft der Konsolenseite an. Ich werde Ihnen zeigen, was es uns tatsächlich gibt, sobald wir die Seite nach unten scrollen. Schauen wir uns also die Seite an und wechseln wir zur Konsole. Sobald wir also nach unten scrollen, erhalten wir einige Werte. Auch hier zeigt es uns die Entfernung, die wir in Pixeln nach unten scrollen. Okay, jetzt müssen wir „Ändern“ auswählen, gefolgt von „Über das linke Bild“. Und wir müssen diese drei Codezeilen verwenden. Wir müssen das Bild wieder anzeigen. Und wir müssen es auch nach oben verschieben. Verwenden wir den gleichen Code für die rechte Seite. Löscht den Bildauswahlschalter. Wir brauchen hier einen Übergang mit einer gewissen Verzögerungszeit. Und wenn du hier auch übergehst. Wie Sie sehen können, haben wir hier also einen wirklich schönen Fade-Effekt. In Ordnung, das war's also. Eigentlich funktioniert das Menüsymbol hier nicht. Also müssen wir das Problem lösen. Verwenden wir die Indexeigenschaft und setzen sie auf 100. Gehen wir nun davon aus, dass das Problem behoben ist, oder? Lass uns weitermachen. 35. Projekt 4: Service-Abschnitt erstellen und anpassen: Ordnung, jetzt ist es an der Zeit, weiterzumachen und den nächsten Abschnitt unseres Projekts zu erstellen Im nächsten Abschnitt geht es um Dienste. Fügen wir neue Kommentare für einen neuen Abschnitt ein. Dann öffne ich den Abschnitt-Tag mit der Klasse Services. Innerhalb des Abschnittelements. Ich öffne den DIV-Tag, der Services Header sein wird. In diesem Element öffne ich das h3-Überschrift-Tag mit dem Text. Was ich mache. Als Nächstes benötigen wir H1-Überschriftenelemente mit dem Text Meine Dienste Danach öffne ich zumindest das DIV-Tag mit der Klasse Services. In diesem Element. Ich öffne ein weiteres DIV-Tag mit dem Klassenlistenelement, in dem ich das Font Awesome-Symbol mit der Klasse FA, Solid FA, Layer-Gruppe öffne . Als Nächstes benötigen wir ein Span-Element, in das ich Leerzeichen einfügen werde. Planung. Als nächstes in einem anderen Span-Element mit dem Text Möbel-Layout. Als Nächstes benötigen wir einen weiteren Bereich, der die Oberflächenauswahl sein wird. Also werde ich das Listenelement zweimal duplizieren, und dann müssen wir auch die Klassennamen und den Text ändern . Das zweite Symbol wird also fa, Stiftspitze sein. Wir brauchen hier Lichtdesign. Dann geht es als Nächstes um die Innenausstattung. Als nächstes werden wir die Installation haben. den dritten Listenpunkt hier angeht, das Font Awesome-Symbol eines Hauses. Dann füge ich in diesen Bedienfeldbetrag eine Farbauswahl ein. Dann sind die nächsten Fensterdekorationen an der Reihe. Dann werden wir Konstruktor-Dokumentationen haben. In Ordnung, das war's also mit dem HTML-Markup. Hier haben wir die HTML-Elemente. Als Nächstes fange ich an, das CSS zu schreiben. Zunächst werde ich wie gewohnt neue Kommentare für einen neuen Abschnitt, Dienste und außerhalb der Dienste, einfügen . Als Nächstes öffne ich die Abschnittselemente. Definieren wir damit, dass es 100% sein wird. Dann benötigen wir eine Höhe, die Viewport-Höhe von 70 Dann werde ich Flexbox verwenden. Lassen Sie uns die Richtung ändern, die Spalte wird. Außerdem werde ich die Elemente in der Mitte ausrichten. In Ordnung, also hier haben wir die HTML-Elemente. Als Nächstes wähle ich Services Header aus, gefolgt vom Element H mit drei Überschriften. Ich setze die Schriftgröße auf zwei Gramm. Dann müssen wir Text in Großbuchstaben umwandeln. Also werde ich die Farbe ändern, es wird 777 sein. Dann verwende ich den Buchstabenabstand. 0,3 lief. Ebenfalls. Ich werde unten etwas Platz schaffen, indem ich den unteren Wert der Marge verwende, um zu laufen. Also hier haben wir die erste Überschrift. Lassen Sie uns diesen Code duplizieren und die Überschrift ändern. Es wird H1 sein. Wir brauchen hier eine Schriftgröße von fünf RAM. Dann werde ich die Eigenschaft zur Texttransformation loswerden. Die Farbe wird weiß sein. Außerdem benötigen wir Ihre Marge unter 12 RAM. Hier haben wir also die zweite Überschrift. Eigentlich werde ich die Überschriften und die Sensoren mithilfe der Textausrichtung in der Mitte platzieren die Überschriften und die Sensoren mithilfe der Textausrichtung in Jetzt haben wir also ein besseres Ergebnis. Danach kümmere ich mich um die Liste der Dienste. Lassen Sie uns mit zwei 70% beginnen. Dann verwende ich Flexbox, gefolgt von der Inhaltseigenschaft mit gleichmäßigen Wertabständen. Wir haben einen gleichmäßigen Abstand zwischen den Elementen Als Nächstes wähle ich das Listenelement aus. Lass uns mit 230 RAM telefonieren. Als nächstes brauchen wir Flux-Bücher. Ich werde die Richtung ändern. Machen wir es zu einer Spalte, weil wir Elemente vertikal ausrichten müssen. Lassen Sie uns die Mitte der Elemente ausrichten verwenden. Die Listenelemente sind also gut angeordnet. Als Nächstes wählen wir die Elemente des Listenelements, Schriftart, Fantastisch, Symbol aus. Ich werde die Schriftgröße erhöhen. Es wird eine volle Runde sein. Dann die Farbe. Es wird gelesen werden. Außerdem werde ich Margin Bottom verwenden. Mit dem Wert drei RAM. Wir brauchen unten etwas Platz . Die Icons sehen also ziemlich nett aus. Als Nächstes kümmere ich mich um das Span-Element. Stellen wir die Schriftfamilie auf can-it sans-serif ein. Als Nächstes ändere ich die Schriftgröße. Es wird rammen, die Farbe ändern. Ich werde weiße Farbe verwenden. Außerdem benötigen wir einen Spielraum, 0,7 RAM oben auf der Unterseite und Null auf der linken und rechten Seite. Okay, also eigentlich sieht alles gut aus. Wir müssen den Header ausblenden weil wir den gleichen Fade-Effekt wie im vorherigen Abschnitt verwenden werden. Lassen Sie uns den Header mit Transform Translate Y five RAM nach unten verschieben . Das Gleiche haben wir auch für die Liste der Dienste. Ich meine die Listenelemente. Jetzt ist der gesamte Inhalt versteckt. Lass uns weitermachen und etwas JavaScript schreiben. Ich werde diese Variable duplizieren. Ändere den Namen, es wird Services sein. Als nächstes brauchen wir, wenn nicht, wieder Aussagen. Jetzt wird die Anzahl der Pixel durch About dot offset top geändert . Sobald der Abschnitt Über uns fertig ist, dann plus 200 Pixel, müssen wir den Effekt anzeigen. Jetzt wähle ich Change, gefolgt vom Services Header. Und wir brauchen hier Opazität eins, dann Visibility, Visibility und Transform Translate Y mit Null Verwenden wir Transition. Dann kopiere ich diesen Code und füge ihn hier ein. Wir benötigen ein Listenelement anstelle des Services-Headers. Wählen wir hier das Listenelement mit dem untergeordneten F-Selektor aus und verwenden den Übergang für das erste Element mit einer Verzögerungszeit von 0,5 s. Lassen Sie uns diesen Code zweimal duplizieren. Lassen Sie uns diesen Code zweimal duplizieren Ändere die Vorlesung „Diagramme“. Außerdem benötigen wir unterschiedliche Verzögerungszeiten für den zweiten und für den dritten Listenpunkt. Okay, wenn wir die Seite neu laden und nach unten scrollen, dann bekommen wir diesen schönen und coolen Fade-Effekt Okay, das war's also mit dem Servicebereich. Gehen wir zur nächsten Vorlesung über. 36. Projekt 4 - Portfolio-Abschnitt erstellen und gestalten: Ordnung, sobald wir mit dem Servicebereich fertig sind, klingt es jetzt so, als ob wir weitermachen und den nächsten Abschnitt erstellen würden , der ein Portfolio sein wird Also werde ich Ihre neuen Kommentare für den neuen Abschnitt einfügen . Dann lass uns weitermachen und wie gewohnt Abschnitt öffnen und mit dem Klassenportfolio taggen. Ich füge deinen DIV-Tag ein, der Portfolio-Header sein wird. Öffnen wir das h3-Überschrift-Tag mit dem Text Portfolio. Als nächstes benötigen wir das H1-Überschriftenelement. Wir schauen uns nur meine Arbeit an. Danach öffne ich das DIV-Tag mit den Klassenwerken. Es wird eine Hülle sein, als wir brauchen. Arbeit selbst, die aus zwei Teilen bestehen wird Wir werden ein Bild haben. Wählen wir ein Bild aus dem Bilderordner aus. Es wird Arbeit eins sein. Dann haben wir Work Info , in die ich das h3-Überschriftenelement einfügen werde Es wird Innenarchitektur sein. Dann brauchen wir das H1-Überschriftenelement, das Ihrem Zuhause einen neuen Stil verleiht Dann haben wir einen Absatz mit einem Blindtext. Und dann brauchen wir Verbindungen, das werden nur wenige sein. Projekt. In Ordnung, das war's mit der Arbeit Ich werde dieses Element ein paar Mal duplizieren. Wir werden vier Werke haben. Für das zweite Werk werde ich die Orte für das Bild und für die Werkinformationen ändern . Und ich werde auch den Bildnamen ändern. Dann haben wir hier das Bild Werk drei. Dann habe ich für und für das vierte Werk gearbeitet, ich werde das Gleiche tun. Lassen Sie uns die Stellen für das Bild und die Arbeitsinformationen ändern. Ordnung, mit dem HTML-Markup für diesen Abschnitt sind wir also fertig Lass uns weitermachen und uns um das CSS kümmern. Ich werde neue Kommentare für das Portfolio hinzufügen. Dann wähle ich den Abschnittsnamen aus. Lassen Sie uns die Breite auf 100 Prozent setzen. Und die Höhe wird ebenfalls 100% betragen. Und außerdem brauchen wir Padding, 20 RAM und Null, dann Five-Primzahl und wieder Null Als Nächstes kopiere ich den gesamten Code aus dem vorherigen Abschnitt. Und ich werde die Klassennamen ändern. Fügen wir es hier ein. Portfolio. Außerdem brauchen wir hier einen Rand am unteren Rand, 20 Rampe. Wie Sie sehen können, haben wir hier die Abschnittsüberschriften und sie sehen ziemlich gut aus Ordnung, als Nächstes kümmere ich mich um die Arbeiten, die der Wrapper Lassen Sie uns die Breite auf 80 Prozent setzen Dann benötigen wir Margin Auto , um die Elemente zu zentrieren. Also das Entwicklungszentrum. Als Nächstes wähle ich Work selbst aus. Lassen Sie uns Flexbox verwenden. Wir müssen hier den Inhaltsbereich gleichmäßig begründen. Wir brauchen einen gleichmäßigen Abstand zwischen den Flex-Artikeln. Dann werde ich eine Marge von 15 RAM und Null setzen. Man kann also sehen, dass die Elemente gut ausgerichtet sind. Als Nächstes wählen wir Bild aus. Ich definiere Breite, es werden 40 Prozent sein. Dann brauchen wir deine Größe. Es werden 30 RAM sein. Außerdem werde ich den Objekt-Feed mit dem Value Cover verwenden. Als Nächstes werde ich die Opazität leicht verringern . Setzen wir es auf 0,8. Die Bilder sehen also gut aus. Als Nächstes wähle ich Work Info aus. Lassen Sie uns die Breite auf 40 Prozent setzen. Danach wähle ich in den Arbeitsinformationen H3-Überschriftenelemente aus, die die Schriftgröße auf 1,6 RAM setzen Dann müssen wir ausmalen, es wird 777 sein. Außerdem werde ich Text in einen Großbuchstabenabstand umwandeln , um etwas Abstand zwischen dem Gitter zu schaffen Das erste Überschriftenelement sieht also gut aus. Als Nächstes dupliziere ich diesen Code, ändere den Selektor, den wir hier benötigen, H1-Überschriftenelemente Wir müssen die Schriftfamilie ändern. Es wird ehrlicher San-Serif sein. Dann werde ich die Schriftgröße erhöhen. Stellen wir es auf fallendes RAM ein. Außerdem verwende ich hier Schriftstärke, Fett und ändere dann die Farbe. Es wird weiß sein. Außerdem werde ich die Checks, die Eigenschaften transformieren, loswerden. Was den Buchstabenabstand angeht, so wird er auf eine Rampe zeigen. Außerdem benötigen wir Ihren Spielraum. Drei Rampen und Null. In Ordnung. Als Nächstes wähle ich Work Info aus, gefolgt vom Absatz. Stellen wir die Schriftgröße auf 1,6 RAM ein, dann wird die Farbe 777 oder so sein. Ich setze die Zeilenhöhe auf 1,6 und verwende dann den unteren Rand mit einem Wert zum Rammen. Okay? Der Absatz sieht also gut aus. Als Nächstes wähle ich Link-Elemente aus. Lassen Sie uns die Schriftgröße auf 1,6 RAM setzen und dann die Schriftstärke ändern, es wird fett. Außerdem werde ich die Farbe ändern. Verwenden wir die rote Farbe und dann den Abstand zwischen den Buchstaben. Jetzt sieht das Link-Element gut aus. Als Nächstes werde ich den Portfolio-Header mithilfe von Opazität und Sichtbarkeit ausblenden den Portfolio-Header mithilfe von Opazität und Sichtbarkeit Und wir müssen auch bei den Elementen nach unten gehen. Wir werden den gleichen Fate-Effekt verwenden , den wir in den vorherigen Abschnitten verwendet haben. Schnappen wir uns diesen Code und verwenden wir ihn auch für die Arbeit. Wir benötigen hier zehn RAM für die Arbeit statt fünf RAM. Als Nächstes werde ich etwas JavaScript schreiben. Wählen wir eine neue Variable aus, die das Portfolio sein soll. Dann werde ich die If-Else-Aussage verwenden. Wir müssen hier den Namen der Sektion ändern. In diesem Fall benötigen wir Dienste. Und hier brauchen wir Portfolio, weil Portfolio hinter dem Abschnitt Services steht. Jetzt müssen wir Elemente mithilfe von Maßnahmen zum Klassenwechsel auswählen . Wir brauchen hier den Portfolio-Header, schnappen uns diesen Code und setzen die Opazität auf eins Dann brauchen wir Sichtbarkeit, sichtbar. Was die Translate-Y-Funktion angeht, so wird sie Null sein. Und auch hier brauchen wir einen Übergang, um einen reibungslosen Effekt zu erzielen. Ich werde mir diesen Code schnappen und ihn für die Arbeit verwenden. Lassen Sie uns den Klassennamen ändern. Es wird Arbeit sein. Dann müssen wir Transition verwenden, aber wir werden unterschiedliche Übergänge für die verschiedenen Arbeitsaufgaben verwenden für die verschiedenen Arbeitsaufgaben Für den ersten Artikel benötigen wir Übergang mit einer Verzögerungszeit 0,5 s. Lassen Sie uns diesen Code duplizieren. Für den zweiten Artikel benötigen wir eine verzögerte Zeit 1 s. Dann für den dritten Artikel benötigen wir 2 s. Für den vierten Artikel werden es 3 s sein. In Ordnung, also wenn wir die Seite neu laden, bekommen wir diese schönen und coolen Effekte Das war's also mit dem Portfolio-Bereich. Fahren wir mit der nächsten Vorlesung fort. 37. Projekt 4: Baue einen Datenabschnitt mit Zählern: Ordnung, sobald wir mit dem Portfolio-Bereich fertig sind, müssen wir jetzt weitermachen und mit der Arbeit am nächsten Abschnitt beginnen , der Daten sein wird, ich meine die animierten Datenzähler Öffnen wir den Abschnitt-Tag mit dem Klassennamen Data. Dann öffne ich ein DIV-Tag, das als Data Header bezeichnet wird. Lassen Sie uns Ihre drei Überschriftenelemente für Ihr Alter einfügen, das werden nur Erfolge sein. Und außerdem füge ich Ihnen H1-Überschriftenelemente in den Text ein Lass uns meine Erfolge teilen. In Ordnung. Das war's mit dem Header des Abschnitts. Als Nächstes öffne ich das DIV-Tag, das heißt Datenliste, in der wir Datenelemente haben werden. Fügen wir hier ein Span-Element ein. Und genau hier Kunden. Als nächstes werden wir weitere Span-Elemente haben. Der Klassenname, taub, ich meinte die Nummer. Und wir brauchen hier auch Data, Val, was ein Attribut sein wird. Ich gebe hier eine Zufallszahl weiter. Standardmäßig füge ich hier Null ein. Lassen Sie uns das Datenelement also zweimal duplizieren. Lassen Sie uns hier den Inhalt ändern, es werden Projekte abgeschlossen sein und der Datenwert wird 652 sein Und wir brauchen hier Tassen Kaffee. Und der Datenwert wird 1.000 betragen. Okay, lassen Sie uns das über das HTML-Markup sagen. Hier haben wir alle Elemente , die wir gerade erstellt haben. Ich fange an, das CSS zu schreiben. Lassen Sie uns Kommentare für Daten eingeben. Dann wähle ich Abschnittselemente aus und setze die Breite auf 100%. Was die Höhe angeht, wird die Höhe ebenfalls bei 100% liegen. Wir brauchen Padding, 20 RAM und null. Als Nächstes wähle ich den Datenkopf aus. Verwenden wir hier die Textausrichtung in der Mitte. Danach wähle ich den Datenkopf H aus, drei Überschriftenelemente. Lassen Sie uns die Schriftgröße ändern. Es wird rennen sein. Dann brauchen wir eine Steuerreform. Es wird in Großbuchstaben geschrieben. Ebenfalls. Ich ändere die Farbe. Setzen wir es auf 777. Dann brauchen wir etwas Platz zwischen den Buchstaben, sagen wir 2,3 RAM. Und außerdem werde ich die Marge von unten bis zur Rampe festlegen. Die erste Überschrift lautet also Anpassen. Als Nächstes wähle ich H1-Überschriftenelemente aus. Lassen Sie uns die Schriftgröße ändern. Also fünf RAM, dann brauchen wir Farbe, um weiß zu sein. Außerdem benötigen wir einen Buchstabenabstand mit 0,3 RAM und dann einen Rand am unteren Rand, was einer Rampe von 12 Rampen entspricht. Das war's mit den Überschriften des Abschnitts. Als Nächstes passe ich die Daten an. Am wenigsten. Lassen Sie uns die Breite auf 60% setzen. Die Höhe wird 90 RAM betragen, dann benötigen wir Margin Auto, um es an das Element zu senden. Danach werde ich mich um die Datenelemente kümmern. Lassen Sie uns die Position auf absolut setzen. Und hier brauchen wir auch die relative Position für das übergeordnete Element, das eine Datenliste ist. Als Nächstes verwenden wir Flexbox. Wir müssen die Richtung ändern. Es wird eine Kolumne sein. Also hier haben wir die Datenelemente. Als Nächstes wähle ich das erste Datenelement aus. Setzen wir die Position auf Null. Da die nächste Position Null sein wird, wird dieser Code zweimal dupliziert. Ändere die Zahlen hier. Wir müssen uns positionieren , um bei 50 Prozent zu sein. Für den zweiten Artikel gilt für die linke Position es ebenfalls 50% sein wird. Und außerdem werde ich hier Transform Translate verwenden, um das Element perfekt zu zentrieren Die Werte, die ich hier kosten werde, -50 Prozent und nochmal -50 Prozent Was den dritten Punkt betrifft, so müssen wir hier die untere Position Null und die Y-Position ebenfalls Null sein. Eigentlich sehe ich hier den dritten Artikel nicht. Lass uns den Code überprüfen. Ja, wir müssen die Nummer ändern. Okay, jetzt sind alle Elemente, ich meine, alle Elemente aufeinander abgestimmt. Als Nächstes stylen wir diese Artikel. Wählen Sie Daten, Elemente und Spanelemente aus. Aber zuerst ändern wir die Schriftgröße. Es wird im RAM sein. Wir brauchen hier eine Texttransformation in Großbuchstaben. Auch in einem gewissen Abstand zwischen den Buchstaben. Stellen wir es so ein, dass es auf RAM zeigt. Als nächstes brauchen wir Farbe. Ich werde einfach 777 sein. Hier haben wir also die ersten Span-Elemente innerhalb des Datenelements. Duplizieren Sie diesen Code, ändern Sie die Nummer. Hier, F Kind zu sein, als die Schriftfamilie sein wird. Kann es serifenlos sein? Dann benötigen wir eine Schriftgröße von 20 RAM. Befreien Sie sich von der Steuerreform. Außerdem brauchen wir diesen Abstand nicht. Geben wir die Farbe, die ich verwenden werde, in die rechte Spalte ein. Und außerdem werde ich die Zeilenhöhe verwenden. Lass uns 321. Okay? Wie Sie sehen können, sind die Datenelemente angepasst. Sie sehen ziemlich nett aus. Und jetzt müssen wir etwas JavaScript schreiben. Ich werde ein paar verschiedene Variablen auswählen. Der erste wird start sein, was standardmäßig falsch ist. Dann wähle ich Daten aus. Ich bin im Abschnittselement. Außerdem müssen wir Zahlen mit der Methode querySelector all auswählen Zahlen mit der Methode querySelector Und als Klassennamen gebe ich hier Num weiter. Danach erstelle ich eine Funktion, die Startzählung enthält. Fügen wir hier Parameterelemente ein. Dann müssen wir eine Variable erstellen , die maximal sein wird. Und tatsächlich wird es der Wert aus dem Datenattribut sein , den wir hier in die HTML-Datei eingefügt haben. Als Nächstes erstelle ich eine Variable namens count. Und ich werde die setInterval-Methode verwenden. Jetzt müssen wir den Inhalt der Elemente mit dem Inkrementsoperator, dem Plus, Plus, um eins erhöhen mit dem Inkrementsoperator, dem Plus, Plus, um eins Dann IF-Anweisungen , in denen wir überprüfen müssen, ob der Inhalt der Elemente max entspricht, was der Wert aus dem Attribut ist. Wenn es wahr ist, müssen wir das Intervall als Intervall löschen . Ich werde hier fünf Millisekunden platzieren. Außerdem benötigen wir hier eine IF-Anweisung , um das Scroll-Ereignis zu definieren. Ich meine, wenn das Fenster scrollt, warum ist es größer als oder gleich den Daten von den oberen -300 Pixeln Andererseits brauchen wir, wenn Anweisungen, in denen wir einen booleschen Wert übergeben müssen, mit dem NOT-Operator beginnen, und dann müssen wir die Zahlen durchgehen, die für jeden Array-Helfer verwendet Wir müssen die Funktion start count mit dem Parameter numb aufrufen count mit dem Parameter numb Und dann müssen wir den booleschen Startwert auf true setzen. In Ordnung? Wir müssen das kleine Problem hier lösen. Wir benötigen den Inhalt des Textes. Wie Sie sehen können, funktionieren die Zähler einwandfrei. Wenn Y nun die Seite neu lädt und sie aufgerufen wird, zum Datenbereich greifen, dann werden die Zahlen sofort gezählt Also hier ist es. Okay, das ist es also. Fahren wir mit der nächsten Vorlesung fort. 38. Projekt 4: Erstelle und passe die Fußzeile der Website an: Ordnung, jetzt ist es an der Zeit, weiterzumachen und den letzten Teil des Projekts zu erstellen , der als Fußzeile dienen wird Die Fußzeile wird einfach sein. Fügen wir neue Kommentare für die Fußzeile ein. Dann öffne ich das HTML5-Fußzeilen-Tag, in dem wir ein DIV-Tag mit dem Klassennamen Footer benötigen Soziale Medien. Ich werde Font Awesome Icons einführen. Ich meine die Social Media Font Awesome Icons. Lassen Sie uns diesen Code von hier holen und ihn hier in die Entwicklung einfügen . Als Nächstes öffne ich das H1-Überschriftenelement mit dem Text. Kontaktiere mich. Außerdem benötigen wir hier einen Link. Es wird und Smith von design.com sein, irgendeine Tammy-E-Mail-Adresse Danach öffne ich einen Absatz mit Klassenurheberrechten, in dem wir einen Copyright-Text benötigen. Copyright gefolgt vom Copyright-Zeichen. Dann brauchen wir 2023, alle Rechte vorbehalten. Standard-Copyright-Texte. Außerdem werde ich „ made by code and Create“ anbieten, das in der Span platziert wird. Okay, das ist es also. Alle Elemente werden für die Fußzeile erstellt. Jetzt müssen wir weitermachen und sie mit CSS stylen. Lassen Sie uns Ihre Kommentare für die Fußzeile einrichten. Dann wähle ich das Fußzeilen-Tag aus. Fangen wir mit 200 Prozent an. Dann brauchen wir Höhe. Es werden 50 sein. Du hast Körpergröße angegeben. Ich werde auch Flexbox verwenden Lass uns die Richtung ändern, daraus eine Spalte machen. Außerdem werde ich das Justify-Content Center verwenden , um die Elemente horizontal und vertikal mithilfe von Align Items Center an die Elemente zu senden Elemente horizontal und vertikal mithilfe von Align Items Center an die Elemente vertikal mithilfe von Align Okay, hier haben wir die Elemente gut aufeinander abgestimmt. Als Nächstes wähle ich Social Media, den Wrapper. Lassen Sie uns wieder Flux-Bücher verwenden. Dann brauchen wir unten einen Rand von drei RAM. Als Nächstes werde ich die Icons anpassen. Ich meine die I-Elemente. Fangen wir mit 25 RAM an. Dann brauchen wir eine Höhe von fünf RAM. Wir werden die Kreise erstellen. Also werde ich die Hintergrundfarbe ändern. Verwenden wir 262626. Ebenfalls. Machen Sie das Element mit dem vorhandenen Randradius abgerundet Okay, als Nächstes verwende ich Flexbox, um die Symbole innerhalb der Kreise mit Justify-Content Center und Alignment Items zu Symbole innerhalb der Kreise mit Justify-Content Center Zentrum. Lassen Sie uns außerdem etwas Speicherplatz schaffen, indem wir den RAM-Rand von 0,1 auf der linken und rechten Seite verwenden. Als Nächstes ändere ich die Schriftgröße. Es wird rennen sein. Ändere auch die Farbe. Benutze hier 777. In Ordnung, hier haben wir Social Media-Icons Sie sehen nett aus. Als Nächstes kümmere ich mich um die H1-Überschrift und ändern wir die Schriftgröße Es wird voller RAM sein. Dann werde ich die Farbe Weiß verwenden. Ebenfalls. Schaffen Sie etwas Abstand zwischen den Buchstaben. Stellen wir es so ein, dass es auf die Rampe zeigt. Dann brauchen wir unten eine Marge , um zu laufen. Die Überschrift sieht also ziemlich gut aus. Dann müssen wir uns um das Link-Element kümmern und die Schriftgröße auf einstellen, um dann auch die Farbe zu ändern. Benutze hier D, D, D. Dann brauchen wir unten einen Rand. Machen wir es zu Tan RAM. Also hier haben wir das Link-Element. Schließlich müssen wir uns um den Absatz kümmern. Das wurde also urheberrechtlich ausgewählt. Ändern Sie die Schriftgröße. Es werden 1,6 RAM sein, dann brauchen wir Farbe, um CCC zu sein. Als Nächstes wähle ich Span-Elemente aus, die innerhalb des Absatzes platziert werden. Lassen Sie uns die Schriftfamilie ändern. Es wird als San-Serif gewertet. Und dann ändere ich die Schriftgröße. Es wird rennen sein. Auch hier brauchen wir Farbe. Sei gelesen. Kam eine Zelle, die sich über der Fußzeile befindet. Es sieht ziemlich nett aus. Und eigentlich sind wir mit dem Projekt fertig. Das einzige, was ich tun muss, ist, es auf verschiedene Bildschirmgrößen reagieren zu lassen . 39. Projekt 4: Mache das Projekt responsiv: Ordnung, wir haben die Erstellung aller Abschnitte dieses Projekts abgeschlossen , und jetzt ist es an der Zeit, das Projekt an verschiedene Bildschirmgrößen anzupassen Ich werde die Seite überprüfen und in den Responsive-Modus wechseln. Wir müssen also die Breakpoints finden, an denen wir einige Änderungen für das Projekt vornehmen müssen einige Änderungen für das Projekt vornehmen Ich kann auf kleineren Bildschirmen sehen, einige Teile des Projekts durcheinander sind, also müssen wir uns darum kümmern Gehen wir zurück zur CSS-Datei. Und zunächst werde ich Kommentare für den Responsive-Modus einrichten. Dann erstelle ich eine neue CSS-Medienabfrage, in der ich die maximale Breite als 1.500 Pixel Lassen Sie uns also zunächst die Schriftgröße des HTML-Elements verringern. Machen wir es auf 55 Prozent, weil dadurch alle Elemente kleiner werden . Eigentlich müssen wir uns um das Rechteck kümmern um seine Position ändern zu müssen Wählen wir das Rectangle Tool und setzen meine Position auf -15%. Eigentlich finde ich, dass alle anderen Abschnitte gut aussehen. Also können wir einen anderen Breakpoint finden. Der nächste Breakpoint wird also 1.300 Pixel sein. Lassen Sie uns eine neue CSS-Medienabfrage erstellen und hier die maximale Breite als 1.300 Pixel angeben Lassen Sie uns zunächst die Schriftgröße für das HTML-Element erneut verringern . Ich setze es auf 50%. Also wieder wurden die Elemente kleiner. Als Nächstes kümmere ich mich um den Abschnitt Über links und setze seine Breite auf 35 Prozent. etwa rechts angeht, werde ich seine Breite auf 65% setzen. Jetzt sieht der Abschnitt Über uns gut aus. Als Nächstes kümmere ich mich um das Portfolio. Ich arbeite nur. Fangen wir mit dem heutigen Prozentsatz an. Jetzt haben wir bessere Ergebnisse. Außerdem werde ich mich um den Datenbereich kümmern. Lassen Sie uns die Breite der Datenleitungen auf 70% setzen, oder? Also ich denke, das ist es. Schauen wir uns die Navigation an. Alles sieht gut aus. Lass uns weitermachen und den nächsten Breakpoint finden. Also der nächste Breakpoint, ich denke, es werden 1.100 Pixel sein Lassen Sie uns eine neue CSS-Medienabfrage erstellen. Stellen Sie die maximale Breite auf 1.100 Pixel ein. Auch hier werde ich die Schriftgröße der HTML-Elemente verringern . Lassen Sie uns 30 bis 45% Als Nächstes werde ich hier den Abschnitt „Über uns“ aufgreifen. Wählen Sie Über die rechten H1-Überschriftenelemente aus und ändern Sie die Schriftgröße Es werden 15 RAM sein. Außerdem werde ich die beiden Positionen ändern, die wir hier benötigen, -18 RAM Dann werde ich diesen Code duplizieren. Wählen Sie H, drei Überschriftenelemente. Die Schriftgröße beträgt 3,5 RAM. Da die Polytopposition minus neun Rampe sein wird. Okay, jetzt sieht der Abschnitt „Über uns“ gut aus. Als Nächstes kümmere ich mich um den Datenbereich. Wählen wir das Datenlisten-Span-Element aus. In diesem Fall das zweite Spannelement. Lassen Sie uns die Schriftgröße auf 16 RAM setzen. Jetzt haben wir bessere Ergebnisse und tatsächlich können wir weitermachen und den nächsten Breakpoint finden Ich denke also, dass der nächste Breakpoint 900 Pixel sein wird 900 Pixel sein wird Lassen Sie uns eine neue CSS-Medienabfrage erstellen und hier die maximale Breite als 900 Pixel angeben die maximale Breite als 900 Lassen Sie uns weitermachen und das erste Rechteck auswählen. Ich setze die Luck-Position auf -40 Run. Dann lass uns weitermachen und Rechteck zwei auswählen. Es wird auf -25 Prozent in die richtige Position gebracht. Dann wähle ich den Designer aus und setze seine Position auf Rampe 15, ich befinde mich in der linken Position. Dann brauchen wir hier das Menüsymbol. Lass uns die rechte Position ändern, es werden 15 RAM sein. Jetzt haben wir bessere Ergebnisse. Kümmern wir uns um die Navigation, die momentan nicht ganz gut aussieht. Also wähle ich Navigation links Setup mit 250 Prozent aus. Dann wähle ich die rechte Seite aus und setze ihre Breite ebenfalls auf 50 Prozent. Ordnung, im Moment die Navigation nicht gut aus Lassen Sie uns erneut H1-Überschriftenelemente auswählen, die sich auf der rechten Seite befinden Verwenden wir Transform. Übersetze Y. Ich werde es verschieben. Entschuldigung, wir müssen hier X und Y übersetzen. Verwenden wir -50 Prozent Und ich werde auch Position Relative verwenden. Als Nächstes müssen wir uns auf 200 Prozent festlegen . Lassen Sie uns den Text auch in der Mitte ausrichten. Danach wähle ich am wenigsten Navigation aus. Verschieben wir es mit Transform, Translate X -50% und verwenden dann wieder Textalign Center Als Nächstes werde ich mich um den Abschnitt Über mich kümmern. Wählen wir „Über links und „Höhe acht“, indem wir „Keine anzeigen“ verwenden. Als nächstes brauchen wir ungefähr rechts und wir müssen die Breite auf 100% setzen. Jetzt sieht der Abschnitt „Über uns“ gut aus und auch die Navigation sieht gut aus. Okay. Lassen Sie uns also weitermachen und uns um die rechte Seite des Überschriftenelements „Über uns“ kümmern die rechte Seite des Überschriftenelements „Über uns“ Setzen wir die linke Position auf 50 Prozent. Außerdem müssen wir es mit Transform Translate X zentrieren — 50 Prozent Als Nächstes müssen wir uns um die zweite Überschrift, das h3-Überschriftenelement, kümmern die zweite Überschrift, das h3-Überschriftenelement, Lassen Sie uns die Lag-Position ändern, sie wird 35% betragen. Jetzt sieht alles gut aus. Als Nächstes wähle ich Info aus und setze die linke Position auf 50%. Jetzt brauchen wir also Zentroid mit Transform Translate X Okay? Danach werde ich mich um diesen Servicebereich kümmern. Wählen wir die Liste der Dienste aus und setzen die Breite auf 90%. Als Nächstes kümmern wir uns um das Portfolio. Ich wähle Werke aus und setze ihre Breite auf 100%. Außerdem wähle ich Work Info aus und setze die Breite auf 50 Prozent. Ich glaube. Es sieht nett aus. Und mit diesem Breakpoint sind wir eigentlich fertig. Als Nächstes müssen wir den nächsten Breakpoint finden , der meiner Meinung nach 700 Pixel groß sein wird Lassen Sie uns also eine neue CSS-Medienabfrage erstellen Und geben Sie hier die maximale Breite als 700 Pixel an. Lassen Sie uns zunächst die Schriftgröße für die HTML-Elemente verringern . Ich werde es zu 40 Prozent schaffen. Als Nächstes wähle ich Designer aus und setze die linke Position auf acht RAM. Und wir brauchen auch ein Menüsymbol. Es ist die richtige Position. Es wird auch ein Atrium sein. In Ordnung. Wir müssen uns um die Folien kümmern. Ich meine die zweite Überschrift. Wählen wir also das H1-Überschriftenelement und verringern Sie die Schriftgröße auf fünf RAM Also jetzt sieht es ziemlich gut aus. Als nächstes müssen wir am Abschnitt Dienste arbeiten. Lassen Sie uns also weitermachen und Dienste auswählen. Ändern Sie die Höhe auf 90, die Höhe des Viewports. Wir müssen also Dienste auswählen, die Richtung der Flexbox auflisten und ändern Machen wir daraus eine Kolumne. müssen wir die Artikel in der Mitte ausrichten. Die Gegenstände werden also vertikal platziert, aber wir benötigen etwas Abstand zwischen den Gegenständen. Verwenden wir also Margin, Bottom mit Wert. Drei Runden. In Ordnung? Also ich denke, das war's mit diesem Breakpoint. Und wir müssen uns um den letzten Breakpoint kümmern. Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen. Die maximale Breite wird 500 Pixel betragen. Wählen wir das Rechteck und ändern wir die Lag-Position Es wird -70% sein. Dann brauchen wir ein Rechteck, um seine richtige Position zu ändern Ich setze es auf -50 Prozent. Sie sehen also nett aus. Als Nächstes kümmere ich mich um die Navigation. Lassen Sie uns weitermachen und Navigation links auswählen und sie ausblenden. Und jetzt müssen wir die rechte Seite richtig ausrichten. Wählen wir also genug aus, richtig, und setzen die Breite auf 100%. Jetzt werden die Elemente in der Mitte der Navigation platziert . In Ordnung. Als nächstes müssen wir uns um das Portfolio kümmern. Wählen wir „Arbeiten“ und weisen Sie sie der Mitte „Elemente ausrichten“ zu. Außerdem benötigen Sie hier ein Arbeitsbild. Ich setze die Breite auf 60%. Als Nächstes wähle ich Work Info aus und mache es ausgeblendet. Schauen wir uns die Projekte an. Ich denke, jetzt haben wir viel bessere Ergebnisse. Als Nächstes kümmere ich mich um die Datenelemente. Ich meine, der zweite Punkt, das Element für die Jahresspanne. Ändern wir die Schriftgröße, machen wir es mit 12 Rampen. Ordnung, ich denke, alles ist fertig und das Projekt reagiert auf alle verschiedenen Bildschirmgrößen Ich hoffe, Ihnen hat dieses Projekt gefallen und Sie haben etwas Neues gelernt. Lassen Sie uns also weitermachen und das nächste Projekt erstellen. 40. Projekt 5 - Vorschau: Hallo und willkommen zu unserem nächsten Projekt. In diesem Abschnitt werden wir eine Website über Kaffeehäuser erstellen. Das Projekt wird aus verschiedenen Teilen bestehen und viele modern aussehende Designs und Funktionen bieten Lassen Sie uns weitermachen und die Website beschreiben. Wir beginnen mit einer Navigation , die oben auf der Seite festgelegt ist. Sobald wir nach unten scrollen, wird sich der Hintergrund gut ändern. Nachdem die Navigation auf dem Banner, das über eine Slideshow verfügt, funktioniert das über eine Slideshow verfügt, verwenden wir eines der Plug-ins namens Swipe Wie Sie sehen können, funktioniert die Slideshow automatisch. Aber außerdem können Sie diese Controller verwenden. Und Sie können die Folien auch mit der Maus ziehen. Okay, als nächstes haben wir einen Abschnitt über uns mit einigen Informationen. Auf diesen Abschnitt folgt ein Menü. Danach haben wir einige Daten mit animierten Zählern und mit einigen netten Overeffekten Im nächsten Abschnitt geht es um die Kunden, die wir hier haben die von Koch nett abgegebenen Kundenmeinungen. Als nächstes folgt der Bereich Kontakt, in dem Sie das Haus kontaktieren oder einen Tisch reservieren können. Und zum Schluss haben wir hier ein Beispiel für eine Fußzeile. Das Projekt reagiert auf verschiedene Bildschirmgrößen. Wenn ich die Seite untersuche, wechsle ich in den responsiven Modus und überprüfe das Projekt auf vier verschiedenen Bildschirmgrößen. Sie werden feststellen, dass das Projekt responsiv ist und im Durchschnitt gut aussieht, verschiedene Bildschirmgrößen. Auch dieses Projekt wurde, wie die anderen Projekte, für extra große Bildschirme der Größe zwei entwickelt. Ich bin dabei, das stimmt mit einer Antenne mit 1920 Pixeln Breite bei Pixelhöhe Wenn Sie also eine relativ kleinere Bildschirmgröße verwenden, sollten Sie während der Vorlesungen in den responsiven Modus wechseln und Breite und Höhe wie folgt angeben. Andernfalls sieht das Projekt auf einer kleineren Bildschirmgröße nicht gut aus , bis wir es responsiv gemacht haben. Bitte berücksichtigen Sie dies. Ordnung, wir sind bereit, mit dem Bau des Projekts zu beginnen . Lass uns weitermachen. 41. Project 5 - Erstellen- und Stilnavigation: In Ordnung, es ist also an der Zeit, mit der Erstellung der Projekte zu beginnen. Ich werde den Ordner in VS Code öffnen. Und dann erstelle ich unsere Arbeitsdateien für HTML, CSS und auch für JavaScript. Dann lassen Sie uns weitermachen und die Datei index.html öffnen und ein einfaches HTML-Dokument erstellen. Lassen Sie uns zunächst den Titel ändern. Es wird ein Kaffeehaus sein. Dann werde ich Dateien verlinken. Öffnen wir das Script-Tag und geben den Namen der Datei und das Quellattribut an. Dann öffne ich den Projektbrowser. Als Nächstes holen wir uns einige Links. Ich meine, Link für Font Awesome-Icons, weil wir diese Icons während des gesamten Projekts verwenden werden. Lassen Sie uns das Link-Tag öffnen und das CDN in das H-Referenzattribut einfügen Platzieren wir den Editor und den Browser nebeneinander So wie. Als Nächstes besuche ich die Google Fonts-Website, da wir einige Google Fonts verwenden werden. Und das Projekt. Lassen Sie uns weitermachen und nach einer Google-Schriftart namens Great Wipes suchen nach einer Google-Schriftart namens Great Wipes Wählen wir diese Kachel aus. Als Nächstes suche ich nach einer anderen Google-Schrift, nämlich Poppins Wählen Sie ein paar verschiedene Stile aus. Kopieren Sie dann den Link und fügen Sie ihn in das Hauptelement ein. Danach werde ich mir das Link Force Wiper Dot JS schnappen , weil wir dieses Plug-in während des gesamten Projekts verwenden werden dieses Plug-in während des gesamten Projekts verwenden Also schnappen wir uns diesen Link und fügen ihn in das Hauptelement ein. Und außerdem müssen wir den JavaScript-Link abrufen und ihn über dem Bildschirm einfügen. Folter. Ja. In Ordnung, wir sind bereit zu beginnen Lassen Sie uns Kommentare für den Container einfügen. Als Nächstes öffne ich das DIV-Tag mit einem Klassencontainer. Dann benötigen wir Kommentare für die Navigation. Lassen Sie uns genug Inhaltsverzeichnis mit einer Klassennamen-Navigationsleiste öffnen. Ich füge dein DIV-Tag ein, das ein Logo sein wird. Innerhalb des Logos öffne ich ein Etikett mit der Klasse ist eine Phase, die fest wie ein Becher ist , Saltzer Und außerdem benötigen wir Logo-Text. Ich bin in der Entwicklung, in der ich Span Tag mit dem Testkaffee und dann noch ein Span House habe. Das war's mit dem Logo. Als Nächstes erstelle ich die Navigation. Lassen Sie uns zumindest Ihre Link-Elemente einfügen. Wir werden einfach zu Hause sein. Lass uns den Link ein paar Mal duplizieren und dann den Text ändern. Das zweite wird Menu sein. Dann werden wir einen Blog darüber haben. Ebenfalls. Wir haben hier Sharp. Dann Kontakt. Außerdem füge ich einen weiteren Link ein, ein Font Awesome-Symbol mit der Klasse ist ein Phase Solid FA, beim Einkaufen erwischt. Eigentlich ist das Symbol nicht sichtbar. Also müssen wir das beheben. Es gibt ein Problem. In Ordnung, jetzt funktioniert alles gut Als Nächstes kümmere ich mich um die Landung. Ich bin im Header der Website. Lassen Sie uns neue Kommentare einfügen und dann das Abschnittselement mit dem Klassennamen Landing öffnen . Wir brauchen hier und Deep Elements, das wird Banner sein, in dem ich das h3-Überschriftenelement mit der Klassenhauptüberschrift öffne h3-Überschriftenelement mit der Klassenhauptüberschrift Der Text wird willkommen sein. Außerdem brauchen wir eine weitere Überschrift, die H1 sein wird, mit dem Text amazing Taste and beautiful place Als nächstes brauchen wir einen Absatz mit etwas Blindtext. Und ich werde auch deine Buttons mit dem Klassennamen Banner BTN einfügen deine Buttons mit dem Klassennamen Banner BTN Und auch hier brauchen wir Banner BTN One. Lassen Sie uns Ihre Bestellung einfügen. Jetzt. Ich werde den Typ angeben , der eine Schaltfläche sein soll. Und wir brauchen hier den zweiten mit dem Klassennamen Banner zwischen zwei. Für den Text. Es wird Menü anzeigen sein. Gleich danach werde ich mich um die Slideshow kümmern Wir brauchen hier ein DIV-Tag mit der Klasse swipe, in das ich Swipe oder Wrapper einfügen werde Und auch hier brauchen wir einen zweitklassigen Mäuse-Wischer. In diesem Wiper-Wrapper öffne ich das Div-Element, das pro Folie gewischt wird Und dann werde ich dein Bild platzieren. Wählen wir das Bild aus dem Bilderordner aus. Es wird Image1 sein. Dann dupliziere ich, schiebe zweimal und ändere die Namen des Bildes, das wir brauchen Bild, in Bild drei. Als Nächstes führe ich Sie von der Seitennummerierung ab. Ich meine die Controller. Nach dem Swiffer brauchen wir Landing Contact. Lassen Sie uns Institute U DIV Tag mit den Kursdetails , in denen ich eröffnen werde, ich habe an dem Kurs teilgenommen, ist ein solides Fax-Telefon. Dann brauchen wir hier tief, in das ich ein Span-Element mit einer falschen Telefonnummer einfügen werde Span-Element mit einer falschen Telefonnummer einfügen Als Nächstes benötigen wir eine weitere Spanne , in die wir einen Blindtext einfügen werden Ordnung, lassen Sie uns das duplizieren. Entwicklung. Ändern Sie das Font Awesome-Symbol. Der zweite wird weit sein, Ort Punkt. Lassen Sie uns diese Zahlen auch von hier aus loswerden. Und du solltest eine Scheinadresse haben. Das zweite Spannelement. Ich werde gegen sie vorgehen. Falscher Standort der Attrappe. Danach ändern wir das dritte Symbol, das eine Uhr sein wird Lassen Sie uns die Zahlen loswerden und es für Sie verwenden. Text geöffnet Montag, Freitag. Soweit das zweite Span-Element und es wird der Text sein. Bitte. Schließ dich uns an. Wir sind von 08:00 Uhr bis 21:00 Uhr erreichbar. In Ordnung, das ist es eigentlich Über das HTML-Markup. Ich fange an, das CSS zu schreiben. Lassen Sie uns Kommentare für Standardstile erstellen. Dann wähle ich jedes Element mit einem Sternchen aus. Und wie üblich setze ich die Marge und setze beide auf Null Als Nächstes lege ich die Box-Größe für die Border-Box fest. Dann müssen wir die standardmäßige Textdekoration entfernen , auch die Gliederung. Und dann setze ich die Schriftfamilie für jedes Element auf Poppins, San-Serif jedes Element auf Poppins, San-Serif Außerdem müssen wir die Schriftgröße des HTML-Elements ändern , da wir RAM als Maßeinheit verwenden werden. Lassen Sie uns die Schriftgröße auf 62,5 Prozent setzen. Diese Standardstile werden also auf die Elemente angewendet. Als Nächstes füge ich Kommentare für den Container ein. Wählen wir dann Development für den Klassencontainer aus, der so definiert ist, dass er 100% betragen soll und die Höhe ebenfalls 100% beträgt. Außerdem werde ich Ihre Kommentare für The Landing einreichen. Denn im Moment werde ich das Banner überhaupt ausblenden, indem ich Display None verwende. In Ordnung? Als Nächstes füge ich die Kommentare für die Navigation ein. Lassen Sie uns weitermachen und Navbar auswählen. Stellen Sie die Breite auf 200 Prozent ein. Für die Höhe werden es 10 g sein. Als nächstes müssen wir hier die Position fixieren. Dann sind die beiden Positionen Null. Was die linke Position angeht, so wird sie ebenfalls Null sein. Im Moment ist die Navbar nicht machbar. Lassen Sie uns das beheben, indem wir den Indexeigenschaftswert 100 verwenden. Also haben wir hier die Navigation. Als Nächstes verwenden wir Flexbox. Wir müssen den Inhaltsbereich gleichmäßig ausrichten und die Elemente mittig ausrichten , um die Elemente vertikal zu zentrieren. Als Nächstes erstelle ich unten einen Rahmen mit dem Wert 0,1, lasse ihn durchgehend laufen und die Farbe ist RGBA, weiße Farbe mit geringerer Opazität Hier haben wir also den Rand und auch die Artikel sind gut angeordnet. Als Nächstes wähle ich Logo aus. Verwenden wir Display Flex. Dann müssen wir die Artikel in der Mitte ausrichten. Und lassen Sie uns auch den Cursor ändern und ihn zu einem Zeiger machen. Richtig? Danach werde ich mich um die I-Elemente kümmern. Ich meine die Ikone. Stellen wir die Schriftgröße auf fremd ein. Außerdem werde ich hier den Webkit-Text Stroke verwenden. Stellen wir es auf 0,1 RAM und die Farbe wird weiß sein. Dann setze ich die Farbe auf transparent. Und wir brauchen auch einen Spielraum auf der rechten Seite. Stellen wir es auf einen Lauf ein. Wir haben hier also das Symbol mit dem Textstrich. Dann wähle ich den Logotext aus und verwende Flexbox. Lass uns die Richtung ändern. Wir müssen die Elemente in der Spalte platzieren. Außerdem müssen wir den Text von der Mitte aus ausrichten. Wir haben hier also beide Span-Elemente. Als Nächstes wähle ich das erste Span-Element mit dem F-Child-Selektor Lassen Sie uns die Schriftgröße so einstellen, dass sie ausgeführt wird. Sie müssen also Text in Großbuchstaben umwandeln. Dann lassen Sie uns etwas Abstand zwischen den Buchstaben schaffen , aber 32,1 rund Und ändere auch die Farbe. Ich werde weiße Farbe verwenden. Wie Sie sehen können, sieht das erste Span-Element ziemlich gut aus. Lassen Sie uns diesen Code duplizieren. Ändern Sie die n-te Kindernummer. Es wird sein, die Schriftgröße zu ändern. Ich werde es an einen Punkt für RAM verkaufen. Und außerdem ändern wir die Farbe, machen sie E. Außerdem brauchen wir oben einen Rand. Fügen wir es zur Rampe -0.7 hinzu. Das Logo sieht also ziemlich gut aus. Als Nächstes kümmere ich mich um die Navigation. Wählen wir das Link-Element aus. Stellen Sie die Schriftgröße für RAM auf einen Punkt ein. Dann müssen wir die Texttransformation in Großbuchstaben umwandeln. Lassen Sie uns außerdem die Farbe auf E setzen und wir benötigen einen Rand auf der rechten Seite. Es werden drei Rampen sein. In Ordnung? Danach werde ich etwas Abstand zwischen den Buchstaben schaffen. Stellen wir es so ein, dass es auf RAM zeigt. Als Nächstes wähle ich mit dem Mauszeiger eine Mandel aus. Wenn ich mit der Maus darüber fahre , ändere ich die Farbe. Es wird C4 sein, neun. P 63. Verwenden Sie auch Transition für einen gleichmäßigen Effekt. Sobald wir den Mauszeiger über das Navigationselement , wird die Standardfarbe geändert Ich wähle das erste Navigationselement weil ich seine Farbe standardmäßig auf die Farbe setzen möchte , die wir hier verwendet haben. Als Nächstes kümmere ich mich um den letzten Punkt der Geringsten. Ich meine, der Einkaufswagen. Lassen Sie uns die Schriftgröße angeben. Mach 1,8 RAM draus. Also wurde die Ikone größer. Und dann verwende ich After-Pseudoelemente. Lassen Sie uns den Inhalt auf eins setzen. Also werde ich die Breite ändern. Es wird 2,5 RAM sein, dann wird die Höhe ebenfalls 2,5 RAM betragen. Ich werde die Hintergrundfarbe ändern. Verwenden wir hier die Farbe FFC 107. Es wird in gelber Farbe sein. Dann setze ich Position auf absolute relative Position für die übergeordneten Elemente. Also haben wir hier nach dem Element, Lasst uns die Position ändern. Die zwei Positionen werden -1,5 RAM sein , dann haben wir die linke Position Es wird ein RAM sein. Ebenfalls. Ich werde die Elemente abgerundet machen. Und dann müssen wir uns um den Inhalt kümmern. Stellen wir das Display auf Flex ein. Verwenden Sie dann das Justify-Content Center und richten Sie die Elemente aus. Zentrum. Außerdem werde ich die Farbe ändern. Machen wir 222 draus. Und schließlich werde ich die Schriftgröße ändern. Fügen wir es zu einem Punkt hinzu, um es auszuführen. In Ordnung, das war's also mit der Navigation. Als nächstes müssen wir uns um die Landung kümmern 42. Project 5: Erstelle eine Diashow mit Swiper.js: Ordnung, sobald wir mit der Navigation fertig sind, ist es jetzt an der Zeit, weiterzumachen und uns um die Landung zu kümmern Lassen Sie uns das eigentlich loswerden und von hier aus weitermachen. Und wähle Landing. Ich werde mit 200 Prozent beginnen. Das ist ziemlich hoch. Es werden 95 sein. Höhe des Viewports Als Nächstes wähle ich Banner aus. Setzen wir die Position auf absolut. Dann müssen wir das übergeordnete Element relativ positionieren. Als Nächstes setze ich die Position auf 20%. Diese Position wird also bei 50% liegen. Und um die Elemente horizontal zu zentrieren, müssen wir X mit -50 Prozent transformieren Im Moment ist das Banner also sichtbar. Lassen Sie uns das beheben, indem wir den Indexeigenschaftswert 100 verwenden. Also hier haben wir das Banner. Lassen Sie uns den Text mithilfe von Textalign Center in die Mitte setzen. Und dann wähle ich die Hauptüberschrift aus. Sagt Familie Bombe, zwei, tolle Leben. Kursiv. Dann stelle ich die Schriftgröße auf fallend ein. Die Schriftstärke von Ran wird 300 betragen und ich werde die Farbe ändern. Verwenden wir hier seine Farbe. Okay, als Nächstes wählen wir Banner und H1-Überschriftenelemente aus. Also Schriftgröße auf sechs RAM, dann Schriftstärke, es wird 400 sein. Außerdem werde ich Text in Großbuchstaben umwandeln. Dann ändere die Farbe. Es wird weiß sein. Also hier haben wir die Überschrift. Ich meine, die zweite Überschrift. Weiter. Ich werde einige Leerzeichen am Rand mit Werten für RAM und Null erstellen. Und ich werde auch die Zeilenhöhe ändern. Es wird 1,5 sein. Und schaffen Sie etwas Abstand zwischen den Buchstaben. Stellen wir es so ein, dass es ausgeführt wird. In Ordnung. Als Nächstes wähle ich den Absatz des Banners aus. Stellen wir die Schriftgröße auf 1,5 RAM ein, dann beträgt die Schriftstärke 300. Außerdem werde ich die Farbe ändern, sie wird weiß sein. Dann mit 260 RAM einstellen. Außerdem werde ich Margin mit den Werten Null und Auto als auch für RAM und ROM verwenden . Er wird also den Absatz haben und jetzt müssen wir etwas Abstand zwischen den Buchstaben schaffen. Stellen wir die Rampe auf 0,1 ein. Richtig? Danach kümmere ich mich um die Knöpfe. Wählen wir beide Schaltflächen aus. Stellen Sie die Breite auf 12 RAM ein, dann beträgt die Höhe 5,5 Rampe. Also werde ich den Kurs festlegen, wir machen zwei Zeiger. Dann. Die Marge wird 0,1 RAM betragen. Und wir brauchen eine Schriftgröße von einem Punkt für RAM, damit die Tasten besser aussehen Als Nächstes wähle ich die erste Schaltfläche aus. Ändern Sie die Hintergrundfarbe. Benutze hier die goldene Farbe, als wir den Rand brauchen. Keine. Ändern Sie die Farbe des Textes. Mach zwei bis zwei draus. Der erste Button sieht also ziemlich nett aus. Als Nächstes dupliziere ich diesen Code, ändere den Klassennamen und passe die zweite Schaltfläche an. Ich werde die Hintergrundfarbe transparent machen dann wird der Rahmen durchgehend 0,1 RAM groß sein. Und du siehst hier die Farbe Weiß. Was die Farbe des Textes angeht, werde ich ihn ebenfalls weiß machen. In Ordnung. Beide Knöpfe sehen also ziemlich gut aus. Wählen wir die erste Schaltfläche mit dem Mauszeiger aus, ich ändere die Hintergrundfarbe Machen wir es transparent. Und ändere auch die Farbe des Textes. Mach es golden. Als Nächstes setze ich Rand 2.1 RAM, Solid, und die Farbe wird c4963 sein Kopieren wir diesen Code. Ändere den Klassennamen Also die Hintergrundfarbe, sie wird goldener sein als die Farbe der Texte. Du wirst zwei vor zwei sein. Also werde ich die Übergangseigenschaft verwenden , um die Tatsache reibungsloser zu gestalten. Wenn wir also den Mauszeiger über die Teile bewegen, entsteht dieser nette und coole Effekt Danach kümmere ich mich um die Diashow. Lass uns, lass uns abwischen. Ich sagte, warte auf 100%, dann wird die Höhe bei 85% liegen. Außerdem werde ich auswählen. Also schiebe ich, gefolgt vom Bild. Lassen Sie uns die Breite auf 100 Prozent setzen. Die Höhe wird 100% betragen. Außerdem müssen wir das Bild mithilfe des Objekt-Feed-Cover anpassen . Also hast du das Bild mit neuer Breite und Höhe. Jetzt ist es an der Zeit, etwas JavaScript zu schreiben. Lassen Sie uns eine Variable erstellen. Es wird geklaut. Ich werde einen vorgefertigten Standardcode für die Slideshow verwenden , die wir hier erstellen müssen Objekt-News-Wiper für Ihren Klassennamen-Wiper. Dann benötigen wir hier und andere Objekte mit der Eigenschaft Autoplay, die Objekt als Wert enthalten Wir brauchen hier eine Objektverzögerung von 4.000 s. Als Nächstes benötigen wir eine weitere Eigenschaft, die bei Interaktion deaktiviert ist. Es wird falsch sein. Dann werde ich hier eine neue Eigenschaft mit einem Wert erstellen, Schicksal, ich meine Effect Fade. Dann brauchen wir Loop, was wahr sein wird. Ebenfalls. Ich gehe zur Seitennummerierung des Instituts Hier wird ein Objektelement gewischt oder ich bin im Klassennamen, Swipe oder Paginierung Als Nächstes benötigen wir eine Eigenschaft namens klickbar, die einfach wahr sein wird Wie Sie sehen können, funktioniert die Diashow jetzt einwandfrei und die Paginierung funktioniert auch einwandfrei Ordnung, als Nächstes werde ich die Kreise unten anpassen Ich meine die Paginierungs-Controller. Wir müssen zwischen Spanpunkt, Wisch oder Pagination Bullet wählen Wisch oder Pagination Lassen Sie uns die Breite auf zwei RAM setzen , als die Höhe sein wird. Um auch zu rammen. Wir brauchen Opazität, um eins zu sein. Als nächstes setze ich mich auf den Rand auf die rechte Seite, 1,5 RAM. Wir müssen hier wichtig sein , diesen Kodex anzuwenden. Dann wird die Hintergrundfarbe AA sein. Wir brauchen hier also eine relative Position. Also jetzt sieht die Kontrolle besser aus. Als Nächstes kopiere ich den Klassennamen und füge Pseudoelemente hinzu Fügen wir Inhalt zu leer hinzu. Dann brauchen wir mit 2,5 RAM. Die Höhe wird ebenfalls 2,5 m betragen. Dann brauchen wir Teil der Rate, die früher war, wenn sie vorhanden ist , weil wir Kreise ziehen müssen. Lassen Sie uns die Position auf festlegen. Absolut. Die Position wird bei 50% liegen. Die Nettoposition wird ebenfalls 50 Prozent betragen. Und dann, um bei der Transformation perfekt an das Element zu senden, übersetze mit Werten von -50% und nochmal -50 Prozent, -50 Prozent wird die Hintergrundfarbe transparent sein Und wir brauchen hier Grenzpunkte für RAM Solid und die Farbe wird AA sein. Also, jetzt sehen die Kugeln, ich meine, die Controller ziemlich gut aus Als Nächstes kopiere ich den Klassennamen. Fügen wir es hier ein. Eigentlich müssen wir es zweimal einfügen, dann das Span-Element aus dem Selektor entfernen und aktiv bleiben Sobald die Kugel aktiv ist, müssen wir die Hintergrundfarbe ändern. Fügen wir es zu Weiß hinzu. Also werde ich diesen Code duplizieren und Pseudoelemente halten Sobald die Kugel aktiv ist, müssen wir die Grenze für die nachfolgenden Pseudoelemente ändern für die nachfolgenden Pseudoelemente Ich meine, die Farbe der Grenze. Es wird auch weiß sein. Jetzt kann es also sehen, dass alles einwandfrei funktioniert und mit dieser Wiper-Diashow sind wir fertig Als Nächstes wähle ich Landing Contact und setze die Position auf absolut. Dann, um zu positionieren, wird es H 5% sein. Die linke Position wird Null sein. Außerdem setze ich die Breite auf 100%. Und die Höhe wird 15 sein. Höhe des Viewports. Ändern Sie die Hintergrundfarbe. Ich werde hier schwarze Farbe verwenden. Hier haben wir also die Unterseite der Landung, ich meine den Landekontakt. Verwenden wir Flexbox. Wir müssen hier den Inhalt mit Werten begründen, die gleichmäßig eingefügt werden. Wir brauchen einen gleichmäßigen Abstand zwischen den Flex-Elementen und außerdem müssen wir die Elemente in der Mitte vertikal ausrichten. Als nächstes ändern wir die Farbe und machen sie weiß. Also hier haben wir die Details. Eigentlich fehlt uns hier das Font Awesome Icon. Lass uns den Code überprüfen. Wir brauchen hier einen Standort. Also jetzt, jetzt ist das Symbol sichtbar. Als Nächstes wähle ich Details aus. Verwenden Sie wieder Flux-Bücher. Jetzt werden das Symbol und die Textelemente nebeneinander platziert Dann wähle ich die I-Elemente setze die Schriftgröße auf, damit die Farbe ausgeführt wird. Colton. Außerdem werde ich auf der rechten Seite etwas Platz schaffen. Gehen wir gleich auf die Marge, um zu rennen. Wie Sie sehen können, sehen die Icons gut aus. Als Nächstes wähle ich die Entwicklung innerhalb der Details aus. Stellen wir das Display auf Flex ein. Dann müssen wir die Richtung ändern. Machen wir daraus eine Kolumne. Jetzt müssen wir die Textelemente anpassen. Lassen Sie uns weitermachen und das erste Pfadelement mit dem F-Child-Selektor auswählen Ich werde die Schriftgröße ändern. Es wird 1,61 sein. Dann müssen wir die Farbe ändern. Machen wir es weiß. Und ich werde auch Margin Bottom verwenden. Setzen wir es für N auf 0,5 . Die ersten Spanelemente sehen also gut aus. Lassen Sie uns weitermachen und diesen Code duplizieren. Ändern Sie den n-ten Kinderwähler auf zwei. Und wir müssen die Schriftgröße ändern. Setzen wir es auf 1.4 und ändern auch die Farbe, machen es BBB und entfernen den Rand, unten Stellen Sie die Breite auf 2 m ein. In Ordnung, das war's also. Über die Landung. Alles sieht toll aus. Lass uns weitermachen. 43. Project 5: Erstelle und passe den Info-Abschnitt an: Ordnung, also lassen Sie uns weitermachen und mit der Erstellung des nächsten Abschnitts unseres Projekts beginnen , der ein Abschnitt über uns sein wird Ich werde neue Kommentare für den Abschnitt Über uns interviewen . Und dann öffnen wir den Abschnitt-Tag mit dem Klassennamen ungefähr. Ich werde dein DIV-Tag anweisen, in dem wir das Font Awesome-Symbol mit den Klassennamen fa, solid, a mobile haben werden Font Awesome-Symbol mit den Klassennamen fa, solid, a mobile Als nächstes benötigen wir hier H1-Überschriftenelemente mit dem Text, der einfach zu ordnen Dann wird das nächste Element ein Absatz mit Blindtext sein ein Absatz mit Blindtext sein Lassen Sie uns die Entwicklung zweimal duplizieren und dann den Klassennamen ändern. Dein Fat-Truck. Der Vorhof Hannigan, was es sein wird, ist die schnellste diesen dritten Artikel angeht, brauchen wir hier eine heiße Tasse. Lassen Sie uns für das H1-Element sprechen, ich füge Ihnen Qualitätskaffee Okay, das war's also mit dem HTML-Markup. Jetzt ist es an der Zeit, nicht zu enden, fang an, etwas CSS zu schreiben. Ich werde neue Kommentare für den Abschnitt Über uns einfügen. Dann wähle ich das Abschnittselement mit einer Klasse über. Lassen Sie uns die Breite auf 100% setzen dann beträgt die Höhe 60 Viewport-Höhe Lassen Sie uns die Hintergrundfarbe ändern. Ich werde es hier verwenden. Farbe golden. Dann müssen wir Flexbox verwenden. Lassen Sie uns die Elemente von Elon in die Mitte stellen und auch das Justify-Content Center verwenden Es ist also zu sehen, dass wir hier die Elemente gut aufeinander abgestimmt haben. Als Nächstes wähle ich im Abschnitt „ Über“ die Option Entwicklung aus , die dann bis zum RAM weitergeleitet wird. Dann werde ich die Höhe auf 35 Grad einstellen. Außerdem werde ich mithilfe von Rand mit den Werten Null oder Drei etwas Abstand schaffen mithilfe von Rand mit den Werten Null oder Drei etwas Abstand und dann den Text in der Mitte ausrichten. Als nächstes werde ich Flexbox wieder verwenden. Ändere die Richtung, es wird eine Spalte sein. Außerdem müssen wir die Elemente ausrichten und den Inhaltsbereich gleichmäßig zentrieren und ausrichten. Jetzt haben wir viel bessere Ergebnisse und wir haben zwei Stilelemente. Fangen wir mit dem schnellen Mikrofon an und stellen wir seine Breite auf neun R& ein, dann beträgt die Höhe zehn RAM Lassen Sie uns die Schriftgröße ändern. Es wird voller RAM sein. Außerdem verwende ich Ihren Webkit-Angriffsstrich mit Werten, die auf RAM zeigen, und die Farbe wird 282727 sein Außerdem müssen wir die Farbe definieren und sie transparent machen. In Ordnung, also die Font Awesome Icons, sehen nett aus. Als nächstes verwenden wir Border 0.1 RAM, solid. Die Farbe auf acht bis sieben bis sieben. Dann werde ich mit Flexbox, Justify Content Center und Alignment Items Center Icons an Font Awesome senden mit Flexbox, Justify Content Center und Alignment Items Center Icons an Font Awesome Justify Content Center und Alignment Items Center Icons an Font Okay, das ist es also. Nun, die Font Awesome Icons. Als Nächstes wähle ich das H1-Überschriftenelement aus. Stellen wir die Schriftgröße zwei auf rampe ein. Dann werde ich das Standardgewicht auf 400 setzen. Wandelt Text in Großbuchstaben um. Dann ändere die Farbe. Ich werde dich in derselben Farbe verwenden. Okay, deine Überschriften sehen also gut aus und ich muss den Absatz anpassen Lassen Sie uns die Schriftgröße festlegen. Es wird 1,5 RAM sein. Dann brauchen wir hier die Schriftstärke. Es wird um 300 sein. Ändere die Farbe, mache es auf H7 bis sieben. Das ist es also. Der Abschnitt Über uns sieht gut aus und jetzt können wir weitermachen. 44. Projekt 5 - Menübereich erstellen: Ordnung, mit dem Abschnitt Über uns sind wir fertig und jetzt müssen wir weitermachen Und so zwei Erstellen Sie den nächsten Abschnitt , der das Menü sein wird. Ich werde Ihre neuen Kommentare für den neuen Abschnitt einfügen . Und dann öffne ich wie üblich den Abschnitt-Tag mit einem Klassenmenü. Dann füge ich in dieses Abschnittselement ein DIV-Tag ein, das Menu left sein wird. Die linke Seite dieses Abschnitts. Wir brauchen hier ein h3-Überschriftenelement mit der Klassenhauptüberschrift Lassen Sie uns dieses Cover einrichten. Dann benötigen wir H1-Überschriftenelemente. Ich werde einfach unser Menu sein. Als Nächstes. füge hier den Absatz mit einem Blindtext ein Und auch hier brauchen wir einen Button. Es wird die Klasse Menu haben, BTN. Außerdem benötigen wir das Typattribut. Wir werden einfach Bateson sein. Für den Text. Ich gehe hier zum Institut. Vollständiges Menü anzeigen. Direkt nach der Entwicklung. Ich werde ein anderes erstellen, das Menu sein wird, oder? Wir brauchen hier Menu, oder? Bilder. Öffnen wir das DIV-Tag, das der Menu Image Wrapper sein wird Dieses Element wird vier verschiedene Bilder enthalten. Wählen wir den ersten aus dem Bilderordner aus. Es wird Bild vier sein. Dann werde ich diesen Code dreimal duplizieren und die Namen der Bilder ändern. Wir brauchen Bild fünf, Bild sechs und dann Bild sieben. Okay, also eigentlich ist es das mit dem HTML-Markup. Jetzt muss ich weitermachen und anfangen, das CSS zu schreiben. Lassen Sie uns neue Kommentare für das Menü verfassen. Dann wähle ich die Abschnittselemente aus und lege ihre Breite und Höhe fest. Die Breite wird hundert Prozent betragen. Was die Höhe angeht, werde ich sie auf eine Viewport-Höhe von 70 Als Nächstes wähle ich Menu Image Wrapper um das Bild kleiner zu machen Stellen wir es mit 225 RAM und die Höhe wird 25 RAM sein. Als Nächstes wähle ich die Bilder aus und setze die Breite auf 100% und die Höhe auf 100%. Außerdem müssen wir die Geschwindigkeit des Objekts erfassen. Jetzt kann man sehen, dass wir relativ kleinere Bilder haben. Lassen Sie uns den Hintergrund für das Menü festlegen. Ich werde die lineare Verlaufsfunktion mit RGBA-Farbe verwenden mit RGBA-Farbe Ich habe die schwarze Farbe mit einer Opazität von 0,9. Und wieder brauchen wir RGBA, schwarze Farbe 0,8, ich meine die Opazität Als Nächstes lege ich das Bild als Hintergrund fest. Wir müssen dein Bild acht auswählen. Und wir brauchen auch eine Position , in der wir im Mittelpunkt stehen und uns nicht wiederholen. Als Nächstes stelle ich die Hintergrundgröße so ein, dass sie bedeckt ist. Also haben wir hier das Bild als Hintergrund für diesen Abschnitt. Als Nächstes werde ich Flexbox verwenden. Wir müssen die Gegenstände in der Mitte ausrichten. Wir haben hier also die Artikelbilder in der Mitte platziert. Als Nächstes wählen wir die linke Seite aus. Stellen Sie die Breite auf 50% ein. Außerdem wähle ich Menü rechts und setze die Breite ebenfalls auf 50 Prozent. In Ordnung, danach wähle ich Menü, oder? Bilder, stellen Sie die Breite auf 60 RAM ein. Und dann werde ich Flexbox benutzen. Wir müssen Flex Wrap mit einem Value-Rap verwenden , um die Bilder zu umwickeln und auszurichten. So wie. Lassen Sie uns mithilfe des Randes etwas Abstand zwischen den Bildern schaffen. Stellen wir es auf RAM ein. Außerdem benötigen wir einen Cursorzeiger für das Bild selbst. Danach werde ich dich von der linken Seite wegnehmen. Wir brauchen die Textausrichtung in der Mitte. Und ich werde auch am Rand auf der rechten Seite sitzen , 23 RAM. Also brauchen wir Margin-Left für das Menü, oder? Der Wert drei REM ebenfalls. Okay? Eigentlich sollte die Textausrichtung hier richtig sein und nicht in der Mitte. Als Nächstes wähle ich Menü links aus, gefolgt von der Hauptüberschrift. Lassen Sie uns die Schriftgröße auf sechs RAM setzen. Die Überschrift sieht also ziemlich gut aus. Als Nächstes wähle ich Menü links aus, gefolgt vom H1-Überschriftenelement Lassen Sie uns die Schriftgröße auf sechs RAM setzen. Auch in der Schriftstärke soll es 300 sein. Dann wandle ich Text in Großbuchstaben um. Als Nächstes ändere ich die Farbe der Überschrift. Es wird weiß sein. Außerdem setze ich Margin Top auf minus vollen RAM. Wir haben hier also das H1-Überschriftenelement. Als Nächstes wähle ich den Absatz aus und passe ihn an. Lassen Sie uns zunächst die Schriftgröße ändern. Es wird ein Punkt für Ran sein. Als Nächstes ändere ich die Farbe des Absatzes. Setzen wir es auf 777. Dies ist eine hellgraue Farbe. Als Nächstes warten wir auf 50 RAM. Und ich werde auch Marge bis RAM und Null setzen , dann ins Ausland. Und ich werde rudern. Okay? Der Absatz sieht also gut aus. Das einzige, was wir hier brauchen, ist Zeilenhöhe, der Wert 1.2 Okay? Danach nehme ich dich vom nächsten mit. Wir werden nur die Menütaste sein. Stellen wir die Breite auf 15 ran ein. Und die Höhe wird 5,5 RAM betragen. Wir benötigen eine Hintergrundfarbe, die transparent sein wird. Dann setze ich Grenze 2.1 RAM. Solide. Die Farbe, sie wird golden sein. Wir müssen also auch die Farbe der Steuer angeben. Ändern Sie dann die Schriftgröße. Es wird 1,3 RAM sein. Ich werde Text in Großbuchstaben umwandeln. Stellen Sie dann den Cursor auf eine Position. Okay, also der Button und eigentlich die linke Seite dieses Abschnitts sehen ziemlich nett aus. Als Nächstes verwende ich einen Hover-Effekt. Lassen Sie uns die Hintergrundfarbe ändern. Ich setze es auf Golden. Und ich werde auch die Farbe der Texte ändern. Stellen wir es auf 222 ein und verwenden dann Transition für den glatten Effekt. Wir haben hier also einen schönen Übereffekt. Jetzt müssen wir uns um die rechte Seite kümmern. Ich werde auch einen Hover-Effekt für die Bilder erstellen. Wählen wir also Menu Image Wrapper mit dem Mauszeiger und dann gefolgt von der Bildauswahl Wir benötigen eine Transformationsskala mit einem Außerdem brauchen wir einen Übergang. Sobald wir den Mauszeiger bewegen und senden, sollten sich die Bilder vergrößern Verwenden wir overflow hidden, um die Teile der Bilder auszublenden die Teile der Bilder Jetzt haben wir hier einen wirklich schönen Effekt und mit dem Menübereich sind wir fertig. Also lass uns weitermachen. 45. Projekt 5: Erstelle und stile einen Datenabschnitt mit animierten Zählern: Ordnung, sobald wir mit dem Menübereich fertig sind, ist es jetzt an der Zeit, weiterzumachen und den nächsten Abschnitt zu erstellen Wir werden nur die Daten sein. Fügen wir neue Kommentare für den neuen Abschnitt ein. In diesem Abschnitt werden wir animierte Zähler haben. Öffnen wir den Abschnitt-Tag mit den Klassendaten. Dann müssen wir das U DIV-Tag einfügen, das den Icon-Wrapper enthält Öffnen wir es wieder mit den Klassennamen. Wenn ein Feststoff, ein Becher heiß. Als nächstes benötigen wir hier das Style-Element mit dem Klassennamen. Ich kann BG. Dann haben wir ein weiteres Span-Element mit der Klasse numb, in dem wir ein Attribut namens data benötigen Nun, lassen Sie uns Ihnen ein paar Zahlen hinzufügen. Sagen wir 350. Was den Standardwert angeht, werde ich hier Null übergeben. Dann haben wir eine weitere Zeitspanne mit einer Klasseninformation, in der ich stattdessen zu den Kaffeebranchen gehe . Lassen Sie uns die Entwicklung dreimal duplizieren und dann die Zahlen ändern. Und wir müssen auch den Inhalt der Informationen ändern. Geben wir die Anzahl Ihrer Auszeichnungen ein. Dann werden wir beim nächsten Element 25, 40 haben. Dieses Panel wird zufriedene Kunden sein. Für den letzten Artikel, den ich hier einfügen werde, sagen wir auch 750. Dieser endgültige Betrag wird hängen bleiben. In Ordnung, also eigentlich ist es das mit dem HTML-Markup. Lassen Sie uns fortfahren und mit der Anpassung dieses Abschnitts beginnen. Ich werde neue Kommentare für die Daten einrichten. Dann wähle ich das Element Abschnitt aus und setze zwei auf 100%. Die Höhe wird 50 Viewport-Höhe sein. Dann brauchen wir einen linearen Gradienten im Hintergrund . Ich werde hier den RGBA-Wert verwenden. Ich habe die schwarze Farbe mit Opazitätspunkt für. Und wir brauchen auch hier und andere RGBA-Werte. Auch hier schwarze Farbe mit der Opazität 0,3. Als Nächstes müssen wir ein Bild als Hintergrund auswählen. Es wird Bild sieben sein. Dann müssen wir angeben, dass die Position in der Mitte sein soll. Und wir brauchen es auch nicht zu wiederholen. Und wir haben die Hintergrundgröße als Cover definiert. Okay, hier haben wir das Hintergrundbild. Als Nächstes verwenden wir Flexbox. Ich werde das Justify-Content Center verwenden und die Artikelmitte in der Mitte des Inhalts ausrichten Artikelmitte in der Mitte des Hier haben wir die Flex-Artikel. Als Nächstes wähle ich Elemente aus. Ist es ein Datenbereich mit 25 RAM, wird die Höhe 30 sein. Rann. Als nächstes werde ich Flexbox wieder verwenden Lass uns die Richtung ändern. Es wird eine Kolumne sein. Außerdem müssen wir die Elemente und die Mitte ausrichten. Dann verwende ich justify content will be values Pacioli Wir müssen einen gleichmäßigen Abstand zwischen den Flex-Artikeln schaffen. Als Nächstes wähle ich Ich kann wickeln aus und lege die Breite als Tran Dann wird die Höhe ebenfalls acht RAM betragen. Als nächstes brauchen wir einen gröberen Zeiger. Und jetzt müssen wir den Symbolhintergrund auswählen. Ich werde den Displayblock verwenden. Und dann setzen wir die Breite auf 100%. Wir müssen auch hoch sein, um bei 100% zu sein. Dann verwende ich Border. Es wird 0,1 RAM fest sein und die Farbe wird golden sein. Wir haben hier also Hintergrundinformationen. Weiter. Wir müssen Elemente auswählen. Das ist die Position zur absoluten Position relativ für das übergeordnete Element, bei dem sich um den Icon-Wrapper handelt Als Nächstes setze ich die Spitzenposition auf 50% fest. Dann müssen wir auch die Position der Linken bei 50 Prozent halten. Und um das Element perfekt zu zentrieren, brauchen wir transform translate. Werden die Werte -50 Prozent und wieder -50 Prozent. Jetzt konserviere ich das perfekt zentrierte Innere der Boxen. Als Nächstes werde ich die Schriftgröße erhöhen. Es wird wiederholt. Ebenfalls. Wir brauchen auch hier wieder einen Webkit-Textstrich mit einem Wert, der auf RAM und die goldene Farbe zeigt Und wir müssen auch einstellen, dass die Farbe transparent ist. Jetzt haben wir also schöne Kaffee-Icons. Lassen Sie uns weitermachen und mit dem Mauszeiger den Icon-Wrapper auswählen, gefolgt vom Symbolhintergrund Wenn ich mit der Maus darüber fahre, ändere ich die Hintergrundfarbe. Es wird golden sein. Außerdem müssen wir die Elemente entsprechend der Z-Richtung drehen . Und der Wert wird 135 Grad betragen. Ebenfalls. Wir brauchen einen Übergang für einen reibungslosen Ablauf. Und es wird für den Hintergrund sein. Sobald wir den Mauszeiger über die Boxen bewegen, drehen sie sich schön Wir müssen die Icons anzeigen. Verwenden wir den Index mit dem Wert 100. Eigentlich sind die Icons immer noch nicht sichtbar. Eigentlich ist das Problem, dass wir hier die gleiche Farbe für den Textstrich haben . Sobald wir den Mauszeiger über den Icon-Wrapper bewegen, müssen wir auch die Farbe des I-Elements ändern Nehmen wir also diesen Code und ändern wir die Farbe auf eine C7 C7. Außerdem brauchen wir hier auch einen Übergang für das Symbol. Jetzt sollte das Problem behoben sein. Okay, das ist alles. Alles funktioniert gut und wir haben hier einen Druck, schönen und coolen Effekt. Okay, als Nächstes müssen wir Taub und seine Schriftgröße auf drei Rampen auswählen Dann ändere ich die Farbe, sie wird golden sein. Also wir haben hier am meisten wir haben standardmäßig Nullen Dann wähle ich Informationen aus. Es wird so sein, die Schriftgröße wird 1,8 RAM sein , dann wird die Farbe 999 sein. Wir haben hier also die Span-Elemente, und jetzt müssen wir etwas JavaScript schreiben. Lassen Sie uns das Menü „Variable erstellen“ erstellen. Ich werde es mit der Abfrageauswahlmethode auswählen. Geben wir hier den Klassennamen an. Als nächstes benötigen wir variable Zahlen. Sie müssen die Zahlen mit der Methode Query Selector All auswählen Methode Query Selector All Als Nächstes benötigen wir die Variable Start, die standardmäßig falsch ist. Es wird der boolesche Wert sein . Und jetzt müssen wir eine Funktion für die Startzählung erstellen. Fügen wir hier Parameterelemente ein. Jetzt haben wir zwei Create variable max, was der Wert aus dem Datensatz sein wird. Ich meine den Wert der Daten, nun ja, Attribute, die wir hier im HTML-Element verwendet haben, wir müssen diese Zahlen abrufen und sie in der Variablen max speichern. Als nächstes müssen wir zählen, was die eingestellte Intervallfunktion sein wird. Also müssen wir den Inhalt des Textes definieren. Und tatsächlich müssen wir es mit dem Inkrementoperator um eins erhöhen es mit dem Inkrementoperator um eins Und dann brauchen wir eine IF-Anweisung, in der wir Folgendes definieren müssen. Der Textinhalt. Wenn der TextContent gleich max ist, sollten wir das Integral löschen Und wir müssen hier die Zählvariable übergeben. Was das Intervall angeht, wird es 2000 geteilt durch die Nonce sein Als Nächstes müssen wir dem Fensterobjekt mit dem Scroll-Ereignis einen Event-Listener hinzufügen dem Fensterobjekt mit dem Scroll-Ereignis einen Event-Listener und hier die Callback-Funktion übergeben Wir müssen mit dem Zählen beginnen, sobald wir nach unten scrollen. Also brauchen wir hier eine IF-Anweisung , in der wir das folgende Fenster definieren müssen. Scrollen Y ist größer als oder gleich dem oberen Menüpunkt. Sobald wir den Menübereich erreicht haben, müssen wir mit der Zählung beginnen. Dann brauchen wir, wenn Anweisungen, in denen wir übergeben müssen, nicht starten, was der boolesche Wert ist Und dann müssen wir die Zahlen durchgehen. Jetzt müssen wir diese.com-Funktion aufrufen und den Parameter none übergeben Als Nächstes müssen wir den booleschen Wert setzen und mit True beginnen. Okay, sobald wir nach unten scrollen UND die Zähler beginnen. In Ordnung, jetzt müssen wir uns um die Navbar kümmern. Wir müssen es klebrig machen, sobald wir nach unten scrollen. Also müssen wir dieses Scroll-Event hier verwenden. Lass uns eine neue Variable erstellen ist jetzt soweit. Ich werde es mit der Methode querySelector auswählen. Geben wir hier den Klassennamen an, jetzt vier. Dann brauchen wir jetzt eine Punktklassenliste. Und wir müssen der Navbar-Klasse Tiki mit der Toggle-Methode hinzufügen der Navbar-Klasse Tiki mit der Toggle-Methode Außerdem müssen wir das Jahr mit dem Fenster-Punkt-Scrollen hinter uns lassen. Y ist größer als Null. Als nächstes müssen wir die Klasse Tiki auswählen, gefolgt von der Navigationsleiste Und wir müssen die Höhe ändern. Es werden acht RAM sein. Und wir müssen auch die Hintergrundfarbe ändern. Ich setze es auf Schwarz. Und außerdem brauchen wir hier alle Punkte 5 s. Sobald wir also nach unten scrollen, bekommen wir diesen schönen und coolen Effekt. Eigentlich müssen wir ein kleines Problem lösen. Die Navbar landete hinter dem Landing, also brauchen wir den Index mit einem höheren Wert Okay, jetzt ist das Problem behoben. Und mit diesem Abschnitt sind wir fertig 46. Projekt 5: Baue den Kundenbereich auf: In der vorherigen Vorlesung haben wir also einen Datenbereich erstellt, ich meine die animierten Datenzähler. Und jetzt müssen wir weitermachen. Also, um am nächsten Abschnitt zu arbeiten , der ein Abschnitt mit Testimonials sein wird Lassen Sie uns Ihre neuen Kommentare einfügen. Kunden. Ich nenne diese Sektion Kunden. Dann öffne ich den Abschnittstyp mit der Klasse Kunden, in denen wir eine Entwicklung benötigen, das wird Kundenbanner sein. Im Laufe der Entwicklung werde ich das H3-Heading-Tag mit der Hauptüberschrift der Klasse und dem Textzeugnis öffnen H3-Heading-Tag mit der Hauptüberschrift der Klasse und dem Textzeugnis Als Nächstes benötigen wir H1-Überschriftenelemente. Und es werden Kunden sein. Sagen wir, als Nächstes müssen wir einen Absatz mit einem Blindtext erstellen. Danach öffne ich den DIV-Tag, bei dem es sich um Clients handeln wird. Und dann brauchen wir noch eine Tiefe, die der Kunde selbst sein wird. Lassen Sie uns einen Absatz mit einem Blindtext einleiten. Als nächstes benötigen wir tiefe Elemente, die als Hülle für das Bild dienen Wählen wir den Image-Client aus. Dann benötigen wir ein Span-Element für den Namen des Kunden. Okay, ich werde den Kunden ein paar Mal duplizieren. Und dann lassen Sie uns weitermachen und die Bilder ändern. Und außerdem müssen wir den Text ändern, Blindtext. Ändere den Namen. Es wird Nick Brown sein. Nächster erneuter Rückgang drei. Und der Name wird David Jones sein. Als Nächstes ändere ich den Text, auch den Bildnamen, den Namen des Kunden. Und schließlich brauchen wir Kunde fünf. Der Name wird Mary Brown sein. In Ordnung, das war's also. Das HTML-Markup ist fertig. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Fügen wir neue Kommentare für die Kunden ein. Dann wähle ich das Abschnittselement aus. Lassen Sie uns die Breite auf 100% setzen. Dann wird die Höhe 70 Viewport-Höhe sein. Dann brauchen wir einen Hintergrund mit linearer Gradientenfunktion, in den ich den RGBA-Wert einfüge Es wird eine schwarze Farbe mit einer Opazität von 0,9 sein. Als nächstes benötigen wir wieder einen RGBA-Wert mit einer schwarzen Farbe mit einer Opazität Als Nächstes wähle ich das Bild aus dem Bilderordner aus. Es wird Bild acht sein. Definieren wir die Position. Es wird im Mittelpunkt stehen. Und wir brauchen auch keine Wiederholung Als Nächstes setze ich die Eigenschaft Hintergrundgröße auf Cover. Okay, hier haben wir das Hintergrundbild. Als nächstes müssen wir uns um die Bilder kümmern , weil sie zwei größer sind. Lassen Sie uns die Breite auf fünf von setzen. Die Höhe wird ebenfalls fünf Meter betragen. Als nächstes müssen wir das Objekt Phi abdecken. Machen Sie sie auch rund und nutzen Sie den Grenzradius von 50 Prozent. Jetzt haben wir kleinere Bilder für Sie. Dann wähle ich das Kundenbanner aus und setze seine Position auf Absolut. Dann haben wir relativ zum übergeordneten Element positioniert, bei dem es sich um einen Abschnitt handelt. Stellen wir die Position auf zehn Prozent und die linke Position sollte 50 Prozent sein Zentrieren Sie die Elemente einfach horizontal indem Sie Transform Translate X mit dem Wert -50% verwenden Außerdem benötigen wir hier die Textausrichtung in der Mitte. Hier haben wir also das Banner, das momentan nicht ganz sichtbar ist. Lassen Sie uns weitermachen und die Hauptüberschrift auswählen . Ich werde die Schriftgröße auf sechs RAM setzen, als wir benötigen. Kundenbanner, gefolgt von der H1-Überschrift, sagen wir, Schriftgröße bis sechs Rom ebenfalls Außerdem müssen wir eine Schriftstärke von 300 haben. Wir müssen Text in Großbuchstaben umwandeln und auch die Farbe ändern Es wird weiß sein. Jetzt ist die Überschrift sichtbar und sie sieht ziemlich gut aus. Lassen Sie uns als Nächstes die obere Hälfte der Gewinnspanne minus vier Runden festlegen. Okay, also beide Überschriften sehen ziemlich nett aus. Ich setze mich für die Hauptüberschrift in Position zu Relativ. Und dann brauchen wir den Index mit einem höheren Wert. Okay, jetzt haben wir bessere Ergebnisse. Als Nächstes kümmere ich mich um den Absatz im Kundenbanner. Fügen wir es zu 1,6 RAM hinzu. Und die Farbe wird 777 sein. Außerdem benötigen wir Margin Top, um voll durchzuhalten. Als Nächstes müssen wir die Zeilenhöhe auf einen Punkt setzen , damit wir den Absatz haben. Als Nächstes werde ich mich um die absolute Position des Kunden kümmern . Dann müssen wir die untere Position Null sein. Außerdem benötigen wir Display Flex mit Alignment Items. Flex und wir müssen die Gegenstände am Ende des Abschnitts platzieren. Als Nächstes wähle ich den Kunden aus. Lassen Sie uns mit zwei 25% beginnen. Jetzt brauchen wir eine Höhe von 25 RAM. Als Nächstes setze ich die Hintergrundfarbe auf Golden. Ich werde mit Polsterung etwas Platz schaffen. Stellen wir es auf „Laufen“ ein. Dann ändere die Farbe, mache es weiß. Es wird also die Kunden haben. Eigentlich glaube ich, dass hier etwas nicht stimmt. Lassen Sie uns die HTML-Datei überprüfen. Wir haben also die ersten Kunden. Wir müssen es verschieben und es hier als ersten Kunden auf der Liste platzieren . Jetzt sieht alles gut aus. Lassen Sie uns als Nächstes fortfahren und Kunden auswählen. Mit dem F Child Selector benötigen wir einen zweiten Client Sagen wir Hallo zu einem RAM Dann dupliziere ich diesen Code und ändere die Nummer. Es werden vier sein. Lassen Sie uns die Höhe auf 21 RAM setzen. Jetzt haben wir verschiedene Höhen für die Kunden. Als Nächstes wähle ich gerade Elemente aus. Stellen wir die Opazität 2.9 ein. Jetzt haben wir also ein besseres Ergebnis. Ich nehme diesen Code und füge ihn hier ein. Und ich füge hier einen Rand auf der rechten Seite hinzu. Stellen wir es auf, to run um etwas Platz zwischen dem Bild und dem Namen zu schaffen . Als Nächstes wähle ich den Kundenabschnitt aus. Stellen wir die Schriftgröße auf 1,6 RAM als den Rand ein. Ganz unten wird es um Laufen gehen. Die Absätze. Sieh nett aus. Als Nächstes wähle ich die Geben- und Sitzposition des Kunden auf Absolut aus. Dann benötigen wir die relative Position für das übergeordnete Element, das ein Kunde ist. Stellen wir eine Position in den RAM ein. Außerdem brauchen wir Flexbox. Wir müssen die Elemente in der Mitte vertikal ausrichten. Jetzt sind die Bilder und die Namen gut aufeinander abgestimmt. Jetzt muss ich mich um den Namen kümmern. Wählen Sie Span-Elemente, Schriftgröße auf einen Punkt für RAM. Außerdem müssen wir die Texttransformation in Großbuchstaben schreiben. Das ist es also. Dieser Abschnitt sieht ziemlich gut aus. Fahren wir mit der nächsten Vorlesung fort. 47. Projekt 5: Erstelle und gestalte Kontaktabschnitt und Fußzeile der Website: Ordnung, sobald wir mit dem Kundenbereich fertig sind , müssen wir jetzt weitermachen und den letzten Teil des Projekts erstellen Wir müssen den Kontaktbereich erstellen gefolgt von der Fußzeile. Fügen wir also neue Kommentare für das Konzept ein. Und dann füge ich das Section-Element mit dem Klassennamen Contact ein. Ich füge hier das DIV-Tag ein, das ist Contact left, auf der linken Seite dieses Abschnitts. Dann brauchen wir Kontakt, oder? In die ich geformte Elemente einfügen werde. Geformte Elemente erhalten H1-Überschrift, Tag, Tisch reservieren Dann haben wir eine Eingabegruppe, in die ich Eingabeelement mit dem Typtext und einem Platzhalterattribut einfüge , das Vorname sein wird. In der nächsten Minute. Ähnliches Eingabeelement mit LastName. Lassen Sie uns die Eingabegruppe duplizieren. Ändern Sie den Typ des Eingabeelements. Es wird eine E-Mail sein. Und wir brauchen hier eine E-Mail-Adresse. Als nächstes brauchen wir unser Telefon. Dann werde ich die Eingabegruppe erneut duplizieren. Lassen Sie uns das erste Eingabeelement entfernen und Ihren Textbereich mit dem Platzhalterattribut platzieren Ihren Textbereich mit dem Platzhalterattribut Wir werden nur eine Botschaft sein. Ebenfalls. Ich werde das zweite Eingabeelement loswerden und die Schaltfläche Hier mit einer Typschaltfläche platzieren. Dann benötigen wir das Klassenattribut, Contact BGN. Und ich werde deinen Termin vereinbaren. In Ordnung, das war's also mit dem HTML-Markup. Ich fange direkt mit CSS an. Fügen wir Kommentare für den Kontaktbereich ein. Ich wähle Abschnittselemente aus. Definierte Breite. Es wird 100% sein, die Höhe, es wird 60 Viewport-Höhe sein Als nächstes brauchen wir wieder Farbe. Es wird schwarz sein. Also werde ich Flexbox verwenden. Wir müssen Elemente mithilfe von Flexbox ausrichten. Als Nächstes wähle ich die linke Seite aus und setze ihre Breite auf 50 Prozent. Und die Körpergröße wird 100 Prozent betragen. Und ich werde den Hintergrund ändern. Verwenden wir die lineare Gradientenfunktion. Mit RGBA-Wert. Es wird eine schwarze Farbe mit einer Opazität von 0,5 sein. Als nächstes brauchen wir die ähnliche Farbe. Die Opazität wird 0,4 betragen. Außerdem müssen wir ein Bild aus dem Bilderordner als Hintergrund auswählen . Das Bild wird Bild eins sein. Andererseits brauchen wir Center. Ich bin in der Lage und wiederhole es jetzt. Außerdem müssen wir hier die Hintergrundgröße abdecken. Wir haben hier das Bild auf der linken Seite des Kontaktbereichs als Hintergrund. Als Nächstes wähle ich Kontakt aus, oder? Lass es uns zu 50% an sie verkaufen. Die Höhe wird 100% betragen. Als nächstes werde ich Flexbox wieder verwenden. Sie rechtfertigen das Inhaltszentrum. Außerdem müssen wir die Elemente so ausrichten, dass sie ebenfalls zentriert sind. Es ist also zu sehen, dass der Inhalt in der Mitte der rechten Seite des Kontaktbereichs platziert ist . Als Nächstes wähle ich Kontakt aus, oder? H1-Überschriftenelement. Lassen Sie uns die Schriftgröße erhöhen. Es wird voller RAM sein. Dann setze ich die Schriftstärke auf 300 und ändere die Farbe. Es wird weiß sein. Als Nächstes erstelle ich Speicherplatz mit Margin, wenn der Wert 0,03 RAM ist, und zu RAM. Er wird also die Überschrift haben. Danach wähle ich die Eingabegruppe aus. Lassen Sie uns erneut Flexbox verwenden Als Nächstes wähle ich die Eingabegruppe aus, gefolgt vom Eingabeelement Und auch hier brauchen wir einen Textbereich. Wir brauchen einige ähnliche Stile für beide Elemente. Stellen Sie die Breite auf 30 Rampe ein, dann wird die Höhe fünf Primzahlen sein Ich setze Padding auf einen RAM, einen RAM dann auf Run und Null Also werde ich mit Margin to Run etwas Speicherplatz schaffen. Die Hintergrundfarbe wird transparent sein. Ich werde die Grenze entfernen und dann unten die Grenze verwenden. Werden die Werte. Ein RAM, durchgehend, und die Farbe wird RGBA bis fünf bis 55 bis 55 sein Und die Opazität 0,1, 0,3. Eigentlich haben wir hier ein Problem. Ja, wir brauchen 0,1 RAM. Jetzt sieht die Grenze gut aus. Als nächstes ändere ich die Farbe, sie wird weiß sein. Danach wähle ich den Textbereich separat aus. Wir müssen die Funktion zur Größenänderung deaktivieren. Also setze ich die Höhe auf fünf RAM. Wir müssen die Scrollleiste loswerden. Dafür verwende ich den Textbereich, dann das Web Kit und die Scrollleiste. Und wir müssen hier keine anzeigen. Es wird also davon ausgegangen, dass die Scrollleiste versteckt ist. Okay, als Nächstes kümmere ich mich um das Platzhalterattribut für die Eingaben und auch für den Textbereich Lassen Sie uns die Farbe auf Weiß setzen. In Ordnung, jetzt sehen die Eingaben ziemlich gut aus. Lassen Sie uns weitermachen und uns um das Muster kümmern. Wählen Sie es aus und stellen Sie zunächst seine Breite ein. Das wird es sein. Also um zu rennen. Als nächstes brauchen wir eine Höhe, die sechs RAM betragen wird. Ich werde die Hintergrundfarbe ändern. Verwenden wir Gold. Weiter. Ich werde die Farbe des Textes ändern. Das ist 322277. Außerdem benötigen wir Margin, einen RAM zum Ausführen. Weiter. Wir brauchen Grenzen, damit es keine gibt. Also setze ich den Cursor auf den Zeiger. Der Button sieht also ziemlich nett aus. Und tatsächlich können wir weitermachen und mit der Arbeit an der Fußzeile beginnen Fügen wir neue Kommentare ein und verwenden Sie dann das HTML5-Fußzeilen-Tag, in dem ich einen Absatz für den Copyright-Text Ich werde das Copyright-Zeichen verwenden. Und dann sind alle Rechte vorbehalten. 2023. Hergestellt mit Code und Create. Lassen Sie uns weitermachen und die Fußzeile gestalten. Wir brauchen neue Kommentare für Footer. Dann wähle ich das Fußzeilenelement aus und setze die Breite auf 100% Die Höhe wird zehn Runden betragen. Wir benötigen also eine Hintergrundfarbe von 262626. Als nächstes brauchen wir Flexbox. Wir müssen die Elemente mithilfe von Justify-Content Center zentrieren und In der Mitte kann man sehen, dass der Inhalt perfekt zentriert ist. Lassen Sie uns weitermachen und Absatz auswählen. Ändern Sie die Schriftgröße. Es wird 1,6 RAM sein. Und die Farbe, sie wird 999 sein. Ordnung, das war's mit der Fußzeile und dem Kontaktbereich Beide sehen nett aus. Lassen Sie uns weitermachen und das Projekt responsiv gestalten 48. Projekt 5: Mache das Projekt responsiv: Ordnung, also sind all diese Abschnitte des Projekts erstellt Und jetzt müssen Sie nur noch das Projekt an verschiedene Bildschirmgrößen anpassen. Ich werde die Seite überprüfen und in den Responsive-Modus wechseln. Wir müssen den Breakpoint finden, an dem wir die Änderungen mithilfe von CSS-Medienabfragen vornehmen müssen die Änderungen mithilfe von CSS-Medienabfragen Ich denke also, dass der erste Breakpoint, an dem wir das Projekt ändern müssen , 1.500 Pixel sein wird Zuerst füge ich neue Kommentare für den Responsive-Modus ein. Und dann müssen wir eine CSS-Medienabfrage als maximale Breite erstellen . Ich gebe hier 1.500 Pixel an. Das erste, was ich tun werde, ist die Schriftgröße des HTML-Elements zu verringern . Machen wir 55% draus. Dadurch werden alle Elemente kleiner. Also ich finde, alles sieht gut aus. Und jetzt können wir weitermachen und den nächsten Breakpoint finden. Ich denke, der nächste Breakpoint wird bei 1.300 Pixeln liegen. Kopieren wir diesen Code und ändern wir die maximale Breite, machen wir 1.300 Pixel daraus Ich werde die Schriftgröße des HTML-Elements ändern. Machen wir 50 Prozent draus. In Ordnung, jetzt denke ich, dass das Projekt gut aussieht. Lass es uns überprüfen. Ich denke, alles sieht gut aus und wir können weitermachen und den nächsten Breakpoint finden Der nächste Breakpoint sollte meiner Meinung nach also bei 1.100 Pixeln Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage erstellen. Stellen Sie die maximale Breite auf 1.100 Pixel ein. Ich wähle das HTML-Element aus und verringere erneut die Schriftgröße, um 45 Prozent. Als Nächstes wähle ich Menu Image Wrapper und ändere die Breite auf 18 RAM Was die Höhe angeht, werde ich sie ebenfalls auf 18 RAM einstellen. Jetzt müssen wir uns um den Kundenbereich kümmern. Wählen wir Kunden aus und legen Höhe auf 120 fest, die Höhe des Viewports aktiviert Also werde ich Kunden auswählen. Ändern wir die Richtung, machen wir es zu einer Spalte. Ich werde die Gegenstände vertikal platzieren. Als nächstes brauchen wir Kunden. Lassen Sie uns die Breite auf 100% setzen. Was die Höhe angeht, wird es 115 RAM sein. Ich denke also, wir müssen die Größe des zweiten Kunden ändern . Stellen wir also mit ein, also setzen wir die Höhe auf 15 RAM. Machen wir dasselbe für den vierten Punkt. Jetzt sieht der Kundenbereich ziemlich gut aus. Als nächstes müssen wir uns um den Kontaktbereich kümmern. Lassen Sie uns weitermachen und Kontakt links auswählen und es ausblenden. Jetzt müssen wir die Elemente in der Mitte ausrichten. Wählen wir Kontakt aus, oder? Ich setze die Breite auf 100%. Jetzt. Das Element wird in der Mitte platziert. Als nächstes benötigen wir die Eingabegruppe, gefolgt vom Und wir müssen auch den Textbereich auswählen. Und wir brauchen auch Boden. Stellen wir die Breite auf 40 Rampe ein. Jetzt finde ich, dass alles gut aussieht. Und mit diesem Breakpoint sind wir fertig. Lass uns weitermachen und den nächsten finden. Also der nächste Breakpoint, ich denke, es werden 900 Pixel sein Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage erstellen. Und legen Sie die maximale Breite auf 900 Pixel fest. Ich wähle Landing Contact, gefolgt von der Entwicklung. Und dann brauchen wir Span. In diesem Fall das zweite Spannelement. Lassen Sie uns die Anzeige auf „Keine“ setzen. Als Nächstes wähle ich Menü aus, oder? Und mach es versteckt. Danach wähle ich das linke Menü und setze die Breite auf 100%. Außerdem werde ich Texte in der Mitte anordnen und wir müssen den Rand auf der rechten Seite entfernen. Wir müssen uns um den Absatz kümmern. Lassen Sie uns also weitermachen und Menu left P und einen bestimmten Spielraum auswählen , um ausgeführt zu werden. Und dann mündlich, dann zur Miete und wieder ADL. Also jetzt sieht dieser Abschnitt ziemlich gut aus. Als Nächstes kümmere ich mich um den Kundenbereich. Wählen wir nun Kunden aus und stellen Sie die Höhe auf 140 Viewport-Höhe Jetzt denke ich, dass es besser aussieht. Als Nächstes wähle ich die H1-Überschrift „Kleidung“ von Kunden aus H1-Überschrift „Kleidung“ von Kunden und setze die Breite auf 50 Eigentlich denke ich, dass wir die Höhe verringern müssen . Lass uns 321. Okay. In Ordnung, als Nächstes müssen wir weitermachen und den Absatz anpassen Lassen Sie uns weitermachen und Kundenbanner auswählen, gefolgt vom P-Selektor Fangen wir mit 260 RAM an. Oh nein, ich finde, es sieht besser aus. Danach. Ich wähle Kunden aus. Stellen wir die Höhe auf Rampe 18 ein. Eigentlich werde ich diesen Code kopieren und die Höhen für das zweite und vierte Element ändern . Okay, jetzt finde ich, dass dieser Abschnitt gut aussieht. Fügen wir hier Margin Auto hinzu. Also setze ich die Höhe wieder auf 140. Okay, das ist alles. Endlich, mit dem Kundenbereich, sind wir fertig. Lassen Sie uns weitermachen und uns um den Konfliktbereich kümmern. Ich wähle die Eingabegruppe aus und setze die Flexrichtung auf Spalte Weiter. Wir müssen das Eingabe-Tag auswählen, gefolgt vom Textbereich. Und wir brauchen auch einen Knopf. Lass uns mit 260 Rampe loslegen. Außerdem wähle ich den Abschnitt „ Kontakt“ und erhöhe die Höhe des Viewports von 30 auf 90. Jetzt haben wir also schöne Ergebnisse. Eigentlich sind wir mit diesen Breakpoints fertig. Lass uns weitermachen und den nächsten finden. Also ich denke, der nächste Breakpoint wird 600 Pixel sein Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage erstellen und die maximale Breite auf 600 Pixel festlegen. Ich wähle HTML aus und verringere die Schriftgröße. Machen wir 35 Prozent draus. Danach wähle ich Landing Contact und setze die Höhe auf Rampe 19. Außerdem werde ich die Richtung ändern. Machen wir daraus eine Kolumne. Ich werde die Gegenstände vertikal platzieren. Als Nächstes benötigen wir ein Einzelartikelzentrum. Okay. Danach kümmere ich mich um die Details. Ich meine, das Entwicklungsset mit 220 Rampen. Jetzt denke ich, dass die Artikel besser platziert sind. Als Nächstes müssen wir uns um den Abschnitt Über uns kümmern. Erhöhen wir die Höhe und stellen Sie sie auf Viewport-Höhe Und ich werde auch die Richtung ändern. Wir müssen die Gegenstände vertikal platzieren. Als Nächstes wähle ich The Belmont im Abschnitt Über uns und setze seine Breite auf 60 RAM Außerdem werde ich mit einer Marge von Null sitzen , anstatt auf der linken und rechten Seite zu rennen. In Ordnung. kümmern wir uns um den Kundenbereich. Wir haben hier viel Platz. Ich gehe zur Höhe auf eine Viewport-Höhe. Jetzt finde ich, dass dieser Abschnitt gut aussieht. Und eigentlich, mit diesem Bruchpunkt, sind wir fertig. Lassen Sie uns weitermachen und uns um die letzten Breakpoints kümmern. Ich werde eine neue CSS-Medienabfrage erstellen. Und dann setze ich die maximale Breite auf 450 Pixel. Wählen Sie Logo und erstellen Sie es. Als Nächstes wähle ich die Eingabegruppe aus, gefolgt vom Eingabetextbereich und der Schaltfläche. Ändere die Breite, mache 50 Rampen draus. Okay. Das Einzige, was ich dann tun werde, ist etwas Platz zu schaffen. Und im Kundenbereich setzen wir die Höhe auf eine Viewport-Höhe von einundzwanzig Okay. Ich denke, das ist es. Alles sieht ziemlich gut aus. Und wir können sagen, dass das Projekt responsiv ist. Eigentlich haben wir mit diesem Projekt unseren Kurs abgeschlossen. Ich hoffe es hat dir gefallen. Lerne ein paar neue Sachen. Ich wünsche dir alles Gute. Viel Glück.