NextJs, React und TailwindCss-Webentwicklung: Animierte reaktionsfreudige Portfolio-Websites

1. Einführung: In diesem Kurs lernen Sie, wie Sie mit NextGS eine Website erstellen mit NextGS eine Website erstellen Willkommen. Dieser Kurs richtet sich an alle, die selbst etwas über Gebäudedesign wie dieses lernen möchten. Wir werden alle Komponenten mit Tailwind CSS gestalten Das ist wie eine große Bibliothek vorgefertigter CSS-Klassen, die Sie direkt in Ihrem HTML verwenden können , um Elemente zu stylen, ohne jedes Mal benutzerdefiniertes CSS schreiben Im Gegensatz zu herkömmlichem CSS, bei dem Sie möglicherweise Stile in einer separaten Datei schreiben, können Sie mit Tailwind Stile mit kleinen Einzweckklassen direkt auf Ihre HTML-Elemente anwenden mit kleinen Einzweckklassen direkt auf Ihre HTML-Elemente Warum verwenden Sie Next JS für Websites, wo es hauptsächlich nur um das Frontend geht Gut, dass die Website vorbereitet Fall, dass Sie später auch eine Backend-Funktionalität hinzufügen werden eine Backend-Funktionalität , und auch wegen des SO, ist für den Fall, dass Sie später auch eine Backend-Funktionalität hinzufügen werden, und auch wegen des SO, in dem Next Jess glänzt Wir werden lernen, wie man den Ordner strukturiert, wie man Komponenten erstellt und auf seiner Seite einfügt, wie man das Layout mit einer Schrift richtig und wie man auch effizient eine Website erstellt In diesem Beispiel wird es eine Portfolio-Website sein , denn nach diesem Kurs können Sie all die Dinge behalten , die Sie gerade codiert haben. Außerdem empfehle ich Ihnen, das Klassenprojekt auszuprobieren, da Sie dort Ihre Fähigkeiten verbessern können Wenn Sie etwas haben, beantworte ich gerne jede Frage oder jeden Kommentar Mal sehen, wie die Seite aussehen wird , nachdem wir alle Komponenten codiert Nach diesem Kurs wirst du wissen, wie man eine solche Website erstellt, wie man die Tailwind-Klassen benutzt, wie man wiederverwendbare Komponenten erstellt und wie man mit der Ordnerstruktur von NextGS arbeitet und einige ihrer Vorteile nutzt Ich freue mich auf die Lektionen. 2. SET-UP: In unserem Projekt beginnen wir mit der Ausführung dieses Befehls, und da wir bereits einen Ordner erstellt haben, können wir dort nur einen Punkt eingeben, weil dann alles in den Ordner installiert wird, in dem wir uns gerade befinden. Dort machen wir Y, klicken bis zum Ende auf Ja, Nein, Ja, Nein und Nein. Es wird die Installation aller Abhängigkeiten, die wir benötigen, zum Stillstand bringen , also werden wir ein bisschen warten. Jetzt sieht unser Ordner so aus und wir werden den Assets-Ordner öffentlich erstellen. Dort werden wir Assets anlegen. Dort werden wir die Bilder hinstellen. Du kannst sie über den Starterlink und den Nap bekommen. Wir werden auch einen neuen Ordner erstellen und ihn Komponenten nennen . Dort werden wir Dinge wie den Hero-Bereich, Navbar usw. beibehalten Wir können ihn jetzt tatsächlich erstellen. Lass uns Navbar machen, TS sechs. Und machen wir auch die Helden-Sektion, die TA Six. Dies sind die ersten beiden Komponenten , mit denen wir beginnen werden, und später werden wir immer mehr Komponenten hinzufügen. Damit diese Komponenten tatsächlich auf unserer Seite angezeigt werden, müssen wir den Export erstellen. Das heißt, wir werden dort etwas wie Export Const, Hero und dort werden wir den Body öffnen Drinnen kehren wir zurück, vorerst können wir nur die leeren Fragmente dort ablegen, und dann gehen wir zu unserer Seite TS sechs Dort können wir den gesamten Inhalt löschen und dort nur den Unterschied belassen. Selbst beim Import können wir dort nur ein leeres Fragment machen , und im Inneren beginnen wir Hero zu tippen, und es wird uns automatisch angeboten , diese Komponente zu importieren. Also werden wir eintreten. Ich werde automatisch importiert, und dann wird es auf unserer Seite sein, alles, was wir dort platzieren, und da wir den Server mit NPM ausführen, Def ausführen dann zu unserem lokalen Host gehen, können Sie sehen, dass der Inhalt dort sein wird 3. Held:in: Im Heldenbereich beginnen wir mit Importen und importieren Bewegungen aus einem Frame oder einer Bewegung sowie das Profilbild. Wir werden auch ein Bild aus dem nächsten Bild importieren und diese Komponente als Client-Komponente definieren. Also werden wir dort den Client verwenden. Zunächst müssen wir einen Hintergrund mit linearem Farbverlauf auf dem Hintergrund unseres Heldenbereichs erstellen einen Hintergrund mit linearem Farbverlauf auf dem Hintergrund . Wir werden dort mit der relativen Klasse beginnen da wir dort den Planeteneffekt haben werden, und das wird absolut sein. Dann fahren wir mit dem Overflow-Clip fort, da wir nicht möchten, dass Inhalte aus unserer Komponente herauskommen Dann geben wir das als Mindesthöhe des Bildschirms an, was bedeutet, dass es mindestens die Höhe des Bildschirms einnimmt mindestens die Höhe des , auf den der Benutzer schaut Dann setzen wir den Text auf Weiß und jetzt stellen wir den Hintergrund mit linearem Farbverlauf ein. Wir werden mit BG beginnen, das heißt Hintergrund, und dort setzen wir den linearen Farbverlauf in den linearen Verlauf, wir werden einstellen, dass wir das nach unten definieren wollen und dort, dass wir mit der schwarzen Farbe beginnen werden. Dann fahren wir mit grauer Farbe fort. 35% bedeuten also, wie viel von dieser Skala die graue Farbe einnehmen sollte Dann machen wir mit einer anderen grauen Farbe weiter. Das werden wir später ändern. Das können wir auf etwa 67% setzen. Wenn ich zunächst die weiße Farbe einfüge, können Sie sehen, wie sie aufgeteilt wird , und dann die letzte Farbe, wir können es und dann die letzte Farbe, auch mit weißer Farbe versuchen, dort 85% einstellen und Sie können sehen, dass es die Farbe am unteren Rand sein wird. Dieser sollte der hellste sein. Vorerst können wir dort etwas gräuliche Farbe hinzufügen. So und wir werden das etwas später ändern. Im Moment werden wir es so belassen und dann werden wir die Farben dort hinzufügen, weil wir den Inhalt dieses Heldenabschnitts immer noch codieren wollen. Was wir jetzt auch tun werden, ist, dass wir den Planeten lieben werden , denn dann werden wir ihn programmieren und unser Design daran anpassen Fügen wir dort also ein Div hinzu. Das kann tatsächlich ein leeres Div sein. Wir werden keine Inhalte außer den Klassennamen hinzufügen. Für die Klassen werden wir dies als absolute Position mit schwarzem Hintergrund festlegen . Wir werden ihre Breite festlegen. Ich werde 2.400 Pixel machen. Wir werden seine Höhe festlegen. Ich werde sagen, es gibt 1.000 Pixel. Dann machen wir diesen Kreis. Also runden wir es auf 50% ab, dann setzen wir diese Position auf 50% und wir werden X auch um 50% übersetzen. Es ist also in der Mitte. Dann werden wir anfangen. Ich werde es in einer anderen Zeile machen, damit du es sehen kannst. Bei einem anderen Hintergrund setzen wir dort einen radialen Farbverlauf ein und stellen ihn aus nächster Nähe ein, und dort werden wir wieder die schwarze Farbe auf 85% einstellen . Und dann eine Farbe, die wir gerne hätten. Wenn ich zum Beispiel sage, dass es Weiß gibt, können Sie auf unserer Seite sehen, dass es die Form des Planeten annehmen wird . Ich kann es tatsächlich dort belassen und wir können es etwas später in eine Farbe ändern , die uns gefällt. Lassen Sie uns das auch für die oberen 450 Pixel sagen. Es ist wie unten , das wir jetzt sehen können, sagen wir, es gibt einen Rand. Ich mache einen Pixelrand und dann eine Rahmenfarbe, die wir vorerst wieder auf weiße Farbe mit einer Opazität von 0,3 einstellen können Damit werden wir diesen Planeteneffekt auf unserer Seite haben. Unter diesem Planet-Div können wir der Erstellung des Inhaltscontainers beginnen. Ich werde das Div erstellen und in diesem Div werde ich ein weiteres erstellen und dann unter diesem anderen Dif werden wir ein Motion-Div erstellen Nun werden wir für diesen Inhaltscontainer, Dave, die Klassen von Containern relativ zu einer Mischungsreihenfolge setzen , um sie zu zentrieren . Bettzüge für einige horizontale Einstreu, Bettwäsche von oben bis 12 und Polsterung von unten bis 24. Jetzt werden wir auch einige Klassen zu seinem inneren Div hinzufügen. Dort platzieren wir das Flexbox-Layout und die Spalte mit der Flex-Richtung, sodass die Elemente untereinander liegen, um sie zu zentrieren und zu zentrieren , um die Elemente horizontal und vertikal zu zentrieren Elemente horizontal und vertikal Text zur Mitte, um zentrierten Text zu haben , und auch den Index bis zehn In diesem Container-Div und im inneren Div werden wir ein Motion-Div für das Profilbild erstellen. Ich werde die Bewegung zu div machen und in diesem Div werden wir ein Div platzieren, das dort als Designelement sein wird, also werden wir die absolute Position innerhalb Null Hintergrundgradienten nach unten und von Grau 500 mit 0,2 Opazität zu transparentem abgerundetem, vollem und unscharfem Baum Excel setzen Nun werden wir unter diesem Designelement ein Bild platzieren und in dieses Bild werden wir eine Quelle für unser Profilbild oder Profilbild und die Klassennamen einiger Witzbold einfügen Profilbild und die Klassennamen einiger Ich werde das Verhältnis von 250 Pixeln verwenden und den Index auf zehn setzen Dort werden wir das Image-Tag von Next JS verwenden. Jetzt haben wir es auf unserer Seite. Wir können dort sehen, dass wir die Attribute für den Motion-Dip festlegen werden, sodass dieser tatsächlich animiert ist. Für den Anfang setzen wir die Opazität auf Null, sodass sie nicht sichtbar ist, und skalieren Außerdem werden wir 0,5 als Anfangszustand festlegen Der Endzustand wird vollständig sichtbar sein. Also die Deckkraft auf eins, 100% und die Skalierung auf eins, sodass der Animationseffekt sodass der Animationseffekt mit der Zeit zunimmt Für den Übergang legen wir die Dauer auf 0,8 fest. Also legen wir fest, wie viel Zeit es dauern wird. Außerdem werden wir dort einige Klassennamen angeben, und zwar mit relativem Rand unten und auch mit Abstand von oben. Jetzt können wir mit dem Textinhalt weitermachen und der wird unter diesem Div stehen. Das heißt, unter diesem erstellen wir ein weiteres, Motion to Div. In diesen werden wir die erste Überschrift setzen, und dort setzen wir eine hohe IM, da können wir Break-Tech einbauen, John, obwohl wir auch ausgegeben eingeben können und unter H eins werden wir einen Absatz Tech platzieren. Dort können wir einen Satz über uns schreiben. Ich bin ein Full-Stack-Entwickler, der sich darauf konzentriert, Websites zu erstellen , die den Benutzern die beste Erfahrung bieten Wir können sie zum Beispiel auch so formatieren. Dann können wir unter diesem Absatz ein Div in dieses Div Wir werden zwei Schaltflächen einfügen. Eine für die Kontaktaufnahme oder eine zweite für die Arbeit, oder wir können den Download-Fernseher aufstellen, so ähnlich. Wir erstellen die Motion-Punkt-Schaltfläche für „Kontaktiere mich“, kopieren sie und fügen sie ein und für die zweite können wir uns die Arbeit ansehen. Was nun den Motion-Diff betrifft, setzen wir erneut ihre Anfangszustände, d. h. Opazität auf Null und Y-Position auf 20, dann Animieren und die Endzustände Opazität auf eins und Y auf Also werden wir zu seiner endgültigen Position übergehen. Wir werden für den Übergang wieder die Dauer 20,8, 0,8 Sekunden und die Klassennamen werden wir dort mit einer maximalen Breite von zwei Excel angeben Gehen wir zum Styling der ersten Generation über. Dort legen wir Text sechs Excel, Text breit mit 0,8 Deckkraft, maximale Breite groß, dann eine Mischung do, um ihn zu zentrieren, führt entspannt, um seine Zeilenhöhe und auch den Rand nach unten zu ändern und auch den Rand nach unten zu Es ist wichtig, dass man entspannt vorgeht, da wir mit dieser Break-Technologie in zwei Zeilen haben Übrigens, für den Spentek für den Teig können wir den Text Grau 600, vielleicht Lassen Sie uns nun das Styling für das Absatz-Tag selbst hinzufügen. Dort werden wir den Text Excel, weißen Text mit einer Opazität von 0,8 und die maximale Gewichtung auch groß eingeben , maximale Gewichtung auch groß da sie ein gewisses Maximalgewicht haben sollte Andernfalls kann es schwierig sein, es zu lesen. Lassen Sie uns das zentrieren und mixdo Auch für die Zeilenhöhe und den unteren Rand lockerer führen Jetzt können wir zu den Buttons dort für das Div gehen , das sie enthält. Flexbox-Layout, Gap 24 und Justify Center. Für die Animation der Bewegungstaste geben wir Wilho an, wir würden gerne die Skala um 1,05 erhöhen Und für die Klassennamen setzen wir die Pedding-Zweige ein, PI der erste für die horizontale Polsterung ist zweite ist für die vertikale Farbe, dann für den Hintergrund 500, für die runde Farbe, für die mittlere Schrift und für den Hoverhintergrund grau, 700 und 700 Da wir die Farbanimationen verwenden, sorgt das für mehr Geschmeidigkeit Für die Schaltfläche unten können wir das tatsächlich kopieren, einfügen und dort platzieren, und das war's Der einzige Unterschied besteht darin , dass wir dort nicht den Hintergrund platzieren, sondern nur den Rand. Lassen Sie uns diesen Hintergrund löschen und dort nur den weißen Rand mit einer Deckkraft von 0,2 platzieren nur den weißen Rand mit einer Deckkraft von 0,2 Jetzt müssen wir die Farben aktualisieren und auch das Layout aktualisieren , um S-Schrift und globales CSS hinzuzufügen . Gehen wir zum Layout. Was wir im Layout tun müssen, ist, dass wir diese DMSNs von Next font Google importieren müssen diese DMSNs von Next font Google importieren Dann müssen wir in der Variablen ihr Gewicht und ihre Teilmengen definieren und dann werden wir sie in einem Klassennamen in unserer Bodytech verwenden Das ist das Einwickeln der Kinder. Das ist unsere Seite. Und wir werden dort den Klassennamen mit dem Punkt dmsans Punkt eingeben, und es wird diese Schriftart geladen Außerdem würde ich diese Metadaten aktualisieren. Wir können den Titel, den Namen unseres Portfolios und eine Beschreibung festlegen . Nachdem wir das haben, wird unsere Schrift geladen. Als Nächstes werden wir Globals Dot CSS übergehen und dort nur diese drei Tailwiner-Direktiven belassen , dann die Bodytech, bei der wir die Hintergrundfarbe auf Schwarz und die Textfarbe auf Weiß setzen Hintergrundfarbe auf Schwarz und die Textfarbe auf Weiß Und jetzt können wir zurück zum Heldenbereich gehen und dort können wir es einfärben Sie können dort beliebige Farben eingeben, aber wenn Sie meine verwenden möchten, können Sie sie so verwenden, wie ich es gemacht habe. Für den Hintergrund, den linearen Farbverlauf, habe ich die gräulichen Farben durch diese lila ersetzt. Sie können also diese Codes verwenden und dort festlegen, wie viel Platz auf diesem Hintergrund jede Farbe einnehmen soll Dieser ist der hellste, sodass Sie ihn hinter dem Planeten sehen können Es erzeugt den Glanzeffekt, und dann wird es dunkler, dunkler und biegt sich von der schwarzen Farbe ab Da ist der radiale Gradient, und das ist der Planet selbst. Sie können sehen, ob ich dort weiße Farbe hinzufüge, wie sich der Planet verändern wird. Also lege ich diese lila Farbe hinein, und sie wird wieder dafür sorgen, dass der leuchtende Effekt auf dem Planeten entsteht. Dann füge ich für den Rand eine etwas andere violette Farbe hinzu, und dann gebe ich auch 0,3 Deckkraft dazu Es macht also die Form des Planeten ein bisschen anders. Im Laufe der Zeit habe ich alle grauen Farben durch lila ersetzt und diese Farbe auch ein wenig aktualisiert, und diese Farbe auch ein wenig aktualisiert um den Glanzeffekt hinter unserem Profilbild zu verbessern. Und dann senke ich auch die Zahl für die violette Farbe der Spen-Technologie, die wir für unseren Nachnamen verwenden. Als Nächstes füge ich für den Button einen neuen Hintergrund hinzu. Wir werden es auf einen Hintergrundverlauf nach rechts ändern. Wir machen es von lila aus. Lassen Sie uns 700 mit einer Opazität von 0,8 machen, zwei von lila mit einer Opazität von 5.000,6 Schauen wir uns nun an, wie die Schaltfläche aussieht, und vielleicht können wir die Farben aktualisieren, also schauen wir uns für ein etwas dunkleres Violett Lass uns einfach 700 verwenden. Und da werden wir uns für ein leichteres entscheiden. Lass uns 400 benutzen. Vielleicht ist das zu viel. Lass uns 500 nehmen. Und jetzt schauen wir uns an, wie der Button aussieht. Ja, ich denke, es ist in Ordnung. Außerdem werden wir im Code so vorgehen, dass uns dort ein Grenzbrett für die Tailen-Klasse fehlt Also fügen wir dort einen Rand hinzu. Andernfalls ist der Rand lila dort nicht aktiv, da der Rand selbst fehlt. Das gilt nun für den Heldenbereich und wir können zum Abschnitt „Über uns“ übergehen. 4. Über mich: Sie werden eine Komponente bewerten. Wir können mit Expo const beginnen und dort leere Fragmente zurückgeben und sie auf Seite 1 bis 6 platzieren Für die AT-Komponente werden wir Progress importieren, aber wir haben diese Komponente noch nicht, wie wir sie bekommen werden Sie ist von Shed CN und wir müssen spätestens bei Progress einen Befehl in unser Terminal NPX Shed CN schreiben spätestens bei Progress einen Befehl in unser Terminal NPX Shed CN Wir werden Enter haben und es wird diese Komponente für uns herunterladen und installieren Da werden wir es einfach machen, ja, wir können New York neutral wählen, zwei CSS-Variablen. Dort werden wir Gewalt anwenden, den alten Peer Deep verwenden und das war's. Wir werden auch ihr Bild vom nächsten Bild importieren und schon können wir anfangen. Wir werden damit beginnen diese leeren Fragmente in einen Abschnitt umzuwandeln. Für den Abschnitt werden wir die ID auf etwa setzen und dort auch einige Klassennamen setzen. Wir können Text auf Weiß und Bettwäsche auf acht setzen. In diesem Abschnitt werden wir Überschrift zwei erstellen. Und in dieser zweiten Überschrift werden wir uns mit Spen tech M befassen. Für diese zweite Hälfte werden wir die Formatierung von Text sechs, Excel, Schrift, beide, und Rand zu den unteren acht hinzufügen . Für den Spen-Takt werden wir die Farbe ein wenig ändern. Fügen wir den Text Grau 300 hinzu. Im Folgenden werden wir ein Div erstellen, und für dieses Div werden wir ein Rasterlayout mit drei Rasterspalten festlegen, aber es reicht aus, wenn wir es von einem mittleren Bildschirm aus machen. Auf dem mobilen Bildschirm wird standardmäßig nur eine Spalte verwendet, da es definitiv die erste Rasterspalte ist Wir müssen es nicht einmal definieren. Lassen Sie uns dort auch eine Lücke schließen. Und jetzt können wir in diesem Div weitermachen. Wir werden ein weiteres Div erstellen. Und in diesem Div werden wir Überschrift drei mit 0.1, Hintergrund, erstellen . Und für diesen Hintergrund werden wir auch Paragraph Tech machen und im Folgenden werden wir auch ein weiteres Div erstellen. Und in dieses Div werden wir tatsächlich etwas Code einfügen. Also werden wir einen Code-Tag machen. Für dieses Code-Tag werden wir einige Klassennamen festlegen , um es ein bisschen anders zu machen. Textgrad 200 mit einer Opazität von 0,5. Für diesen Unterschied machen wir groß abgerundet, Einstreuung vier, Rand bis unten vier, und Rand weiß mit einer Opazität von 0,2 Nun zur dritten Überschrift, oder beginnen wir mit diesem Div, das diese Informationen für den ersten Block in unserem Rasterlayout enthalten wird den ersten Block in unserem Rasterlayout Dort werden wir auch den Klassennamen und den Rand festlegen, Rand weiß mit Punkt auf Deckkraft Wir werden diese Farbe häufig für die Ränder verwenden, groß abgerundet und auf sechs gesetzt Es nimmt jetzt etwas Form an und es wird noch besser sein. Nun setzen wir für den Hintergrund oder den Titel den Text auf Excel. Schrift, Fettdruck und Rand bis zu den unteren beiden. Was nun die Absatztechnik angeht, werden wir die Breite des Textes mit einer Deckkraft von 0,5 und den Rand auf die unteren sechs festlegen , und ich werde jetzt etwas Text für diesen Abschnitt hinzufügen Ich habe diesen da hingestellt. Ich bin ein leidenschaftlicher Flutech-Entwickler mit einer soliden Grundlage in Informatik und so weiter und so weiter Dann wird es unten diesen Codeausschnitt geben. Und in diesem Codeausschnitt werden wir nun Constant of Skies machen, werden wir nun Constant of Skies machen wo wir ein Array mit diesem Code erstellen, in dem wir unsere Fähigkeiten auflisten werden unsere Wir werden dort diese Schilder anbringen , die für den Abstand da sein werden Wenn wir es nicht haben, können Sie sehen, wie sich beispielsweise JavaScript am Anfang der Zeile bewegt. Lassen Sie es uns dort belassen und auch die Seite überprüfen. Ich werde dir zeigen, wie das aussieht. Wir werden weitere Blöcke hinzufügen, sodass ein gebogenes Layout entsteht, in dem wir alle Informationen über uns platzieren werden. Fahren wir mit dem zweiten fort. Und für den zweiten werden wir unter diesem Div beginnen. Da ist also die Schließung des ersten Blocks, der dann da sein wird. können wir auch tun. Dort können wir eine neue ID öffnen und drinnen können wir anfangen. Wir werden dort ein Styling hinzufügen, Rand, Rand weiß, 0,2 Adipositas, rund es groß und Bettwäsche bis sechs. Darin befassen wir uns mit Rubrik drei mit Fachwissen aus dem zweiten Block. Und da setzen wir für die Klassen Text in Excel, beide Schrift und Rand in die unteren beiden. Als Absatz fügen wir dort den Satz ein. Ich spezialisiere mich auf die Entwicklung robuster und skalierbarer Webanwendungen Lassen Sie mich es so formatieren. Wir werden weißen Text mit einer Opazität von 0,5 hinzufügen, und wir können dazu übergehen, dort ein Div zu platzieren, und in dieses Div werden wir ein Bild mit unserem Projekt einfügen Legen wir zunächst den Rand von oben fest, relativen Rand mit weißem Rand mit einer Deckkraft von 0,2, abgerundet und vier aufgefüllt. Lassen Sie uns die Höhe auf 220 Pixel setzen und den Überlauf ausblenden Nichts kommt aus diesem Block heraus. Formatieren wir es wieder so und hineinlegen können wir das Bild und dort die Quelle von Projekt eins oder von Projekt eins, dann das Layout zum Füllen, dann das Objekt, das zum Umschlag passt. Und für den Unterricht geben wir Rounded Large an. Jetzt haben wir einen Fehler bekommen, weil ich glaube, wir haben unseren Assets-Ordner falsch zugeordnet. Jetzt ist es behoben und es wird für den zweiten Block geboten, sodass wir zum dritten übergehen können. Für den dritten werden wir dort wieder ein Div benoten. Innerhalb dieses Divs machen wir Überschrift drei mit 0,3 Fähigkeiten, dann einen Absatz Tech mit einem Satz und dann ein Div, das nun zwei Listen mit einigen unserer Fähigkeiten enthält. Ich werde dort einen Satz schreiben. Ich beherrsche eine Vielzahl von Technologien und erweitere meine Fähigkeiten ständig Was die Überschrift angeht, lassen wir es so . Wir können stylen. Für das Div fügen wir also den Rand und den weißen Rand mit einer Deckkraft von 0,2 hinzu, runden ihn groß ab und füllen ihn auf sechs auf , wie bei allen unseren Blöcken Für die Fähigkeiten fügen wir dann Text zu Excel, Schriftbolzen und Rand unten hinzu. Und jetzt können wir zu DIV selbst das Raster und dann den Abstand zu vier hinzufügen . Wir haben also einen gewissen Abstand dazwischen, und jetzt können wir dort mit einem Div innerhalb dieses Dips beginnen Wir machen Überschrift vier für das Frontend und die ungeordnete Liste In dieser ungeordneten Liste werden wir ein Element auflisten und dort zum Beispiel React platzieren Dort können wir Typoskript einfügen. Dort können wir Tailwind, CSS oder Frame Motion einfügen CSS oder Kommen wir nun zum Styling, kopieren Sie dann einfach die unten stehende ID und ändern Sie sie in das Backend Dort fügen wir einen weißen Rand mit zwei Punkten zur Deckkraft hinzu, runden ihn groß ab und fügen etwas Polsterung Für die Überschrift fügen wir den Text grau, 300, die mittlere Schrift und den unteren Rand hinzu Für die ungeordnete Liste verwenden wir breiten Text mit einer Opazität von 0,5, Leerzeichen von 1 und einen kleinen Text Jetzt können wir einfach diesen Diff kopieren, ihn darunter platzieren und ihn in das Backend ändern Und für die Listenelemente geben wir dort zum Beispiel kein JS ein, dann können wir Python machen, dann Postgress und AWS Als Beispiel. Jetzt werden Sie die Seite überprüfen. So sieht der dritte aus. Und jetzt haben wir zwei Möglichkeiten. Wenn uns das aktuelle Layout nicht gefällt, können wir auch ihre Rasterspalten einfügen. Es wird also so nebeneinander sein. Oder wir können stattdessen ihren Text in die Mitte stellen. Also wird es so sein. Ich denke, ich werde es wie Text in der Mitte belassen, sodass es den gesamten Block einnimmt, aber es kann leicht geändert werden. Gehen wir zu den letzten drei Blöcken. Das heißt, wir werden zurück zur IDE gehen. Wir werden überprüfen, wo dieses Div endet, und im Folgenden werden wir ein neues öffnen. In diesem neuen Div werden wir Klassen für das Rasterlayout verwenden. Wir werden dort auf dem mittleren Bildschirm sitzen, die Rasterspalten zwei, Abstand bis acht und der Rand oben bis acht. Dann werden wir drinnen ein weiteres Div erstellen. Der Rand ist breit mit einer Deckkraft von 0,2, breit abgerundet und sechsmal eingestreut Im Inneren werden wir erneut ein Div erstellen . Dieses Div wird ein anderes Div enthalten Lassen Sie uns das Leerzeichen Y vier hinzufügen. Wir haben einen gewissen Abstand zwischen ihnen und wir werden ein Div haben, das ein Label tragen wird Frontend und Progress, das ist der Fortschrittsbalken oder die Het CN-Komponente , die wir dort importiert haben. Wir werden dort einen gewissen Wert für den Fortschritt angeben. Ich werde 90 als 90% angeben. Für den Klassennamen setze ich den Hintergrund grau, 300 mit 0,2 Adipositas, und für die Farbe des Fortschrittsbalkens verwenden wir die TilinTSS-Syntax, Fortschrittsbalkens verwenden wir die TilinTSS-Syntax die ein direktes untergeordnetes DIV-Element anspricht Wir werden Sie also dort und größer als DI background gray 100 mit einer Wir müssen diesen Fortschritt auch abschließen. Jetzt wirst du es speichern. Und wenn du auf unserer Seite nachschaust, wird der Fortschrittsbalken so aussehen. Jetzt werden wir das kopieren und noch zweimal einfügen. Wir werden die Werte für den Fortschrittsbalken und die Beschriftungen ändern . Das zweite mache ich im Backend, das dritte, DevOps. den Fortschritt für das Backend angeht, werde ich 85% für DevOps angeben, ich kann 75 machen, zum Beispiel fügen wir jetzt auch eine Überschrift unter diesen Fortschrittsbalken mit einem Absatz hinzu und ich werde den vierten Blockansatz Ich werde diese Klassen dort wie bei den vorherigen Überschriften und Absätzen platzieren wie bei den vorherigen Überschriften und , wobei der Text ebenfalls eine Ich glaube daran, sauberen, wartbaren Code zu schreiben und bewährte Methoden zu befolgen, Jetzt ist es Zeit für den fünften Div. Lassen Sie uns ihn unten erstellen. Div, wo wir ein anderes DIV öffnen und dort nur ein Bild einfügen können. Und wir geben die Quelle von Projekt zwei an, Projekt zwei, dann das Layout so, dass es fehlschlägt, auch das Objekt passt zur Deckung und den Klassennamen wird groß gerundet. Jetzt müssen wir auch das Styling für die beiden Wrapping-Diffs hinzufügen für die beiden Wrapping-Diffs Lassen Sie uns ihren Rand weiß setzen, auf Adipositas hinweisen, groß abgerundet, Bettwäsche auf sechs Dann legen wir für das innere Div eine gewisse Höhe fest. Lass uns 200 Pixel machen. Überlaufen wir Hidden, Bedding auf vier, wir können einen zusätzlichen Rahmen hinzufügen und wir legen auch die relative Klasse fest, speichern sie Jetzt wird es so aussehen und es gibt einige Korrekturen, die wir vornehmen müssen Aber lassen Sie uns das zuerst mit dem nächsten Div und dem letzten Block beenden . Lassen Sie uns ein Div mit drei Überschriften erstellen . Mein Ziel ist es, als Entwickler weiter zu wachsen. Auch hier werden wir für die dritte Überschrift einige Klassen wie Text zu Excel, Phone Both und Margin Bottom Six hinzufügen . Schauen wir uns nun an, wo wir auf unserer Seite etwas korrigieren müssen. Und ich glaube, ich verstehe das Problem. Was wir tun sollten , ist, dass wir dort den fünften Block platzieren und diesen Block auch mit diesem Inhalt erweitern werden . Jetzt werden wir ihn formatieren. Lass uns die Entwickler überprüfen. Das sollte so sein. Lass es uns speichern. Die andere Sache, die wir korrigieren müssen , ist , dass wir dieses abschließende Tag dieses Divs für das Grid verwenden, derzeit nur die Front-End-Backend-Devops und den Fortschrittsbalken umschließt , und wir nehmen das abschließende Tag dieses Divs, schneiden es aus und setzen es tatsächlich hinter das abschließende Tag des Divs , das diese Ziele enthält Also hier und jetzt müssen wir einen der abschließenden Diffs unten nehmen und ihn tatsächlich über diesem Div platzieren , das dieses Grid-Layout definiert. Wir werden es dort hinstellen. Jetzt werden wir eine Seite wie diese bekommen. Lassen Sie mich es Ihnen tatsächlich in dem Browser zeigen , den ich für die Reaktionsfähigkeitsprüfung verwende So wird es also auf der Desktop-Version aussehen. Und da, wie würde es auf der mobilen Version aussehen ? Jetzt fügen wir unserem Abschnitt Über uns Farben hinzu. Das heißt, wir gehen zur IDE, und wenn du dort sutural F machst und dort eine graue Farbe findest, kannst du diese wahrscheinlich durch lila Farbe ersetzen , weil , die ich im Hero-Bereich erstellt habe wir sie an die Farben anpassen müssen Das heißt, wir müssen diese grauen Farben durch eine violette ersetzen diese grauen Farben durch eine violette ersetzen Wenn du das Tool zum Ersetzen nicht für alle grauen Farben verwenden möchtest , kannst du sie einfach manuell überprüfen, um zu sehen, ob dir vielleicht irgendwo eine graue Farbe hinzugefügt wird , die du nicht ersetzen möchtest. Andernfalls ersetzen Sie diese grauen Farben einfach durch eine violette Farbe. Jetzt ist keine graue Farbe mehr übrig Wenn Sie sie speichern und die Seite überprüfen, sieht sie so aus. Wir können die Reaktionsfähigkeit auch anhand der Farben noch einmal überprüfen der Farben noch einmal Lass es uns für das Handy überprüfen. Eine weitere Korrektur, die wir an unserem Abschnitt Über uns vornehmen werden , besteht darin, diesen Link aus GAPD zu löschen , da es sich um einen Tippfehler handelte Jetzt wird es mit Gabbid funktionieren, und es wird den Abstand zwischen den Blöcken in der ersten Reihe festlegen Und das wird für den A-Bereich sein. Jetzt können wir zum nächsten übergehen, das wird die Logo-Animation sein. 5. Logo-Animation: Erstellt die Logo-Animationskomponente in Komponenten und importiert sie dann auf die Seite T six dort auf der Homepage. Und jetzt können wir mit der Codierung der Logo-Animationskomponente fortfahren . Für Logoanimationen werden wir zunächst den Use-Client für diese Komponente deklarieren , da wir ihre dynamischen Benutzeroberflächenaktualisierungen für die unendliche Logoanimation erhalten werden. Wir werden mit den Importen fortfahren. Bei Importen importieren wir das Bild aus dem nächsten Bild, dann die Bewegung aus dem Frame oder der Bewegung und darunter die Bilder aus den Assets. Falls Sie noch nicht über die Bild- oder Bewegungsbibliothek verfügen , öffnen Sie das Terminal und führen Sie npMiframR Dann wird es funktionieren. Wir werden mit der Erstellung eines Arrays fortfahren, das als Images bezeichnet wird. Und darin werden wir Quelle und Quelle des importierten Bildes haben , das wir dort haben, was nur der Name des Logos sein wird. Ich hatte schon einmal Figma. Jetzt habe ich die Uremi, damit das behoben werden kann. In der Logoanimation beginnen wir mit einem Div und zu diesem Div fügen wir bis acht vertikale Polsterungen hinzu, einen Hintergrund , den wir später ändern oder an unser Design anpassen können später ändern oder an unser Design anpassen Wir werden dort auch die Opazität auf 0,8 setzen, was bedeutet, dass wir dort nicht unbedingt die Opazität von 0,1 auf unsere Farbe anwenden müssen Opazität von 0,1 auf unsere Wir werden mit einem anderen Div weitermachen und dieses Div wird die Klassen Container und Mix-Auto haben , um es zentriert zu haben Dann wird es im Inneren eine weitere geben, in der eine Klasse von Overflow versteckt ist und auch eine weitere Klasse, die den Effekt erzeugt , dass unsere Logoanimation von links weg verschwindet und wieder auf dem Bildschirm auf der rechten Seite erscheint, mit der Einstellung Sie werden den Effekt sofort sehen nachdem wir die Elemente selbst hinzugefügt In diesem Div werden wir ein Motion-Div für die Animation hinzufügen. Wir werden dort einige Schwanzweitenklassen für das Flexbox-Layout, Gap auf 14, Flex auf None und Betting to Right auf 14 festlegen für das Flexbox-Layout, Gap auf 14, Flex auf None und Betting to Right auf Wir fügen das Animate to Translate X -50% hinzu, um die Animationseigenschaften festzulegen. Das bedeutet, dass diese Animationseigenschaft den Inhalt horizontal verschiebt und -50% bedeutet , dass er sich um die Hälfte seiner Breite nach links bewegt. In Kombination mit der entsteht ein kontinuierlicher unendlichen Wiederholung in der Übergangseigenschaft, die wir direkt unten haben, entsteht ein kontinuierlicher Scroll-Effekt unendlichen Wiederholung in der Übergangseigenschaft, die . Dort setzen wir auch die Dauer auf 35. Wie bereits erwähnt, ist die Wiederholung bis ins Unendliche linear und die Wiederholung vom Typ Schleife. Vielleicht fragst du dich auch, warum wir so viele Artikel und doppelte Artikel in unserer Bildersammlung haben. Das liegt daran, dass wir unsere Logos brauchen , die spezifische Breite haben müssen. Wenn es nur vier Elemente gibt, können wir diese Schleife nicht unendlich machen , weil dann nur vier Elemente herumlaufen und es so aussieht, als würden nur einige Elemente fehlen. Deshalb können wir diese Elemente einfach duplizieren, sagen wir, zweimal, und es entsteht diese Endlosschleifenanimation. Wenn Sie so viele Logos haben , die Sie in diese Logoanimation eingeben möchten, müssen Sie sie nicht duplizieren. Im Inneren werden wir das Mapping über das Bildarray durchführen , wobei das Bild das aktuelle Element des Arrays und der Index seine Position ist. Dann fügen wir das Bild-Tag und setzen den Schlüssel auf Index, Quelle als Bildpunktquelle, alt asimaged, das wir in unserem Array haben Und auch die Höhe ist zu dreckig. Wir werden es speichern und sehen , dass die Komponente jetzt funktioniert. Dort können Sie auch das Transparente von links und rechts sehen und sehen, wie die Animation so aussieht, als würde sie nach links verblassen und langsam von rechts erscheinen Um diese Reaktionsfähigkeit zu überprüfen, gibt es im Grunde nicht viel zu Auf dem kleineren Bildschirm werden nur weniger Logos gleichzeitig angezeigt Jetzt, wo wir es haben, werden wir diese Logo-Animationskomponente nehmen und sie zwischen dem Heldenbereich und dem Info-Bereich platzieren. Lassen Sie uns nun die Komponente öffnen und dort den Rand Y 224 einfügen. Das bedeutet, dass wir zusätzliche vertikale Abstände um unsere Logoanimation herum erstellen zusätzliche vertikale Abstände werden. Außerdem können wir dort diese violette Farbe auf, sagen wir , 300 erhöhen und jetzt können wir die Seite überprüfen. Und wir werden ihre Logo-Animation wie diese haben. Wenn Sie das etwas anders gestalten möchten, können Sie zum Beispiel das schiefe Y Three hinzufügen , es speichern, und dann sieht die Logoanimation so aus Wenn Sie es auf einer anderen Seite machen möchten, fügen wir den Bindestrich ein, speichern ihn und er wird sich ändern Meine Option wäre also ohne Schräglage, und dann können wir mit einem anderen Abschnitt weitermachen, und das wäre ein Portfolio 6. Portfolio: Wir werden eine Portfolio-Komponente erstellen und sie auf unserer Homepage unter der „Über uns“ -Komponente platzieren. Wir werden zunächst clientseitige Funktionen mit dem Use-Client aktivieren . Dann importieren wir React und verwenden State Hook mit Effect Hook. Dann importieren wir das Bild aus dem nächsten Bild. Wir werden Projektbilder aus dem Assets-Ordner importieren , den wir anzeigen werden. Ich werde konstante Projekte erstellen und dort für jedes Projekt eine ID erstellen Ich werde hier erstellen. Ich werde einen Titel erstellen. Ich werde eine kurze Beschreibung erstellen und auch das Bild einfügen. Im Folgenden werde ich weitere Projekte hinzufügen, und es wird so aussehen. Ich werde drei Projekte in der Portfoliokomponente verwenden . Ich werde den Status für die ausgewählten Projekte mit dem Folding zum ersten Projekt initialisieren die ausgewählten Projekte mit dem Folding zum ersten Projekt Also machen wir Projekte und zuerst im Array mit Null Dies wird die Zustandsvariable sein, und damit werden wir sie setzen. Jetzt können wir direkt zurückkehren. Dort werden wir mit dem Abschnitt beginnen. In diesem können wir die Portfolio-ID erstellen. In einem Klassennamen machen wir PY 32 und schreiben Text auf Weiß. In diesem Abschnitt beginnen wir mit Überschrift zwei. Mit Überschrift zwei wird es die Überschrift der ausgewählten Projekte geben. Wir können die Projekte in Spen Tech ablegen falls wir ihnen eine andere Farbe hinzufügen möchten. Auch für das Styling von Überschrift zwei werden wir bei Text sechs Excel, Schrift, Bolzen und Rand unten bis zehn verwenden. Unter dieser zweiten Überschrift werden wir das Projekt-Array zuordnen, um die Projektelemente zu erstellen. Ich werde Projekte auf der Karte erstellen. Der Name des Elements in der Iteration wird Projekt sein. Dort können wir unsere Suche in diesem Div öffnen, wir werden einen Schlüssel als Projekt-Punkt-ID setzen Wir werden die OnClick-Funktion einstellen. Und die Onclick-Funktion wird die Einstellung der Zustandsvariablen Dort werden wir das ausgewählte Projekt festlegen. Zum Projekt. Jetzt werden wir weiterführende Kurse machen. Das sind Cursorzeiger, Rand nach unten und Gruppe. Wir werden mit der Anzeige des Projekts hier fortfahren. Wir werden hier die Paragraph-Technik mit Project Dot durchführen. Jetzt werden wir etwas Styling hinzufügen und das wird eine andere Schriftfarbe haben. Auch Text groß und Rand nach unten und darunter können wir mit Überschrift drei fortfahren. Diese dritte Überschrift wird den Titel des Projekts mit Punkt tragen. Das Styling, das wir dort hinzufügen werden, ist textfreies Excel, Schrift Semi Bolt, Group , unser Text grau 400 , Übergangsfarben, Dauer, 300, und das werden wir noch tun. Lassen Sie uns die Anführungszeichen mit den geschweiften Klammern zurücksetzen. Denn im Inneren werden wir prüfen, ob es sich bei diesem Projekt um das ausgewählte Projekt handelt, und falls ja, werden wir die andere Textfarbe anzeigen Lassen Sie uns sagen, dass die ausgewählte Projekt-ID der Projekt-ID entspricht, dem Turner-Operator, und falls ja, werden wir den Text grau 200 machen , falls nein, werden wir nichts tun Die falsche Position wird also leer sein. Wir werden Übergangsfarben verwenden, da dies einen reibungslosen Übergang speziell für die farbbezogenen Eigenschaften ermöglicht einen reibungslosen Übergang speziell . Da wir diese Gruppe verwenden, wird sie jedoch praktisch sein. Jetzt können wir bereits auf unserer Seite sehen , dass wir weiterkommen, und wir werden nun damit fortfahren, die Trennlinie anzuzeigen , falls das Projekt ausgewählt ist Ich werde ihre Bedingung erfüllen. Diese Projekt-Punkt-ID entspricht also der Projekt-ID, im Grunde dieselbe , die wir dort verwendet haben, aber wir müssen keinen Turn-Operator verwenden Wir werden das nur bedingtes Rendern machen. Falls das wahr sein sollte, werden wir ein leeres DIV anzeigen. Und zu diesem Div werden wir die Klasse Border Bottom Two mit Border Grey 200 und MI ( Vertikaler Rand) zu vier hinzufügen Klasse Border Bottom Two mit Border Grey 200 und MI . Jetzt können Sie auf unserer Seite sehen, dass wir das erste Projekt ausgewählt haben, das da ist. Wenn ich das zweite oder dritte einstelle, bewegt es sich. Ein weiteres bedingtes Rendern werden wir machen, damit wir es einfach kopieren und einfügen können das wird in der Projektbeschreibung stehen. Falls das Projekt ausgewählt wird, zeigen wir die Projektbeschreibung an. Ich öffne einfach dieses Div, füge dort eine Projektpunktbeschreibung und ändere dieses Div-Tag in ein Absatz-Tag. Außerdem werde ich ein bisschen andere Klassen hinzufügen. Ich brauche die Grenze nicht. Ich füge den Text grau, 400, Übergang über die gesamte Dauer, 500 und die Lockerung hinzu, damit der Text reibungslos angezeigt wird Jetzt werden wir zum Anfang dieser Rückkehr scrollen und dort im Abschnitt ein Div erstellen und dieses Div um dieses Mapping wickeln Div um dieses Mapping Für dieses Div werden wir nun einige Klassen hinzufügen. Fangen wir mit der maximalen Breite von sieben Excel an, mischen dann Audio, px vier, das sollte es vorerst sein. Wir werden uns nach unten und unter dieses Div bewegen. Wir werden dort ein Bild-Tag in dieses Bild-Tag einfügen. Wir werden die Quelle auf das ausgewählte Projekt Dot Image Dot SRS setzen. Für alle werden wir den ausgewählten Projekttitel mit Punkt angeben. Für den Klassennamen runden wir ihn ab, Excel, Shadow Large, Transition Opacity, Dauer 500 und das alles für eine reibungslose Animation Außerdem setzen wir die Breite auf 800, die Höhe auf 450. Wir werden es speichern. Jetzt sollte es in Ordnung sein. Jetzt müssen wir ein bisschen mit den dortigen Unterschieden spielen Lassen Sie mich das zusätzliche Div hinzufügen, um diese Projektinformationen, die wir dort erstellt haben Nun zum zweiten Div, das wir dort haben. Wir werden Klassen für das Rasterlayout hinzufügen und auf einem großen Bildschirm werden wir Grid Calls Two mit Gap 212 verwenden. Nun sollte es dieses Div brauchen und natürlich das Schließen des zweiten Divs, das wir weiter unten eintragen werden. Jetzt auf der Seite, es wird in Ordnung sein. Jetzt werden wir auch den Code formatieren. Sie werden die Div-Struktur besser sehen. Das sollte noch einen drauf gehen. Das sollte auch einen Schritt weiter gehen, wir werden das verschieben, und das sollte in Ordnung sein. Also fangen wir dort mit dem Bereich Technik an und setzen uns mit DIV fort. In diesem Div haben wir ein Div, das die Projektinformationen und auch das Bild mit dem Projekt selbst enthält. Und jetzt werden wir es auch in eine andere Farbe oder in eine Farbe Ihrer Wahl ändern . Also lass uns ein Purpur rausbringen. Dann lass uns zu einer anderen grauen Farbe gehen , wo wir sie ändern wollen. Es wird das für mich sein. Nun wollen wir sehen, wie das aussehen wird, und ich möchte dort definitiv nicht eine graue Farbe ändern, und das wird die mit der Beschreibung sein. Lassen Sie mich also überprüfen, welche es ist, und es ist diese, diese sollte grau bleiben. Dann können wir die Seite überprüfen. 7. Schlüsselkennzahlen: Jetzt werden wir mit der Erstellung der wichtigsten Matrixkomponente fortfahren. Das heißt, erstellen Sie es dort, importieren Sie es dann wie für jede Komponente in HT Six und lassen Sie uns mit der Codierung fortfahren. Wir beginnen mit der Deklaration des Use-Clients, um anzuzeigen, dass diese Komponente Funktionen von Websites verwenden wird Dann werden wir React und Motion importieren und aus der Framer Motion Library verwenden und anzeigen Und wir werden eine Reihe von metrischen Objekten definieren, von denen jedes Informationen über eine bestimmte Metrik enthält Und im Inneren beginnen wir mit dem ersten Element , das eine ID, einen Wert, eine Bezeichnung und eine Beschreibung enthält. Jetzt werde ich einige zusätzliche metrische Elemente hinzufügen . Sie können sich inspirieren lassen. Ich habe dort mehr als fünf Jahre Erfahrung, 50 abgeschlossene Projekte, dann Codequalität und Kommentare auf Github. In der Komponente „Schlüsselmetriken beginnen wir mit der Erstellung eines R, das wir in View Hook verwenden werden. Wir werden eine Version mithilfe des reaktiven Rev-Hooks erstellen , der an das Abschnittselement angehängt wird Die Referenz wird als HTML-Element eingegeben, da sie für das Abschnitts-Tag verwendet wird Anfangswert ist Null, da die Referenz noch keinem Element zugeordnet wurde Diese Referenz wird zusammen mit der Verwendung von ViewHok verwendet , um zu erkennen, wann der Abschnitt in den Viewport gelangt Dann verwenden wir den Hook us in view, um festzustellen, ob sich die Komponente im Viewport befindet Wir werden die Referenz und die Einsen verwenden, um zu fallen. Die Referenz ist der Verweis auf das Element, das wir beobachten wollen Sobald der Wert falsch ist, legen wir fest, dass der Hook die Sichtbarkeit des Elements kontinuierlich verfolgt. Im Gegenzug werden wir einen Bewegungsbereich erstellen. Wir setzen dort Ref Ref, Ausgangszustand wird unsichtbar sein und 50 Pixel darunter liegen. Animate verwendet einen Zehner-Operator und prüft, ob er in der Ansicht wahr ist Ich setze die Sichtbarkeit oder Opazität auf eins und dann auf den endgültigen Status Und falls es falsch ist, wird es auf unsichtbar, Opazität Null und wieder 50 Pixel niedriger gesetzt Opazität Null und wieder 50 Pixel niedriger Die Animationsdauer beträgt 0,8 Sekunden, und die Klassen sind Container und Mix to zu zentrieren, weil der Container eine gewisse Breite hat, dann eine gewisse Betteneinstellung und der Text wird weiß Wir werden den zweiten Antrag H hinzufügen , um ihn für die Überschrift der wichtigsten Kennzahlen zu verwenden. Der Anfangszustand wird Opazität Null und Y 220 sein. Animate verwendet erneut den Turno-Operator tatsächliche Position, sichtbar bei der Kraftposition unsichtbar, Übergang mit einer Verzögerung von 0,2 Sekunden und einer Dauer von 0,6 Sekunden Und für Klassennamen setzen wir die Textgröße auf Text, sechs, Excel, Schrift auf Fett und Rand auf 12 unten. Wir werden mit einer anderen Tiefe fortfahren , bei der ein Rasterlayout verwendet wird. Wir werden die Rasterspalten für den mittleren und großen Bildschirm festlegen . Und wir werden dort auch eine Lücke von acht setzen. Wir haben also eine gewisse Lücke zwischen den Elementen. Im Inneren beginnen wir mit der Abbildung über das Matrix-Array. Metrik wird der Name des Elements sein und die Position indexieren. Wir werden die Bewegungsdiskette erstellen und der Schlüssel wird die metrische Punkt-ID sein. Wir werden den Anfangsstatus und auch hier wieder die Animation festlegen, bei der wir den Turn-Operator verwenden werden , genau wie zuvor, weil wir diese Animation jedes Mal, wenn wir sie im Viewport haben, immer wieder auslösen möchten jedes Mal, wenn wir sie im Viewport haben, immer wieder der Umstellung darauf, dass alle Metriken einem anderen Zeitpunkt angezeigt werden, fügen wir auch einen neuen Indexwert und multiplizieren ihn Das bedeutet, dass jeder Index einen höheren Wert hat und dadurch der Welleneffekt entsteht, bei dem der erste Index schneller angezeigt wird als der letzte. Außerdem wird ein Flexbox-Layout mit Flex-Richtungsvolumen verwendet , sodass die Elemente untereinander angeordnet werden Dann werden wir Überschrift drei erstellen. In dieser dritten Überschrift werden wir den metrischen Punktwert anzeigen. Wir werden die anfängliche Animation und den Übergang genau so einstellen , wie ich es im obigen Div angezeigt habe Und die Klassennamen werden wir dort für unseren metrischen Wert auf Text fünf Excel, Schriftbolzen und etwas Farbe setzen unseren metrischen Wert auf Text fünf Excel, . Wir legen auch die unteren beiden Ränder fest. Unter dieser Überschrift werden wir mit Antrag B für den Absatz Technik fortfahren . Wir werden die metrische Punktebezeichnung festlegen. Auch hier legen wir die anfängliche Animation und den Übergang fest, und die Klassennamen lauten Text Excel, Schrift Semi Volte und Margin Bottom Dann machen wir einen weiteren Bewegungspunkt B für das Absatz-Tag, der die metrische Punktbeschreibung enthält Wir können es einfach kopieren und einfügen und die Rückenwind-Klassen für Text Gray 400 ändern . Das gilt dann für unsere wichtigsten Kennzahlen Und was die Farben angeht, wird es einfach sein. Auch hier ändern wir es einfach gegen ein lila, speichern es und wir können auch die Überschrift für ein lila ändern. Eigentlich sollte dieser grau bleiben, da es sich um einen Text handelt. Dieser sollte lila sein. Und für die Schlüsselmatrix können wir sie weiß belassen. Es gibt also nicht überall auf unserer Seite lila Farbe. 8. Stapel: nun zur Stack-Komponente übergehen, werden wir erneut SC DTS six in Components erstellen und es dort auf unsere Seite DTS six importieren, und wir werden es unter dem Portfolio-Bereich platzieren Für die Stack-Komponente werden wir diese Importe durchführen Falls Sie diese Bibliotheken noch nicht haben, öffnen Sie ein Terminal, führen Sie NPM, I aus und kopieren Sie diese Bibliotheken dorthin Zum Beispiel dieser React Intersection Observer. Das werden wir verwenden, damit die Animation wieder angezeigt , um dies mithilfe der Ansicht wird , um dies mithilfe der Ansicht zu erreichen, wenn wir auf und ab scrollen, diese Animation des Stapels wird wieder angezeigt Dann Framer-Bewegung. Nochmals, falls du das noch nicht hast, einfach NPM, ich und setze es dort ein, reagiere Icons. Wir können es auch dort platzieren Das bedeutet, dass wir mit den Symbolen, die wir für unseren Stack verwenden werden, Zugriff auf diese Bibliotheken haben. Wenn wir uns jetzt zusammensetzen und die Bibliotheken installieren, habe ich sie schon, aber ich kann es einfach noch einmal machen Bevor wir nun die Stack-Komponente definieren, werden wir dort eine Reihe von Stack-Elementen erstellen Mit C stapeln Sie Elemente. Und dort haben wir für jeden Artikel eine ID und dann einen Namen. Zuerst wird ein Framer sein, dann das Symbol, das erste Symbol das Framer-Symbol mit einer Größe Dann bei Farbe kann ich mich erstmal hinsetzen und den Text grün 200 schreiben, und dann können wir das Komma setzen und es dort so oft einfügen, wie Ich werde die Namen und Symbole aktualisieren, und ich habe auch einige andere Symbole für die anderen vier Symbole ausgewählt die anderen vier Symbole weil es einige Platzhaltersymbole gab Jetzt werden wir Framer Figma, React Note, Mongo Di B und Docker verwenden React Note, Mongo Di B Dann gehen wir weiter nach unten und beginnen dort mit der Definition von Animationsvarianten für die Animationsvarianten für Ich beginne mit Cs-Varianz oder Elementvarianz und setze dort Variante für versteckt, und setze dort Variante für was die Indexnummer annimmt, und dort wird die Opazität auf Null gesetzt und für X nehmen wir den Rest des Index, und wenn er Null ist, dann ist er -100 an der wahren Position und an falscher Position es Das ist ein sogenannter Turner-Operator. Auf diese Weise werden wir dafür sorgen, dass die Stapelelemente von links und von rechts verschoben werden links und von rechts je nachdem, ob dies wahr oder falsch ist Dann werden wir unten eine weitere haben , die ziemlich sichtbar sein wird. Und für diesen Fall setzen wir die Opazität auf eins, X auf Null und gehen zur Dauer drei Ich habe mit der falschen Klammer angefangen da muss ich Carl eins machen Lassen Sie uns das durch das Quadrat ersetzen, und im Folgenden können wir damit beginnen, die Stack-Komponente selbst zu definieren. Im Inneren beginnen wir mit der Einrichtung der Animationssteuerungen. Ich werde ständig kontrollieren und Animationen verwenden. Dann richten wir den Schnittpunkt-Observer ein. Das heißt, wir stellen das Ding jetzt ein, wir importieren es dort. Und damit wird diese Animation wieder erscheinen, wenn wir diese Komponente wieder in unseren Viewport bringen Dort mache ich eine Konstante, und ich werde die Referenz und in View für die Verwendung in View verwenden Drinnen werde ich Threshold 2.1 machen. Dann werde ich mit der Einstellung des Use-Effect-Hooks fortfahren , um die Animation basierend auf dem Anzeigestatus auszulösen . Ich verwende den Effekt dann im Inneren, ich mache die Konditionierung, und wenn das sichtbar ist, werden wir Steuerungen machen , die mit sichtbar beginnen. Und wenn es nicht sichtbar ist, mache ich Steuerungen, die zunächst unsichtbar sind. Welche dieser beiden Artikelvarianten gibt es? Und dann werden wir dort sagen , dass dieser Effekt immer dann ausgeführt wird wenn die Steuerelemente sichtbar sind Abhängigkeiten werden sich ändern. Das heißt, er löst die Animation startet, wenn die Komponenten sichtbar werden, und dass die Animation auch wird, wenn sie aus der Ansicht entfernt wird. Dort werden wir ein Abschnitts-Tag erstellen und innerhalb dieses Abschnitts-Tags beginnen wir mit Div und lassen mich erklären, warum ich das zusätzliche Div mache und nicht in der Sektion. Für dieses Div möchte ich das maximale Gewicht festlegen. Im Moment machen wir etwa 250 Pixel, weil wir nur wollen, dass es vertikal und nicht horizontal ist, aber wir können auch genau das später hinzufügen und es einfach auf horizontal ändern und so einstellen, dass Ado mit Text in der Mitte gemischt wird. Wir haben also dieses Zentrum. Für die Sektion. Wenn ich einen speziellen Hintergrund für den Abschnitt hinzufügen möchte, vielleicht einen linearen Farbverlauf, könnte ich das dort machen, und es wird eine volle Breite haben. Zum Beispiel Hintergrund auf Weiß. Wir müssen dort einige Inhalte platzieren. Und lassen Sie mich dort einige Inhalte einfügen und lassen Sie mich ihren Hintergrund auf Grün setzen. Jetzt werden Sie die Unterschiede sehen. Wenn ich auf unsere Seite gehe, können Sie sehen, dass der weiße Hintergrund in diesem Wrapping Section Tag die gesamte Breite einnimmt und der Inhalt, den ich mit diesem grünen Hintergrund verwenden möchte , sich darin befindet und dass er diese maximale Stärke hat, die ich auf 250 Pixel eingestellt und zentriert habe. Wenn ich es dort im Bereich „Umhüllung“ machen möchte, nimmt es den Wandabschnitt und der eigentliche Hintergrund, den ich möchte, sieht dann so aus. Lass es mich dann so benutzen. Lassen Sie uns vorerst die Hintergründe loswerden. Dort kann ich mit Überschrift zwei beginnen. In der zweiten Überschrift werde ich meinen Stapel platzieren. Im Folgenden werde ich ein Div machen. Und in diesem Div werde ich über die Stack-Elemente iterieren In dieser Iteration der Stapelelemente werde ich ein Motion-Div Und bevor wir mit diesem Div beginnen, werde ich einfach die Überschrift und das Div, das das umschließt, stylen und das Div, das das umschließt, stylen Für meinen Stapel verwende ich Text 7, Excel, Text Grau, 200, Schrift Bolt und etwas Rand nach unten. Für dieses Div verwende ich einfach das Rasterlayout und die Standardeinstellung Gap to Eight. Es wird nur Grid Coms One geben. Das bedeutet, dass all diese Bewegungsunterschiede untereinander liegen werden, und zwar in einer Spalte Mal sehen, wie das aussehen wird. Lassen Sie uns einfach div, die Indexpunkt-ID, in Bewegung setzen. Für den Schlüsselwert und dann für den benutzerdefinierten Wert geben wir den Index ein. Dann wird dies zunächst ausgeblendet. Und natürlich nicht die Index-ID, sondern die Punkt-ID des Artikels. Dann animieren wir zwei Steuerelemente, dann Varianten zu Elementvarianten. Und für den Klassennamen setzen wir den weißen Hintergrund auf 0,1 Deckkraft Wir fahren mit dem Flexbox-Layout fort und zentrieren es, indem wir die Mitte ausrichten und die Elemente so zentrieren, dass sie horizontal und vertikal zentriert Dann Flex Raw, das bedeutet, dass die Elemente innerhalb des Steifen nebeneinander liegen Dann verwenden wir abgerundetes Excel, Shadow Large und etwas Bettwäsche. Und auf Her können wir einfach Shadow to Excel machen. In diesem Bewegungsbereich werden wir nun ein Div für das Symbol erstellen. Dort machen wir ein M-Punktsymbol. Wir können eine Klasse hinzufügen, und im Inneren mache ich den unteren Rand und das Dollarzeichen in der Farbe M-Punkt. Das heißt, dort wird dieser Klassenname mit der Punktfarbe des Elements gesetzt , und wir haben dort den Text grün 200 gesetzt. Dann haben wir das Symbol selbst und unten werden wir den Text schreiben, in dem wir den M-Punktnamen anzeigen werden. Dort mache ich Text weiß mit einer Deckkraft von 0,2, Text drei Excel, transformiere und drehe ihn um 90 Grad. Nun zu dem Tauchgang, der diese Iteration abschließt, werde ich die Referenz auf rev setzen. Das bedeutet, dass unsere Animation dadurch weiß, wann dieser Container auf dem Bildschirm sichtbar ist Wir können die Animation sehen, wie sie läuft. Es gibt nur eine Sache, die ich reparieren muss. Es fehlt uns zu unserer Drehung um -90 Grad und ich werde es aktualisieren Sie können sehen, wie die Animation funktioniert. Das Einzige, was wir für die Farben in unserem Stapel ändern werden , ist , dass wir die Farbe der Symbole dort in diesem Array-Stapel ändern werden. Ich werde für jedes der Symbole ihr Violett angeben. Dann werde ich es speichern. Und auf der Seite wird es so aussehen. Und wenn Sie die Animation wiederholen möchten, werden wir einfach den Abschnitt verlassen. Wir gehen zurück und können sehen, wie die Animation reibungslos in ihren endgültigen Zustand übergeht in ihren endgültigen Zustand 9. Dienstleistungen: Lassen Sie uns nun eine weitere Komponente erstellen und das wird services.t6 sein Wir werden wieder unsere Seite.t6 bearbeiten und mit der Codierung und Bei der Dienstkomponente werden wir innerhalb der Komponente eine Reihe von Serviceobjekten erstellen, die die Informationen über jeden Dienst enthalten die die Informationen über jeden Dienst , den wir anbieten möchten Jedes Objekt wird eine ID, Titel und eine Beschreibung haben. Lassen Sie uns ihre ständigen Dienste leisten. Und im Inneren können wir das erste Element machen, in dem wir die ID, dann den Titel und auch die Beschreibung festlegen . Jetzt werde ich weitere Dienste hinzufügen, und am Ende wird das Array ungefähr so aussehen. Im Gegenzug werden wir anstelle der leeren Fragmente dort ein Abschnitts-Tag erstellen, und innerhalb des Abschnitts werden wir weitere Elemente hinzufügen. Für den Abschnitt selbst verwenden wir den Klassennamen Text White und PY 20. Um dort eine vertikale Einbettung zu haben, fügen wir ein Div und wir fügen Tailwind-Klassen mit Container hinzu und mischen Auto mit Centrate und Flexbox-Layout, um Flex Direction Colume zu verwenden , um unsere Elemente untereinander zu Bei mittleren Bildschirmen und höher legen wir die Flex-Richtungszeile fest Das bedeutet, dass die Artikel nebeneinander liegen werden. Dann werden wir zwei Divs hinzufügen. Eines wird mit der Überschrift Dienstleistungen und das zweite mit den Artikeln aus unserem Array Am ersten Tag wird es ein Ende geben, bei dem der mittlere Bildschirm oben ein Viertel der Breite verwendet, rechts wird auf acht gesetzt, Rand zum unteren Rand wird auf 12 gesetzt und auf einem mittleren Bildschirm setzen wir diesen Rand auf den unteren Rand auf Null Im Inneren werden wir die zweite Überschrift mit Dienstleistungen machen und dort Text, sechs ExcelFont extra Bolt, Sticky Position und Top 20 platzieren, was die Position ist, an der Sie das platzieren möchten. Was bedeutet „klebrige Position“? Das bedeutet, dass bei jedem Scrollen auch die Überschrift „Dienste“ mitgescrollt wird. Wir werden ein weiteres Div hinzufügen und dort bleiben, bis die Bildschirmbreite bei mittlerer Bildschirmbreite auf 75% steigt. Im Inneren beginnen wir mit dem Mapping über das Dienste-Array. Dort wird der Artikel repariert. Wir müssen den Index nicht verwenden, da wir die Service-ID als Schlüssel verwenden werden. Und für den Klassennamen verwenden wir den Rand von unten bis 16 und Flexbox-Layout, um die Elemente am Anfang zu verwenden , weil wir unsere Elemente dort ausrichten möchten Dann werden wir zwei weitere Difs hinzufügen. Eines dient zum Speichern der Nummer, die die ID sein wird, und das zweite zum Speichern der beiden anderen Felder, Titel und Beschreibung Für den ersten Unterschied verwenden wir Text Grade 200 Color Font Bolt, Text Five Excel und Margin Right to Six Für das zweite Div müssen wir nichts tun. Im ersten Div fügen wir auch die Service Dot ID hinzu. Wenn wir es jetzt speichern, können Sie sehen, dass wir ihre Nummern für alle unsere Dienste haben . Was noch übrig ist, ist, dass wir im zweiten Abschnitt die beiden anderen Felder hinzufügen, und dann sieht der Abschnitt so aus. Für Überschrift drei legen wir den Servicepunkt-Titel fest, und für Paragraph Tech legen wir ihre Service-Punkt-Beschreibung fest. Für die Überschrift fügen wir diesen Text ebenfalls zu Excel hinzu, von den unteren beiden Seiten mit der Schraube und dem Rand. Außerdem sollten wir dieses Array nehmen und es außerhalb der Komponentendefinition platzieren, weil wir vermeiden wollen, dass es außerhalb der Komponentendefinition bei jedem Rendern neu erstellt wird. Nun, so werden diese Dienste auf anderen Geräten aussehen, und das wird es für diese Komponente sein. Lass uns mit den Farben spielen. Für die Beschreibung werden wir also eine graue Farbe hinterlassen. Für die ID werden wir eine lila Farbe angeben und das war's, und wir sind am Ende dieses Portfolios angelangt, und das wird ein Kontaktbereich mit der Fußzeile sein 10. Kontakt: Lassen Sie uns jetzt auch Kontakt und Fußzeile erstellen. Dann fügen wir es der Seite hinzu. Und jetzt können wir mit der Codierung fortfahren. Wir beginnen damit, diese Komponente als Anwendungsclient für interaktive Hover-Effekte, Port-Trigger-Animationen oder Frame-Motion-Animationen zu deklarieren als Anwendungsclient für interaktive Hover-Effekte, Port-Trigger-Animationen oder Frame-Motion-Animationen Wir importieren auch Bewegungen aus Framer-Bewegung. Wenn Sie diese Bibliothek noch nicht haben, öffnen Sie ein Terminal, Sie NPM I Frame Motion ein, die Eingabetaste und wir installieren sie Direkt zur Komponente dort werden wir mit einem Abschnitt beginnen Und zu diesem Abschnitt werden wir die Kontakt-ID hinzufügen , und für den Unterricht werden wir 32 Text bis Weiß vertikal auffüllen, und wir werden diese maximale Breite von 1.200 Pixeln mit einem Mixdo festlegen, um den Text zentriert und wir werden diese maximale Breite von 1.200 zu gestalten Wir werden dort auch einen vertikalen Abstand zu vier hinzufügen. Wir werden mit dem ersten Motion-Dip beginnen. Dieser Bewegungsabfall beginnt unsichtbar und 20 Pixel unter der endgültigen Position. Solange das Bild sichtbar ist, wird es animiert, bis es vollständig sichtbar ist und seine endgültige Position erreicht Die Animation dauert 0,8 Sekunden, daher setzen wir die Dauer für den Übergang auf 0,8 Dies wird nur einmal animiert , wenn Sie in die Ansicht scrollen. Das bedeutet, dass wir den Viewport einmal auf „true“ setzen werden. Für den Klassennamen legen wir ein Rasterlayout fest, und auf einem großen Bildschirm werden wir die Rasterspalten zwei verwenden und diese Lücke auf 16 setzen In diesem Motion-Dip werden wir ein weiteres Div erstellen und für die darin enthaltenen Elemente Space 12 verwenden. Das heißt, wir werden einen gewissen Abstand zwischen ihnen haben. Wir werden eine Bewegung H zwei erstellen, in der wir die Animationen einstellen werden. Wir werden mit der Initiale beginnen. Dies beginnt unsichtbar und 20 Pixel links von der endgültigen Position. Solange dies sichtbar ist, werden wir es sichtbar machen, und auch für den Übergang werden wir die Animation so einstellen, dass sie 0,6 Sekunden mit einer Verzögerung von 0,2 Sekunden dauert . Für den Unterricht setzen wir die Textgröße auf sieben Excel, Schriftart auf beide und das Textgrau auf 300. Im Inneren geben wir die Überschrift „Kontakt aufnehmen“ und das Berührungswort ein, das wir in den Spentex für das Berührungswort und das Span-Tag eingeben den Spentex für das Berührungswort und das Span-Tag Wir werden eine andere Textfarbe hinzufügen Ich werde jetzt den Text grau 500 setzen. Wir werden zu einem anderen Motion-Div übergehen. Dieses Motion-Div beginnt mit Opazität Null. Das heißt, es beginnt unsichtbar und 20 Pixel links von der endgültigen Position Das wird zwar sichtbar sein, wir werden es sichtbar machen, indem wir die Deckkraft auf eins setzen . Für den Übergang dauert dies wiederum 0,6 Sekunden mit 0,4 Verzögerung Für den Unterricht am Ende verwenden wir Bettzeug acht, runden es auf Excel und Leerzeichen Y acht. Das heißt, wir werden wieder etwas Abstand zwischen den Elementen schaffen , die wir in diesem Motion-Diff haben werden. Und was wir dort haben werden, wir werden im Grunde die Kontaktinformationen haben, und die erste wird sich mit der Handynummer befassen. Wir werden ihre Paragraphentechnologie für Telefon und die Anchor-Technologie für die Nummer selbst haben. Für das Div verwenden wir wieder das Leerzeichen y zwei, um den Abstand zwischen der Absatztechnologie und der Anchor-Technologie zu ermitteln. Wir werden Textgröße und -farbe für die Absatztechnologie festlegen , und dann für die Anchor-Technologie setzen wir HF auf die tatsächliche Anzahl für die Klassen. Wir werden Text zu Excel, einen Semi-Bot für das Telefon, eine andere Farbe beim Schweben und eine Übergangsdauer mit 300 hinzufügen andere Farbe beim Schweben und eine Übergangsdauer mit 300 Außerdem ein Flexbox-Layout mit Elementen zur Zentrierung und Gap 22. Dann haben wir dort auch Spentec , weil wir für das Styling einen Pfeil neben dieser Zahl hinzufügen möchten für das Styling einen Pfeil neben dieser Zahl Wir können dort eine Farbe für den Pfeil einstellen , und das wird es sein Im Folgenden werden wir mit einem weiteren Div fortfahren. In diesem Div werden wir E-Mails speichern. Es wird im Grunde das gleiche Design wir dort für das Handy hatten, aber wir werden HRF auch auf Mail und die eigentliche E-Mail umstellen, und das wird die E-Mail auslösen Wenn jemand auf den E-Mail-Link klickt, wird er beispielsweise in Windows Outlook für ihn geöffnet und bietet die Möglichkeit, eine E-Mail an uns zu schreiben Es hat wirklich die gleichen Zusatzkurse wie das Telefon, also werde ich sie nicht noch einmal durchgehen. Fahren wir mit dem nächsten Div mit der Adresse fort, und da ist das Absatz-Tag mit dem Büro und der tatsächlichen Adresse. Für die Adresse verwenden wir auch das Styling von Excel-Text, und leading relax legt den Zeilenabstand zwischen den Textzeilen fest. Im Folgenden werden wir ein weiteres Div haben, das mit Opazität Null und X 20 beginnt , wie zuvor. Das heißt unsichtbar und an einer anderen Position. Solange es sichtbar ist, wird es sichtbar sein und in der endgültigen Position dauert der Übergang 0,6 Sekunden mit einer Verzögerung von 0,6 Sekunden. Und für die Klassennamen setzen wir Breite auf volle Höhe auf volle Mittelhöhe von 400 Pixeln, abgerundet auf Excel und Overflow ausgeblendet Habe keine Inhalte außerhalb dieses Divs. Dieses Div enthält den Iframe mit der Google Map, in dem wir die Position unserer Adresse festlegen In diese Iframe-Quelle werden wir diese Google Maps-URL einfügen Wir werden die Breite und Höhe auf 100% setzen, um die volle Breite und Höhe des Containers Für den Stil verwenden wir Border Zero, um den Iframe-Rand zu entfernen Und wir werden auch den Vollbildmodus zulassen , um den Vollbildmodus zu aktivieren Laden des Lasers bedeutet , dass wir den Augenrahmen verzögert laden, um eine bessere Leistung zu erzielen. Dies sind nur die Attribute, die wir in unserer Iframe-Technologie definieren müssen in unserer Iframe-Technologie definieren So wird unser Kontaktbereich aussehen. Wir können auch die Reaktionsfähigkeit überprüfen. Da ist es auf dem Desktop, kleinen Tablet oder dem iPhone Dort drücke ich auf Aktualisieren , um die Animation zu sehen, und lass uns das einfärben. Also lasst uns die grauen Farben finden. Für die Spen-Technologie werde ich dort eine lila Farbe verwenden. Dann werde ich weitermachen und auch für den Absatztext lila Farbe hinzufügen. Also lass uns dort bearbeiten. Und da und lassen Sie uns auch die Pfeile bearbeiten , die da und da sind. Dann wird es so aussehen. Und jetzt gehen wir zur Fußzeilenkomponente über. 11. Fußzeile: Footer-Komponente, wir werden diese Symbole aus der React-Icons-Bibliothek importieren diese Symbole aus der React-Icons-Bibliothek Dann definieren wir das Array, das Array von sozialen Links, das wir in unserer Fußzeile anzeigen werden, und wir werden dieses Array außerhalb der Komponente definieren, da eine Definition innerhalb der Komponente bedeutet, dass es bei jedem Rendern neu erstellt wird Seine statischen Daten hängen nicht von Requisiten oder dem Status der Komponente ab, also können wir sie dort belassen In diesem Fußzeilentext verwenden wir die Klassennamen relativer Klassen, wir die Klassennamen relativer da wir absolut positionierte Elemente verwenden werden absolut positionierte Elemente verwenden Wir machen die vertikale Polsterung auf acht, maximale Breite auf 1.200 Pixel, zentrieren es mit Mix auto und stellen horizontale Padding so ein, dass wir dann einen Unterschied erzeugen Und innerhalb dieses Divs werden wir drei weitere Divs erstellen. Diese drei Divs werden leer sein. Das Div, das diese drei umschließt , wird die absolute Position Wir werden Inset Zero verwenden, und wir haben Overflow versteckt Inset Zero setzt alle vier Seiten auf Null. Bei mittlerer Bildschirmgröße werden wir dies ausblenden, da wir einen anderen, absoluten Einschnitt zeigen, der diese Styling- oder Designelemente Die Funktionsweise dieser Unterschiede besteht darin, dass sie an einer beliebigen oberen und linken Position positioniert sind oberen und linken Position positioniert Dann haben sie eine unterschiedliche Breite und Höhe. Dann haben sie eine andere Farbe oder sie können eine andere Farbe haben. Dann ist dieser erste ein Kreis, der zweite und der dritte ist nur abgerundet. Dann können sie eine andere Deckkraft haben und der Translate verschiebt das Div um 50% vertikal und horizontal Wir werden das kopieren und einfügen, und das wird tatsächlich die Desktop-Version sein, und die erste war mobil, weil wir das jetzt verstecken und auf dem mittleren Bildschirm und höher zeigen wir das als Block Es hat dieselben Klassen, aber wir stellen dort verschiedene Positionen, unterschiedliche Breiten, unterschiedliche Höhen ein, und dann können wir auch unterschiedliche Deckkraft und so weiter einstellen Im Folgenden erstellen Sie einen weiteren Einschnitt mit relativer Klasse, dem Index auf zehn und dem Text in der Mitte, wobei auch der Rand von oben bis acht reicht Im Inneren werden wir die Überschrift eines Tags mit John Doe erstellen. Da John Doe einen sehr kurzen Vor- und Nachnamen hat, kannst du dort vielleicht nur deinen Nachnamen oder deinen Vornamen angeben. Hängt wirklich von dir ab. Wir werden es dort verstecken und auf dem mittleren Bildschirm werden wir das wieder anzeigen. Wir werden den Text auf zehn RAMs bei mittlerer und großer Größe einstellen und die Textgröße erhöhen. Wir werden den gefundenen fetten Text auf Weiß und die Opazität auf zehn setzen Weiß und die Opazität auf zehn Dieser Text sollte ebenfalls nicht sichtbar sein. Ich weiß, dass der Text sehr groß ist, aber er sollte das volle Gewicht annehmen und wir verringern die Opazität, sodass wir nur geringfügig sichtbar sind sodass wir nur geringfügig sichtbar Für den mobilen Bildschirm werden wir es wieder tun, aber ich werde die Break-Technologie verwenden, um John und Doe in einer anderen Leitung zu haben Was ich auch tun könnte, ist einfach die Textgröße zu verringern. Wir werden mit einem anderen Div weitermachen , der tatsächlich die sozialen Netzwerke veranstalten wird. Wir werden den Rand von oben, Flexbox-Layout, auf kleinerem Bildschirm einstellen , wir werden dort eine Rechtfertigung zwischen den Elementen einstellen, das heißt, wir haben keinen Abstand zwischen den Elementen Andernfalls verwenden wir Justify center und item center um Objekte horizontal und vertikal Wir werden dort eine Lücke setzen, und nach diesem Breakpoint setzen wir die Flex-Richtung auf Coolum Das bedeutet, dass die Elemente untereinander liegen werden. Wir werden dort Paragraph Tech platzieren wobei alle Rechte vorbehalten sind, und wir werden den Text mit 200 bewerten Dann werden wir eine geordnete Liste mit Flexbox-Layout, Gap 25 und Flex Wrap erstellen Gap 25 und Flex Das heißt, wenn Artikel die Zeile überschreiten, werden sie nach unten umgebrochen Drinnen werden wir die sozialen Links kartografieren. Unser Array haben wir dort erstellt. Und da strukturieren wir das HF-Symbol und die Bezeichnung in unserem Array. Und das bedeutet, dass wir jetzt, anstatt den Punkt, das Hf-Symbol oder das Label von Soclinks in die Funktion schreiben zu müssen, direkt auf das HF-Symbol und die Bezeichnung als individuelle Variablen zugreifen können das HF-Symbol und die Bezeichnung als individuelle Variablen Wir werden ein Ankerdeck erstellen und wir werden Schlüssel als Label HF als Hf Area Label als Label und Klassenname setzen, wir werden Textgrau 200, Flexbox-Layout, Items Center und Justify Center setzen, um diese vertikale und horizontale Breite und Höhe auf zehn zu zentrieren, auf voll zu runden, und onHver werden wir Text Grau 100 mit Übergangsfarben machen . Im Inneren werden wir ein Icon mit einer eingestellten Größe von 30 erstellen. So wird unsere Fußzeile am Ende aussehen, und wir können auch die Reaktionsfähigkeit überprüfen Und jetzt können wir die Deckkraft der Farben für jedes Element anpassen und das Design an unsere Bedürfnisse anpassen Und jetzt liegt die Fußzeile auch ein bisschen bei Ihnen. Sie können es bei diesen gräulichen Farben belassen , wie wir es dort haben, oder Sie können die violetten Farben dort platzieren Dann fügen wir dort einfach das Violett über die grauen Farben ein, die wir in diesen beiden Designelementen verwenden 12. Navigationsleiste: Fangen wir jetzt mit der Codierung der Navbar an. Wir müssen die erforderlichen Abhängigkeiten importieren. Next Jz verbindet Komponenten für die clientseitige Navigation, reagiert und verwendet State Hook für die Statusverwaltung und Icons aus der Bibliothek React Icons Wir können sehen, dass uns diese React-Symbolbibliothek einen Fehler anzeigt Das liegt daran, dass wir diese Bibliothek nicht installiert haben. Lassen Sie uns den Namen kopieren, ein Terminal öffnen, NPM I ausführen und dort den Namen der Bibliothek einfügen Jetzt drücken wir die Eingabetaste und die Bibliothek wird installiert Wenn wir zu unserer Komponente zurückkehren, wird kein Fehler mehr angezeigt. Da wir den Use-Status verwenden, bei dem es sich um eine Funktion für die Client-Site handelt, müssen wir diese Komponente als Use-Client definieren um anzuzeigen, dass diese Komponente auf der Client-Site gerendert wird. Wir werden mit der Definition eines Navigationslink-Arrays mit Titel und Pfad für jeden Link fortfahren . Dadurch bleiben die Navigationselemente organisiert und es wird auch einfach, neue Links hinzuzufügen, wann immer wir möchten. Jetzt können wir direkt zur Navbar-Komponente wechseln. Dort müssen wir den Status für das mobile Navigationsmenü initialisieren Dieses NAF ist ein Boolin, um zu verfolgen, ob das mobile Menü geöffnet oder geschlossen ist, und Set NAF wird eine Funktion sein, um den NAF-Status zu aktualisieren Dies wird ausdrücklich auf den Fall eingestellt sein. Wir werden dann eine Funktion deklarieren, um die mobile Navigation umzuschalten und sie zu öffnen oder zu schließen, und sie wird den NAF auf einen anderen Wert setzen , als Wenn also auf die Schaltfläche geklickt wird, wird der Wert geändert, und wir werden ihn dann für unser Element verwenden, um das Menü zu schließen und zu öffnen Wir erstellen auch eine Funktion zum Schließen von NAF, die jedes Mal verwendet wird, wenn auf den Link geklickt wird , um sicherzustellen, dass unsere Navigation Im Gegenzug beginnen wir statt leerer Fragmente mit Für den Unterricht verwenden wir den Z-Index 250. Wir verwenden die feste Position, das heißt, wann immer wir scrollen, wird die Navigationsleiste mitgenommen, das Flexbox-Layout, sodass wir die Navigationselemente mit der Justify Center zentrieren können der Justify Center zentrieren Wir setzen die Breite auf voll, den Text auf weiß und die Schrift auf fett Dann erstellen wir eine ID für die Desktop-Navigation. Für die Desktop-Navigation verwenden wir auch einen Rand und setzen ihn auf einen weißen Rand mit einer Deckkraft von 0,2 Dann werden wir den Rand vom oberen Rand und den Hintergrund verwischen weil wir möchten, dass unsere Navigationsleiste beim Scrollen auf der Seite gut sichtbar ist Machen wir es auch vor Excel abgerundet. Fügen Sie dort einige Grenzradios hinzu. Auf dem mobilen Bildschirm wird dies ausgeblendet und auf dem mittleren Bildschirm und höher wird es flexibel angezeigt. Auch hier, weil wir die Objekte so zentrieren möchten, dass die Elemente zentriert und horizontal und vertikal zentriert werden. Wir werden etwas Bettwäsche hinzufügen und die maximale Breite auf 400 Pixel festlegen. Wenn Sie Ihrer Navbar weitere Elemente hinzufügen , können Sie diesen Wert erhöhen Dann stellst du ein Mixto so ein, dass es auch zentriert wird. Wenn du dort nun etwas hinzufügst und es speicherst, siehst du unsere Navbar auf der Seite Aber indem wir dort nur ein paar Buchstaben hinzufügen, ordnen wir die Elemente zu und fügen sie dort Bevor wir sie zuordnen, werden wir eine ungeordnete Liste für sie erstellen Diese ungeordnete Liste verwendet das Flexbook-Layout und Flexaw. Das bedeutet, dass die Artikel nebeneinander liegen werden. Wir werden wieder einige ausstehende und SpaceX acht hinzufügen. Das bedeutet, dass wir horizontal eine gewisse Lücke zwischen allen Elementen haben horizontal eine gewisse Lücke zwischen allen Elementen Für das Mapping werden wir Nablink Dot Map verwenden. Und wir werden einen Link verwenden, der der Name jedes Elements in dieser Map und im Index sein wird der der Name jedes Elements in dieser Map und im Index Innerhalb einer geordneten Liste und dieser Zuordnung erstellen wir das Listenelement mit dem Schlüsselindex. Reactive verwendet diesen Schlüssel, um die Renderleistung zu optimieren, und dort weisen wir den Array-Index als Schlüssel In diesem Listenelement werden wir ein Link-Tag mit dem Href-Settling-Punkt pv hinzufügen, das wir dort in unserem Array haben Das heißt, nachdem wir IDs zu unseren anderen Abschnitten hinzugefügt haben, gelangen wir zum gewünschten Und dann ein Klassenname , bei dem wir ihren Text mit einer Opazität von 0,5 in Weiß umwandeln Das heißt, wenn wir den Mauszeiger über unsere Listenelemente bewegen, werden wir sehen, über welchen wir uns gerade Dann wechseln Sie alle mit einer Dauer von 300 und lockerer Einstellung, um die Animation des Schwebens flüssiger zu gestalten Animation des Schwebens flüssiger Außerdem können Sie jetzt auf unserer Seite sehen, dass wir das Layout mit der Navigation haben, aber es gibt keine Artikel Was wir tun müssen, ist auf den Linkpunkttitel zuzugreifen , den wir in unserem Array haben. Lassen Sie uns den Titel verknüpfen, speichern und wir können jetzt sehen, dass sich unsere Navbar auf der Seite befindet Wir können nach unten gehen und die mobile Version dieser NAF-Leiste codieren die mobile Version dieser NAF-Leiste Wir werden dort ein Div erstellen und diese DIF-OnClick-Funktion erweitern Diese OnClick-Funktion, die wir dort hinzufügen werden, ist Toggle NAF, und das bedeutet, dass jedes Mal, wenn auf dieses Div geklickt wird, ausgeführt wird. Wir haben Und in dieser Toga-Funktion können Sie sehen, dass sie die NAF-Variable ändert Das heißt, wann immer wir auf dieses Div klicken, wird der NAF-Status auf wahr oder falsch geändert Jetzt werden wir einen sogenannten ternären Operator verwenden. Wir werden den Wert unseres NAF überprüfen und falls er wahr sein sollte, wird dieses Symbol mit geschlossener Kontur ausgeführt, und falls es falsch ist, was die Standardeinstellung ist, wird was die Standardeinstellung ist, das Menüsymbol auf unserem Lass es uns jetzt speichern. Und ich werde auch das Seitenlayout auf eine mobile Version umstellen. Sie können jetzt unser Menüsymbol sehen. Und wenn ich darauf klicke, kannst du sehen, wie es geändert wird , um zum Hamburger-Menü zu wechseln und zurück zum Hamburger-Menü zu Wir werden ein neues DIV hinzufügen und zu diesem Div werden wir einen Klassennamen hinzufügen, und innerhalb dieses Dollarzeichens mit den farbigen Klammern werden wir einen weiteren Turner-Operator verwenden Falls unsere Np-Variable wahr ist, setzen wir translate X auf Null, und falls sie falsch ist, setzen wir negative translate X full Das bedeutet, dass wir unsere Menüelemente nach außen und zurück auf den Bildschirm verschieben werden . Andere Klassen, die wir dort hinzufügen werden, haben eine feste Position nach links und oben nach Null. Wir werden die Breite auf voll und die Höhe auf voll setzen. Schwarzer Hintergrund mit einer Opazität von 0,9, Transformation und Übergangstransformation und einer Dauer von 300 für die Animation selbst Wir werden es jetzt speichern und wir können es testen. Sie können sehen, wie es sich bewegt. Natürlich fehlen uns immer noch die Artikel, aber wir werden sie jetzt hinzufügen. Wir können diese Navigation offen lassen und darin können wir anfangen, die Artikel hinzuzufügen. Ähnlich wie zuvor müssen wir eine ungeordnete Liste erstellen und das Flexbox-Layout mit Flex-Richtung hinzufügen . Die ColumO-Listenelemente befinden sich untereinander Wir werden sie vertikal und horizontal zentrieren und dabei Leerzeichen und acht verwenden Das heißt, wir werden vertikal etwas Abstand zwischen ihnen schaffen . Wir haben dort auch Höhe zwei voll eingestellt. Nach wie vor kannst du das im Grunde einfach kopieren und einfügen. Wir werden dieses Mapping über das Nablnk-Array hinzufügen, wobei Link der Name des aktuellen Elements und Index die Position ist Dann werden wir diesen Index als Schlüssel verwenden Nachdem wir das Link-Tag erstellt haben, werden wir dort den Hf-Toolink-Punktpfad und den Link-Dot-Titel für den Namen des Navigationselements festlegen Link-Dot-Titel für den Namen des Jetzt werden wir es speichern und wir können es auf unserer Seite sehen. Wir bearbeiten auch ihre On-Click-Funktion zum Schließen der Navigation. Klicken wir zum Beispiel auf das Portfolio. Damit können wir die Navbar-Komponente umschließen. 13. Testen und Reparieren: Jetzt ist es an der Zeit, unsere Website zu testen. Schauen wir uns also die Navbar an, und Portfolio und Stack funktionieren nicht Wir werden das Problem dadurch beheben , dass wir zum Code übergehen, Portfolio öffnen und den Stack öffnen Du kannst zur Seite dotix gehen, Satorlo gedrückt halten und dort auf das gewählte Element klicken Ich werde auf Portfolio klicken und Sadolo gedrückt halten. Es wird diesen öffnen Und dort kann ich ganz einfach eine ID zum Portfolio hinzufügen. Und für Stack kann ich anstelle dieses Klassennamens einfach die ID des Stapels hinzufügen. Jetzt sollte es funktionieren. Aber natürlich wäre es super schön, wenn wir eine reibungslose Scroll-Animation hätten. Also lass uns jetzt einfach bearbeiten. Wir gehen zu unserer globalen Punkt-CSS-Datei und stellen dort in HDML das Scrollverhalten auf Außerdem werden wir dort einstellen falls der Benutzer eine reduzierte Bewegungseinstellung, ein reduziertes Scrollverhalten oder Automatisch bevorzugt , um dies auszuschalten, weil vielleicht jemand dieses sanfte Scrollverhalten nicht möchte und diese reduzierte Bewegung hat Also werden wir es auch damit in Betracht ziehen. Dann lass uns auf unsere Seite gehen und schreiben. Kommen wir also zu einem Abschnitt. Gehen wir zum Portfolio-Bereich, Stack-Bereich und zum Kontaktbereich. Sie können alle Animationen sehen. Lassen Sie uns jetzt das Wandportfolio durchgehen. Außerdem werden wir jetzt die Reaktionsfähigkeit des mobilen Bildschirms überprüfen die Reaktionsfähigkeit des mobilen Bildschirms Und lass uns die mobile Navigationsleiste schreiben. Und ich sehe, das muss repariert werden. Also lass uns gehen und es reparieren. Lassen Sie uns den Index für das Menü festlegen. Lassen Sie uns diesen Index auf 40 setzen. Seien Sie vorsichtig. Für das Symbol haben wir einen Index von 50, es kann also nicht gleich oder sogar höher sein. Jetzt wird es funktionieren. Und es wird auch die Navigation übernehmen, wenn Sie auf alle Elemente klicken. Aber was wir dort hinzufügen möchten, ist die geschlossene Navigation, wann immer wir auf einen Menüpunkt klicken. Lass es uns da sein. Das bedeutet, dass wir für diesen Link auch On-Click hinzufügen und dann Close NAF hinzufügen, eine Funktion, die wir dort bereits haben, Close NAF Falls sie angeklickt wird, setzen wir NAF auf fällt. Lass es uns jetzt testen. Ich werde dort die Navigation öffnen. Ich werde auf Über mich klicken und es funktioniert. Wir werden umgeleitet und auch die Navigation wird geschlossen. Es gibt noch eine weitere Sache, die ich tun würde, nämlich diese Schaltfläche von der absoluten Position auf eine feste Position zu setzen . Das heißt, wenn wir scrollen, wird der Button uns begleiten Was nun die Navigationsleiste betrifft: Wenn Sie auf eines der Elemente klicken, wird die Navigation geschlossen und wir werden zum ausgewählten Listenelement weitergeleitet 14. 1introCLOUDS: Wir werden ein Entwicklerportfolio mit Next JS oder einer schnellen und SEO-freundlichen Website aufbauen und bereitstellen , die eine optimale Leistung bietet. Außerdem wird unsere Website Fall vorbereitet, dass wir in Zukunft einige Beacon-Funktionen hinzufügen möchten einige Beacon-Funktionen hinzufügen Frame oder Motion für die Erstellung hochgradig anpassbarer Animationen, die unserer Website ein professionelles und dynamisches Aussehen verleihen unserer Website ein professionelles und dynamisches Aussehen Nachdem Sie dieses Projekt abgeschlossen haben, können Sie diese Animationen ganz einfach anpassen, um sie genau so zu gestalten , wie Sie es sich vorstellen Das Anpassen von CSS hilft uns dabei, die Dinge einfach und leistungsstark zu gestalten Wer möchte Tonnen von benutzerdefiniertem CSS schreiben? Nun, wir werden es nicht sein. Wir werden dieses Projekt von Grund auf neu erstellen und am Ende werden wir es bereitstellen, sodass Sie von überall auf Ihre Seite zugreifen können. In diesem Tutorial geht es jedoch nicht nur darum, eine Website zu erstellen. Es geht darum, den Prozess zu erlernen, neue Fähigkeiten zu erwerben, zu üben und die Fähigkeiten auszubauen. Sie müssen eine solche Seite selbst erstellen. Und das alles nur aus Spaß. Alles ist kostenlos Und wenn Sie nicht weiterkommen, können Sie auch die Befehle eingeben. Lassen Sie uns einen kurzen Projektüberblick machen. Sie haben den Heldenbereich mit den Wolken bereits gesehen, und jetzt schauen Sie sich den Portfolio-Bereich an. Wir werden einige unserer Projekte anzeigen, und wenn der Benutzer auf der Seite nach unten scrollt, wird ein Stickkarteneffekt erzeugt Sie werden überrascht sein, wie einfach es ist, dies zu erreichen. Im Grunde ist es nur ein einziger Kurs, der es möglich macht. Mit Framer können wir die Opazität einstellen und steuern, wie die Projektkarte langsam auf dem Bildschirm verblasst Jetzt können Sie den Masterbereich sehen, aber schauen Sie sich genügend Balken an, der sich an einer festen Position befindet und sich die ganze Zeit mit dem Benutzer bewegt Er hat einen Backdoor-Bler und reagiert natürlich mit einem Hamburger-Symbol Wenn Sie zum Mastec-Bereich zurückkehren, werden Sie feststellen, dass die Stapel von links und rechts animiert werden Dies ist keine einmalige Animation. Immer wenn Sie zu diesem Abschnitt zurückkehren, beginnt die Animation erneut. Sie könnten also den ganzen Tag auf und ab scrollen, und es wird immer wieder ausgelöst Der Bereich Dienste verwendet einen weiteren einfachen Trick mit einer Rückenwind-Klasse Er dient lediglich dazu, zusätzliche Informationen über die von uns angebotenen Dienste bereitzustellen , und es ist ein kurzer Abschnitt zum Programmieren Der Kontaktbereich bietet Benutzern die Möglichkeit , uns per E-Mail, Telefon oder sogar über eine physische Adresse zu kontaktieren, wenn Sie sich dafür entscheiden, diese anzugeben. Wenn nicht, können Sie es einfach löschen. Wir werden auch ein funktionierendes Kontaktformular hinzufügen wenn der Benutzer seine E-Mail-Adresse, Betreff und seine Nachricht eingibt, und es wird eine E-Mail an unser Gt-Formular IO gesendet. Ich helfe Ihnen bei der Einrichtung und es dauert nur ein paar Minuten, dann können wir problemlos Nachrichten sammeln. Endlich gibt es eine Fußzeile. Anstatt nur langweilige Links und Icons bearbeite ich ein Designelement mit unserem Namen Dein Nachname ist wahrscheinlich länger als Dog. Anstatt also sowohl Vor- als auch Nachnamen zu verwenden, könnten Sie einfach den Nachnamen verwenden oder die Größe bei Bedarf verkleinern Was mir an dieser Fußzeile gefällt die drei absoluten Positionselemente, in denen wir die Farbe unseres Portfolios festlegen werden, die überraschenderweise blau sein wird Wenn Sie jedoch in Zukunft ein Portfolio mit der Hauptfarbe wie Grün erstellen , können Sie es auf einen Smaragd- oder Grünton umstellen und das Design dieser absoluten Elemente so anpassen , dass das Farbdesign Ihres Portfolios von oben nach unten gut verläuft Nach all dem ist es endlich an der Zeit, loszulegen. Und jetzt lassen Sie uns gleich darauf eingehen. 15. 2heroCLOUDS: Beginnen wir in unserer IDE damit, das Terminal zu öffnen und dort diesen Befehl einzufügen um eine nächste Anwendung zu erstellen Wenn wir uns bereits im gewünschten Ordner befinden, können wir dieses Mi-Projekt in einen Punkt ändern. Dadurch wird diese nächste Anwendung in dem Ordner erstellt, wird diese nächste Anwendung in dem Ordner erstellt in dem wir uns gerade befinden Jetzt werde ich ihnen Rückenwind geben, nein zum Quellverzeichnis, ja zu einem Router, nein zu diesem Aas und jetzt läuft es, ich werde die Anwendung installieren, und das wird im Grunde alles sein Als Nächstes werden wir in diesen App-Ordner gehen und dort einen neuen erstellen, und dort einen neuen erstellen der als Komponenten bezeichnet wird Dann werden wir vorerst die neue Ordner-Benutzeroberfläche erstellen. Ich werde anfangen, die eigentlichen Komponenten hinzuzufügen. Ich werde mit dem Heldenbereich beginnen. Wir werden Kreise erschaffen, und wir werden auch ihre Wolken erschaffen. Diese Kreise werden ein Designelement in unserer Helden-Sektion sein, und diese Wolken werden auch ein Designelement in unserer Helden-Sektion sein. Fangen wir mit den Kreisen an, denn das wird einfacher sein. Dort werden wir mit dem Export von konstanten Ringen beginnen , um Ringe zu exportieren und sie in unserer Heldenabteilung verwenden zu können Lass uns das beenden. Lasst uns die leeren Fragmente zurückgeben. Und innerhalb dieser leeren Fragmente werden wir mehrere Dips haben und es werden Kreise rund um unseren Heldenbereich entstehen Wir beginnen mit Position absolut, Deckkraft auf 30, oben auf eine Hälfte, links auf eine Hälfte, mit etwa 60 Dann umranden, voll und ebenfalls X in die eine Hälfte übersetzen, Y in die Hälfte Lass mich dir zeigen, was ich dort gemacht habe. Ich habe das gemacht, X übersetzt und Y in die Hälfte übersetzt. Dann werde ich diese Zeile kopieren und dort einfügen. Am Ende werden wir dort sechs dieser Dips haben und wir werden nur die Breite ändern Für den ersten werde ich 60 RAM haben , für den zweiten werde ich 50 haben, für den dritten werde ich 30 haben Fünf, sagen wir, für den nächsten werde ich 20, 70 haben und für den letzten werde ich 80 haben. Jetzt werde ich es speichern, und falls dieser zu unserem Design passt, werden wir später darauf zurückkommen und die Breite oder Positionen korrigieren. Wenn wir jetzt in Clouds Dsix gehen, benötigen wir dort die Assets mit den Cloud-Images Diesen Ordner kannst du aus den Starterdateien holen und du bekommst auch diese Cloudimages, die ich Besucht einfach den Gita-Blink ihr in der Beschreibung habt und ihr könnt ihn nehmen und dort in euren App-Ordner laden Für diese Clouds werden wir zuerst Dasix importieren. Reagieren Sie mit dem Use-Effekt, verwenden Sie den Status und verweisen Sie auch auf das Objekt aus React Dann werden wir mit dem Import der Mausparallaxe fortfahren Aus der Bibliothek React Just Parallax, die wir installieren müssen Importieren wir zuerst die Kreise aus Kreisen und auch die Cloud-Bilder Cloud eins, und jetzt müssen wir zu Assets gehen und dort Cloud One Dot PNG auswählen. Jetzt können wir das kopieren und wir haben die fünf Wolken. Lass es uns so machen, zweiter, dritter, vierter und fünfter. Und für die Parallaxe React Just müssen wir das installieren. Lass uns das Terminal öffnen, NPM machen, ich reagiere nur Es wird die Bibliothek installieren. Wir können das Terminal schließen. Jetzt wird es funktionieren und wir können mit dieser Cloud-Komponente weitermachen. Was wir dort zuerst tun werden , ist , die Schnittstelle zu definieren. Requisiten aus Wolken im Hintergrund, und wir werden dort die Parallax-Abbildung mit dem V-Objekt zum HTML-Div-Element Damit haben wir gerade die Referenz für den Parallax-Container erstellt für den Parallax-Container Als Nächstes definieren wir diese Komponente, exportieren const Clouds und reagieren auf FC. Requisiten für Wolken im Hintergrund. Dort werden wir die Parallax-Rev einstellen und dort werden wir diese Funktion bis jetzt mit leeren Fragmenten zurückgeben diese Funktion bis jetzt mit Im Inneren werden wir den Status definieren, um zu verfolgen, ob die Komponente montiert wurde Wir beginnen dort mit mount und dann mit set mounted, und der Standardwert ist false. Dann verwenden wir Effect Hook, um nach dem ersten Rendern mount auf drew zu setzen. Ich werde mit Use Effect beginnen. Und setze Mount It Two nach dem ersten Rendern durch. Jetzt werden wir statt der leeren Fragmente mit DIP beginnen und das wird der Hauptcontainer für diese Wolken auf unserem Hintergrund sein. Ich werde ihre absolute Position an die ersten beiden setzen. Verwenden wir -45% links zwei, 50% Breite zwei. Verwenden wir 78 RAM und übersetzen X auf die Hälfte Jetzt werde ich die Kreise platzieren. Nun zu den Kreisen, ich gebe ihre Bronzennamen an, nicht Ringe, sondern Kreise Nun, das sollte in Ordnung sein. Wenn ich das so in geschweifte Klammern setze, machen wir vorerst ihre Export-Cs nach o mit Rückgabe leerer Fragmente und drinnen machen wir Cloud Okay Für die Wolken müssen wir Parallax-Ref in Parallax-Ref eingeben und wir müssen diese Parallax-Ref definieren Wir werden es dort auf der obersten konstanten Parallaxenreferenz definieren , um Rf Jetzt hoffe ich, dass es auch dieses uRF importiert. Ich habe dort genau einen Tippfehler. Benutze ref. Wenn wir bearbeiten, können wir noch ein paar Importe für den Heldenbereich machen noch ein paar Importe für den Heldenbereich Lassen Sie uns darauf hinweisen, dass es sich um eine Client-Komponente handelt, die auf der Client-Seite gerendert wird. Lassen Sie uns auch das Bild vom nächsten Bild importieren. Lassen Sie uns das Profilbild aus den Assets importieren. Lassen Sie uns die Typanimation aus der Animationsbibliothek vom Typ React importieren , die wir installieren müssen, und dort auch reagieren. Nehmen wir nun diese Bibliothek. Lassen Sie uns ein Terminal, NPM, öffnen und einfügen Dadurch wird die Animationsbibliothek vom Typ React installiert , die wir in unserem Hero-Bereich verwenden werden Schauen wir uns unsere Seite an, die wir im Terminal wieder öffnen können, und wir werden NPM Run Death ausführen Jetzt, wo wir diese Seite öffnen, müssen wir zum Seitenpunkt TSX gehen Dort müssen wir alles löschen, was wir dort als Platzhalter haben, und wir können damit beginnen, dort den Heldenbereich einzufügen dort als Platzhalter haben, und wir können damit beginnen, dort den Heldenbereich einzufügen. Es wurde importiert Außerdem haben wir es da. Jetzt wird es auf unseren lokalen Host übertragen, da wird es nichts geben, weil wir dort noch keine Inhalte haben. Gehen wir zur Cloud-Komponente und dort unter den Kreisen beginnen wir damit, dort auch die Mausparallaxe einzufügen Dort geben wir die Stärke 2.1 ein, dann die Parallax-Container-Referenz auf PerlXRF. Wir können die Technologie schließen, und diese Technologie wird die und diese Technologie wird Im Inneren können wir eigentlich mit der ersten Cloud beginnen. Für die erste Wolke werden wir drinnen sein, um auch das Bild zu definieren. Für das Bild wird es die Quelle von Cloud geben, eine Quelle, alle können Cloud One sein und die Klasse kann eine Breite von 64 haben. Und falls das eingehängt ist, wenn Sie einen Operator drehen, wird die wahre Position auf Y Null gesetzt und die Opazität auf 100 Und im Falle einer falschen Position übersetzen wir Y, zehn mit Opazität auf Null Die Position dieser Wolke werden wir in dieser Vertiefung definieren , die dieses Bild umhüllt Dort werden wir die absolute Position mit einem unteren Wert von 17% einnehmen. Von rechts auf 50% vom Ursprung zum Boden, Übergang zur Transformation, Dauer 500 und Entschleunigung. Jetzt, wo wir das haben, können wir es einfach nehmen und für Cloud zwei, drei, vier und fünf kopieren . Wir werden einfach die Quelle ändern. Ich werde es dort auf zwei, drei, vier und fünf ändern . Speichern Sie es. Jetzt werde ich auch die Positionen ändern. Lass uns 55 für die zweite machen, zwei schreiben und, und das werden wir vielleicht später ändern, falls es nicht zum Design passt. Das eins auf 35 und schreiben auf minus acht, und dann das hier auf 45. Jetzt machen wir statt rechts links auf -5%. Und für den letzten Wert wird der Wert 45% betragen, mit rechts bis 7% Jetzt speichern wir es und können später zu dieser Cloud-Komponente zurückkehren und die Positionen, die OPCD-Breite, die Höhe der Wolken usw. aktualisieren OPCD-Breite, die Höhe der Wolken usw. Um das darzustellen, müssen wir Komponente Wolken, dort dem Haupt-Div, auch das Seitenquadrat hinzufügen dort dem Haupt-Div, auch das , und wir werden die Wolken nun so sehen Außerdem bewegt es sich. Jetzt müssen wir die Linien korrigieren , die wir da haben und was nur diese Linien sein können. Natürlich ist es unsere Kreiskomponente, und was wir tun müssen, ist, dort auch diesen Aspekt als Quadrat hinzuzufügen. Lass es uns kopieren. Lass es uns da hinstellen. Wir können warten, alle Zeilen auswählen, dort ablegen, speichern. Damit wird es funktionieren und der Code wird so aussehen. Wir beginnen mit dem Haupt-Div. Anstelle dieser Empl-Fragmente werden wir es dort erstellen. Wir werden die Cloud-Komponente einfügen. Und wir können mit dem Unterricht beginnen. Zuerst werden wir ihren Overflow-X-Clip platzieren. Das heißt, horizontal wird es unseren Heldenbereich nicht überfüllen Oder wenn das Bild aus unserem Viewport herauskommt, entsteht kein leerer Bereich auf der linken oder rechten Seite unserer Seite Das ist wichtig, denn wenn wir es dort haben, könnten die Benutzer in den leeren Bereich rechts oder links scrollen , um es wirklich, wirklich einfach zu erklären Als Nächstes werden wir eine Mindesthöhe für den Bildschirm festlegen. Das bedeutet, dass der Abschnitt nicht weniger als die Höhe des Ansichtsfensters unseres Bildschirms einnimmt Und wir können mit der Bettwäsche von oben bis 12 weitermachen. Das bedeutet, dass der Inhalt etwas nach unten verschoben wird. Lassen Sie uns mit der Festlegung des Flexbox-Layouts fortfahren und die Elemente in der Mitte und in der Justified-Mitte platzieren, was bedeutet, dass wir Elemente vertikal und horizontal zentrieren Elemente vertikal und horizontal Ich werde dort einen Hintergrund mit linearem Farbverlauf einfügen, und Sie können auch diese Farbe verwenden, oder Sie können zu Figma oder zu einer anderen Online-Site gehen , wo Sie Farbverläufe erstellen und mit Farben spielen können , um etwas zu finden, finden Für die Himmelsfarbe werde ich zum Beispiel diese verwenden, die Sie dort sehen können Außerdem können Sie sehen, was passiert, wenn wir statt 180 90 angeben. 360 bedeutet also im Grunde, dass wir es einfach drehen werden, und ich werde dort keine ID für dieses Div eingeben , weil wir für diesen Abschnitt keine Navigationsleiste haben werden, die uns zurück zum Hero-Bereich bringen würde. Wir werden es später für die anderen Abschnitte tun, aber für diesen brauchen wir es nicht. Lass uns mit dem nächsten Div weitermachen. Wir werden dieses Div machen, weil wir diesen Container erstellen möchten. Neben dem Container werde ich ihn jetzt auch mit MMC Auto zentrieren und dort relativ platzieren, weil wir dort einige absolute Elemente haben werden dort einige absolute Elemente Und ich werde auch auf Parallax Rf verweisen. Welches ist die Repräsentation für den Parallax-Effekt, den wir dort eingestellt haben. Fangen wir in diesem Dif mit dem Bild für das Bild an. Wir haben es vom nächsten Bild dorthin importiert und lassen uns auch den Stapel schließen Und drinnen werden wir anfangen. Die Quelle wird das Profilbild sein. Das ist dieser Import. Dann setzen wir mit der Einstellung ihrer ID fort . Wenn das Bild nicht geladen werden kann, füge ich ihr Profilbild hinzu Außerdem wirst du mit einem Klassennamen weitermachen. Wir werden den Mix automatisch einstellen, sodass er zentriert ist, und die Breite, die ich dort einstelle, 250, funktioniert einwandfrei. Wir können es später aktualisieren , wenn wir es anpassen müssen. Als Nächstes werden wir mit dem Hinzufügen fortfahren , und dort werden wir Let's Create platzieren. Außerdem kann ich es stylen. Lassen Sie uns den Rand nach unten legen, da wir unten den Animationstext haben werden. Lassen wir also etwas Abstand dazwischen. Was wir auch tun könnten, ist, dass wir dort Leerzeichen, Y und einen Wert, zum Beispiel sechs, angeben könnten . Vielleicht werde ich es sogar tun. Wir brauchen sie nicht , um diesen Rand unten zu machen, weil das sicherstellt , dass wir einen Abstand zwischen all diesen Elementen haben (Bild, Überschrift eins) und dem Typ Animation, ich mache es genau dort, Typ Animation. Lassen Sie uns die Technik zum Abschluss machen. Natürlich müssen wir dort die Werte festlegen. Was die Überschrift angeht, werde ich jetzt weitermachen. Ich werde ihren Text Blue 200 Font Extra Bolt und Text sieben Excel eingeben . Natürlich ist das jetzt ein Fehler, aber das liegt daran, dass wir die benötigten Werte für diese Art von Animation nicht definiert haben . Wir müssen ihre Reihenfolge angeben. Für die Sequenz müssen wir die tatsächlichen Werte angeben, dieser Animationstyp für uns schreiben soll. Ich werde ihre Erfahrungen einbringen. Ich werde ihre Websites und Designs veröffentlichen. Das wird dazu führen, dass es nur diesen Text schreiben wird. Jetzt kann ich ihren Klassennamen angeben. Ich werde dort auch Text Seven Excel und Text White einfügen. Und jetzt kannst du sehen, wie es aussieht. Lassen Sie uns Designs, Websites und Erlebnisse erstellen und dort alles platzieren, was Sie möchten. Ich werde es so machen, weil wir in den letzten Portfolios anstelle dieser Worte so etwas wie „Ich arbeite als Komplettentwickler, Berater“, Dinge wie diese geschrieben haben. Und vielleicht kann das dort auch interessanter, origineller sein. Wir werden den Inline-Block setzen und mit dem Wrapper weitermachen Und was dieser Wrapper dieser Art von Animation sein wird , ist auch Überschrift eins Lass es uns da hinstellen. Dann fahren wir mit dem Cursor fort. Es stimmt, wir wiederholen es bis ins Unendliche. Das heißt, es wird eine Endlosschleife laufen. Ich würde auch gerne Fontextrablt nehmen, darunter werde ich einen technischen Absatz einfügen, und ich werde dort einige wirklich grundlegende Informationen über Mein Name ist John Doe. Ich bin ein Costac-Entwickler bei Dann werden wir es stylen Lassen Sie es uns damit stylen und lassen Sie mich es tatsächlich so bewegen. Damit du den Code sehen kannst. Ich werde es mit Text stylen . Versuchen wir es mit Blue 200 und sehen, wie das aussehen wird. Text ab Semibt-Maximalgewicht nach Excel. Lassen Sie uns 500 Pixel verwenden. Ich möchte das in zwei Zeilen sein, nicht in einer langen Zeile. Was ich jetzt tun werde , ist , dass ich neben dieser Geschenkschale ein Flexbox-Layoutobjekt in der Mitte und Justify in der Mitte platzieren werde ein Flexbox-Layoutobjekt in der Mitte und Justify in der Mitte platzieren Und Spalte mit flexibler Richtung. Das heißt, wir werden es so haben. Lassen Sie mich jetzt die Seite aktualisieren. Und ich werde den Text auch in die Mitte stellen. Jetzt ist es noch besser, wir können dorthin gehen und diese Wolken nehmen und sie in dieses Div oben einfügen. Jetzt funktioniert die Animation. Jetzt haben wir diese Animation in diesem Div, und was wir ändern werden, ist, dass wir diese relative Klasse von dort nehmen und sie in das Haupt-Div oder in das Wrapping-Div einfügen . Jetzt werden wir solche Wolken haben. Und was wir tun werden, wenn wir die Position der Wolken anpassen wollen , ist, dass wir einfach in unseren Ordner gehen. Dort werden wir zu den Wolken gehen. Dann spielen wir mit der unteren Position oder der rechten Position oder der linken Position. Wir haben all unsere Wolken dort. Was nur benötigt wird , ist das Anpassen der Positionen. Lassen Sie mich jetzt mit den Werten spielen. Ich habe bei einigen Wolken auch die Wartezeit auf 64-72 erhöht. Ich ändere die Positionen. Wenn du meine Positionen verwenden möchtest, werde ich jetzt diesen Kurs durchgehen und du kannst sie überprüfen. Ja, also spiel einfach damit, setze die Unterseite oder links und rechts auf eine andere Position. Verwenden Sie dort zum Beispiel auch einen Minuswert, und Sie können dann auch zu verschiedenen Positionen gelangen. Als Nächstes werden wir es in anderen Abschnitten fortsetzen, denn ich denke, der Heldenbereich ist vorerst fertig. Die Animation funktioniert. Es bewegt sich so. Das Einzige, was wir da verfeinern könnten , ist nur die Wolkengröße, Wolkenposition und so weiter. Aber ich denke, da wir jetzt wissen, wie das geht, ist es einfach, es nach Belieben anzupassen. 16. 3navbarCLOUDS: Wir werden mit der Navigationsleiste fortfahren. Zunächst werden wir dort angeben, dass diese Komponente auf der Client-Site gerendert wird. Dann werden wir mit den Importen fortfahren. Wir beginnen mit dem Import des Links vom nächsten Link dann mit dem Import von React with us State fort , den wir für die Statusverwaltung verwenden werden. Außerdem werden wir zwei Symbole importieren AI Outline Menu und AI Outline werden geschlossen. Aus React Icons AI, und dann importieren wir auch Bewegungen aus dem Frame oder Bewegung für die Animationen , die wir verwenden werden. Was wir tun müssen, ist das Terminal zu öffnen und dort können wir es einfügen. Wir werden NPM machen, ich reagiere auf Icons und Frame oder Motion. Wir werden Ausschreibung durchführen und dann werden wir diese beiden Bibliotheken installieren , und dann können wir weitermachen Was wir dort tun werden, ist, zuerst die Anordnung unserer Navigationslinks zu definieren, und dann werden wir sie in unserer Navigation verwenden. Lassen Sie uns also eine Konstante von Nav-Links erstellen. Und da werden wir mit dem Titel beginnen. Beim ersten wird es um Abschnitt und Pfad gehen. Für das Thema wird es ein Hashtag über sein. Dann können wir das so oft kopieren, wie wir brauchen. Also werde ich es ungefähr für mein Portfolio verwenden. Auch für Stack und Kontakt, vielleicht auch etwas Erfahrung, aber wir werden sehen, was wir brauchen werden wenn wir unser Portfolio weiterentwickeln werden. Vorerst werde ich mit diesen vier Menüpunkten arbeiten. Dann kann ich in die Navigationsleistenfunktion gehen und dort zunächst den Status einstellen, um die Sichtbarkeit des mobilen Navigationsmenüs zu verwalten. Ich werde mit der Konstante NAF Set NA beginnen und den Status default false verwenden Das bedeutet, dass der Standardstatus unserer Navigation falsch sein wird. Dann werden wir die Toggle Knife-Funktion erstellen. Und diese Tog Env-Funktion wird den NAF-Status umschalten. Dort rufe ich das Set NAF und ändere den Wert des Die nächste Funktion wird das Schließen der mobilen Navigation sein. Wir werden es Close NaF nennen. Und wir werden genug auf falsch setzen. Dies wird immer dann aufgerufen , wenn Sie die Navigation schließen. Dann werden wir die Animationsvarianten für das mobile Menü erstellen . Fangen wir mit den Varianten des Const-Menüs an. Beim Öffnen befindet sich das Menü an der normalen Position. Wir werden dort x auf Null setzen und Steifigkeit auf 20 und die Dämpfung auf 15 einstellen. Wenn es geschlossen wird, setzen wir die Position auf -100% Das heißt, es wird vom Bildschirm entfernt, und für den Übergang werden wir die Steifigkeit auf 20 und die Dämpfung auf 215 erhöhen Und die Steifigkeit ist dort vorherrschend. Ein niedrigerer Wert für die Sprungkraft bedeutet weniger Sprungkraft. Und die Dämpfung bestimmt, wie schnell sich die Animation stabilisiert. Mit diesen Einstellungen erstellen wir eine reibungslose Animation für unser mobiles Menü Jetzt können wir direkt zurückkehren . Ich werde dort ein Div erstellen. Und innerhalb dieser Unterschiede werden wir die Desktop-Navigation, die mobile Navigation und die Tabelle haben, die geöffnet wird und die mobile Navigation auslöst wenn ein Benutzer auf dem Beginnen wir mit der Angabe unseres Navigationsindex 250. Dann werden wir es reparieren und wir werden es auf 40% belassen. Dann setzen wir den Text auf unserem Navigations- und Schriftboot auf Weiß . Fangen wir mit der Desktop-Navigation an. Dort werden wir ein Div erstellen und innerhalb des DIF werden wir Klassennamen eingeben Für unsere Navigation, da wir noch keinen Inhalt haben, beginnen wir mit dem Inhalt, damit wir ihn besser gestalten können als in einer ungeordneten Liste Wir werden über die Nav-Links iterieren Also Nablinks, Karte, Tintenindex. Und dort wird jeder von ihnen in der Liste stehen. Im Listenelement wird Paragraph Tech stehen, und Insight wird der Linkpunkttitel sein. Wenn ich es jetzt speichere, kann ich auf der Seite sehen, dass die Links da sind. Lassen Sie uns nun die ungeordnete Liste und auch das DIF formatieren. Für das DIF werden wir den Rand erstellen und die Randfarbe Weiß mit einer Opazität von 0,2 festlegen Wir werden es mit diesen 20 machen. Dann werden wir einen gewissen Abstand von oben herausholen. Wir werden etwas Hintergrundunschärfe machen. Das heißt, wenn wir mit dieser festen Position der Naug-Balke scrollen, werden wir immer noch einen Hintergrund sehen, der aber verschwommen ist Das bedeutet, dass wir genügend Einträge haben, gut lesbar sein werden. Lass es uns speichern. Lassen Sie uns diesen abgerundeten Baum zu Excel machen. Eigentlich, Background Blur, lassen Sie uns Tree Excel machen. Dann wird es auf dem mobilen Bildschirm ausgeblendet und auf Medium werden wir dafür sorgen, dass es flexibel angezeigt wird Wir werden die Elemente zentrieren, also zentrieren wir die Elemente vertikal und auch horizontal. Wir werden etwas Pending hinzufügen Wir geben dort auch eine Mix-Breite von 400 Pixeln an, und das werden wir mit Mix Auto zentrieren ungeordneten Liste fügen wir nun das Flexbox-Layout und die Flex-Zeile Das bedeutet, dass unsere Artikel nebeneinander liegen werden. Wir werden auch Peding und SpaceX 8 hinzufügen. Gehen wir nun in unsere Iteration und geben dort das Listenelement ein, und geben dort das Listenelement ein, wir den Schlüsselindex einfügen werden Dann werden wir mit Paragraph Tech fortfahren . Dort würden wir gerne ein paar Animationen machen. Immer wenn der Benutzer mit der Maus über das Listenelement fährt, werden wir dort die Transformationsklasse auf unseren schiefen Text X 12 setzen, auf unseren Text weiß mit einer Opazität von 0,5 und Übergang, alles mit einer gewissen Dauer und ist aus Gründen Speichern wir es jetzt und versuchen wir es. Sie können sehen, wie sich die Elemente ändern wenn ich mit der Maus darüber fahre, und das ist alles für die Desktop-Navigation Jetzt werden wir ein weiteres Div erstellen, und zwar für die Umschaltfläche für die mobile Navigation Lassen Sie uns herausfinden, wo das erste Div für die Desktop-Navigation endet, und es ist dort unten Ich werde ein weiteres Div erstellen und in diesem Div werde ich einen ternären Operator erstellen, der auf der NAF angezeigt wird Ich mache ihr Fragezeichen, und wie es bei ternären Operatoren der Fall ist, wird immer die erste Position ausgeführt, und wenn sie falsch ist, zweite Position Standardmäßig wird das AI Outline-Menü immer ausgeführt. Nehmen wir an, es gibt auch eine bestimmte Größe, und nachdem sie geändert wurde, möchten wir, dass ihre KI-Gliederung geschlossen wird, auch mit einer gewissen Größe, denn auch mit einer gewissen Größe, denn wenn wir dann erneut darauf klicken, wird es zum Menü geändert unsere Menüelemente auf der Seite angezeigt werden, entsteht auch die mobile Navigation, die wir uns wünschen. Für das Div dieser Menü-Tag-Schaltflächen werden wir auch einige Klassen hinzufügen. Es wird auf dem Desktop versteckt. Andernfalls ist es die absolute Position, obere fünf, linke fünf, Rand mit abgerundeten Ecken, Text zu Weiß mit einer Deckkraft von 0,7 und ein Rand zu Weiß, ebenfalls mit einer Deckkraft von 0,7, und dann etwas Jetzt werde ich das Fenster tatsächlich auf mobile Navigation umstellen tatsächlich auf mobile Navigation umstellen Wir können sehen, dass immer noch nichts passiert , weil wir dort auch On-Click-Funktionen hinzufügen müssen. Lassen Sie uns beim Klicken bearbeiten und beim Klicken rufe ich Toggle Navigation Wenn ich jetzt auf das Fenster klicke, wirst du sehen, dass es sich ändert Aber natürlich werden unsere Menüpunkte immer noch nicht angezeigt, da wir jetzt das mobile Navigationsmenü codieren müssen . Ich werde dort ein neues Div erstellen, aber kein normales. Es wird ein Bewegungsabfall vom Bild oder der Bewegung sein. Und für diesen Dip werden wir diese Animationen verwenden. Fangen wir dort an. Ich werde es so machen. Und ich werde mit den ersten zwei Stürzen beginnen. Und jetzt werde ich dort Animate einfügen, die auf dem NAB-Wert basiert. Auch dies ist ein Turner-Operator. Wir werden es auf der richtigen Position verwenden, wird offen sein, wenn es um die Position Force geht, es wird geschlossen Und was diese Begriffe „offen“ und „ geschlossen“ bedeuten, haben wir dort definiert. Beim Öffnen wird es diese Animation machen , beim Schließen wird es diese Animation machen. Für die Varianten werden wir dort die Menüvarianten platzieren , weil wir diese Varianten so benannt haben. Jetzt können wir mit dem Klassennamen selbst fortfahren, wo wir die Klassen für die Schwanzbreite angeben werden. Ich setze die feste linke Null, die obere Null, die Breite auf voll, Höhe auf voll und die Deckkraft der schwarzen Hintergrundbreite auf 0,9 Wir können diese ungeordnete Liste sogar kopieren und dort ablegen. Und nur von der Flex-Zeile werden wir das in eine Flex-Spalte ändern Elemente, die in der Mitte stehen, rechtfertigen Mittelpunkte. Das heißt, wir werden die Objekte horizontal und vertikal zentrieren. Dann brauchen wir die Bettwäsche nicht. Wir brauchen das Leerzeichen X nicht aber wir hätten gern das Leerzeichen Y. Das bedeutet , dass wir den Abstand zwischen den Objekten vertikal haben werden . Lassen Sie uns das jetzt überprüfen Ich öffne es, wir haben es da. Sieht überhaupt nicht schlecht aus, aber wir müssen dort trotzdem etwas tun. Fahren wir mit voller Höhe fort. Jetzt können wir sehen, dass sich das Symbol hinter unserer Navigation befindet. Gehen wir dorthin und setzen dort einen Index auf 50. Und jetzt funktioniert es gut. Wenn ich es dort hinstelle, können Sie sehen, wie das für die mobile Navigation funktioniert. Und da wir auf dem Handy sind, brauchen wir nichts von diesem Haring. Wir fügen dort einfach Text in Excel ein. Das heißt, wir werden die Größe unserer Menüpunkte erhöhen. Vielleicht hätte ich keine Angst davor, dort sogar fünf Excel zu platzieren. Ja, ich denke, das ist in Ordnung. Ja, wir können es so lassen. Wenn wir nun auf diese Seite für Handys gehen, wird sie so aussehen. Und das war's für die mobile Navigation. 17. 4portfolioCLOUDS: Im Portfolio-Bereich werden wir mit den Importen beginnen und dann mit der Erstellung von Projektkonstanten fortfahren . In diese Konstante laden wir unsere Projekte, iterieren sie und zeigen sie in unseren Karten an, die wir codieren werden Bei Projekten gebe ich ihre ID an. Für den ersten wird es einer sein. Dann gebe ich ihren Titel und dann die Kategorie ein. Und die letzte wird die Bildquelle sein. Für das erste Projekt wird es nur dieses Projekt sein. Jetzt mache ich das Komma und kopiere es noch dreimal, und kopiere es noch dreimal weil ich die insgesamt vier Projekte habe , die ich anzeigen werde Ich werde nur die IDs aktualisieren. Ich werde die Bildquelle des Projekts aktualisieren. Und jetzt werde ich eine Beschreibung herausfinden, und ich werde diese vier Websites, die ich auf Framer gefunden habe, jetzt in unserer funktionalen Komponente verwenden , dort in der Rückgabe, wir werden diese leeren Fragmente löschen, und wir werden mit dem Abschnitt beginnen Und für diesen Abschnitt setzen wir BY auf 16. Wir haben also etwas Polsterung von oben und auch von unten. Und dann werden wir drinnen mit der Kartierung unserer Projekte fortfahren Lassen Sie uns ihre Projekte mit einem Punkt im MAP-Projektindex erstellen, und im Inneren beginnen wir mit der Bewegung Div. Gehen wir jetzt nach oben und importieren dort Bewegung aus einem Bild oder einer Bewegung. Jetzt werden wir dort Motion Div verwenden und jetzt werden wir Motion Div verwenden. In dieses Motion-Div werden wir den gesamten Inhalt einfügen. Wir werden jetzt die erste Motion-Div-Starttechnologie definieren und dort den Schlüssel als Projekt-Punkt-ID festlegen. Jetzt werden wir den Klassennamen festlegen. Wir verwenden einen Rand mit weißem Rand mit einer Deckkraft von 0,2 dann ein Flexbox-Layout mit Flexrichtung Colum , was bedeutet, dass die Elemente innerhalb dieses Unterschieds untereinander liegen Dann werden wir mit der Cop-Testversion auf mittlerem Bildschirm weitermachen , wir werden Flex Raw machen Das bedeutet, dass die Elemente nebeneinander liegen werden. Wir werden den Text auf Weiß setzen, und wir werden dort auch abgerundetes Excel einstellen. Lassen Sie uns Tree Excel machen. Jetzt werden wir schon etwas auf unserer Seite sehen. Dann fahren wir mit dem Hintergrund fort , bei dem wir den Farbverlauf nach rechts setzen, und wir werden die Farben über zwei festlegen. Da es sich um einige Codes handelt, die ich zuvor in Figma definiert habe, werde ich sie einfach kopieren und dort einfügen, und es sollte eine gräuliche Farbe entstehen Dort werden wir Bettwäsche waschen. Dann werden wir auch angeben, was dazwischen liegt. Das bedeutet, dass wir in diesem Unterschied einen gleichmäßigen Abstand zwischen unseren Elementen haben werden in diesem Unterschied einen gleichmäßigen Abstand zwischen unseren Elementen , von Anfang bis Rand nach unten. Außerdem werden wir vorerst die Breite festlegen. Lassen Sie uns eine gewisse Anfangsbreite auf dem mobilen Bildschirm festlegen. Es wird 300 Pixel geben, und auf einem mittleren Bildschirm und höher verwenden wir etwa 1.100 Pixel, aber wir können diese Werte später anpassen Jetzt können wir endlich die Form unserer Karten sehen. Wir werden das oben drauf haben wollen. Lassen Sie uns eine Sticky-Klasse mit den Top 28 verwenden. Das heißt, wenn wir scrollen, kleben diese Gegenstände übereinander und es entsteht der Effekt „Karten stapeln Wenn wir jetzt zum Verpackungsbereich gehen, können wir dort einen Container und ein Mix-Auto platzieren Das bedeutet, dass unsere Projekte im Mittelpunkt stehen werden. Wenn ich dort so etwas wie die Haupthöhe auf 300 Viewportet setze , kann ich auf meiner Seite nach unten scrollen Und Sie können sehen, dass es die erste Karte gibt, und ich scrolle nach unten, sie liegen übereinander, und dann funktioniert das so, und dann funktioniert das so dass es einen weiteren Abschnitt geben wird, und diese Portfolio-Komponente wird einfach aus dem Viewport entfernt, sodass wir sie nicht sehen werden Und wenn wir nach oben scrollen, werden wir wieder alle Karten untereinander sehen Jetzt werde ich ihren Anfangszustand unserer Animation definieren. Das heißt, wir werden mit Opazität Null beginnen. Das bedeutet, dass die Elemente zunächst unsichtbar sein werden und auch dieses Y, es wird 50 Pixel unter seiner endgültigen Position nächste Mal wird es sein, während die Elemente sichtbar sind, und das, während sie sichtbar sind, ist die Definition von Animation, wenn die Elemente sichtbar werden. Dort setzen wir opacit auf eins und Y auf Null. Dann wird es ein Übergang sein. Das heißt, die Dauer wird für uns eine halbe Sekunde betragen. Und die Verzögerung wird Index mal 0,2 sein. Das bedeutet, dass es zu einer gewissen Verzögerung bei der Animation kommen wird, und das bedeutet, dass nicht alle Elemente und das bedeutet, dass nicht alle Elemente auf unserer Seite angezeigt werden, aber mit dem Index wird es länger dauern. Es wird so aussehen, dass die erste Karte zuerst angezeigt wird und dann langsam der Rest der Karte nach dieser angezeigt wird , weil dann dieser Welleneffekt erzeugt wird wenn das erste Element angezeigt wird, und dann langsam werden auch alle anderen Elemente angezeigt. Jetzt definieren wir auch einen Viewport, den wir auf True setzen werden. Das bedeutet, dass diese Animation ausgelöst wird , sobald das Element sichtbar wird. Es wird für die Bewegungsdefinition verwendet, wir werden mit dem Absatz-Tag innerhalb dieses Absatz-Tags beginnen , wir werden eine Kategorie mit Projektpunkten haben Im Folgenden wird es Überschrift zwei sein. Es wird einen Projekttitel geben. Und dann werden wir eine geordnete Liste in dieser ungeordneten Liste haben eine geordnete Liste in dieser ungeordneten Liste Wir werden einen Listenpunkt haben, und innerhalb dieser Listenelemente werden wir Aufzählungspunkte haben Was wir mit dem Projekt erreicht haben, ist, dass wir im Bereich Technik in unserem Listenelement eine der Benutzererfahrung um 40% erreichen werden. Für die Projektkategorie mache ich so etwas wie Text zu Grau, 200, dann Text zu klein. Für den Projekttitel werde ich Text in Excel schreiben, Schriftart, beide, und auf mittlerem Bildschirm können wir ihn auf Text für Excel erhöhen. Für die ungeordnete Liste verwenden wir Leerzeichen Y zwei Das heißt, all diese Blutpunkte haben einen gewissen Abstand zwischen ihnen und keine übereinander gestapelten Bögen Für das Listenelement mache ich Plex, Box-Layout und Items to Center Und dann werde ich neben diesem Blot-Point ein React-Icon erstellen Wir können den AI Outline Check durchführen. Für dieses Symbol werden wir React Icons AI verwenden. Lassen Sie mich NbMiract-Icons machen. Wenn wir diese Prüfung nun durchführen, haben wir diese Option für diese Bibliothek Ich werde eintreten. Auf diese Weise wird es importiert. Wenn ich es jetzt speichere, wird es funktionieren. Auf unserer Seite haben wir dieses Symbol. Wir werden den Klassennamen mit Breite 25 und Höhe 25 und den Text Emerald 400 hinzufügen . Schauen wir uns jetzt die Seite an. Wir haben es nicht erhöht, aber dies sind einige Werte, die Sie erhöhen können , falls Sie diesen Scheck vergrößern möchten. Ich werde es so lassen. Und ich werde dort auch das Feld X vier setzen . Ich nehme diesen Listenpunkt und füge ihn noch zweimal ein. Und für diese verbesserte Benutzererfahrung werde ich es einfach nehmen und es in einen anderen Text ändern. Wir können die Seitengeschwindigkeit um 50% verbessern. Und bei letzterem wurde der Mobilfunkverkehr um 35% erhöht. Dies sind natürlich einige Beispielwerte , die da sein können. Und außerdem haben wir das derzeit fest codiert. Was wir tun können, ist, dass wir dort ein neues Feld erstellen können. Ich werde Kugel 0.1 machen. Dann kopiere ich das, füge es ein, mache Punkt 0,2 und drei. Dann nehme ich das auch mit dem Koma und kann es für andere Projekte verwenden. Dann nehme ich diese Werte. Stell es da hin. Außerdem dieser Stichpunkt. Und sogar der letzte. Und in der Iteration mache ich das Projekt Bullet 0.1, füge es für die anderen ein, mache Bullet 0.2 und drei Und jetzt, zum Beispiel, wenn es um das vierte Projekt geht, werde ich das in eine zufällige Sache ändern Auf unserer Seite können Sie sehen, dass wir es in Ordnung haben, aber nur für den ersten haben wir den anderen Wert. Jetzt haben wir ein Problem mit der ersten Karte. Habe ich etwas vergessen? Ja, ich habe vergessen, die Werte dort einzutragen. Lass es mich einfach so formulieren, speichern und wir fahren unter der ungeordneten Liste mit dem Bild Und für dieses Bild legen wir die Projektquelle, Bildquelle und dann den Projektpunkttitel fest, dann setzen wir 500 auf die Höhe, wir setzen 300 und für den Klassennamen geben wir Round Large ein Jetzt werden wir es speichern. Sie können sehen, wie unsere Projektkarten aussehen und welche Dinge wir tun sollten. Erstens sollten wir den gerundeten Wert nehmen , den wir in der Bewegung div haben. Wir verwenden ihren Baum Excel. Das heißt, wir werden es auch für das Bild verwenden. Dann gibt es in dieser Medium-Flex-Reihe kein Problem , das so sein sollte. Es gibt ein Problem, dass dort ein Div fehlt. Diese Flex-Zeile, wir wollen jetzt ein Div für den Text haben, und dann ist das Bildelement alleine in Ordnung , weil es auf der rechten Seite platziert wird. Da es sich um eine Flex-Zeile handelt, bedeutet das, dass wir diesen Text in ein Div einfügen und mich dort auch einen Tab erstellen lassen. Diese beiden Elemente werden nebeneinander stehen, und auf dem mobilen Bildschirm werden sie mit dieser Spalte für die Flex-Richtung untereinander angezeigt. Was wir nun in diesem Div tun können , das unsere Projektinformationen enthält, werden wir dort das Feld Y auf vier setzen. Dann gehen wir auch zu diesem Wrapping-Motion-Div über, ich würde dort Leerzeichen X bis vier setzen. Und ich würde sogar ihre Leerzeichen Y bis sechs angeben. Wenn wir nun die Seite überprüfen, müssen wir den Rand nach unten vergrößern. Erhöhen wir diesen Wert auf 24 und dann gehen wir zu dieser Motion Di über und setzen das Mx-Auto ein. Jetzt ist es zentriert, und jetzt können wir unseren Portfolio-Bereich testen, und wenn wir nach unten scrollen, überlappen sie sich gegenseitig Das wird für den Portfolio-Bereich sein. 18. 5stackCLOUDS: Für die Stack-Komponente werden wir dies in Ports tun. Falls Sie diese Bibliotheken noch nicht haben, öffnen Sie ein Terminal, führen Sie NPM, I aus und kopieren Sie diese Bibliotheken Zum Beispiel dieser React Intersection Observer. Das werden wir verwenden, damit die Animation wieder angezeigt , um dies mithilfe der Ansicht wird , um dies mithilfe der Ansicht zu erreichen, wenn wir auf und ab scrollen, diese Animation des Stapels wird wieder angezeigt Dann Framer-Bewegung. Nochmals, falls du das noch nicht hast, einfach NPM, ich und setze es dort ein, reagiere Icons. Wir können es auch dort platzieren Das bedeutet, dass wir mit den Symbolen, die wir für unseren Stack verwenden werden, Zugriff auf diese Bibliotheken haben. Wenn wir uns jetzt zusammensetzen und die Bibliotheken installieren, habe ich sie schon, aber ich kann es einfach noch einmal machen Bevor wir nun die Stack-Komponente definieren, werden wir dort ein Array von Stack-Elementen mit C-Stack-Elementen erstellen Stack-Elementen mit C-Stack-Elementen Und dort werden wir für jedes Element eine ID und dann einen Namen haben. Zuerst wird ein Framer sein, dann das Symbol, das erste Symbol das Framer-Symbol mit einer Größe Dann Farbe, ich kann vorerst da sitzen, Text grün 200, und dann können wir ihr Komma setzen und es dort einfügen, so oft Ich werde die Namen und Symbole aktualisieren. Und ich habe auch einige andere Symbole für die anderen vier Symbole ausgewählt die anderen vier Symbole , weil es einige Platzhaltersymbole gab. Jetzt werden wir Framer Figma, React Note, Mongo Di B und Docker verwenden React Note, Mongo Di B Dann gehen wir weiter nach unten und beginnen dort mit der Definition von Animationsvarianten für die Animationsvarianten für Ich werde C Variance oder Item Variance starten. Und ich setze Variante für versteckt, was die Indexnummer nimmt, und dort wird Adipositas auf Null gesetzt, und für x nehmen wir den Rest des Index und wenn er Null ist, dann ist er -100 an der richtigen Position und an der falschen Position ist es Das ist ein sogenannter Turner-Operator. Auf diese Weise werden wir dafür sorgen, dass die Stapelelemente von links und von rechts verschoben werden links und von rechts je nachdem, ob dies wahr oder falsch ist Dann haben wir unten eine weitere, die als sichtbar bezeichnet wird , und für diese werden wir die Opazität auf eins x auf Null setzen und zur Dauer drei übergehen Ich habe mit der falschen Klammer angefangen, ich muss da eine von Carl machen Lassen Sie uns das durch das Quadrat ersetzen, und weiter unten können wir damit beginnen die Stack-Komponente selbst zu definieren. Im Inneren beginnen wir mit der Einrichtung der Animationssteuerungen. Ich werde die konstante Steuerung übernehmen und ich werde Animationen verwenden. Dann richten wir den Schnittpunktbeobachter ein. Das heißt, wir stellen das Ding jetzt ein, wir importieren es dort. Und damit wird diese Animation wieder erscheinen, wenn wir diese Komponente wieder in unseren Viewport bringen Dort mache ich eine Konstante, und ich werde die Referenz und in View für die Verwendung in View verwenden Drinnen werde ich Threshold 2.1 machen. Dann werde ich mit der Einstellung des Use-Effect-Hooks fortfahren , um die Animation basierend auf dem Anzeigestatus auszulösen . Ich verwende den Effekt dann im Inneren, ich mache die Konditionierung, und wenn das sichtbar ist, werden wir Steuerungen machen , die mit sichtbar beginnen. Und wenn es nicht sichtbar ist, werde ich dafür sorgen, dass die Steuerung zunächst versteckt wird. Welche dieser beiden Artikelvarianten gibt es? Und dann werden wir dort sagen , dass dieser Effekt immer dann ausgeführt wird wenn die Steuerelemente sichtbar sind Abhängigkeiten werden sich ändern. Das heißt, er löst die Animation startet, wenn die Komponenten sichtbar werden, und dass die Animation auch wird, wenn sie aus der Ansicht entfernt wird. Dort werden wir ein Abschnitts-Tag erstellen. Und innerhalb dieses Abschnitts-Tags beginnen wir mit DIV und lassen mich erklären, warum ich das zusätzliche Div mache und nicht in der Sektion. Für dieses Div möchte ich das maximale Gewicht festlegen. Im Moment machen wir etwa 250 Pixel, weil wir nur wollen, dass es vertikal und nicht horizontal ist, aber wir können das auch später anpassen und es einfach auf horizontal ändern und so einstellen, dass Oddo mit Text in der Mitte gemischt Wir haben also dieses Zentrum. Für die Sektion. Wenn ich einen speziellen Hintergrund für den Abschnitt hinzufügen möchte, vielleicht einen linearen Farbverlauf, könnte ich das dort machen, und es wird eine volle Breite haben. Zum Beispiel Hintergrund auf Weiß. Wir müssen dort einige Inhalte platzieren. Und lassen Sie mich dort einige Inhalte einfügen und lassen Sie mich ihren Hintergrund auf Grün setzen. Jetzt werden Sie die Unterschiede sehen. Wenn ich auf unsere Seite gehe, können Sie sehen, dass der weiße Hintergrund in diesem Wrapping Section Tag die gesamte Breite einnimmt und der Inhalt, den ich mit diesem grünen Hintergrund verwenden möchte , sich darin befindet und dass er diese maximale Stärke hat, die ich auf 250 Pixel eingestellt und zentriert habe. Wenn ich es dort im Bereich „Umhüllung“ machen möchte, nimmt es den Wandabschnitt und der eigentliche Hintergrund, den ich möchte, sieht dann so aus. Lass es mich dann so benutzen. Lassen Sie uns vorerst die Hintergründe loswerden. Dort kann ich mit Überschrift zwei beginnen. In diese zweite Überschrift werde ich meinen Stapel legen. Blow, ich werde ein Div machen. Und in diesem Div werde ich über die Stack-Elemente iterieren In dieser Iteration der Stapelelemente werde ich ein Motion-Div Und bevor wir mit diesem Div beginnen, werde ich einfach die Überschrift und das Div, das das umschließt, stylen und das Div, das das umschließt, stylen Für meinen Stapel verwende ich Text 7, Excel, Text Grau, 200, Schrift Bolt und etwas Rand nach unten. Für dieses Div verwende ich einfach das Rasterlayout und die Standardeinstellung Gap to Eight. Es wird nur Grid Coms One geben. Das bedeutet, dass all diese Bewegungsunterschiede untereinander liegen werden, und zwar in einer Spalte Mal sehen, wie das aussehen wird. Lassen Sie uns einfach Div, die Indexpunkt-ID, in Gang setzen . Für den Schlüsselwert und dann für den benutzerdefinierten Wert geben wir den Index ein. Dann wird dies zunächst ausgeblendet. Und natürlich nicht die Index-ID, sondern die Punkt-ID des Artikels. Dann animieren wir zwei Steuerelemente, dann Varianzen für Elementvarianten. Und für einen Klassennamen setzen wir den weißen Hintergrund auf 0,1 Deckkraft Wir fahren mit dem Flexbox-Layout fort und zentrieren es, indem wir die Mitte ausrichten und die Elemente so zentrieren, dass sie horizontal und vertikal zentriert werden Dann fxraw, das bedeutet, dass die Elemente innerhalb des Stuffs nebeneinander liegen Dann verwenden wir abgerundetes Excel, Shadow Large und etwas Bettwäsche. Und auf Haar können wir einfach Shadow to Excel machen. In diesem Bewegungsbereich werden wir nun ein Div für das Symbol erstellen Dort machen wir ein M-Punktsymbol. Wir können eine Klasse hinzufügen, und im Inneren werde ich ihren Rand nach unten und das Dollarzeichen mit der Punktfarbe m angeben. Das heißt, dort wird dieser Klassenname mit der Punktfarbe des Elements gesetzt , und wir haben dort den Text grün 200 gesetzt. Dann haben wir dort das Symbol selbst, und unten werden wir den Text schreiben, in dem wir den Punktnamen des Elements anzeigen werden. Dort mache ich Text weiß mit einer Deckkraft von 0,2, Text drei Excel Transformiere und drehe um 90 Grad. Und jetzt zu dem Dave, der diese Iteration abschließt, gebe ich den Verweis auf Rev. und das bedeutet, dass unsere Animation dadurch weiß, wann dieser Container auf dem Bildschirm sichtbar ist Wir können die Animation sehen, wie sie läuft. Es gibt nur eine Sache, die ich reparieren muss. Es fehlt T für unsere Drehung um -90 Grad und ich werde es aktualisieren Sie können sehen, wie die Animation funktioniert, und das war's für diese Stack-Komponente 19. 6servicesCLOUD: Jetzt erstellen wir einen recht einfachen Abschnitt mit dem Namen Dienste mit den Diensten , die wir anbieten werden. Was ich dort tun werde, ist, dass ich nicht einmal etwas importieren muss und ich werde einfach ihre Konstante mit Diensten erstellen , und dort werde ich in diese Konstante die angebotenen Dienste einfügen. Ich beginne mit dem ID-Feld, das Null, Eins sein wird. Sie können dort nur eins angeben, aber aus Designgründen werde ich dort auch Null angeben. Dann werde ich ihren Titel angeben. Dann werde ich ihre Beschreibung angeben. Und das wird es sein. Jetzt werde ich es mit dem Inhalt füllen , den ich dort platzieren möchte. Wenn Sie sich inspirieren lassen möchten, werde ich dort Full-Stack-Webentwicklung, APA-Entwicklung, Datenbankdesign, Cloud-Integration, DevOps und CICD sowie Leistungsoptimierung vorstellen Dann auch eine Beschreibung. Und dann werde ich in diese Rückkehr gehen und dort ein DIFF für dieses Div erstellen, ich werde den Text PI 20 auf Weiß setzen. Ich kann auch die Spalte Container-Klasse, Mix Audio Flex und Flex Direction einfügen . Und auf dem mittleren Bildschirm werden wir die Flex-Direction-Zeile einfügen. Das bedeutet, dass wir zwei Divs erstellen müssen . Die erste wird mit dem Titel sein. Das heißt für uns, es werden Dienste sein und der zweite Teil wird die Liste der Dienste enthalten. Das heißt, wir werden über unsere Dienste handeln , die wir erstellt haben, und intern werden wir DIV ausführen . Dieses Div wird einen Schlüssel haben, und das wird die Service-Punkt-ID sein. Außerdem wird es einen Kurs mit Marsch nach unten geben. Es wird 16 Flexbox-Layouts geben, und wir werden die Elemente so platzieren, dass sie nicht wirklich zentriert Wir werden es zum Start bringen. Jetzt wird es auf unserer Seite angezeigt. Wir können dort mit dem nächsten Div weitermachen . Das wird eine andere Textfarbe haben. Lassen Sie uns den Text grau 400 setzen. Schriftboot, Text, fünf, Excel und Rand, um sechs zu schreiben. Dort werden wir die Service Dot ID eingeben . Wir werden es speichern. Jetzt können wir es auf unserer Seite sehen. Für den Titel der Dienstleistungen setzen wir die Breite auf 25% und die Bettwäsche auf acht. Jetzt wird es besser. Was wir tun werden , ist, dass wir für unsere Überschrift Text auf sechs Excel, die Schriftart Extra Boot, Sticky und Top 20 setzen werden . Dadurch wird der Effekt erzielt, dass jedes Mal, wenn wir auf der Seite scrollen , der Text über der Höhe unseres Darstellungsfensters angezeigt wird Bei den Diensten werden wir die restlichen 75% der Breite dort platzieren die restlichen 75% der Breite Wir werden dort auch ein weiteres Div hinzufügen, und dieses Div wird Überschrift drei für den Service-Punkt-Titel übernehmen Und auch ein Absatz-Tag für die Beschreibung des Service Dot. Die Klasse für den Diensttitel ist Text nach Excel, Schriftart, beide und Rand nach unten zwei. Beschreibung, wir geben den grauen Text 400 ein und Sie können sehen, wie sich der Dienst an der festen Position befindet. Und während wir scrollen, bewegen sich diese Dienste, und das war's für unseren Servicebereich Jetzt können wir mit dem nächsten weitermachen. 20. 7contactCLOUDS: Für den Kontaktbereich werden wir im Haupt-Div eine Klasse von PY auf 16 setzen und dort eine maximale Breite festlegen. Lassen Sie uns 1.200 Pixel verwenden und das Ganze mit einer Mischreihenfolge zentrieren. Für dieses Div wird es den Text mit unserer E-Mail-Adresse und auch einen Aufruf zum Handeln enthalten, z. B. um Kontakt aufzunehmen Wir werden die Flexbox-Layoutelemente zentrieren und zentrieren , um sie vertikal und horizontal zu zentrieren Außerdem legen wir das Volumen der Flex-Richtung fest und auf einem mittleren Bildschirm geben wir die Flex-Richtungszeile Dann werden wir im Inneren ein weiteres Div erstellen, um die kalte Aktion von der tatsächlichen Adresse zu trennen Dort werden wir den Codekt platzieren. Wir werden die zweite Rubrik „Technologie“ erstellen und dort „Einsteigen“ eintragen Und wir können Spentex kontaktieren. Für den Touch in Spentex werden wir später Lassen Sie uns nun den Text grau 400 eingeben. Für die zweite Überschrift selbst werden wir sie auf einem mittleren Bildschirm erstellen, Text sieben in Excel. Text für Excel auf dem mobilen Bildschirm, sowohl am Rand bis zum unteren Rand als auch weißer Text mit einer Deckkraft von 0,5 Jetzt können Sie es auf unserer Seite sehen. Dort unten werden wir mit Anchor Tech weitermachen, und innerhalb dieser Anchor-Technologie werden wir unsere E-Mail haben, die auf dow.com sein wird Ich kann es so ausdrücken und für Anchorteg werde ich eine Klasse werde ich Und in diesem Kurs werde ich auch Text auf mittlerem Bildschirm bis sieben Excel verwenden . Bei mobilem Text für Excel, Schrift, halbfett bis weiß, mit etwas Dekoration unterstreichen Lassen Sie uns vorerst Gray 400 verwenden. Dann machen wir Dekoration zwei und unterstreichen zusätzlich Offset vier, und bei Her ändern wir die Dekoration auf Grau 200 Wir werden auch den Übergang und die Dauer 300 verwenden . Lass es uns speichern. Jetzt können Sie auf unserer Seite sehen, wann ich mit der Maus darüber fahren werde wie sich die Unterstreichung oder Dekoration verändert Was wir zu diesem Anchor-Tag hinzufügen werden, ist HRF, und HRF wird an gon doo.com gesendet Wir werden immer noch das Formular haben, um die E-Mail mit einer Nachricht auszufüllen und sie zum Laufen zu bringen, sodass der Benutzer E-Mails per Formular an uns senden kann, und dort erstellen Laufen zu bringen, sodass der Benutzer E-Mails per Formular an uns senden kann, wir In diesem Div haben wir eine weiße Textklasse mit einer Opazität von 0,5, Rand von oben bis 12, und jetzt haben wir ihr Telefon mit der Nummer und auch der Adresse Das heißt, wir werden ein weiteres Div für das Telefon machen. Dort werden wir eine Paragraph Tech mit Telefon und auch Anchor Tech mit der tatsächlichen Telefonnummer erstellen . Geben wir dort etwas wie +99 078-897-9999 ein. Lass es Dort in Anchor Tech werden wir HRF machen, und in HRF werden wir diese Telefonnummer ohne Leerzeichen eingeben diese Telefonnummer ohne Und wir können auch das Styling machen. Das heißt, für das DIF wird es der Abstand zu den unteren acht sein , für das Telefon Es wird Text zum Bogen und zum Rand am unteren Rand sein. Für das Anker-Tag wird es Text in Excel, Telefon, Semi Bolt, Underline, Dekoration Grau 400, Dekoration Zwei Unterstreiche Offset vier auf Her Decoration grau 400, Übergang und Dauer Jetzt können wir das auf eine andere Zeile setzen und auch diesen Anker-Tag darunter Unterhalb dieser Tiefe werden wir nun eine weitere erstellen. Dann erstellen wir einen Paragraphen-Tack mit Office. Wir werden das kopieren und noch dreimal als Grundlage verwenden. Dann setzen wir Street. Dort geben wir Berlin und Deutschland für den Klassennamen an, wir können die Schrift Bolt setzen. Dort setzen wir den Text groß und den unteren Rand auf acht. Lass es uns auf unserer Seite sehen. Lassen Sie uns nun mit dem Formular fortfahren. Das heißt, wir müssen unter dieses Div gehen. Wir werden eine Formtechnologie entwickeln. Und innerhalb dieser Formular-Technologie werden wir ein weiteres Div erstellen , das für die Eingaben da sein wird, dann ein weiteres, das dann ein weiteres, das für die Eingabenachricht da sein wird, und dann ein drittes, das für die Schaltfläche da sein wird. Was das Formular angeht, fügen wir Klassen hinzu und beginnen mit einer maximalen Breite von 1.200 Pixeln, Mx, Auto, Flex Wrap und Justify between Aber mit justify between bedeutet das, dass es einen gleichmäßigen Abstand zwischen diesen drei Divs geben wird gleichmäßigen Abstand zwischen diesen drei Divs Fahren wir nun mit den Divs fort. Für den ersten fügen wir die Breite auf 50% Leerraum Y auf sechs hinzu, und im Inneren fügen wir ein Div ein, das das Label mit der Eingabe enthält, und wir werden es kopieren und einfügen, weil zweite Dip auch Label und Eingabe enthält In der Bezeichnung werden wir eine E-Mail haben und in der zweiten den Betreff. Lassen Sie uns für die Eingabe auch die Technologie so schließen. Und fangen wir damit an, diese Labels für das Etikett zu gestalten. Der Stil lautet „Block anzeigen“, Text zu klein“, „Schrift“ bis „Mittel und „Text Grau 300 mit Rand unten zwei sowie „HTML“ für E-Mails. Wir können diese Zeile einfach kopieren und dort platzieren und sie Betreff ändern. Und HTML 4 wird auch Betreff sein. Nun zur Eingabe dort, wir werden unsere Art der E-Mail-ID, auch E-Mail, Platzhalter, auf email.com setzen unsere Art der E-Mail-ID, auch E-Mail , Platzhalter, auf email.com Dies wird ebenfalls erforderlich sein. Und für den Klassennamen geben wir dort die komplette Bettwäsche X vier, Bettwäsche y23, Hintergrund transparent Rand und Rand weiß mit Deckkraft 0,2, groß abgerundet und ohne Fokus auf Kontur Der Fokus liegt auf Ring zwei und der Fokus auf Ring Grau 200. Jetzt können wir die Eingabe testen. Im Grunde müssen wir nur diese Eingabe kopieren, dort einfügen und diesen Typ in Text ändern. Ändern Sie diese ID in den Betreff des Platzhalters. Wir werden angeben, worum es hier geht. Gehen wir jetzt zum zweiten Div über. Für das zweite Div werden wir Klassennamens auf die volle Breite setzen. Bei mittlerer Bildschirmgröße setzen wir die Breite auf 50%. Abstand von oben beträgt sechs, und auf einem mittleren Bildschirm setzen wir diesen Rand auf Null zurück. In dieses Div werden wir das Etikett für die Nachricht einfügen. In diesem Label werden wir eine Blockklasse, Text in klein, Schriften in mittel, Text in Grau 300 und Rand unten platzieren eine Blockklasse, Text in klein, Schriften in mittel, Text in Grau 300 . Und auch für dieses Label werden wir HTML 4 verwenden, und zwar für Nachrichten. Unter diesem Label werden wir einen Textbereich platzieren. Und für diesen Textbereich werden wir die ID-Nachrichtenzeilen 28 daraus machen. Das heißt, das ist fehlerhaft, es wird auf unserer Seite mit acht Zeilen angezeigt. Jetzt kannst du es sehen. Wir werden es auch erforderlich machen. Wir werden dort Ihre Nachricht als Platzhalter hier platzieren. Und jetzt ist es Zeit für den Unterricht. Wir setzen die Breite auf Vollbettwäsche X vier, BY 23, Hintergrund transparent. Rand weiß mit Opazität 0,2, abgerundet groß, Fokuskontur, keiner und Fokusring zwei mit grauem Fokusring, 300 oder 200, wie wir es zuvor getan haben Jetzt ist es besser. Lass uns die Seite überprüfen. Wir müssen einen gewissen Abstand zwischen diesen beiden Einbrüchen machen. Lassen Sie uns das tun, und zwar indem wir diese Breite für diesen auf 48% und dort auch auf 48% Wenn wir nun die Seite überprüfen, wird sie so aussehen, was meiner Meinung nach in Ordnung ist. Jetzt machen wir einfach den Button. Das heißt dort unten. Wir werden den unteren Tag machen. Wir können dort einfach diese Zeile eingeben. Für das Styling des Dif wird die Breite bis zur vollen Breite auf dem mittleren Bildschirm sein, es wird Breite sein. Lassen Sie uns noch einmal diesen Abstand von 48% von oben verwenden Bei mittlerer Größe beträgt der Rand von oben bis vier und bei mittlerer Größe auch der Text nach rechts Jetzt werden wir die Schaltfläche selbst gestalten und auch den Buttontyp hinzufügen, der eingereicht werden soll. Da wir dieses Formular für den Klassennamen verwenden, werden wir ihren Inline-Block einfügen. Breite und Höhe bis 16. Hintergrund bis transparent. Also Grenze. Lassen Sie mich Border Grey 400 verwenden. Und Textgrau 400. Es hat also dieselbe Farbe. Dann werde ich mich für die Schrift mittel, abgerundet, groß entscheiden. OH, ich werde den Hintergrund auf Grau ändern . Bei ihr wird der Text auf Weiß umgestellt. Übergang und Dauer 300 sind raus, also erstellen wir eine flüssige Animation und transformieren und bewegen den Mauszeiger auf eins oder fünf Wenn du es jetzt speicherst und wir versuchen, den Mauszeiger über diese Schaltfläche zu bewegen, kannst du sehen, wie sich die Skala, die Farbe und auch die Farbe des Pfeils ein wenig ändern und auch die Farbe des Wenn Sie nun möchten, dass dieses Kontaktformular funktioniert, müssen wir eine Methode hinzufügen und sie auf „Posten“ einstellen Gehen wir zu dieser Seite, atgtfm dot IO slash Login. Dann melden wir uns an und klicken dort auf Erstellen. Geben Sie dort einen Namen ein und geben Sie dort die Zeitzone ein. Kopieren Sie diesen Endpunkt, aber wir werden ihre Aktion hinzufügen, und in diese Aktion werden wir diesen Endpunkt einfügen, den wir von GetFmtIO erhalten , und wir können auch die ID des Formulars eingeben Und wenn wir uns unseren Abschnitt ansehen, müssen wir dort auch von justify center zu justify between wechseln justify center zu justify between So wird das Kontaktformular aussehen. Jetzt werden wir es mit der Reaktionsfähigkeit versuchen. Wir können sehen, dass wir dort ein Problem haben Gehen wir zu unserem Code und machen wir dort diese Breite oder aus mittlerer Größe Außerdem werde ich es dort platzieren, was schon funktioniert. Lassen Sie uns auch die Breite auf die volle Breite setzen. Lassen Sie uns auch die Bettwäsche X auf 12 setzen. Lassen Sie uns das jetzt kopieren und dort zur Nachricht übergehen. Wir können es dort hinstellen. Wir können das auch auf die Schaltfläche setzen, und das ist für den Kontaktbereich. 21. 8footerCLOUDS: Jetzt der letzte Abschnitt und das wird Footer sein. Für die Fußzeile müssen wir ein paar Icons importieren. Lass es uns jetzt machen. Wir werden KI-Fail Gita AI Outline X importieren, KI scheitern bei Facebook und auch KI scheitern bei Instagram Wir werden mit Putter-Technologie beginnen und in dieses Footer-Tag werden wir den Inhalt einfügen Lass uns ein bisschen stylen. Es wird klassenabhängig sein, weil wir auch absolute Elemente haben werden. Das wird diesem Text einen gewissen Designstil verleihen. Lass es mich später erklären. Lassen Sie uns jetzt einfach den großen Text machen. Wir werden mit der relativen Klasse beginnen. Dann fahren wir mit dem Index bis zehn, Text zur Mitte und dem Rand nach oben bis acht fort. In diesem Tauchgang machen wir H eins mit John. Aber lassen Sie es uns so mit Großbuchstaben belassen. Das Styling wird auf dem Handy ausgeblendet und auf dem mittleren Bildschirm wird es als Block angezeigt. Lassen Sie uns jetzt zehn RAMs machen. Großer Text. Lass uns 15 RAMs machen. Und vergessen wir nicht Medium. Lass es uns an 12 RAMs schreiben. Lassen Sie uns auch ihre Schrift bolzen, den Text weiß mit einer Opazität von 0,1 setzen Text weiß mit einer Opazität von 0,1 Und im Folgenden werden wir dasselbe für die mobile Version tun. Lassen Sie uns diese H-One-Technologie kopieren und einfügen. Und da machen wir es versteckt auf dem mittleren Bildschirm. Und stelle dort auch die relative Klasse ein. Jetzt werden wir es so belassen. Theoretisch brauchen wir es dort nicht, weil es versteckt ist und nur vom Medium aus angezeigt wird Das heißt, ab diesem Bild beginnt es mit 12-Prim-Text. Und ich schätze, das ist es Gehen wir nun weiter und weiter oben werden wir die Hintergrundelemente für unseren Text erstellen. Wir werden dies auch duplizieren und zuerst werden wir es für den Desktop und dann für das Handy erstellen. nun in diesem Dip Lassen Sie uns nun in diesem Dip drei weitere Dips erstellen, und ich werde zuerst einen codieren, dann werden wir einfach kopieren und einfügen Zuerst wird das Glas mit dieser Wickeltiefe bis zur Mitte versteckt, die absolute Position, der Nullpunkt und der Überlauf verdeckt Der erste Unterschied absolute Position: Breite oben auf 30%, links auf ein Viertel, Breite 100 Pixel, Hintergrund auf Grau 300, jetzt bei voller Deckkraft abgerundet auf 40, transformiert und übersetzt X auf -50% und Y ebenfalls auf -50% Lass es mich da hinstellen. Und das Einzige, was ich da hingestellt habe, ist das. Übersetze Y -50%. Ich werde es nicht in eine andere Zeile stellen. Erinnern wir uns einfach daran. Und jetzt kopiere und füge diese Zeile noch zweimal ein. Ich werde es so lassen. Wir werden keine Werte aus diesen Übersetzungen ändern. Das einzige, was wir ändern werden, sind die Hintergründe. Lassen Sie mich die Hintergrundnote auf 906.100 setzen. Lassen Sie uns jetzt auch die Opazität ändern. Ich werde diesen zweiten auf 20 und den dritten auf 30 ändern auf 20 und den dritten auf 30 Jetzt werde ich auch das Gewicht ändern. Lassen Sie mich das zweite auf 150 ändern, und das dritte, wir können wieder 100 behalten. Außerdem haben wir vergessen, ihre Höhe anzugeben. Für die Höhe werde ich ihre 100 Pixel angeben. Ich kann das kopieren und dort einfügen. Für den zweiten werden wir 70 Pixel verwenden, und für den dritten können wir die 100 Pixel wieder beibehalten. Nun müssen wir dieser Fußzeile die Klassen Relative und PI 28 mit einer maximalen Gewichtung von 1.200 Pixeln und einem Mix Außerdem können wir die Polsterung x24 setzen. Wir werden das kopieren und unten einfügen. Im Folgenden werden wir dies jedoch löschen, das bei mittlerer Größe versteckt ist. Wir werden dies für mobile Geräte ausblenden und bei mittlerer Größe werden wir diesen Display-Block erstellen. Nachdem wir das gemacht haben, können Sie sehen dass etwas auf unserem Bildschirm angezeigt wurde. Was wir tun müssen, ist mit diesen Positionen zu spielen. Das heißt, wir werden nur die 50% und auch die 33% erreichen. Jetzt können Sie wieder sehen, dass es sich ändert. Jetzt wechseln wir das Oberteil. Wir werden dort 35% angeben und lassen Sie uns 50% machen. Ich denke, wir sollten auch die Farbe ändern , weil sie nicht sichtbar ist. Und lassen Sie uns auch die Größen erhöhen. Die ersten eignen sich hervorragend für Mobiltelefone. den Desktop-PCs müssen wir die Höhe auf etwa 200, 250 und wieder 200 erhöhen etwa 200, 250 und wieder , die Höhe auf 200, 150 für die Höhe auf dem zweiten, und wir können 100 für den dritten behalten. Wir können wieder ein bisschen mit den Werten spielen. Lassen Sie mich ihr Oberteil angeben, zum Beispiel 40%. Dann machen wir 60, dann 45, und wir können dort auch einen anderen Wert angeben, zum Beispiel 20%. 60% da und 40% da. Lassen Sie uns vorerst mit der normalen Fußzeile fortfahren , woher Sie das wissen Wir werden das DIV erstellen und dieses Div einfügen, aber du kannst dort zuerst auch Klassen platzieren Wir werden dieses Grid-Layout, das Standardlayout für Mobilgeräte, es wird Grid Comes One sein, vom kleinen Bildschirm aus werden wir es auf Grid Coms Three umstellen es wird Grid Comes One sein, vom kleinen Bildschirm vom kleinen Bildschirm aus werden wir es auf Grid Coms Three umstellen Außerdem werden wir dort eine Lücke setzen, Text grau 200. Und drinnen werden wir anfangen, die Divs zu platzieren. Im ersten Abschnitt werden wir eine Überschrift mit „Kontaktiere mich“ haben. Dann gibt es mit dem Absatztext die Nummer und als nächstes die E-Mail. Dort werden wir etwas Styling für den Kontakt hinzufügen. Wir können den Font-Bot platzieren, und auch dort können wir Space Y zwei, zwei einfügen. Mal sehen, wie das aussehen wird. Ich denke, es ist in Ordnung. Was wir jetzt tun werden, ist unten, wir werden ein weiteres Dif erstellen, und in diesem Div werden wir wieder Überschrift drei erstellen, nützliche Links, und unter dieser Überschrift werden wir eine ungeordnete Liste erstellen, und innerhalb dieser ungeordneten Liste werden wir das Listenelement erstellen, und innerhalb dieses Listenelements werden wir ein Anker-Tag mit zum Beispiel Home oder für vier Seiten oder Lizenzierung erstellen Home oder für vier Seiten oder Wir können es dort für vier Seiten platzieren, Lizenzierung. Lassen Sie uns dort auch etwas Styling hinzufügen. Es werden also nützliche Links entstanden sein , die beide gebildet haben. Nun, in diesem Dip haben wir Platz Y vier, oder lassen Sie uns zwei behalten. Für die ungeordnete Liste, nichts für den Listeneintrag. Eigentlich auch nichts Für das Anker-Tag werden wir etwas HRF und einen Klassennamen mit unserer Unterstreichung Jetzt können wir diesen Anker-Tag zu allen Elementen hinzufügen. Überprüfe, wie es auf der Seite aussieht. Und wenn wir sichergehen, dass es gut aussieht, werden wir überprüfen, wo der Unterschied endet Wir nehmen es und kopieren es noch einmal. Dort können wir wieder etwas wie soziale Netzwerke, Get Up, X und Linkedin platzieren etwas wie soziale Netzwerke, Get Up, und unter dieser Diskette können wir eine weitere erstellen, die einen Absatz-Tack haben wird und innerhalb des Absatz-Tacks haben wir 2024, alle Wir werden etwas Styling hinzufügen. Lassen Sie uns Margin Top 212, Container, Flexbox-Layout auf kleinem Bildschirm und darüber machen wir Justify between Es gibt also einen gleichmäßigen Abstand zwischen unseren Elementen. Richten Sie die Mitte der Elemente mit einer gewissen Lücke zwischen ihnen Und das ist alles. Außerdem werden wir dem Absatz einen Stil hinzufügen. Lassen Sie uns Text grau 200 machen, und dann fügen wir unter diesem Absatz eine ungeordnete Liste In dieser ungeordneten Liste werden wir das Listenelement hinzufügen Und in diesem Listenelement werden wir die Anchor-Technologie hinzufügen, und innerhalb dieser Anchor-Technologie werden wir die Symbole hinzufügen Ich werde mit AI hL Git up beginnen. Ich werde auch die Größe 30 hinzufügen. Das bedeutet für die Anchor-Technologie, dass wir die HRF des Links hinzufügen müssen, um hochzufahren und wir müssen auch etwas Styling Ich werde ihren Text Klasse 200 haben. Jetzt kopiere ich es noch viermal und füge den Rest der Icons hinzu, Outline C, Facebook und Instagram, Outline s, Facebook. Und Instagram, ich könnte noch eins hinzufügen, aber lass uns das letzte löschen. Lassen Sie uns nur diese vier dabei belassen. Wenn ich dann auf der Seite nachschaue, sehe ich, dass ich sie ordnen muss. Für die ungeordnete Liste füge ich Flax und Flex Row wie folgt Dann kann ich auf der Seite sehen , dass ich da vielleicht auch etwas Abstand machen sollte Außerdem werde ich dieses Wanddif nehmen, es ausschneiden und es außerhalb des Divs platzieren , das die Rasterspalten hat Bei diesem können wir sehen, wo es endet. Aber im Grunde haben Sie das Div mit den Symbolen direkt über der Fußzeile oder dem Ende des Footer-Tags Ich denke, wir können es vom Anker-Tag wegnehmen. Und wir können es dort in dem Div definieren, das diesen Absatztext mit dieser ungeordneten Liste Ich werde den Text grau 400 setzen. Ich werde es auch von dort entfernen, sodass es für diesen Absatz und diese ungeordnete Liste gilt diesen Absatz und diese ungeordnete Liste Auf der Seite wird es so aussehen . Das ist jetzt unsere Fußzeile Wenn Sie es jetzt auf einem Handy überprüfen, können wir feststellen, dass wir dort ein Problem mit dem Text haben Gehen wir dahin, wo es vor dem Medium versteckt wird. Wir können die Textgrößen löschen. Außerdem werden wir Text acht in Excel einfügen. Aber was wir tun werden , ist, dorthin zu gehen, und wir werden auch von Grid Comes ausgehen. Als Nächstes werden wir Spielraum bis zum Tiefpunkt auf 12 erhöhen. Und dann werden wir dorthin gehen. Und für die Ty-Link-Elemente werden wir unterschiedliche Positionen einnehmen. Ändern wir also das erste Element auf 20, das zweite auf ebenfalls 20 und das dritte auf 25. Jetzt die Positionen, fangen wir mit der ersten an, 20%. Bei der zweiten machen wir 60% und bei der dritten machen wir 35%. Vielleicht sogar mehr 65 für diesen, 50. Bei diesem werden wir die Deckkraft erhöhen, und um sie beim ersten zu verringern, funktioniert jetzt unser Fußzeilenbereich 22. 9uiFixesCLOUDS: Ich werde jetzt in einem Ordner einen neuen Ordner erstellen und ihn Abschnitte nennen, und ich werde all diese Abschnitte dorthin verschieben und in Komponenten, ich werde nur diese beiden Komponenten behalten, die ich dort habe. Ich kann es sogar aus der Benutzeroberfläche entfernen. Lass es mich einfach so ausdrücken. Ich kann dort aktualisieren. Ich kann diesen UI-Ordner löschen, und vielleicht habe ich dort auch einen Fehler. Aber wahrscheinlicher ist es nicht, wenn Sie manchmal einen solchen Fehler erhalten. Es reicht aus, wenn Sie die IDE einfach schließen und öffnen, und Sie können sehen, dass der Fehler behoben ist. Jetzt haben wir die Komponenten, wo werden diese Kreise und Wolken sein und die Abschnitte, die ich da habe. Lassen Sie uns das Design der Pinnwand überprüfen und die letzten Aktualisierungen der Benutzeroberfläche vornehmen. Übrigens, so wird unsere Seite in einem Ordner aussehen. Wir brauchen den Imaging-Port dort nicht. Ja, nur einen Ordner entfernt. Ich werde das einfach löschen und nach dem Speichern sollte es in Ordnung sein. Da ist also die Helden-Sektion. Es gibt den Portfolio-Bereich. Jetzt gibt es den Stapel mit den Animationen. Jetzt gibt es die Dienste und es gibt den Kontaktbereich und die Fußzeile Lassen Sie uns nun überprüfen, wie das bei einem Mobiltelefon tatsächlich aussieht Und alles sieht gut aus. Sogar dort und sogar dort. Ich denke, der erste Punkt wird im Farbunterschied liegen, den wir dort sehen können. Wenn wir auf Globus Dot CSS eingehen, der Hintergrund derzeit diese Farbe Nehmen wir es an, und wie wir das ganz einfach beheben können , ist, dass wir zum Heldenbereich gehen und dort anstelle der schwarzen Farbe am Ende diese Farbe einfügen Und jetzt können Sie sehen, dass der Farbunterschied weg ist. Dann können wir in den Portfolio-Bereich gehen und dort für die Projektkategorie den Text blau 400 eingeben, wodurch dieser Text vielleicht auch größer wird. Und es auch fett formatieren. Und ich werde es auf 300 mit einer Opazität von 0,3 ändern. Okay, vielleicht sieben. Ich denke, das ist besser. Für das Portfolio, für die Projektkategorie, werde ich diese Farbe verwenden. Dann können wir für den Stapel diese grüne Farbe beibehalten oder wir können zur Stack-Komponente gehen und den Text grün oder den Texthimmel auf 200 setzen . Mal sehen, wie es aussehen wird. Vielleicht versuchen wir es mit 300. Ich denke, das ist in Ordnung. Lass es uns eigentlich überall aufstellen. Ich nehme einfach diesen Text Sky und füge ihn ein. Ich hab's da vermasselt. Ich lösche einfach das zusätzliche T, speichere es Und was ich tun werde, ich werde das einfach nehmen und es auch in die Projektkategorie einordnen. Vielleicht werde ich sogar die Opazität löschen. Jetzt werden wir nach oben scrollen. Und auch der Stapel sieht gut aus. Nun zu den Diensten, ich nehme diese Himmelsfarbe, gehe zu den Diensten. Für die ID werde ich den Text Sky auf 300 setzen . Ich denke, 300 ist anständiger. Und wir können diesen Text sogar Sky 300 in die Rubrik Dienste aufnehmen. Das heißt, ich werde unseren Text Sky 300 einfügen. Und jetzt zum Kontaktbereich, wir werden dort den Text Sky platzieren. Und auch für die Dekoration, lass uns 300 machen und auch da für diese Dekoration. Und wir können es einfach für diese graue Farbe ändern. Es ist keine große Sache, das zu tun. Ich werde es einfach dort für das Grau einfügen, speichern. Und für die Fußzeile, meinen Lieblingsteil, werden wir dort welche einfügen Fangen wir mit Sky an. Und ich denke, das ist in Ordnung, weil wir bereits die verschiedenen Schattierungen der Himmelsfarbe haben. Am Ende wird es so aussehen. Wir können das und eine weitere Fälschung aktualisieren. Wir werden in unserer Heldenabteilung nachschauen. Wir könnten auch auf Wolken dorthin fahren. Und statt -45% werden wir die 35 machen Und damit werden wir diese Kreise um unser Profilbild herum zentrieren Jetzt gehst du zur Navbar. In der Navbar sehen wir, dass wir diese Anweisungen für den Portfolio-Stack und den Kontakt benötigen diese Anweisungen für den Portfolio-Stack und den Offenbar sollte das funktionieren, aber das liegt nicht daran, dass wir die IDs für unsere Abschnitte nicht festgelegt haben die IDs für unsere Abschnitte nicht festgelegt Was wir tun werden, ist, diesen Abschnitt „Über uns“ zu löschen oder wir werden ihn herausschneiden und ihn unter den Portfolio-Bereich stellen und wir haben tatsächlich Dienste. Gehen wir nun zu jedem unserer Abschnitte. Fangen wir mit dem Portfolio an. Dann werden wir ID hinzufügen. Portfolio-Services, wir werden ID-Dienste hinzufügen. Dann kontaktieren Sie uns, wir werden die ID hinzufügen. Kontakt. Und für den Stapel werden wir ihre ID hinzufügen. Von einem Stapel in unserer Navigationsleiste gehen wir da runter und was wir hinzufügen sollten , ist, dass das eigentlich in eine Ankertechnologie umgewandelt werden sollte . Wir sollten die HRF hinzufügen, und für diese HRF werden wir einen Punktpfad festlegen. Jetzt werden wir das kopieren. Wir werden es dort hinstellen. Ändere das auch in Anchor Tech, speichere es. Wenn Sie jetzt auf unsere Seite gehen, werden wir sehen, dass sie für uns funktioniert. Lassen Sie uns nun die mobile Version unserer Website überprüfen. Versuchen wir, zu verschiedenen Abschnitten zu gehen. Und wir sehen, dass wir auch noch ein letztes Update machen müssen , und das wird unsere geschlossene Navigation um dieses Update erweitern. Lassen Sie uns die mobile Navigation finden, und das ist diese. Und zum dortigen Anker-Tag fügen wir bei Klick auf Close NAF wenn wir auf dieses Element klicken, wird diese geschlossene Navigationsfunktion aufgerufen die NAF auf „Falls“ setzt Das heißt, es wird die Navigation auslösen. 23. 10deploymentCLOUDS: Nun, wie man diese Seite auf Verso einstellt und dieses Leben hat. Wir machen utero Shift B und initialisieren das Repository. DevCloud-Portfolio ist der Name meines Repos. Jetzt kann ich diese Quellcodeverwaltung überprüfen. Dort werde ich alles inszenieren. Ich werde eine erste Nachricht schreiben. Wir können uns verpflichten. Ich werde auf den Zweig Veröffentlichen klicken. Es wird für mich privat sein. Das Def Cloud-Portfolio ist in Ordnung. Drücken Sie die Eingabetaste. Jetzt sollte es in Ordnung sein. Ich kann auf GTA auf Öffnen klicken. Dort kann ich den Code sehen. Jetzt gehe ich zu sal.com und klicke auf Neues Projekt hinzufügen Ich werde in diesem Death Cloud-Portfolio auf Import klicken. Ich werde auf Bereitstellen klicken. Jetzt können wir sehen, dass wir die beiden Fehler haben. Erster in Navbar mit Link und zweiter in Stack mit Symbol Wir werden zum Code zurückkehren und in Navbar reicht es aus, diesen Link in einem Stapel zu löschen, und intc, es reicht aus, einfach dieses Amonicon zu löschen . Stellen Sie nun Aktualisiere eins, übernehme die synchronisierten Änderungen. Und jetzt gehen wir wieder zu Projekten auf Varsel und wir werden dort auf dieses klicken und dann auf Deployments klicken. Sie können sehen, wie Sie darauf drängen , neue Änderungen vorzunehmen, wird automatisch erneut ausgeführt. Jetzt wird es hoffentlich durchgehen. Und wenn wir in Zukunft etwas zu Ihrer Seite hinzufügen, wird dieser Build immer wieder wiederholt werden Und unsere Seite ist live. Wenn ich dort klicke, wird der Link zu meiner Seite geöffnet. Ich kann diesen Link überall aufs Handy kopieren. Jetzt ist er im Internet zugänglich. Es ist wichtig zu beachten , dass, wenn Sie weitere Änderungen an Ihrer Website vornehmen und diese dann pushen, diese Website neu erstellt wird Falls Sie neue Fehler haben, kann sie erneut fehlschlagen. Sie müssen also darauf achten, was Sie in Ihr Repository verschieben. Und nach der erneuten Bereitstellung werden Sie wahrscheinlich so etwas sehen Was wir tun müssen , ist, dass wir einfach diesen dunklen Modus nehmen und ihn auch in einen Modus umwandeln , den wir dort als hellen Modus eingestellt haben Und das können Sie dann einstellen, wenn Sie den Hellmodus für Ihre Website verwenden möchten. Derzeit ist das einfach zu beheben und um das vorzubereiten, können wir dort einfach die gleiche Farbe einstellen wie für den Dunkelmodus. also in Global Z CSS Nehmen wir also in Global Z CSS einfach diese beiden Zeilen, fügen sie dort in das Stammverzeichnis ein und speichern sie. Dann werden wir es auch als Update bereitstellen. Klicken Sie auf das Betriebssystem, um die Änderungen zu synchronisieren Jetzt wird die Doppelseite neu erstellt und das Problem sollte behoben sein 24. Wiederverwendbare Komponente: Kontakt: Wir beginnen damit, diese Komponente als Use-Client für interaktive Hover-Effekte, Port-Trigger-Animationen oder Frame-Motion-Animationen zu deklarieren als Use-Client für interaktive Hover-Effekte, Port-Trigger-Animationen oder Frame-Motion-Animationen Wir importieren auch Bewegung aus einem Frame oder einer Bewegung. Wenn Sie diese Bibliothek noch nicht haben, öffnen Sie ein Terminal, Sie NPM I Frame Motion ein, die Eingabetaste und wir installieren sie Direkt zur Komponente dort werden wir mit einem Abschnitt beginnen Und zu diesem Abschnitt werden wir die Kontakt-ID hinzufügen , und für den Unterricht werden wir 32 Text bis Weiß vertikal auffüllen, und wir werden diese maximale Breite von 1.200 Pixeln mit einem Mito festlegen, um das Ganze zentriert zu gestalten Wir werden dort auch eine vertikale Polsterung auf vier hinzufügen. Wir werden mit dem ersten Motion-Dip beginnen. Dieser Bewegungsabfall beginnt unsichtbar und 20 Pixel unter der endgültigen Position. Solange das Bild sichtbar ist, wird es animiert, bis es vollständig sichtbar ist und seine endgültige Position erreicht Die Animation dauert 0,8 Sekunden, daher setzen wir die Dauer für den Übergang auf 0,8 Dies wird nur einmal animiert , wenn Sie in die Ansicht scrollen. Das bedeutet, dass wir den Viewport einmal auf „true“ setzen werden. Für den Klassennamen legen wir ein Rasterlayout fest, und auf einem großen Bildschirm werden wir die Rasterspalten zwei verwenden und den Abstand auf 16 setzen In diesem Motion-Dip werden wir ein weiteres Div erstellen. Und für Elemente im Inneren verwenden wir den Raum Y 12. Das heißt, wir werden einen gewissen Abstand zwischen ihnen haben. Wir werden eine Bewegung H zwei erstellen, in der wir die Animationen einstellen werden. Wir werden mit der Initiale beginnen. Dies beginnt unsichtbar und 20 Pixel links von der endgültigen Position. Solange dies sichtbar ist, werden wir es sichtbar machen, und auch für den Übergang werden wir die Animation so einstellen, dass sie 0,6 Sekunden mit einer Verzögerung von 0,2 Sekunden dauert . Für den Unterricht setzen wir die Textgröße auf sieben Excel, Schriftart auf beide und das Textgrau auf 300. Darin geben wir ihre Überschrift „Kontakt aufnehmen“ und das Tastwort ein, das wir in den Spenex für das Berührungswort und das Span-Tag eingeben den Spenex für das Berührungswort und das Span-Tag Wir werden eine andere Textfarbe hinzufügen Ich werde dort jetzt den Text Grau 500 eintragen. Wir werden mit einem anderen Antrag fortfahren. Dieses Motion-Div beginnt mit Opazität Null. Das heißt, es beginnt unsichtbar und 20 Pixel links von der endgültigen Position Das wird zwar sichtbar sein, wir werden es sichtbar machen, indem wir die Deckkraft auf eins setzen . Für den Übergang dauert es wiederum 0,6 Sekunden mit 0,4 Verzögerung Für den Unterricht am Ende verwenden wir Bettzeug acht, runden es auf Excel und Leerzeichen Y acht. Das heißt, wir werden wieder etwas Abstand zwischen den Elementen schaffen , die wir in diesem Motion-Diff haben werden. Und was wir dort haben werden, wir haben im Grunde die Kontaktinformationen, und die erste wird sich mit der Handynummer befassen. Wir werden ihre Paragraphentechnologie für Telefon und die Anchor-Technologie für die Nummer selbst haben. Für das Div werden wir wieder das Leerzeichen y zwei verwenden, um den Abstand zwischen der Absatztechnologie und der Anchor-Technologie zu ermitteln. Wir werden Textgröße und -farbe für die Absatztechnologie festlegen , und dann für die Anchor-Technologie setzen wir HF auf die tatsächliche Anzahl für die Klassen. Wir werden Text zu Excel, einen Semi-Bot für das Telefon, eine andere Farbe beim Schweben und eine Übergangsdauer mit 300 hinzufügen andere Farbe beim Schweben und eine Übergangsdauer mit 300 Außerdem das Flexbox-Layout mit Elementen zur Zentrierung und Gap 22. Dann haben wir auch noch den Spentek , weil wir für das Styling einen Pfeil neben dieser Zahl hinzufügen möchten für das Styling einen Pfeil neben dieser Zahl Wir können dort eine Farbe für den Pfeil einstellen , und das war's Im Folgenden werden wir mit einem weiteren Div fortfahren. In diesem Div werden wir E-Mails speichern. Es wird im Grunde das gleiche Design wir dort für das Handy hatten, aber wir werden HRF auch auf Mail und die eigentliche E-Mail umstellen, und das wird die E-Mail auslösen Wenn jemand auf die E-Mail-Tinte klickt, wird sie beispielsweise in Windows Outlook für ihn geöffnet und bietet die Möglichkeit, eine E-Mail an uns zu schreiben Es hat wirklich die gleichen Zusatzkurse wie das Telefon, also werde ich sie nicht noch einmal durchgehen. Fahren wir mit dem nächsten Div mit der Adresse fort, und da ist das Absatz-Tag mit dem Büro und der tatsächlichen Adresse. Für die Adresse verwenden wir auch das Styling von Excel-Text, und Leading Relaxed legt den Zeilenabstand zwischen den Textzeilen fest. Im Folgenden werden wir ein weiteres Div haben, das wie zuvor mit Opacity Null und X 20 beginnt . Das heißt unsichtbar und an einer anderen Position. Solange es sichtbar ist, wird es sichtbar sein und in der endgültigen Position dauert der Übergang 0,6 Sekunden mit einer Verzögerung von 0,6 Sekunden. Und für die Klassennamen setzen wir Breite auf volle Höhe auf volle Mittelhöhe von 400 Pixeln, abgerundet auf Excel und Overflow ausgeblendet Habe keine Inhalte außerhalb dieses Divs. Dieses Div enthält den Iframe mit der Google Map, in dem wir die Position unserer Adresse festlegen In diese Iframe-Quelle werden wir diese Google Maps-URL einfügen Wir werden die Breite und Höhe auf 100% setzen, um die volle Breite und Höhe des Containers Für den Stil verwenden wir Border Zero, um den Iframe-Rand zu entfernen Und wir werden auch den Vollbildmodus zulassen , um den Vollbildmodus zu aktivieren Laden des Lasers bedeutet , dass wir den EE-Frame verzögert laden, um eine bessere Leistung zu erzielen. Dies sind nur die Attribute, die wir in unserer Iframe-Technologie definieren müssen in unserer Iframe-Technologie definieren So wird unser Kontaktbereich aussehen. Wir können auch die Reaktionsfähigkeit überprüfen. Da ist es auf dem Desktop, kleinen Tablet oder dem iPhone Dort werde ich auf Aktualisieren klicken, um die Animation zu sehen und für die Kontaktkomponente, das war's. 25. Wiederverwendbare Komponente: Fußzeile: Für die Fußzeilenkomponente importieren wir diese Symbole aus der React-Icons-Bibliothek Wir werden das Array definieren, das Array von sozialen Links, das wir in unserem Futer anzeigen werden , und wir werden dieses Array außerhalb der Komponente definieren , da eine Definition innerhalb der Komponente bedeutet, dass es bei jedem Rendern neu erstellt wird Seine statischen Daten hängen nicht von Requisiten oder dem Status der Komponente ab, also können wir sie dort belassen In diesem Fußzeilentext werden wir Klassennamen mit Relativnamen verwenden, da wir absolut positionierte Elemente verwenden werden absolut positionierte Elemente verwenden werden Wir machen den vertikalen Abstand auf acht, maximale Breite auf 1.200 Pixel, zentrieren ihn mit Mix auto und stellen horizontalen Abstand so ein, dass wir dann Und in diesem Div werden wir drei weitere Divs erstellen. Diese drei Divs werden leer sein. Das Div, das diese drei umschließt , wird die absolute Position Wir werden Inset Zero verwenden und Overflow verstecken. Inset Zero setzt alle vier Seiten auf Null. Bei mittlerer Bildschirmgröße werden wir dies ausblenden, da wir ein anderes, absolut positioniertes Div anzeigen, das diese Styling- oder Designelemente für den mobilen Bildschirm enthält Die Funktionsweise dieser Unterschiede besteht darin, dass sie an einer beliebigen oberen und linken Position positioniert sind oberen und linken Position positioniert Dann haben sie eine unterschiedliche Breite und Höhe. Dann haben sie eine andere Farbe oder sie können eine andere Farbe haben. Dann ist dieser erste ein Kreis, der zweite und der dritte ist nur abgerundet. Dann können sie eine andere Deckkraft haben und die Translation verschiebt das Div um 50% vertikal und horizontal Ich werde das kopieren und einfügen, das wird eigentlich die Desktop-Version sein, und die erste war mobil, weil wir das jetzt verstecken und auf dem mittleren Bildschirm und höher zeigen wir das als Block Es hat dieselben Klassen, aber wir stellen dort verschiedene Positionen, unterschiedliche Breiten, unterschiedliche Höhen ein, und dann können wir auch unterschiedliche Deckkraft und so weiter einstellen Im Folgenden erstellen Sie einen weiteren Einschnitt mit relativer Klasse, dem Index auf zehn und dem Text in der Mitte, wobei auch der Rand von oben bis acht reicht Im Inneren werden wir die Überschrift eines Tags mit John Doe erstellen. Da John Doe einen sehr kurzen Vor- und Nachnamen hat, kannst du dort vielleicht nur deinen Nachnamen oder deinen Vornamen angeben. Hängt wirklich davon ab. Wir werden es dort verstecken und auf dem mittleren Bildschirm werden wir das wieder anzeigen. Wir werden den Text auf zehn RAMs setzen. Bei Medium und Large erhöhen wir die Textgröße. Wir werden den gefundenen fetten Text auf Weiß und die Opazität auf zehn setzen Weiß und die Opazität auf zehn Dieser Text sollte ebenfalls nicht sichtbar sein. Ich weiß, dass der Text riesig ist, aber er sollte das volle Gewicht tragen. Und wir verringern die Opazität. Wir sind also nur leicht sichtbar. Für den mobilen Bildschirm werden wir es wieder tun, aber ich werde die Break-Technologie verwenden, um John und Doe an einer anderen Leitung zu haben . Was ich auch tun könnte, ist einfach die Textgröße zu verringern. Wir werden mit einem anderen Div weitermachen , der tatsächlich die sozialen Netzwerke veranstalten wird. Wir werden den Rand von oben einstellen, Flexbox-Layout auf einem kleineren Bildschirm, wir werden dort die Rechtfertigung dazwischen einstellen Das heißt, wir werden keinen Abstand zwischen den Elementen haben. Andernfalls verwenden wir Justify Center und Item Center , um Artikel horizontal und vertikal zu zentrieren. Wir werden dort eine Lücke setzen, und nach diesem Breakpoint werden wir dann die Spalte für die Flex-Richtung festlegen Das bedeutet, dass die Elemente untereinander liegen werden. Wir werden dort Paragraph Tech platzieren wobei alle Rechte vorbehalten sind, und wir werden den Text mit 200 bewerten Dann werden wir eine geordnete Liste mit Flexbox-Layout, Gap 25 und Flex Wrap erstellen Gap 25 und Flex Das heißt, wenn Artikel die Zeile überschreiten, werden sie nach unten umgebrochen Drinnen werden wir die sozialen Links kartografieren, unser Array, wir erstellen es dort. Und da strukturieren wir das HRF-Symbol und das HRF-Label in unserem Array Und das bedeutet, dass wir jetzt, anstatt innerhalb der Funktion ein Punkt-HRF-Symbol oder eine Bezeichnung für soziale Links schreiben zu müssen , direkt auf das HF-Symbol und die anstatt innerhalb der Funktion ein Punkt-HRF-Symbol oder eine Bezeichnung für soziale Links schreiben zu müssen, direkt auf das HF-Symbol und die Bezeichnung als individuelle Variablen zugreifen können Bezeichnung als individuelle Wir werden ein Ankerdeck erstellen und Tastenbeschriftung HRF als Hf Area Label als Label und den Klassennamen setzen als Hf Area Label als Label und den Klassennamen Wir setzen Textgrau 200, Flexbox-Layout, Items Center und Justify Center, um diese vertikale und horizontale Breite und Höhe auf zehn zu zentrieren, sie auf voll zu runden, und wenn wir mit der Maus darüber fahren, machen wir Textgrau 100 mit Übergangsfarben. Im Inneren werden wir eine Icon-Technologie erstellen, deren Größe auf 30 festgelegt ist. So wird unsere Fußzeile am Ende aussehen, und wir können auch die Reaktionsfähigkeit überprüfen Und jetzt können wir die Farben und die Opazität für jedes Element anpassen und das Design an unsere Bedürfnisse anpassen 26. Wiederverwendbare Komponente: Schlüssel-Metriken: Jetzt werden wir mit der Schlüsselmatrix fortfahren. Wir beginnen mit der Deklaration von use client, um anzuzeigen, dass diese Komponente Funktionen der Client-Site verwendet Dann werden wir React und Motion importieren und aus der Framer Motion Library verwenden und anzeigen Und wir werden eine Reihe von metrischen Objekten definieren, von denen jedes Informationen über eine bestimmte Metrik enthält Und im Inneren beginnen wir mit dem ersten Element , das eine ID, einen Wert, eine Bezeichnung und eine Beschreibung enthält. Jetzt werde ich einige zusätzliche metrische Elemente hinzufügen . Sie können sich inspirieren lassen. Ich habe dort mehr als fünf Jahre Erfahrung, 50 abgeschlossene Projekte, dann Codequalität und Kommentare auf Github. In der Kemetric-Komponente beginnen wir mit der Erstellung einer Referenz, die wir bei der Verwendung in View-Hook verwenden Wir werden eine Referenz mit dem React-Use-Rep-Hook erstellen , der an das Abschnittselement angehängt wird Abschnittselement angehängt Die Referenz wird als HTML-Element eingegeben, da sie für das Abschnitts-Tag verwendet wird Anfangswert ist Null, da die Referenz noch keinem Element zugeordnet wurde. Diese Referenz wird zusammen mit dem View-Hook „using“ verwendet, Diese Referenz wird zusammen mit dem View-Hook „using“ verwendet um zu erkennen, wann der Abschnitt in den Viewport gelangt Dann werden wir den Using-View-Hook verwenden, um festzustellen, ob sich die Komponente im Viewport befindet Wir werden den Ref und Once to Falls benutzen. Die Referenz ist der Verweis auf das Element, das wir beobachten möchten Sobald der Wert falsch ist, legen wir fest, dass der Hook die Sichtbarkeit des Elements kontinuierlich verfolgt. Im Gegenzug werden wir einen Bewegungsbereich erstellen. Wir werden dort die Referenz so einstellen, dass Anfangszustand unsichtbar sein wird und 50 Pixel darunter liegt. Animate verwendet einen Turn-Operator und prüft, ob er in der Ansicht wahr ist Dadurch wird die Sichtbarkeit oder Opazität auf eins und dann auf den endgültigen Status gesetzt auf eins und dann auf den endgültigen Und falls es falsch ist, wird es auf unsichtbar, Opazität Null und wieder 50 Pixel niedriger gesetzt Opazität Null und wieder 50 Pixel niedriger Die Animationsdauer beträgt 0,8 Sekunden, und die Klassen sind Container und Mixdo zu zentrieren, weil der Container eine gewisse Breite hat, dann eine gewisse Hochzeitssituation und Text auf Weiß Fügt Bewegung H zwei hinzu , um sie für die Überschrift der Schlüsselmetrik zu verwenden Der Anfangszustand ist Opazität Null und Y bis 20. Animate verwendet erneut den Turno-Operator tatsächliche Position, sichtbar auf die Kraftposition unsichtbar, Übergang mit einer Verzögerung von 0,2 Sekunden und einer Dauer von 0,6 Sekunden Für Klassennamen setzen wir die Textgröße auf Text sechs in Excel, Schriftart auf Fett und den Rand auf den unteren Wert von 12. Wir werden mit einer anderen Tiefe fortfahren , bei der ein Rasterlayout verwendet wird. Wir werden die Rasterspalten für den mittleren und großen Bildschirm festlegen . Und wir werden dort auch eine Lücke von acht setzen. Wir haben also eine gewisse Lücke zwischen den Elementen. Im Inneren beginnen wir mit der Abbildung über das Matrix-Array. Metrik wird der Name des Elements sein und die Position indexieren. Wir werden die Bewegungsdiskette erstellen, und der Schlüssel wird die metrische Punkt-ID sein. Wir werden den Anfangsstatus und auch wieder die Animation festlegen, wobei wir den Turner-Operator verwenden werden, wie zuvor, weil wir diese Animation jedes Mal, wenn wir sie im Viewport haben, immer wieder auslösen wenn wir sie im Viewport haben, immer wieder der Umstellung darauf, dass alle Metriken einem anderen Zeitpunkt angezeigt werden, fügen wir auch einen neuen Indexwert hinzu und multiplizieren ihn Das bedeutet, dass jeder Index einen höheren Wert hat und dadurch der Welleneffekt entsteht, bei dem der erste Index schneller angezeigt wird als der letzte. Außerdem wird ein Flexbox-Layout mit Flex-Richtungsvolumen verwendet , sodass die Elemente untereinander angeordnet werden Dann erstellen wir Überschrift drei. In dieser dritten Überschrift werden wir den metrischen Punktwert anzeigen. Wir werden die anfängliche Animation und den Übergang genau so einstellen , wie ich es im obigen Div angezeigt habe Und die Klassennamen werden wir dort für unseren metrischen Wert auf Text fünf Excel, Schriftbolzen und etwas Farbe setzen unseren metrischen Wert auf Text fünf Excel, . Wir legen auch die unteren beiden Ränder fest. Unter dieser Überschrift werden wir mit Antrag B für den Absatz Technik fortfahren . Wir werden dort ein metrisches Punktetikett anbringen. Auch hier legen wir die anfängliche Animation und den Übergang fest, und die Klassennamen lauten Text Excel, Schrift Semi Volt und Margin Bottom Two Dann machen wir einen weiteren Bewegungspunkt B für das Absatz-Tag, der die metrische Punktbeschreibung enthält Wir können es einfach kopieren und einfügen und die Rückenwind-Klassen für Text Gray 400 ändern , und das gilt für unsere wichtigsten Kennzahlen 27. Wiederverwendbare Komponente: Logo-Animation: Für Logoanimationen werden wir zunächst den Use-Client für diese Komponente deklarieren , da wir ihre dynamischen QI-Updates für die unendliche Logoanimation haben werden . Wir werden mit den Importen fortfahren. Bei Importen importieren wir das Bild aus dem nächsten Bild, dann die Bewegung aus dem Frame oder der Bewegung und darunter die Bilder aus den Assets. Falls Sie noch nicht über die Bild- oder Bewegungsbibliothek verfügen , öffnen Sie das Terminal und führen Sie npMiframR Dann wird es funktionieren. Wir werden mit der Erstellung eines Arrays fortfahren, das als Bilder bezeichnet wird. Wir werden dort Quelle und Quelle des importierten Bildes haben, was nur der Name des Logos sein wird. Ich hatte schon einmal Figma. Ich habe jetzt die Uremi, damit das behoben werden kann. In der Logoanimation beginnen wir mit einem Div und zu diesem Div fügen wir bis acht vertikale Polsterungen hinzu, einen Hintergrund , den wir später ändern oder an unser Design anpassen können später ändern oder an unser Design anpassen Und wir setzen dort auch die Opazität auf 0,8, was bedeutet, dass wir dort nicht unbedingt die Opazität von 0,1 auf unsere Farbe anwenden müssen die Opazität von 0,1 auf unsere Wir werden mit einem anderen Div weitermachen und dieses Div wird eine Klasse von Container und Mix Auto haben , um es zentriert zu haben Dann wird es eine weitere geben, in eine Klasse von Overflow versteckt ist und auch eine weitere Klasse, die den Effekt erzeugt, dass die den Effekt erzeugt, dass unsere Logoanimation von links wegbläst und wieder auf dem Bildschirm auf der rechten Seite erscheint , mit der Einstellung Sie werden den Effekt sofort sehen nachdem wir die Elemente selbst hinzugefügt In diesem Div werden wir ein Motion-Div für die Animation hinzufügen. Wir werden dort einige Rückenwind-Klassen für Flexbox-Layout, Gap bis 14, Flex to None und Betting to Right bis 14 einrichten für Flexbox-Layout, Gap bis 14, Flex to None und Betting to Right bis Wir werden das Animate to Translate X -50% hinzufügen, um die Animationseigenschaften festzulegen Das bedeutet, dass diese Animationseigenschaft den Inhalt horizontal verschiebt und -50% bedeutet, dass er sich um die Hälfte seiner Breite nach links bewegt. In Kombination mit der unendlichen Wiederholung in der Übergangseigenschaft, die wir direkt unten haben, entsteht ein kontinuierlicher Bildlaufeffekt unendlichen Wiederholung in der Übergangseigenschaft, die wir direkt unten haben, entsteht ein kontinuierlicher Bildlaufeffekt unendlichen Wiederholung in der Übergangseigenschaft, die wir direkt unten haben, Dort haben wir auch die Dauer auf 35 gesetzt. Wie bereits erwähnt, ist die Wiederholung bis ins Unendliche linear und die Wiederholung vom Typ Schleife. Vielleicht fragst du dich auch, warum wir so viele Artikel und doppelte Artikel in unserer Bildersammlung haben. Das liegt daran, dass wir unsere Logos brauchen , die spezifische Breite haben müssen. Wenn es nur vier Elemente gibt, können wir diese Schleife nicht unendlich machen , weil sie nur für Gegenstände bestimmt ist, die herumlaufen, und es wird so aussehen, als würden nur einige Elemente fehlen. Deshalb können wir diese Elemente einfach duplizieren, sagen wir, zweimal, und es entsteht diese Endlosschleifenanimation. Wenn Sie so viele Logos haben , die Sie in diese Logoanimation eingeben möchten, müssen Sie sie nicht duplizieren. Im Inneren werden wir das Mapping über das Bildarray durchführen, wobei Bild das aktuelle Element des Arrays und Index seine Position ist. Dann fügen wir das Bild-Tag und setzen den Schlüssel als Index, Quelle als Bildpunktquelle, Alt als Bildpunkt alt, den wir in unserem Array haben. Und auch die Höhe ist zu dreckig. Wir werden es speichern und sehen , dass die Komponente jetzt funktioniert. Dort können Sie auch das Transparente von links und rechts sehen und sehen, wie die Animation so aussieht, als würde sie nach links verblassen und langsam von rechts erscheinen Um diese Reaktionsfähigkeit zu überprüfen, gibt es im Grunde nicht viel zu Auf dem kleineren Bildschirm werden nur weniger Logos gleichzeitig angezeigt 28. Wiederverwendbare Komponente: Navigationsleiste: Beginnen wir nun mit der Codierung der Navbar. Wir müssen die erforderlichen Abhängigkeiten importieren. Next Jz verbindet Komponenten für die clientseitige Navigation, reagiert und verwendet State Hook für die Statusverwaltung und Icons aus der Library React Icons Wir können sehen, dass uns diese React-Symbolbibliothek einen Fehler anzeigt Das liegt daran, dass wir diese Bibliothek nicht installiert haben. Lassen Sie uns den Namen kopieren, ein Terminal öffnen, NPM I ausführen und dort den Namen der Bibliothek einfügen Jetzt drücken wir die Eingabetaste und die Bibliothek wird installiert Wenn wir zu unserer Komponente zurückkehren, wird kein Fehler mehr angezeigt. Da wir den Use-Status verwenden, bei dem es sich um eine Funktion für die Client-Site handelt, müssen wir diese Komponente als Use-Client definieren um anzuzeigen, dass diese Komponente auf der Client-Site gerendert wird. Wir werden mit der Definition eines Navigationslink-Arrays mit Titel und Pfad für jeden Link fortfahren . Dadurch bleiben die Navigationselemente organisiert und es ist auch einfach, neue Links hinzuzufügen, wann immer wir möchten. Jetzt können wir direkt zur Navbar-Komponente wechseln. Was wir dort tun müssen, ist den Status für das mobile Navigationsmenü zu initialisieren Dieses NAF ist ein Boolin, um zu verfolgen, ob das mobile Menü geöffnet oder geschlossen ist, und Set NAF wird eine Funktion sein, um den NAF-Status zu aktualisieren Gewiß wird dies auf den Fall eingestellt sein. Wir werden dann eine Funktion deklarieren, um die mobile Navigation umzuschalten und sie zu öffnen oder zu schließen, und sie wird den NAF auf einen anderen Wert setzen , als Wenn also auf die Schaltfläche geklickt wird, wird der Wert geändert, und wir werden ihn dann für unser Element verwenden, um das Menü zu schließen und zu öffnen Wir erstellen auch eine Funktion zum Schließen von NAF, die jedes Mal verwendet wird, wenn auf den Link geklickt wird , um sicherzustellen, dass unsere Navigation Im Gegenzug werden wir statt leerer Fragmente mit DIF beginnen Für den Unterricht verwenden wir den Z-Index 250. Wir verwenden die feste Position, das heißt, wann immer wir scrollen, wird die Navigationsleiste mitgenommen, das Flexbox-Layout, sodass wir die Navigationselemente mit der Justify Center zentrieren können der Justify Center zentrieren Wir setzen die Breite auf voll, den Text auf weiß und die Schrift auf fett Dann werden wir eine ID für die Desktop-Navigation erstellen. Für die Desktop-Navigation verwenden wir auch einen Rand und setzen ihn auf einen weißen Rand mit einer Deckkraft von 0,2 Dann werden wir den Rand vom oberen Rand und den Hintergrund verwischen weil wir möchten, dass unsere Navigationsleiste beim Scrollen auf der Seite gut sichtbar ist Machen wir es auch vor Excel abgerundet und fügen dort einige Randradios Auf dem mobilen Bildschirm wird dies ausgeblendet und auf dem mittleren Bildschirm und höher wird es flexibel angezeigt. Auch hier, weil wir die Objekte so zentrieren möchten, dass die Elemente zentriert und horizontal und vertikal zentriert werden. Wir werden etwas Bettwäsche hinzufügen und außerdem eine maximale Breite auf 400 Pixel festlegen. Wenn Sie Ihrer Navigationsleiste weitere Elemente hinzufügen , können Sie diese erhöhen. Dann stellst du Mito so ein , dass es auch zentriert wird. Wenn du dort nun etwas hinzufügst und es speicherst, kannst du unsere Navbar auf der Seite sehen Aber indem wir dort nur ein paar Buchstaben hinzufügen, ordnen wir die Elemente zu und fügen sie dort Bevor wir sie zuordnen, werden wir eine ungeordnete Liste für sie erstellen Für diese ungeordnete Liste werden das Flex-Buch-Layout und die Flex-Zeile verwendet Flex-Buch-Layout und die Flex-Zeile Das bedeutet, dass die Elemente nebeneinander liegen werden. Wir werden wieder einige ausstehende und SpaceX acht hinzufügen. Das bedeutet, dass wir horizontal eine gewisse Lücke zwischen allen Elementen haben horizontal eine gewisse Lücke zwischen allen Elementen Für das Mapping werden wir Nablns Dot Map verwenden. Und wir werden einen Link verwenden, der der Name jedes Elements in dieser Map und im Index sein wird der der Name jedes Elements in dieser Map und im Index Innerhalb einer geordneten Liste und dieser Zuordnung erstellen wir das Listenelement mit dem Schlüsselindex. Reactive verwendet diesen Schlüssel, um die Renderleistung zu optimieren, und dort weisen wir den Array-Index als Schlüssel In diesem Listenelement werden wir ein Link-Tag mit dem hrefsetlin-Punkt Pav hinzufügen , das wir dort in unserem Array haben Das heißt, nachdem wir IDs zu unseren anderen Abschnitten hinzugefügt haben, gelangen wir zum Und dann ein Klassenname , bei dem wir ihren Text mit einer Opazität von 0,5 in Weiß umwandeln Das heißt, wenn wir den Mauszeiger über unsere Listenelemente bewegen, werden wir sehen, über welchen wir uns gerade Wechseln Sie dann alle mit einer Dauer von 300 und lockern Sie das Ganze ab, um die Animation des Schwebens flüssiger zu gestalten Animation des Schwebens flüssiger Außerdem können Sie jetzt auf unserer Seite sehen, dass wir das Layout mit der Navigation haben, aber es gibt keine Artikel Was wir tun müssen, ist auf den Linkpunkttitel zuzugreifen , den wir in unserem Array haben. Lassen Sie uns den Titel verknüpfen, speichern und wir können jetzt sehen, dass sich unsere Navbar auf der Seite befindet Wir können nach unten gehen und die mobile Version dieser Navbar codieren die mobile Version dieser Navbar Wir werden dort ein Div erstellen und diese DIF-OnClick-Funktion erweitern Diese OnClick-Funktion, die wir dort hinzufügen werden, ist Toggle NAF, und das bedeutet, dass jedes Mal, wenn auf dieses Div geklickt wird, ausgeführt wird Wir haben und in dieser Tognav-Funktion können Sie sehen, dass Das heißt, wann immer wir auf dieses Div klicken, wird der NAF-Status auf wahr oder falsch geändert Jetzt werden wir einen sogenannten ternären Operator verwenden. Wir werden den Wert unseres NAF überprüfen und falls er wahr sein sollte, wird dieses Symbol für die geschlossene Kontur ausgeführt, und falls es falsch ist, was die Standardeinstellung ist, wird was die Standardeinstellung ist, das Menüsymbol auf unserem Lass es uns jetzt speichern. Und ich werde auch das Seitenlayout auf eine mobile Version umstellen. Sie können jetzt unser Menüsymbol sehen. Und wenn ich darauf klicke, kannst du sehen, wie es geändert wird , um zum Hamburger-Menü zu wechseln und zurück zum Hamburger-Menü zu Wir werden ein neues DIV hinzufügen und zu diesem Div werden wir einen Klassennamen hinzufügen, und innerhalb dieses Dollarzeichens mit den farbigen Klammern werden wir einen weiteren Turner-Operator verwenden Falls unsere NP-Variable wahr ist, setzen wir translate X auf Null, und falls sie falsch ist, setzen wir negative translate X full Das bedeutet, dass wir unsere Menüelemente nach außen und zurück auf den Bildschirm verschieben werden . Andere Klassen, die wir dort hinzufügen werden, haben eine feste Position nach links und oben nach Null. Wir werden die Breite auf voll und die Höhe auf voll setzen. Schwarzer Hintergrund mit einer Opazität von 0,9, Transformation und Übergangstransformation und einer Dauer von 300 für die Animation selbst Wir werden es jetzt speichern und wir können es testen. Und du kannst sehen, wie es sich bewegt. Natürlich fehlen uns immer noch die Artikel, aber wir werden sie jetzt hinzufügen. Wir können diese Navigation geöffnet lassen und im Inneren können wir anfangen, die Artikel hinzuzufügen. Ähnlich wie zuvor müssen wir eine ungeordnete Liste erstellen und das Flexbox-Layout mit der Flex-Richtung Colum hinzufügen das Flexbox-Layout mit der Flex-Richtung , sodass unsere Listenelemente untereinander liegen Wir werden sie vertikal und horizontal zentrieren und dabei Leerzeichen und acht verwenden Das heißt, wir werden vertikal etwas Abstand zwischen ihnen schaffen . Wir haben dort auch Höhe zwei voll eingestellt. Nach wie vor kannst du das im Grunde einfach kopieren und einfügen. Wir werden dieses Mapping über das Nablnk-Array hinzufügen, wobei Link der Name des aktuellen Elements und Index die Position ist Dann werden wir diesen Index als Schlüssel verwenden. Nachdem wir das Link-Tag erstellt haben, legen wir dort den Hf-Toolink-Punktpfad und den Link-Punkttitel für den Namen des Navigationselements Jetzt werden wir es speichern und wir können es auf unserer Seite sehen. Wir bearbeiten auch ihre On-Click-Funktion zum Schließen der Navigation. Klicken wir zum Beispiel auf das Portfolio. Damit können wir die Navbar-Komponente umschließen. 29. Wiederverwendbare Komponente: Portfolio: einem Portfolio-Bereich werden wir mit den Importen beginnen und dann mit der Erstellung von Projektkonstanten fortfahren . In diese Konstante werden wir unsere Projekte laden, dann iterieren wir sie und zeigen sie in unseren Karten an, die wir codieren werden Bei Projekten gebe ich ihre ID an. Für den ersten wird es einer sein. Dann gebe ich ihren Titel und dann die Kategorie ein. Und die letzte wird die Bildquelle sein. Für das erste Projekt wird es nur dieses Projekt sein. Jetzt mache ich das Komma und kopiere es noch dreimal, und kopiere es noch dreimal weil ich die insgesamt vier Projekte habe , die ich anzeigen werde, oder ich aktualisiere einfach die IDs. Ich werde die Bildquelle des Projekts aktualisieren. Und jetzt werde ich eine Beschreibung herausfinden, und ich werde diese vier Websites, die ich auf Framer gefunden habe, jetzt in unserer funktionalen Komponente verwenden , dort in der Rückgabe werden wir diese leeren Fragmente löschen, und wir werden mit dem Abschnitt beginnen Und für diesen Abschnitt setzen wir BY auf 16. Wir haben also etwas Polsterung von oben und auch von unten. Und dann werden wir drinnen mit der Kartierung unserer Projekte fortfahren Lassen Sie uns ihre Projekte punktgenau machen. Projektindex, und im Inneren beginnen wir mit der Bewegung Div. Gehen wir jetzt nach oben und importieren dort Bewegung aus einem Frame oder einer Bewegung. Jetzt werden wir dort Motion Div verwenden und jetzt werden wir dort Motion Div machen. In dieses Motion-Div werden wir den gesamten Inhalt einfügen. Wir werden jetzt die erste Motion-Div-Starttechnologie definieren und dort den Schlüssel als Projekt-Punkt-ID festlegen. Jetzt werden wir den Klassennamen festlegen. Wir verwenden einen Rand mit einem weißen Rand mit einer Deckkraft von 0,2 dann ein Flexbox-Layout mit einer Spalte mit flexibler Richtung , was bedeutet, dass die Elemente innerhalb dieser Tiefe untereinander liegen . Dann fahren wir mit der Testkonvertierung auf einem mittleren Bildschirm Wir werden Flex Raw machen. Das bedeutet, dass die Elemente nebeneinander liegen werden. Wir werden dort den Text auf Weiß setzen, und wir werden dort auch abgerundetes Excel setzen. Lassen Sie uns Tree Excel machen. Jetzt können wir schon etwas auf unserer Seite sehen. Dann fahren wir mit dem Hintergrund fort , bei dem wir den Farbverlauf nach rechts setzen, und wir werden seine Farben über zwei einstellen. Da es sich um einige Codes handelt, die ich zuvor in Figma definiert habe, werde ich sie einfach kopieren und dort einfügen und es sollte eine gräuliche Farbe erzeugen Dort werden wir etwas Bettwäsche waschen. Dann werden wir auch angeben, was dazwischen liegt. Das bedeutet, dass wir in diesem Unterschied einen gleichmäßigen Abstand zwischen unseren Elementen haben werden in diesem Unterschied einen gleichmäßigen Abstand zwischen unseren Elementen , von Anfang bis Ende. Außerdem werden wir vorerst die Breite festlegen. Lassen Sie uns eine gewisse Anfangsbreite auf dem mobilen Bildschirm festlegen. Es wird 300 Pixel geben, und auf einem mittleren Bildschirm und höher verwenden wir etwa 1.100 Pixel, aber wir können diese Werte später anpassen Jetzt können wir endlich die Form unserer Karten sehen. Wir werden das oben drauf haben wollen. Verwenden wir ein klebriges Glas mit den oberen 28. Das heißt, wenn wir scrollen, kleben diese Gegenstände übereinander und es entsteht der Effekt „Karten stapeln Wenn wir jetzt zum Verpackungsbereich gehen, können wir dort einen Container und ein Mix-Auto platzieren Das bedeutet, dass unsere Projekte im Mittelpunkt stehen werden. Wenn ich dort etwas wie die Haupthöhe auf 300 Viewporteit setze , kann ich auf meiner Seite nach unten scrollen Und Sie können sehen, dass es die erste Karte gibt, und ich scrolle nach unten, sie liegen übereinander, und dann funktioniert das so, und dann funktioniert das so dass es einen weiteren Abschnitt geben wird, und diese Portfolio-Komponente wird einfach aus dem Viewport entfernt, sodass wir sie nicht sehen werden Und wenn wir nach oben scrollen, werden wir wieder alle Karten untereinander sehen Jetzt werde ich ihren Anfangszustand unserer Animation definieren. Das heißt, wir werden mit Opazität Null beginnen. Das bedeutet, dass die Elemente zunächst unsichtbar sein werden und auch dieses Y, es wird 50 Pixel unter seiner endgültigen Position nächste Mal wird es sein, während die Elemente sichtbar sind, und das, während sie sichtbar sind, ist die Definition von Animation, wenn die Elemente sichtbar werden. Dort setzen wir die Opazität auf eins und Y auf Null. Dann wird es ein Übergang sein. Das heißt, die Dauer wird für uns eine halbe Sekunde betragen und die Verzögerung wird Index mal 0,2 sein. Das bedeutet, dass es zu einer gewissen Verzögerung bei der Animation kommen wird, und das bedeutet, dass nicht alle Elemente und das bedeutet, dass nicht alle Elemente auf unserer Seite angezeigt werden, aber mit dem Index wird es länger dauern. Es wird so aussehen , dass die erste Karte zuerst angezeigt wird und dann langsam der Rest der Karte nach dieser angezeigt wird , weil dann dieser Welleneffekt erzeugt wird , wenn das erste Element angezeigt wird, und dann langsam werden auch alle anderen Elemente angezeigt. Jetzt definieren wir auch einen Viewport, den wir auf True setzen werden. Das bedeutet, dass diese Animation ausgelöst wird , sobald das Element sichtbar wird. Das wird für die Definition der Bewegung sein. Wir werden zunächst einen Einblick in die Absatztechnik in diesem Absatz-Tag erhalten. Wir werden eine Kategorie mit die Absatztechnik in diesem Absatz-Tag Projektpunkten einrichten Im Folgenden wird es Überschrift zwei sein. Es wird einen Projekttitel geben. Und dann werden wir eine geordnete Liste in dieser ungeordneten Liste haben eine geordnete Liste in dieser ungeordneten Liste Wir werden einen Listenpunkt haben, und innerhalb dieser Listenelemente werden wir Aufzählungspunkte haben Was wir mit dem Projekt erreicht haben , ist der Absatz Technik in unserem Listenpunkt Ich werde die Benutzererfahrung um 40% erhöhen. Für die Projektkategorie mache ich so etwas wie Text zu Grau, 200, dann Text zu klein. Für den Projekttitel werde ich Text in Excel schreiben, Schriftart, beide, und auf mittlerem Bildschirm können wir ihn auf Text für Excel erhöhen. Für die ungeordnete Liste verwenden wir Leerzeichen Y2 Das bedeutet, dass zwischen all diesen Aufzählungspunkten ein gewisser Abstand besteht und es sich nicht um übereinander gestapelte Bögen Für das Listenelement werde ich das Flexbox-Layout und die Elemente Und dann werde ich neben diesem Aufzählungspunkt ein Reaktionssymbol erstellen. Wir können eine KI-Gliederungsprüfung durchführen. Für dieses Symbol werden wir React Icons AI verwenden. Lass mich NPM machen, ich reagiere auf Symbole. Wenn wir diese Prüfung nun durchführen, haben wir diese Option für diese Bibliothek Ich werde eintreten. Auf diese Weise wird es importiert. Wenn ich es jetzt speichere, wird es funktionieren. Auf unserer Seite haben wir dieses Symbol und wir werden den Klassennamen mit Breite 25 und Höhe 25 und den Text Emerald 400 hinzufügen . Schauen wir uns jetzt die Seite an. Wir haben es nicht erhöht, aber dies sind einige Werte, die Sie erhöhen können , falls Sie diesen Scheck vergrößern möchten. Ich werde es so lassen. Und ich werde dort auch das Feld X vier setzen . Ich nehme diesen Listenpunkt und füge ihn noch zweimal ein. Und für diese verbesserte Benutzererfahrung werde ich es einfach nehmen und es in einen anderen Text ändern. Wir können die Seitengeschwindigkeit um 50% verbessern. Und bei letzterem wurde der Mobilfunkverkehr um 35% erhöht. Dies sind natürlich einige Beispielwerte , die da sein können. Und außerdem haben wir das derzeit fest codiert. Was wir tun können, ist, dass wir dort ein neues Feld erstellen können. Ich werde Kugel 0.1 machen. Dann kopiere ich das, füge es ein, mache Punkt 0,2 und drei. Dann nehme ich das auch mit dem Komma und kann es für andere Projekte verwenden Dann nehme ich diese Werte. Stell es da hin. Auch dieser Stichpunkt. Und sogar der letzte. Und in der Iteration mache ich das Projekt Bullet 0.1, füge es für die anderen ein, mache Bullet 0.2 und drei Und jetzt, zum Beispiel, wenn es um das vierte Projekt geht, werde ich das in eine zufällige Sache ändern Auf unserer Seite können Sie sehen, dass wir es in Ordnung haben, aber nur für den ersten haben wir den anderen Wert. Jetzt haben wir ein Problem mit der ersten Karte. Habe ich etwas vergessen? Ja, ich habe vergessen, die Werte dort einzutragen. Lass es mich einfach so ausdrücken, speichere es. Und wir werden unter der ungeordneten Liste mit dem Bild weitermachen der ungeordneten Liste mit dem Bild Und für dieses Bild setzen wir eine Projektquelle, Bildquelle, dann auf, wir setzen den Projektpunkttitel, dann setzen wir 500 auf Höhe, wir setzen 300 und für Klassenname setzen wir abgerundet groß Jetzt werden wir es speichern. Sie können sehen, wie unsere Projektkarten aussehen und welche Dinge wir tun sollten. Zunächst sollten wir die Rundung des gleichen Werts nehmen , den wir in der Bewegung div haben. Wir verwenden ihren Baum Excel. Das heißt, wir werden es auch für das Bild verwenden. Dann gibt es in dieser Medium-Flex-Reihe kein Problem , das so sein sollte. Es gibt ein Problem, dass dort ein Div fehlt. Diese Flex-Zeile, wir wollen jetzt ein Div für den Text haben, und dann ist das Bildelement alleine in Ordnung , weil es auf der rechten Seite platziert wird. Da es sich um eine Flex-Zeile handelt, bedeutet das, dass wir diesen Text in ein Div einfügen und mich dort auch einen Tab erstellen lassen. Diese beiden Elemente werden nebeneinander stehen, und auf einem mobilen Bildschirm werden sie mit dieser flexiblen Richtungsspalte untereinander angezeigt. Was wir nun in diesem Div tun können , das unsere Projektinformationen enthält, werden wir dort das Feld Y auf vier setzen. Wenn wir dann zu diesem Wrapping-Motion-Div übergehen, würde ich dort Leerzeichen X bis vier setzen. Und ich würde sogar ihr Leerzeichen y26 verwenden. Wenn wir nun die Seite überprüfen, müssen wir den Rand nach unten vergrößern Lassen Sie uns diesen Wert auf 24 erhöhen und wir werden auch in dieses Motion-Div gehen und das Mx Auto setzen. Jetzt ist es zentriert und jetzt können wir unseren Portfolio-Bereich testen, und wenn wir nach unten scrollen, überlappen sie sich gegenseitig Das wird für den Portfolio-Bereich sein. 30. Wiederverwendbare Komponente: Portfolio 2: Wir werden zunächst clientseitige Funktionen mit dem Use-Client aktivieren . Dann werden wir React importieren und State Hook mit Use-Effekt Hook verwenden. Dann importieren wir das Bild aus dem nächsten Bild. Wir werden Projektbilder aus dem Assets-Ordner importieren , den wir anzeigen werden. Ich werde konstante Projekte erstellen und dort für jedes Projekt eine ID erstellen Ich werde hier erstellen, ich werde einen Titel erstellen, ich werde eine kurze Beschreibung erstellen und ich werde auch das Bild einfügen Im Folgenden werde ich weitere Projekte hinzufügen, und es wird so aussehen. Ich werde drei Projekte in der Portfoliokomponente verwenden . Ich werde den Status für die ausgewählten Projekte mit dem Folding zum ersten Projekt initialisieren die ausgewählten Projekte mit dem Folding zum ersten Projekt Also machen wir Projekte und zuerst im Array mit Null Dies wird die Zustandsvariable sein, und damit werden wir sie setzen. Jetzt können wir direkt zurückkehren. Dort werden wir mit dem Abschnitt beginnen. In diesem können wir die Portfolio-ID erstellen. In einem Klassennamen machen wir PY 32 und schreiben Text auf Weiß. In diesem Abschnitt beginnen wir mit Überschrift zwei. Mit Überschrift zwei wird es die Überschrift der ausgewählten Projekte geben. Wir können die Projekte in eine Spen-Technologie einfügen falls wir ihr eine andere Farbe hinzufügen möchten. Auch für das Styling von Überschrift zwei verwenden wir bei Text sechs Excel, Schrift und Rand unten bis zehn. Unter dieser zweiten Überschrift werden wir das Projekt-Array zuordnen, um die Projektelemente zu erstellen. Ich werde Projekte auf der Karte erstellen. Der Name des Elements in der Iteration wird Projekt sein. Dort können wir unsere Suche in diesem Div öffnen, wir werden einen Schlüssel als Projekt-Punkt-ID setzen Wir werden die onClick-Funktion einstellen. Onclick-Funktion ist die Einstellung der Statusvariablen Dort werden wir das ausgewählte Projekt festlegen. Zum Projekt. Jetzt werden wir weiterführende Kurse machen. Das sind Cursorzeiger, Rand nach unten und Gruppe. Wir werden mit der Anzeige des Projekts hier fortfahren. Wir werden hier die Paragraph-Technik mit Project Dot durchführen. Jetzt werden wir etwas Styling hinzufügen, und das wird eine andere Schriftfarbe haben. Auch Text groß und Rand nach unten und darunter können wir mit Überschrift drei fortfahren. Diese dritte Überschrift wird den Titel „Project Point“ tragen. Das Styling, das wir dort hinzufügen werden, ist textfreies Excel, Schrift Semi Bolt Group , unser Text grau, 400 , Übergangsfarben, Dauer, 300, und das werden wir noch tun. Lassen Sie uns die Anführungszeichen mit den geschweiften Klammern zurücksetzen. Denn im Inneren werden wir prüfen, ob es sich bei diesem Projekt um das ausgewählte Projekt handelt, und falls ja, werden wir die andere Textfarbe anzeigen Lassen Sie uns die ausgewählte Projekt-Punkt-ID gleich der Projekt-ID-Prüfung und dem Turner-Operator machen, und falls ja, machen wir den Text grau 200, falls nein, werden wir nichts tun Die falsche Position wird also leer sein. Wir werden Übergangsfarben verwenden, da dies einen reibungslosen Übergang speziell für die farbbezogenen Eigenschaften ermöglicht einen reibungslosen Übergang speziell . Da wir diese Gruppe jedoch verwenden, wird sie praktisch sein. Jetzt können wir bereits auf unserer Seite sehen , dass wir weiterkommen, und wir werden nun damit fortfahren, die Trennlinie anzuzeigen , falls das Projekt ausgewählt ist Wir erfüllen ihre Bedingung. Bei diesem Projekt entspricht die Punkt-ID also der Projekt-ID, im Grunde dieselbe, die wir dort verwendet haben, aber wir brauchen keinen Drehantrieb Wir werden das nur bedingtes Rendern machen. Falls das wahr sein sollte, werden wir ein leeres DIV anzeigen. Und zu diesem Div werden wir die Klasse Border Bottom Two mit Border Grey 200 und den vertikalen MI-Rand zu vier hinzufügen . Wir können auf unserer Seite sehen, dass wir das erste Projekt ausgewählt haben, das da ist. Wenn ich das zweite oder dritte einstelle, bewegt es sich. Ein weiteres bedingtes Rendern werden wir machen, damit wir es einfach kopieren und einfügen können das wird in der Projektbeschreibung stehen. Falls das Projekt ausgewählt wird, zeigen wir die Projektbeschreibung an. Ich öffne einfach dieses Dif, füge dort eine Projektpunktbeschreibung und ändere dieses Div-Tag in ein Absatz-Tag Außerdem werde ich ein bisschen andere Klassen hinzufügen. Ich brauche die Grenze nicht. Ich füge den Text grau, 400, Übergang über die gesamte Dauer, 500 und die Lockerung hinzu, damit der Text reibungslos angezeigt wird Jetzt werden wir zum Anfang dieser Rückkehr scrollen und dort im Abschnitt ein Div erstellen und dieses Div um dieses Mapping wickeln Div um dieses Mapping Für dieses Div werden wir nun einige Klassen hinzufügen. Fangen wir mit der maximalen Breite von sieben Excel an, mischen dann Audio, px vier, das sollte es vorerst sein. Wir werden uns nach unten und unter dieses Div bewegen. Wir werden dort ein Bild-Tag in dieses Bild-Tag einfügen. Wir werden die Quelle auf das ausgewählte Projekt Dot Mag Dot SRS setzen. Für alle werden wir den ausgewählten Projekttitel wählen. Für den Klassennamen runden wir ihn ab, Excel, Shadow Large, Transition Opacity, Dauer 500 und das alles für eine reibungslose Animation Außerdem setzen wir die Breite auf 800, die Höhe auf 450. Wir werden es speichern. Jetzt sollte es in Ordnung sein. Jetzt müssen wir ein bisschen mit den dortigen Unterschieden spielen. Lassen Sie mich das zusätzliche Div hinzufügen, um diese Projektinformationen, die wir dort erstellt haben Nun zum zweiten Div, das wir dort haben. Wir werden Klassen für das Rasterlayout hinzufügen und auf einem großen Bildschirm werden wir Grid Calls Two mit Gap 212 verwenden. Nun sollte es dieses Div brauchen und natürlich das Schließen des zweiten Divs, das wir weiter unten eintragen werden. Jetzt auf der Seite, es wird in Ordnung sein. Jetzt werden wir auch den Code formatieren. Sie werden die Div-Struktur besser sehen. Das sollte noch einen Schritt weiter gehen. Das sollte auch noch einen Schritt weiter gehen, wir werden das verschieben, und das sollte in Ordnung sein. Also fangen wir dort mit dem Bereich Technik an und setzen uns mit dem DIF fort In diesem Div haben wir ein Div, das die Projektinformationen und auch das Bild mit dem Projekt selbst enthält 31. Wiederverwendbare Komponente: Services: Komponente Dienste werden wir innerhalb der Komponente eine Reihe von Serviceobjekten erstellen, die die Informationen zu den einzelnen Diensten enthalten die die Informationen zu den einzelnen Diensten , die wir anbieten möchten. Jedes Objekt wird eine ID, Titel und eine Beschreibung haben. Lassen Sie uns ihre ständigen Dienste leisten. Und im Inneren können wir das erste Element machen, in dem wir die ID, dann den Titel und auch die Beschreibung festlegen . Jetzt werde ich weitere Dienste hinzufügen, und am Ende wird das Array ungefähr so aussehen. Im Gegenzug werden wir anstelle der leeren Fragmente dort ein Abschnitts-Tag erstellen, und innerhalb des Abschnitts werden wir weitere Elemente hinzufügen. Für den Abschnitt selbst werden wir den Klassennamen Text weiß und PY 20 angeben. Um ein gewisses Maß an vertikaler Einbettung zu haben, fügen wir ein Div hinzu und wir fügen Rückenwindklassen mit Container hinzu und mischen Auto mit Zentrierung und Flexbox-Layout , um Flex-Richtung Colum zu verwenden , damit unsere Artikel untereinander liegen Bei mittleren Bildschirmen und höher stellen wir dort die Zeile mit der Flexrichtung ein Das bedeutet, dass die Artikel nebeneinander liegen werden. Dann werden wir zwei Divs hinzufügen. Eines wird mit der Überschrift Dienstleistungen und das zweite mit den Artikeln aus unserem Array Am ersten Tag wird es ein Ende geben, bis die Klassen des mittleren Bildschirms über einem Viertel der Breite liegen, nach rechts wird auf acht gesetzt, Rand bis zum unteren Rand wird auf 12 gesetzt und auf einem mittleren Bildschirm setzen wir diesen Rand auf den unteren Rand auf Null Im Inneren werden wir die zweite Überschrift mit Diensten erstellen und dort Text, sechs Excel, Schrift extra Bolt, Sticky Position und Top 20 angeben. An welcher Position möchten Sie das anbringen? Was bedeutet klebrige Position? Das bedeutet, dass bei jedem Scrollen auch die Überschrift „Dienste“ mitgescrollt wird. Wir werden ein weiteres Div hinzufügen, und wir werden bei mittlerer Bildschirmbreite und bei einer Bildschirmbreite von mehr als 75% dort bleiben . Im Inneren beginnen wir mit dem Mapping über das Dienste-Array. Dort wird der Artikel repariert. Wir müssen den Index nicht verwenden, da wir die Service-ID als Schlüssel verwenden werden. Und für den Klassennamen verwenden wir den Rand von unten bis 16 und Flexbox-Layout, um die Elemente am Anfang zu verwenden , weil wir unsere Elemente dort ausrichten möchten Dann werden wir zwei weitere Difs hinzufügen. Eines dient zum Speichern der Nummer, die die ID sein wird, und das zweite zum Speichern der beiden anderen Felder, Titel und Beschreibung Für den ersten Unterschied verwenden wir Text Grade 300 Color Font Bolt, Text Five Excel und Margin Right to Six Für das zweite Div müssen wir nichts tun. Im ersten Div fügen wir auch die Service Dot ID hinzu. Wenn wir es jetzt speichern, können Sie sehen, dass wir ihre Nummern für alle unsere Dienste haben . Was noch übrig ist, ist, dass wir im zweiten Abschnitt die beiden anderen Felder hinzufügen, und dann sieht der Abschnitt so aus. Für Überschrift drei legen wir den Servicepunkt-Titel fest, und für Paragraph Tech legen wir ihre Service-Punkt-Beschreibung fest. Für die Überschrift fügen wir auch Text zu Excel, Schriftbolzen und den unteren beiden Rand hinzu. Außerdem sollten wir dieses Array nehmen und es außerhalb der Komponentendefinition platzieren, da wir vermeiden wollen, dass es außerhalb der Komponentendefinition bei jedem Rendern neu erstellt wird. Nun, so werden diese Dienste auf anderen Geräten aussehen, und das wird es für diese Komponente sein. 32. Wiederverwendbare Komponente: Stapel: Die Stack-Komponente, wir werden das in Ports machen. Falls Sie diese Bibliotheken noch nicht haben, öffnen Sie ein Terminal, führen Sie NPM, I aus und kopieren Sie diese Bibliotheken Zum Beispiel dieser React Intersection Observer. Das werden wir verwenden, damit die Animation wieder angezeigt , um dies mithilfe der Ansicht wird , um dies mithilfe der Ansicht zu erreichen, wenn wir auf und ab scrollen, diese Animation des Stapels wird wieder angezeigt Dann Framer-Bewegung. Nochmals, falls du das noch nicht hast, einfach NPM, ich und setze es dort ein, reagiere Icons. Wir können es auch dort platzieren Das bedeutet, dass wir mit den Symbolen, die wir für unseren Stack verwenden werden, Zugriff auf diese Bibliotheken haben. Jetzt kommen wir rein und installieren die Bibliotheken Ich habe sie schon, aber ich kann es einfach noch einmal machen. Bevor wir nun die Stack-Komponente definieren, werden wir dort ein Array von Stack-Elementen mit Stack-Elementen erstellen . Und dort haben wir für jedes Objekt eine ID und dann einen Namen. Zuerst wird ein Framer sein, dann das Symbol, das erste Symbol das Framer-Symbol mit einer Größe Dann bei Farbe kann ich mich erstmal hinsetzen und grün 200 schreiben, und dann können wir ihr Komma setzen und es dort so oft einfügen, wie Ich werde die Namen und Symbole aktualisieren. Und ich habe auch einige andere Symbole für die anderen vier Symbole ausgewählt die anderen vier Symbole weil es einige Platzhaltersymbole gab Jetzt werden wir Framer Figma, React Note, Mongo Di B und Docker verwenden React Note, Mongo Di B Dann gehen wir weiter nach unten und beginnen dort mit der Definition von Animationsvarianten für die Animationsvarianten für Ich werde C Variance oder Item Variance starten. Und dort werde ich Variante für versteckt eingeben, was die Indexnummer annehmen wird Dort wird die Opazität auf Null gesetzt und für X nehmen wir den Rest des Index, und wenn er Null ist, dann ist er -100 an der wahren Position und an der Kraftposition ist es Das ist ein sogenannter Turner-Operator. Auf diese Weise werden wir dafür sorgen, dass die Stapelelemente von links und von rechts verschoben werden links und von rechts je nachdem, ob dies wahr oder falsch ist Dann haben wir unten eine weitere, die als sichtbar bezeichnet wird , und für diese setzen wir die Opazität auf eins, x auf Null und gehen zur Dauer drei Ich habe mit der falschen Aufschlüsselung angefangen , um Carl dort eins zu machen Lassen Sie uns es durch das Quadrat ersetzen, und weiter unten können wir damit beginnen die Stack-Komponente selbst zu definieren. Im Inneren beginnen wir mit der Einrichtung der Animationssteuerungen. Ich werde die Steuerung ständig ändern und Animationen verwenden. Dann richten wir den Schnittpunkt-Observer ein. Das heißt, wir stellen das Ding jetzt ein, wir importieren es dort. Und damit wird diese Animation wieder erscheinen, wenn wir diese Komponente wieder in unseren Viewport bringen Dort mache ich eine Konstante, und ich werde die Referenz und in View für die Verwendung in View verwenden Drinnen werde ich Threshold 2.1 machen. Dann werde ich mit der Einstellung des Use-Effect-Hooks fortfahren , um die Animation basierend auf dem Anzeigestatus auszulösen . Ich verwende den Effekt dann im Inneren, ich mache die Konditionierung, und wenn das sichtbar ist, werden wir Steuerungen machen , die mit sichtbar beginnen. Und wenn es nicht sichtbar ist, mache ich Steuerungen, die zunächst unsichtbar sind. Welche dieser beiden Artikelvarianten gibt es? Und dann werden wir dort sagen , dass dieser Effekt immer dann ausgeführt wird wenn die Steuerelemente sichtbar sind Abhängigkeiten werden sich ändern. Das heißt, er löst die Animation startet, wenn die Komponenten sichtbar werden, und dass die Animation auch wird, wenn sie aus der Ansicht entfernt wird. Dort werden wir ein Abschnitts-Tag erstellen. Und innerhalb dieses Abschnitts-Tags beginnen wir mit Div und lassen mich erklären, warum ich das zusätzliche Div mache und nicht in der Sektion. Für dieses Div möchte ich das maximale Gewicht festlegen. Im Moment machen wir etwa 250 Pixel, weil wir nur wollen, dass es vertikal und nicht horizontal ist, aber wir können das auch später anpassen und es einfach auf horizontal ändern und so einstellen, dass Oddo mit Text in der Mitte gemischt Wir haben also dieses Zentrum. Für die Sektion. Wenn ich einen speziellen Hintergrund für den Abschnitt hinzufügen möchte, vielleicht einen linearen Farbverlauf, könnte ich das dort machen, und es wird eine volle Breite haben. Zum Beispiel Hintergrund auf Weiß. Wir müssen dort einige Inhalte platzieren. Und lassen Sie mich dort einige Inhalte einfügen und lassen Sie mich ihren Hintergrund auf Grün setzen. Jetzt werden Sie die Unterschiede sehen. Wenn ich auf unsere Seite gehe, können Sie sehen, dass der weiße Hintergrund in diesem Wrapping Section Tag die gesamte Breite einnimmt und der Inhalt, den ich mit diesem grünen Hintergrund verwenden möchte , sich darin befindet und dass er diese maximale Stärke hat, die ich auf 250 Pixel eingestellt und zentriert habe. Wenn ich es dort im Bereich „Umhüllung“ machen möchte, nimmt es den Wandabschnitt und der eigentliche Hintergrund, den ich möchte, sieht dann so aus. Lass es mich dann so benutzen. Lassen Sie uns vorerst die Hintergründe loswerden. Dort kann ich mit Überschrift zwei beginnen. In diese zweite Überschrift werde ich meinen Stapel legen. Im Folgenden werde ich ein Div machen. Und in diesem Div werde ich über die Stack-Elemente iterieren In dieser Iteration der Stapelelemente werde ich ein Motion-Div Und bevor wir mit diesem Div beginnen, werde ich einfach die Überschrift und das Div, das das umschließt, stylen und das Div, das das umschließt, stylen Für meinen Stapel verwende ich Text 7, Excel, Text Grau, 200, Schrift Bolt und etwas Rand nach unten. Für dieses Div verwende ich einfach das Rasterlayout und die Standardeinstellung Gap to Eight. Es wird nur Grid Coms One geben. Das bedeutet, dass all diese Bewegungsunterschiede untereinander liegen werden, und zwar in einer Spalte Mal sehen, wie das aussehen wird. Lassen Sie uns einfach das Motion-Div mit der Indexpunkt-ID angeben. Für den Schlüsselwert und dann für benutzerdefiniert geben wir den Index ein. Dann wird dies zunächst ausgeblendet. Und natürlich nicht die Index-ID, sondern die Punkt-ID des Artikels. Dann animieren wir zwei Steuerelemente, dann Varianten zu Elementvarianten und für einen Klassennamen setzen wir den weißen Hintergrund auf 0,1 Deckkraft Wir fahren mit dem Flexbox-Layout fort und zentrieren es, indem wir die Mitte ausrichten und die Elemente so zentrieren, dass sie horizontal und vertikal zentriert Dann Flex Raw, das bedeutet, dass die Elemente innerhalb des Steifen nebeneinander liegen Dann verwenden wir abgerundetes Excel, Shadow Large und etwas Bettwäsche. Und auf Her können wir einfach Shadow mit Excel machen, jetzt erstellen wir innerhalb dieses Bewegungsabschnitts ein Div für das Symbol. Dort machen wir ein M-Punkt-Icon. Wir können eine Klasse hinzufügen, und im Inneren mache ich den Rand nach unten und das Dollarzeichen mit der Punktfarbe m. Das heißt, dort wird dieser Klassenname mit der Punktfarbe des Elements gesetzt , und wir haben dort den Text grün 200 gesetzt. Dann haben wir dort das Symbol selbst, und unten werden wir den Text schreiben, in dem wir den Punktnamen des Elements anzeigen werden. Dort mache ich Text weiß mit einer Opazität von 0,2, Text drei Excel Transformiere und drehe um 90 Grad. Und jetzt zu dem Tauchgang, der diese Iteration abschließt, setze ich die Referenz auf Rev. und das bedeutet, dass unsere Animation dadurch weiß, wann dieser Container auf dem Bildschirm sichtbar ist Wir können die Animation sehen, wie sie läuft. Es gibt nur eine Sache, die ich reparieren muss. Es fehlt T für unsere Drehung um -90 Grad und ich werde es aktualisieren Sie können sehen, wie die Animation funktioniert, und das war's für diese Stack-Komponente