Eine moderne, reaktionsfreudige Portfolio-Websites mit React und TailwindCSS erstellen

1. SkillshareProjectsREACTTAILDINDintro: Der Kurs richtet sich an alle , die lernen möchten, Websites mit React und Rückenwind zu erstellen . Willkommen. Lassen Sie mich Ihnen zeigen , was Sie lernen werden und was Sie in diesem Paket von Websites finden werden in diesem Paket von Websites mit React und Tailwind erstellt wurden Dieser Kurs ist vollständig projektbasiert, sodass Sie all diese realen Projektbeispiele lernen all diese realen Projektbeispiele , die Sie dann behalten oder anpassen, in Ihrem Portfolio speichern oder später einfach für Ihr erstes Kundenprojekt verwenden Sie erhalten stundenlange Inhalte, um Rückenwind-CSS zu lernen und zu üben Bei den Projekten, die wir erstellen werden, handelt es sich um Portfolio-Websites. Wir werden funktionierende Kontaktformulare erstellen damit Benutzer Nachrichten an uns senden können . Es gibt mehrere ansprechende Navigationsleisten die Sie einfach verwenden können, genau wie alle anderen Komponenten, zu Abschnitten, Portfolioabschnitten Heldenbereichen mit unterschiedlichen Layouts, und Sie werden üben, wie Sie Ihre eigenen coolen Benutzeroberflächen erstellen . Diese Projekte waren mein Weg, um zu verstehen, wo ich etwas ändern sollte oder ich nahm an einem Rückenwindkurs teil damit die Website so funktioniert, wie sie sollte, wie sie sollte, wie man Fehler behebt und so weiter. Jetzt sind all diese schrittweisen Lösungen hier, um Ihnen zu helfen, zu verstehen, wie Sie Websites selbst erstellen können Websites selbst erstellen Reparieren Sie fertige Websites und allgemein, lernen Sie das Wissen, üben Sie oder sammeln Sie einfach mehr Erfahrung, um Ihre Karriere als Frontend-Entwickler zu starten . Wir werden Tailwind CSS verwenden, und Tailwind CSS ist wie eine große Bibliothek vorgefertigter CSS-Klassen, die Sie direkt in Ihrem HDML verwenden können , um Elemente zu stylen, ohne jedes Mal benutzerdefiniertes CSS schreiben zu 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 HDM-Elemente anwenden Ihre HDM-Elemente Neben Rückenwind werden wir auch wiederverwendbare Komponenten verwenden , die Sie problemlos in jedes Ihrer Projekte integrieren können problemlos in jedes Ihrer Projekte integrieren 2. Projekt 1: Einführung: Wir beginnen mit der Erstellung einer Navigationsleiste, die sich auf dem mobilen Bildschirm in ein Menüsymbol verwandelt , das dann die Navigationselemente anzeigt , wenn sie angeklickt und Im Hero-Bereich, dem ersten Bereich, der sichtbar ist , nachdem der Benutzer auf die Website gelangt ist, verwenden wir ein Profilbild mit einem kleinen T-Effekt dahinter und auf der linken Seite eine kurze Beschreibung mit einer Schaltfläche zum Herunterladen des Lebenslaufs und auf der rechten Seite die sozialen Symbole Im Abschnitt „Über uns“ werden wir diese Spalten für unsere Bilder erstellen , um ein interessantes Designelement , das wir neben unseren Text platzieren können. Und im Folgenden einige Kennzahlen, anhand derer wir unsere Erfolge hervorheben können. Im Folgenden werden wir einen Abschnitt mit unseren ausgewählten Projekten erstellen , die wir hervorheben möchten. Dann werden wir einen Erlebnisbereich erstellen , in dem wir diesen Brief über unsere Berufserfahrung erstellen werden , oder vielleicht, falls Sie noch keine haben, können wir einige Erfolge aus der Schule vorbereiten . Unten finden Sie dann einen Kontaktbereich mit funktionierenden Kontaktformular, das tatsächlich Nachrichten an unsere Mailbox sendet. 3. SET-UP: Wir beginnen damit, dass wir zur Endseite und dort in den Framework-Anleitungen zu WD gehen und dort beginnen wir, WD gehen und die Befehle zu verwenden. Wir werden dort das Terminal öffnen. Wir werden es jetzt einfügen und wir befinden uns bereits in unserem Ordner oder zumindest auf der Time-Portfolio-Website. Dort löschen wir also das Mein Projekt, machen dort nur einen Punkt, drücken die Eingabetaste und das Projekt wird dort initialisiert Da wir uns jetzt auch schon in dem Ordner befinden, müssen wir ihn nicht mehr sehen Dort werden wir diesen verwenden, Autoprefixor installieren. Jetzt der nächste zur Initialisierung des Rückenwinds. Jetzt werden wir das kopieren und in die Tailwind-Konfigurationsdatei einfügen in die Tailwind-Konfigurationsdatei Jetzt die Tailwind-Direktive im Index-CSS. Dort können wir Epidt CSS löschen, und um unsere Anwendung zu testen, können wir das auch nehmen, in EpidgSSIX einfügen Wir können das Terminal reinigen und die NPM-Lauftiefe ermitteln . Jetzt wird unsere Seite beginnen. Zuerst lade ich die Bilder in das Asset, das Sie auf Git finden, und dann werde ich mit der Erstellung eines neuen Ordners fortfahren , der den Namen pages trägt, und dort kann ich beginnen. Zuerst werde ich genügend Balken erstellen. Und wir können dort einen Export erstellen und ihn in unseren Epidot J six einfügen. Da können wir also anfangen Wir werden zuerst die Navbar importieren. Und dort werden wir alle Komponenten zurückgeben. Also werden wir ein leeres Fragment erstellen , das die Navbar enthalten wird Und unten machen wir die Standard-App exportieren. 4. Navbar: Zuerst müssen wir in der Navigationsleiste den Nutzungsstatus importieren, müssen wir in der Navigationsleiste den Nutzungsstatus importieren da wir dort eine Statusvariable für die Navigationsleiste verwenden werden , da wir von der mobilen zur Desktop-Navigation wechseln werden von der mobilen zur Desktop-Navigation wechseln Außerdem werden wir einige Symbole importieren. Also werde ich Outline Clothing und Outline Menu von React Icons AI verwenden . Lassen Sie mich zunächst die Bibliothek importieren oder installieren, sodass keine PMI-Symbole reagieren Jetzt können wir das AI Outline Clothing - und Outline-Menü erstellen Außerdem werden wir die Signatur importieren und was sie ist. Ich habe dort im Grunde eine Signatur erstellt, transparente Signatur, und ich werde sie als mein Logo verwenden. Also Signatur von As such, SinagrePng Als erstes beginne ich mit der Statusvariablen, also mache ich den NaF und setze die Standardeinstellung für den Navigationsmodus auf False Dann werde ich eine Funktion erstellen, um diese Navigation zu handhaben. Also setNA und ändere den Wert. Und wir werden diese In-Click-Funktion in unserer Navigation verwenden. Das sollte es sein. Dort im Haupt-Div, das wir öffnen werden, werden wir dort zuerst einen Klassennamen festlegen. Wir können Text verwenden, um Schwarz zu erzeugen. Dann das Flexbox-Layout, begründen Sie den Abstand dazwischen, sodass der Raum zwischen unseren Elementen gleichmäßig verteilt ist zwischen unseren Elementen Dann zentrieren Sie es vertikal, maximale Breite bis 1.300 Pixel Wir werden dies zentrieren, da wir die maximale Breite verwenden, und wir werden eine gewisse Anfangshöhe festlegen Wir können den grünen Hintergrund jetzt auch auf 700 setzen , um nur die Navigation auf unserer Seite zu sehen. Jetzt sollte es aktualisiert werden. Also lass es uns auf helle Farbe ändern und das , damit es funktioniert. Also können wir sehen, dass wir es da haben. Also zuerst wird in diesem Man-Div ein Logo stehen, und dieses Logo wird in den Ankertext eingeschlossen weil wir wollen, dass es uns auf die Startseite führt, wenn es angeklickt wird Fügen wir also die Quelle hinzu und ich werde die Signatur Ich importiere es. Jetzt können Sie sehen, dass es das Logo oder die Signatur gibt. Also müssen wir diesem Anker-Tag auch einen Klassennamen hinzufügen. Dort beginnen wir zuerst mit einem gewissen Abstand nach links, und natürlich müssen wir das maximale Gewicht festlegen. Auf etwa 100 Pixel. Jetzt werde ich die Seite dort vergrößern, damit du sie besser sehen kannst . Okay. Jetzt können wir mit der ungeordneten Liste fortfahren , die Listenelemente enthalten wird Für diese ungeordnete Liste wird sie auf dem mobilen Bildschirm ausgeblendet, wird sie auf dem mobilen Bildschirm ausgeblendet da es dort die mobile Navigation gibt, und auf einem mittleren Bildschirm und höher wird sie flexibel angezeigt, und wir werden dort für alle Listenelemente das Telefon per Semi-Boot verwenden für alle Listenelemente das In unseren Abschnitten wird es um Arbeit, Erfahrung und Kontakt gehen. Wir können also etwa mit der Arbeit beginnen, dann mit Erfahrung und dann mit Kontakt. Dann können wir den Klassennamen „ Für alle hinzufügen“ mit etwas Bettwäsche warten . Lass uns fünf Betten geben. Und jetzt müssen wir das in ein Link-Tag packen. Aber zuerst müssen wir ein Terminal öffnen und es dorthin bringen. NPM, ich reagiere, scrolle. Jetzt wird das installiert und wir werden den Link erstellen Drücken Sie Enter. Auf diese Weise wird es dorthin importiert. Wir können es noch einmal überprüfen. Jetzt haben wir den Link, sodass wir in das Link-Tag das About einfügen können. Dort in diesem Link müssen wir eine Zwei setzen, also zwei und ungefähr. Das Gleiche gilt für Berufserfahrung und Kontakt. Und ich denke, es wird diese Schrägstriche nicht brauchen. Lass es uns später testen. Jetzt müssen wir auch noch ein paar Versuchs-Stimmungen hinzufügen und das wird glatt bis zwei, dann Offset auf 50 und Dauer auf 500 Und das wird zeigen, wie der Smooth-Scroll funktionieren sollte. Jetzt können wir das nehmen und um die anderen Gegenstände konkurrieren. Nun zum Symbol auf dem mobilen Bildschirm Wir starten ihr Div. In diesem Div werden wir einen Operator zum Umschalten der Navigation ausführen. Basierend auf diesem Wert , der standardmäßig falsch ist, zeigen wir das geschlossene Symbol oder das Menüsymbol an. Fangen wir also mit der geschlossenen Gliederung an. Im Fall eines wahren Werts und im Fall eines falschen Werts verwenden wir das Gliederungsmenü. Wir können ihre Größe auch auf 20 setzen 20 und wir können dort auch einen Klassennamen eingeben, oder wir müssen es tun. Auf dem mobilen Bildschirm wird es also angezeigt. Auf dem mittleren Bildschirm sollte dies jedoch ausgeblendet sein, da wir dort die Desktop-Navigation haben. Jetzt können Sie dort sehen, wir haben dort eine neue Navigation und wir haben dort auch die Desktop-Navigation. Aber wenn ich jetzt diese Werte dort speichere, werden sie ausgeblendet, weil sie nur auf dem Handy angezeigt werden . Natürlich müssen wir auch heute noch die Onclick-Funktion hinzufügen Also ein Klick und es wird das Handle Navigation aufgerufen, das da ist Und jetzt können wir die Navigation für das Handy vorbereiten . Wenn also auf dieses Menüsymbol geklickt wird, wird Div mit der ungeordneten Liste geöffnet Also lasst uns zuerst div öffnen. Dort müssen wir die Klasse für dieses Dif erstellen, sodass auch hier wieder der Turner-Operator verwendet wird , der auf dem Wert der Variablen Np basiert Wert der Variablen Np Und dort wird es wieder sagen, wahr und falsch, Position auf wahr, es wird nur dieses mobile Menü angezeigt Wenn also ein Index, Text grau wird, wird das Problem behoben. Es wird die volle Höhe haben. Es wird links und oben auf Null fixiert. Die Breite wird bei 60% liegen, wir können einen Rand nach rechts hinzufügen . Und ich denke, das ist es. Und für die vierte Position wird sie einfach auf ein linkes Minus von -100 festgelegt Also irgendwo da drüben wird es einfach aus dem Bildschirm erscheinen. Wir können es testen. Sie können jetzt sehen, wie die Grenze aussah, aber wir müssen die Nordliste hinzufügen , um alle Elemente zu sehen. Also lass uns weitermachen. Zunächst wird es zeigen, dass wir die Dinge, die wir dort haben, im Grunde nehmen, dorthin kopieren und das Styling aktualisieren können. Also dieser, lass uns sehen, wie er aussehen wird. Was wir tun können, ist, dass wir ihren Hintergrund hinzufügen. Fangen wir also mit dem zweiten Hintergrundgradienten an, oder? Von Grau 500 über Grau 702 Grau 900. Außerdem werden wir ihren Osten rein und ihre Dauer 500 hinzufügen. Jetzt ist das ein bisschen besser. Aber wir werden es etwas dunkler machen. Also machen wir es von 700, 800 auf etwa so. Also, was wir als Nächstes tun sollten. Lassen Sie uns diese maximale Breite für das Bild abschneiden und dort platzieren. Also machen wir die Breite vielleicht auf 120. Lass es uns tatsächlich auch dort machen. Also werden wir die Breite auf 100 erhöhen und es von dort abschneiden. Jetzt sieht es so aus. Und wenn wir es auf der Desktop-Version erhöhen , sieht es immer noch gut aus. Also müssen wir dort jetzt einige Ränder hinzufügen und die Textgröße erhöhen. Zuerst würde ich dort hingehen, Text für Excel dann vielleicht ihren Rand von links auf, ich weiß nicht, 12 machen . Das ist auch ein bisschen besser. Und dann werden wir die Wetten hinzufügen. Und wir fügen unseren Klassennamen hinzu, Rand links bis 12, und das sollte in Ordnung sein. So sieht es jetzt mit der mobilen Navigation aus. Was wir auch tun sollten, ist, dem Symbol einen gewissen Rand hinzuzufügen. Dort werden Sie also einen Rand von rechts bis sechs haben, und das sollte es sein. Und wir können zur Heldenabteilung übergehen. 5. Held:in: Was wir tun müssen, ist den Explorer in Pages zu öffnen und eine neue Datei zu erstellen, Hero JA Six. Wir brauchen diesen Export dort in Abdo JSix. Wir werden einfach einen Helden schreiben, klicken Sie auf Enter. Jetzt wird es importiert, wir haben es da. Wir werden eine Animation vom Typ React verwenden, ein Terminal öffnen und eine Animation vom Typ npMiract ausführen Jetzt werde ich das schließen . Nimm die Seite, leg sie irgendwo hin und wir können anfangen. Zuerst werde ich dort das Profilbild importieren. Es wird also vom Profilbild der Vermögenswerte ausgehen. Und lassen Sie mich tatsächlich den Namen überprüfen. Ja. Ist das einer? Jetzt haben wir es da. Wir werden einige Icons importieren, also werde ich KI für Linkedin, KI für Git Up und KI für Instagram importieren KI für Git Up . Als Nächstes werde ich die Typanimation aus der Bibliothek importieren die Typanimation aus der , die wir gerade zusammen installiert haben. Jetzt kann ich dort direkt in das Haupt-Div gehen und anfangen. Also werden wir dort einen vertikalen Rand hinzufügen. Auf mittlerem Bildschirm werden wir es einstellen. Es wird also hauptsächlich für die Mobilgeräte gelten , dort zusätzlichen Abstand zu haben. Dann werden wir die maximale Gewichtung für die Navigationsleiste auf 1.300 Pixel festlegen für die Navigationsleiste auf 1.300 Pixel Dann werden wir bei mittlerem Bildschirm auch eine gewisse Höhe des Viewports einstellen Wir werden also mehr Platz für unseren Heldenbereich haben. Ich werde eine Viewport-Höhe von 70 verwenden. Dann werden wir das zentrieren, da wir die maximale Breite haben. Wir können diese Summe verwenden. Und ich werde es am Anfang mit einem grünen Hintergrund von 300 machen, damit wir sehen können, wo wir uns befinden. Ich werde es jetzt für dich dezentrieren, damit du sehen kannst , dass ich es zurücklege Dann verwenden wir ein Rasterlayout, weil wir in diesem Abschnitt, sagen wir, im Grunde drei Spalten haben werden , aber ich werde die Rasterspalten für mittlere Bildschirme verwenden, weil ich möchte, dass mein Bild zwei dieser Spalten In der ersten Spalte auf der linken Seite wird es also den Namen geben. In der Mitte von zwei Spalten befindet sich das Bild und in der rechten Spalte in der letzten befinden sich die Symbole. Jetzt werde ich auch Platzgegenstände verwenden. Zentrum. Zunächst werden wir in diesem Div den Namen mit dem Typ Animation und mit der Schaltfläche für den Lebenslauf angeben. Also werde ich noch ein Div machen. Und in diesem Div werde ich einen technischen Absatz machen. Und in diesem technischen Absatz werde ich ein M schreiben. Lassen Sie uns nun eine neue Zeile schreiben. Technik ausgeben. Es wird nicht gewonnen. Und danach werden wir den Typ Animation verwenden. Für diesen Animationstyp gibt es eine bestimmte Reihenfolge. Wo wir die Dinge, die wir schreiben wollen, auf unserer Website platzieren werden. Also werden wir zuerst den Entwickler machen. Die Reihenfolge wird 1.000 sein, dann machen wir den Webdesigner. Auch hier wird die Reihenfolge 1.000 sein und ein Berater. Die Reihenfolge wird wieder 1.000 sein. Dann können wir dort eine Geschwindigkeit einstellen, also werde ich dort eine Geschwindigkeit von 50 einstellen und einige wiederholen es. Und natürlich wird die Wiederholung auf Unendlichkeit erfolgen, es handelt sich also um eine Endlosschleife. Jetzt können wir sehen, dass unsere Seite komplett weiß ist, also ist sie wahrscheinlich gescheitert. Wir können das Problem erkennen, indem wir auf die Seite gehen und es überprüfen. Und dort in der Konsole können wir sehen, dass Unendlichkeit nicht definiert ist Und die kleine Leiter gefiel ihr einfach nicht . Jetzt können wir auf unserer Seite sehen, dass es funktioniert. Lassen Sie uns das Styling hinzufügen. Für das Absatz-Tag füge ich also auf dem mittleren Bildschirm und über dem Text fünf Excel hinzu. Auf kleineren Geräten können wir Textbaum-Excel und auf Mobiltelefonen Text-Excel Excel. Dann werden wir Tracking Tight verwenden, also haben wir den Buchstabenabstand etwas verringert , wie Sie dort sehen können. Außerdem werden wir dort aus der Spen-Technologie ein anderes Styling hinzufügen , also werde ich eine zusätzliche Schrift mit Bolzen und Kursivschrift hinzufügen. Also vielleicht ist ein Bolzen genug. Und nach dem Span-Tag muss ich noch zusätzliche Break-Technologie hinzufügen, also haben wir diese weitere Zeile. Jetzt können wir zu unserem Div zurückkehren. Für unser Div werden wir eine maximale Gewichtung von 400 Pixeln festlegen . Dann werden wir ein Flexbox-Layout verwenden und warum wir dieses verwenden werden Denn in diesem Div befindet sich neben diesem Absatz-Tag auch die Schaltfläche mit dem Lebenslauf Und in der Desktop-Version wird dies untereinander sein. Die Flex-Richtung wird also eine Spalte sein. der mobilen Version wird dies jedoch nebeneinander sein. Also wird es mit der Reihe Flex Direction sein. Fügen wir nun das Styling für die Schaltfläche hinzu. Zuerst, wohin uns dieser Button führen sollte . Ich überlasse es dir. Es sollte uns irgendwohin bringen , wo unser Lebenslauf gespeichert ist. Dann können wir den Titel für diese Schaltfläche festlegen. Laden Sie also den Lebenslauf herunter. Und wir werden eine Klasse hinzufügen. Für Klassen können wir also einen gewissen Spielraum hinzufügen. Wir können auch etwas Polsterung hinzufügen, also lasst uns das verwenden. Lassen Sie uns dort einfach zwei Füllungen machen und wir können eine weitere Verlaufsfarbe hinzufügen Also Hintergrundverlauf nach rechts. Und es wird von einer Farbe zur zweiten Farbe gehen. Lassen Sie mich jetzt die Mäntel für die Farben nehmen, die ich haben möchte. Also werden wir von dieser Orange zu dieser lila Farbe übergehen. Es hat eine ziemlich ähnliche Farbe wie die , die ich auf meinem Profilbild verwende. Und tatsächlich können wir jetzt das Profilbild hinzufügen. Oder vielleicht mache ich es zuerst einfach rund. Excel. Lassen Sie mich es für Sie verschieben und die maximale Breite auf Versuchen wir es 300 Pixeln, vielleicht 260. 80? Okay. Lass es uns so belassen. Jetzt werden wir herausfinden, wo dieses Div endet. Das ist da. Da werden wir jetzt das Bild hinzufügen. Das wird das zweite Div sein und darin werden wir das Bild mit der Quelle des Profilbilds machen. Wir haben da. Wir können auch ein altes Profilbild hinzufügen. Dort werden wir auch den Klassennamen hinzufügen. Stellen wir also die Breite für das Mobiltelefon auf 300 Pixel und auf einem mittleren Bildschirm und höher setzen wir dieses Gewicht auf 500 Pixel. Dann warte zuerst, lass es uns machen. Geht auf Auto, und wir können auch die Zentrierung für das DIF oben verwenden die Zentrierung für das DIF Wir gehen von der mittleren Bildschirmgröße und höher aus und nehmen die zweite Spalte. Und damit werden wir erreichen, dass dafür zwei von vier Spalten benötigt werden , die wir dort eingestellt haben. Wir haben also vier Spalten, und damit sagen wir, dass wir zwei davon benötigen sollten. Wir müssen es nicht einmal in den anderen Diffs angeben , weil das genug sein wird Und jetzt können Sie sehen, wie unser Bild zugenommen hat. Das wird also für das Bild sein. Was wir auch tun werden, ist, dass wir auf mittlerem Bildschirm und höher links 28 einen gewissen Rand hinzufügen werden Haben wir keine Angst vor dem Wert. Und jetzt fügen wir die Icons hinzu, also fügen wir ein Loch in den Tod hinzu, ihr fügt den Ankertext hinzu, und innerhalb des Ankertextes fügen wir den AI-Fail hinzu. Steh auf. Lass mich das noch zweimal kopieren. KI fällt LinkedIn und KI scheitert an Instagram. Lassen Sie uns jetzt das Styling machen. Das Styling wird also Text fünf Excel sein, sodass wir diese Symbole gut sehen können. Dann Flexbox-Layout. Beim Design von Mobiltelefonen werden wir also eine Flex-Reihe verwenden, sodass sie auf diesem Desktop-Design nebeneinander mittleren Bildschirmeinstellungen und darüber werden wir also eine Spalte mit flexibler Richtung verwenden, sodass sie sich untereinander befinden, wie Sie es jetzt sehen können Lassen Sie uns auch eine Lücke setzen. Vielleicht ist das zu viel. 12. Vielleicht funktioniert sogar zehn. noch etwas anderes für mittleren Bildschirm und höher Lassen Sie uns die Breite auf voll einstellen. Und lassen Sie uns auch Elemente an den Enden platzieren. Und das bedeutet, dass sie gut unterhalb oder am Ende unserer maximalen Breite von 1.300 Lassen Sie uns nun den Hintergrundbildschirm festlegen. Und das sollte es für die Heldenseite sein. Vergiss nicht , dort etwas HRP von deinem Git auf LinkedIn oder Instagram hinzuzufügen deinem Git auf LinkedIn oder Instagram 6. Über mich: Jetzt fahren wir mit der Seite Über uns fort. Dort auf Seiten archivieren Sie also über die J Six. Bringen wir das zu Abdo J Six. Nochmals, wir können es jetzt auf unserer Seite dort sehen. Und wir gehen zur Komponente und können dort beginnen. Zuerst importiere ich das A-Bild aus den Assets. Lassen Sie mich also noch einmal sehen, wie es benannt ist Ungefähr vier JP Save it. Jetzt kann ich die Hauptdiskette öffnen. Und ich kann dort mit dem Styling beginnen. Lassen Sie uns also zunächst ein maximales Gewicht von 1.300 Pixeln festlegen , wie es für unsere Seite Standard ist Dann fügen wir ein Flexbox-Layout hinzu und verwenden Elemente, um Elemente zu zentrieren und um Objekte vertikal und horizontal zu zentrieren Dann zentrieren wir es wieder mit dem Mixoto Sie können den Hintergrund verwenden, um, ich weiß nicht, grün 300 zu sehen, wo Sie auf Ihrer Seite etwas hinzufügen Derzeit gibt es nichts. Wenn wir also einfach etwas hinzufügen, wirst du es dort sehen. Damit können wir auch von einem mittleren Bildschirm und höher aus hinzufügen. Wir brauchen kein Handy, Körpergröße bis 70, also Baheit vielleicht Okay. Und wir können es sogar löschen. Und wir können dort mit einem weiteren Div weitermachen. Und doch wird es da sein, um unser Image zu wahren. Wir haben also einen Klassennamen mit Flex und Flex Row, weil wir wollen, dass diese Bilder nebeneinander stehen. Wir werden dort auch ein paar Gib essen. Und in dieser CD werden wir das erste Bild hinzufügen und wir werden die Attribute hinzufügen, und dann werden wir es einfach als zweites kopieren. Also zum Bild. Das kann mit about image geschehen, und der Klassenname wird Object Cover sein. Wir haben es bereits dort auf unserer Seite. Machen wir es also rund um Excel. Lassen Sie uns auch eine Breite von 100 Pixeln angeben. Ah, ist da jetzt? Lassen Sie uns die Höhe auf 300 Pixel erhöhen. Lassen Sie uns einen Filter verwenden und eine Graustufe einstellen, weil ich nicht möchte, dass mein Bild zu viel Aufmerksamkeit erregt Außerdem können wir die Helligkeit auf 50 reduzieren. Das ist besser. Wenn wir nun dieses Bild kopieren und dort ablegen, werden wir diese beiden Übersichtsbilder nebeneinander haben. Aber was ich dort erreichen wollte, ist, dass ich die Höhe des zweiten auf 200 senken werde. Und jetzt können Sie auf unserer Seite sehen, dass so etwas erstellt wird. Lassen Sie uns zuerst weitere Inhalte hinzufügen, und dann werden wir herausfinden, wie wir es ein bisschen besser machen Aber dafür müssen wir zuerst auch eine Beschreibung hinzufügen In diesem anderen Div werden wir also etwas über uns hinzufügen, ein paar Sätze. Also, erster Einblick, ich werde den Absatz hinzufügen. Lassen Sie uns das Styling hinzufügen. Also da für den Absatz, fügen wir den King Tight hinzu. Also wieder werden wir den Buchstabenabstand etwas verringern, lockerer lesen, also werden wir die Zeilenhöhe erhöhen. Dann werden wir das maximale Gewicht sehen. Lass uns 500 Pixel verwenden. jetzt in diesem Div Wenn wir jetzt in diesem Div umziehen, können wir dort die Statistiken hinzufügen. Also werden wir ein neues Gericht kreieren. Und in diesem Div werden wir mehr Discs erstellen. Das wird das H zwei mit der statistischen Zahl enthalten, also 11 und dann Spentek Und weiter unten wird es einen Absatz Tech mit Projekten geben einen Absatz Tech mit Projekten Jetzt werden wir das Styling hinzufügen. Für diese Statistik-Analyse verwenden wir zunächst das Hauptlayout, das Flexbox-Layout, den Abstand, den Rand von oben, maximale Breite bis 600 Pixel und die Zentrierung Für die Container oder kleinen Container mit der Statistik selbst geben wir den Klassennamen, den Hintergrundverlauf nach rechts von Grau 800 nach Schwarz mit etwas Rosa und mit etwas abgerundetem Groß Speichern Sie jetzt für die zweite Überschrift Ab dem mittleren Bildschirm und höher setzen wir den Text auf vier Excel. Andernfalls wird es Text in Excel sein, wenn auch halbwegs, und wir hätten gerne diese Textverlaufsfarbe. Also machen wir jetzt einen CSS-Kurs. Lassen Sie uns die Dateien öffnen, das Indexpunkt-CSS und dort fügen wir die Primärfarbe des Hintergrundtextes hinzu. Und im Inneren fügen wir ein Hintergrundbild linearen Farbverlauf nach rechts hinzu. Dort werden wir die Farben verwenden, die wir zuvor verwendet haben. Also wo es da ist, können wir sie kopieren. Aber wir brauchen das von und diese Zahnspange nicht. Also machen wir es so , nur mit Kommas. Es geht also darum, von dieser Farbe zu dieser Farbe zu schreiben Und dann machen wir ein Webkit, Hintergrundclip zum Text Außerdem werden wir einen Hintergrundclip zu Text erstellen. Webkit-Text, gefüllt mit transparenter Farbe und transparenter Farbe. Damit gehen wir jetzt zu unserem A-Bereich und dort, was war die Klasse, die Primärfarbe des Hintergrundtextes, nehmen sie und fügen sie dort ein und speichern sie. Wir werden unseren Text mit dieser Farbe haben. Und wir werden es dort für die Projekte verwenden , nicht für die Projekte, wir werden nur weißen oder tatsächlich grauen Text verwenden, ich weiß nicht, 500, vielleicht 400, mal sehen, wie es aussieht. Das ist besser. Was wir jetzt tun können , ist, dass wir das kochen können. Leg es noch zweimal da hin. Dort werde ich mehr als sechs Jahre Erfahrung machen und mehr als 30 Jahre bei den Pfandrechten. Bevor wir zum grünen Hintergrund übergehen, müssen wir diesen auch stylen Wir haben also den ersten Unterschied, da ist der zweite. Lass uns bei Lücke 24 sein. Lassen Sie uns diesen Hintergrund entfernen und sehen, wie er aussieht. Was wir tun müssen, ist dort den Text der Größe zu aktualisieren . Also dieser wird definitiv Text Excel sein, zumindest. 7. Portfolio: Also lass uns den Ordner öffnen. Die Seiten, die Sie im Portfolio ablegen, sind JS sechs. Jetzt importieren wir es dort. Und wir können anfangen. Beginnen wir mit dem Import der Projektbilder. Importieren Sie also Project One aus Assets Project One Dot PNG. Dann werde ich das für alle anderen tun. Also eins, zwei, drei, vier. Nett. Ich habe es da. Was ich dort sonst noch tun würde, ist, dass ich eine Liste oder Konstante dieser Projekte erstellen werde. Also werde ich eine konstante Anzahl von Projekten erstellen und dort alle Informationen über die Projekte laden, alle Informationen über die Projekte laden, und dann werde ich sie wiederholen, und mein Code wird sich nicht wiederholen, und ich werde nur eine Projektkarte Und wann immer Sie nur ein Projekt hinzufügen möchten, bearbeiten Sie es dort in diese Projekte Sie können dort sehen, dass ich ein Bild hinzufügen werde , das Projekt eins sein wird. Dann mache ich einen Titel , der nur ein Projekt sein kann. Eins, dann mache ich eine Beschreibung und ich kann sie wiederholen. Jetzt füge ich dort einfach ein paar weitere Projekte hinzu und kann mit der Definition der Projektkarte fortfahren. Diese Projektkarte, was ich dort machen werde, wo wir ein Projekt als Input nehmen, das wir dort in die Karte aufnehmen, die wir in diesem Hauptportfolio verwenden werden. Diese Projektkarte können Sie dort auch als eigenständige Komponente verwenden. Wenn Sie einfach einen neuen Ordner mit Komponenten erstellen und eine neue Datei erstellen, project card.j6 Sie können diesen L-Code auch dort verwenden, aber ich werde ihn in dieser Darstellung von J Six Component beibehalten Dort werden wir mit der Rückkehr beginnen und ich werde das Div machen Dieses Haupt-Div für die Projektkarte hat ein gewisses Styling. Ich werde hinzufügen, dass ich abgerundete Ecken und einen Hintergrundverlauf nach rechts von Grau 800 über Grau 900 bis Schwarz hinzufügen Hintergrundverlauf nach rechts von Grau werde. Dann werden wir Overflow Hidden verwenden, damit nichts aus unseren Karten rauskommt Dann reicht ein bisschen Schatten für Excel. Lassen Sie uns auch einen Z-Index hinzufügen, bei einer Transformation, einem Übergang und einer Dauer. Wann immer wir jetzt die Skala bis 500 verwenden die Skala bis 500 und wann immer wir den Mauszeiger über die Karte bewegen, werdet ihr sehen können , wie sie sich vergrößert und transformiert und die Skala erhöht Dann können wir dort mit dem Anchor-Tag beginnen. Und in dieses Anker-Tag werden wir wieder ein Bild einfügen. Für dieses Bild fügen wir eine Quelle hinzu, und die Quelle wird das Punktbild des Projekts sein. Und wieder, dieses Projekt, du kannst es nirgends sehen. Es gibt nur ein Projekt, aber wir werden dort Projekte kartografieren und dieses Projekt verwenden und es als Projektkarte bezeichnen. Und dann werden dieser Bildwert, der Titelwert und der Beschreibungswert zugeordnet. Die Quelle wird also dieser Bildwert sein. Dann werden wir dort auch einen Klassennamen haben, natürlich auch für das Bild. Die Höhe beträgt also 300 Pixel, Breite bis zur vollen Breite, Objekt bis zur Decke, Objekt bis oben. Die abgerundete Oberseite wird für Excel verwendet. Das ist es. Lass uns auch dieses Styling machen. Für die Anchor-Technologie werden wir dort eine HRF einrichten, und im Idealfall geben Sie dort die URL zu Ihrer Demo-Website im Arbeitsleben ein, wie Sie es getan haben Oder wenn es für einige Kunden ist, geben Sie dort einfach den Link zu ihrer Website und dann den Klassennamen ein Also können wir das gruppieren, den Spaltenbereich auf drei setzen, ihre Anzeige auf Blockierung setzen und auch ihren Überlauf ausblenden Und unter dem Bild platzieren wir die Diskette und in diesem Unterschied machen wir Überschrift zwei mit dem Projekttitel Und auch ein Absatz-Tag mit der Projektbeschreibung. Lass es uns schließen. Nun zum Styling. Für den Unterschied selbst legen wir also etwas Bettwäsche hinein, setzen den Text auf Weiß, Rand nach unten und den Rand auf rechts Bevor wir dort mehr Styling hinzufügen, fügen wir dort Code hinzu Also werden wir das Styling, das wir dort machen, tatsächlich im Portfolio sehen , wir werden ein weiteres Div machen. Und in diesem Div werden wir die Projekte Dot Map erstellen. Wir erstellen einen Projektindex und rufen dort die Projektkarte auf. Also Projektkarte. In diese Projektkarte geben wir einen Schlüssel ein , der als Index dient, und im Projekt geben wir das Projekt ein. Also geben wir dort das Projekt aus den Projektkarten ein und lesen dort den Titel und die Beschreibung. Und all diese Informationen haben wir dort. Jetzt werden wir auf unserer Website nach unten scrollen, Sie können dort bereits das Projekt sehen. Natürlich fügst du jetzt das Styling hinzu. Zuerst in den Mann-Div, etwas Bettwäsche, etwas von Button auch. Okay? Lassen Sie uns nun dort mit einer gewissen maximalen Breite weitermachen. Wir verwenden 1.300 Pixel. Und du zentrierst es jetzt auch im zweiten Div, brauchen wir vielleicht gar nicht Wir können es im ersten machen. Was wir tun wollen oder was Sie vielleicht auch tun möchten, ist, das Rasterlayout zu haben und mindestens zwei Projekte hintereinander anzuordnen. Wenn Sie vielleicht nicht so viele Projekte haben und Sie der Meinung sind, dass es besser ist, die Projekte einfach online und untereinander zu haben , können Sie es auch so lassen und einfach etwas Abstand zwischen den Projekten hinzufügen . Ich werde das Rasterlayout verwenden, also werde ich das Raster hinzufügen. Und auf dem mobilen Bildschirm belassen wir es als Standardwert Spalte Spanne eins oder Rasterspalte eins. Aber auf dem mittleren Bildschirm und höher werden wir die zweiten Rasterspalten hinzufügen. Die Projekte werden also nebeneinander liegen. Außerdem werden wir eine Lücke hinzufügen. Wir haben also einen gewissen Abstand zwischen ihnen, und wir können dorthin zurückkehren und etwas Styling für die zweite Überschrift vornehmen, bei der sich um Text zu Bogen auf Semibt handeln wird Okay. Und für die Projektbeschreibung fügen wir Text zu Gray 300 und Text Small hinzu und wechseln zu DP. Sehen wir uns die Bache an. Ich denke, wir belassen die Überschrift bei weißem Text, und das ist in Ordnung Und ich denke, wir können es so belassen. 8. Erfahrung: Fahren wir nun mit dem Abschnitt Erfahrung fort. Auf Explorer-Seiten erstellen wir also eine neue Datei experience.j6 Wir werden dort bearbeiten. Und wir können anfangen. Zunächst werden wir mit unserer Erfahrung eine Konstante setzen . Lassen Sie uns also Erfahrungen machen oder auch weitermachen. Und dort werden wir mit der Dauer und Beschreibung des Unternehmens beginnen . Oh nein, das sind Unternehmen, also werde ich nur die erste Firma machen. Dauer kann ich dort machen, ich weiß nicht, 2017 bis 2018 und Beschreibung. Ich habe als Frontend-Entwickler gearbeitet. Jetzt können wir es streichen, dort etwas Ähnliches machen, aber es auf Zweiter, Dritter ändern, da sollten natürlich die echten Namen der Unternehmen stehen, aber ich werde dort nur ein paar Platzhalter einfügen Fünfter. Dies können 2018, 2019, 2019, 2021, 2021, 2023 und 2023 bis heute sein. Natürlich wird es höchstwahrscheinlich eine andere Beschreibung geben. Auch hier werde ich das als Platzhalter verwenden. Jetzt, wo wir die Liste der Erlebnisse haben, können wir sie jetzt im Haupt-Div verwenden, also werden wir keinen sich wiederholenden Code machen, sondern wir werden ihn dort haben und über die Map darauf zugreifen und ihn wiederverwenden Im Haupt-Div werden wir also einen Klassennamen mit etwas Einbettung hinzufügen, wobei einige mit 1.300 Pixeln gemischt Wir werden es mit einem Mixoto zentrieren und wir werden auch eine relative Klasse hinzufügen , weil wir die Linie verwenden werden, und das wird eine Art Zeitleiste für uns sein, und das wird die absolute Position Bevor ich nun diese Konstante zuordne, erstelle ich die Zeitleiste, sodass es dort ein separates Div gibt, das keinen Inhalt enthält. Es wird nur eine Klasse haben, und diese Klasse wird eine absolute Position haben, mit einer gewissen Breite und einem Farbverlauf des absolute Position haben, mit einer gewissen Breite Hintergrunds nach unten von Grau 500 bis Grau 800. Dann fügen wir die Höhe zur vollen, linken Hälfte hinzu, und auch in einer anderen Zeile kann ich Transformieren, X übersetzen und wieder 50% auf kann ich Transformieren, diese Weise machen. Jetzt können Sie sehen, dass der Anfang der Timeline bereits auf unserer Seite ist, und im Folgenden werden wir die Konstante abbilden, also machen wir ihre Erfahrungen mit Punktkarte, Erfahrung oder wir können XP Index machen, und dort werden wir mit den nicht leeren Fragmenten beginnen , sondern mit dem Div. Bei unserer ersten Eingabe in einem Klassennamen machen wir Curly Basis, Backslash, Flexbox-Layout und im Inneren prüfen wir, ob der Rest des Index geteilt durch zwei Null ist. Und falls ja, rechtfertigen wir Start, was bedeutet, dass unsere Erfahrung auf der linken Seite angezeigt wird, und falls nein, verwenden wir Das Erlebnis wird also auf der rechten Seite sein. Und das ist ein Turner-Operator. Die erste Position ist also wahr und die zweite ist falsch oder wird ausgeführt Falls es falsch ist. Also dieser Zustand genauer. Dort werden wir Elemente zur Mitte und auch den vertikalen Rand zu acht hinzufügen . Und dort werden wir den Schlüssel als Index verwenden. Was dort falsch ist , ist, dass für den Turner-Operator das Fragezeichen fehlt Jetzt drinnen können wir ein weiteres Div erstellen. Und in diesem Dip werden wir beim Erlebnispunkt Firma Punkt Dauer bei und die Beschreibung machen Also machen wir den Paragraph Tech mit Experience Dot Company. Natürlich, Firma. Jetzt können wir es kopieren und es für Dauer und Beschreibung tun . So wie das. Jetzt können wir die Seite überprüfen und Sie können auf unserer Seite sehen, wie es links und rechts ist. Wenn Sie jetzt auch den schwarzen Hintergrund für den Klassennamen hinzufügen , werden Sie sehen, wie genau das aussieht. können wir vorerst, oder wir können jetzt den Farbverlauf nach rechts von Grau 800 über Grau 900 bis Schwarz bearbeiten . Wir können uns also gut vorstellen, wie es aussehen wird. Schauen Sie sich jetzt die Seite an. Und jetzt spielst du mit den Polsterungen und nicht mal mit dem Rand, glaube ich. Lass uns gehen Außerdem werden wir dort die maximale Breite festlegen. Definitiv, also in unserem Div können wir genau dort die maximale Breite angeben. Versuchen wir es mit 600 Pixeln. Vielleicht 700. Lass uns die Seite überprüfen. 700. Lass es uns auch in vollen Zügen machen. Jetzt ist es besser. Jetzt kannst du vielleicht zu 500 zurückkehren, lass uns 500 machen. Oder sechs? Lass uns sechs machen. Jetzt werden wir dort auch einige abgerundete drei Excel hinzufügen. Mal sehen, wie es aussieht. Das ist in Ordnung. Etwas Schatten. Ein Überlauf ist in der Hülle versteckt, damit er außerhalb dieser Karte nicht überläuft, sagen wir mal Vielleicht etwas Polsterung. Das ist ein bisschen besser Jetzt müssen Sie auch die Farbe des Textes hinzufügen, aber ich werde sie nicht dort platzieren, sondern in jeder Zeile, weil ich in der Firma vielleicht Textweiß oder Text der Stufe 200 verwenden werde. Ich werde auf jeden Fall die Schrift Semibolt verwenden ich werde Text Large verwenden Okay. Nun, da unten, für Dauer und Beschreibung, versuchen wir es mit grauem Text, 400 mm hmm Und zur Beschreibung werden wir auch den Text Small hinzufügen. Das ist besser. Und ich denke, das kann für unseren Erfahrungsbereich sein. 9. Kontakt: Gehen wir zum Kontaktbereich über. Also dort auf Seiten, neue Datei, contact.j6. Jetzt werden wir dort bearbeiten. Zuerst werden wir ihre Symbole hinzufügen. Wir werden also dafür sorgen, dass der Import der KI fehlschlägt. LinkedIn. Auch KI scheitert an Git up, und KI scheitert auch an Instagram. Speichere es. Da wir Kontakt haben, können wir mit dem Haupt-DIF beginnen. Drinnen werden wir zuerst etwas Bettwäsche machen, 16 von oben, und das war's Und dann machen wir noch ein Div, und das wird unser Kontaktformular enthalten. Da machen wir also eine maximale Breite von eigentlich, wir jetzt sieben Excel, verwenden wir zum Beispiel einen Hintergrundverlauf, um wieder von Grau 800 über Grau, 900 nach Schwarz zu schreiben . Wenn wir nun etwas Inhalt hinzufügen, können wir ihn bereits auf unserer Seite sehen. Dort werden wir es wieder zentrieren. Wir werden es Excel abrunden. Und da werden wir zumindest ab mittlerem Bildschirm und höher sein, Höhe von 92 m oder höher. Jetzt können Sie sehen, dass es unseren Bereich gibt Von Spektrum zu Schwarz, Sie werden sehen können, wo sich der Abschnitt Innerhalb des zweiten Divs , das für das Formular mit diesem Hintergrund vorgesehen ist, werden wir beginnen, das Header-Div hinzuzufügen, das mit „ Lass uns verbinden und anfangen, an etwas zu arbeiten“ angezeigt wird Lass uns verbinden und anfangen, an etwas zu arbeiten Absatztext. Ich denke, wir können es jetzt bearbeiten. Also da werden wir zuerst die zweite Überschrift haben , also lasst uns eine Verbindung herstellen. Und im Folgenden werden wir einen Absatz mit tollen Dingen hinzufügen und anfangen, daran zu arbeiten. Lassen Sie uns dort nun etwas Styling hinzufügen. Also Rand unten, Schlagball, enges Tracking für den Stil Text grau, nehmen wir 200 für die Überschrift, Text drei Excel, vielleicht erhöhen wir es sogar. Lassen Sie uns also für einen mittleren Bildschirm Text Five Excel verwenden. Verwenden wir für den Absatz Text XL und Textgrau 400. Und ich denke, das war's vorerst. Für das Dif, das das aushält, verwenden wir ein maximales Gewicht von drei Excel Wir können sehen, wo das rng y ist. Also können wir Text zentrieren und mischen, so wie das Jetzt können wir den Text vielleicht sogar hier vergrößern. Fantastisch. Unter diesem Div. Fügen wir oben etwas Rand hinzu. Eigentlich da. Also, was ich tun würde, ist etwas hinzuzufügen. Und dann werden wir im Laufe dieses Tages noch einen machen, und dort werden wir die Informationen für die Kontaktaufnahme eingeben oder wir lassen den Benutzer die Informationen eingeben falls er uns kontaktieren möchte. Also machen wir einen ersten Klassennamen mit Flexbox-Layout und begründen es in der Mitte Also machen wir dort einen Dip mit Rasterlayout Auf dem mobilen Bildschirm belassen wir es bei Grid Cools eins auf einem Medium und höher Wir werden den Standardwert von Rasterspalten eins auf Rasterspalte zwei ändern Rasterspalten eins auf Rasterspalte zwei Im Inneren beginnen wir mit dem ersten und zweiten Div. Das erste Div befindet sich auf der linken Seite und enthält einige Kontaktinformationen. Und unten werden wir einen zweiten Dialog haben, und das wird das eigentliche Formular für das Kontaktformular zum Ausfüllen der E-Mail sein. So können wir direkt dort die ID und das Formular bearbeiten. Aber wir werden mit dem ersten Unterschied beginnen. Beim ersten Dif fügen wir Auto einen senkrechten Rand hinzu, etwas Auffüllung, um bis sechs zu schreiben Im Inneren werden wir eine ungeordnete Liste erstellen. Und dort werden wir einen ersten Listenpunkt als zweiten und auch einen dritten Listenpunkt erstellen. Jeder von ihnen wird das Symbol tragen, das wir dort haben. Also KI füllt LinkedIn. Dann füllt KI Git auf und KI scheitert Instagram. Und da machen wir mit dem Klassennamen weiter. Was wir eigentlich tun können, ist durchzuhalten und den Klassennamen mit einer gewissen Breite auf 70 zu setzen. Pixel acht für Audio und Text für Grau 300. Dann können wir es auch so stylen. Und in diesem Listenpunkt wird es auch ein Dif geben Und in diesem Unterschied werden wir eine dritte Überschrift mit „Wir können die Adresse eingeben“ haben mit „Wir können die Adresse eingeben Wir können dort Kontakt aufnehmen. Dann ein Absatz mit Handy und der Absatz mit E-Mail. Falls jemand das Formular nicht ausfüllen möchte und nur die E-Mail verwenden und uns direkt kontaktieren möchte . Dann fügen wir bei diesem Div einen gewissen Spielraum hinzu. Wir können auch schon da sitzen, aber nimm diesen Diff, schneide ihn ab und lege ihn unter diesen. Jetzt ist es besser. Jetzt werden wir mehr Zaubertricks machen. Also, da in der Senke, platzieren wir die Elemente so, dass sie sich in der Mitte der Liste befinden, und wir können sie tatsächlich alle nehmen. Wir werden eine Klasse von Flexbox-Layouts hinzufügen. Überschrift fügen wir nun Text hinzu, der zu groß, einer zu fett und Text zu Grau 200 Das ist genau das, was wir alle da haben. Aber statt 200 werden wir es bei 400 speichern und sehen, wie es aussieht. Nun, für Git up, wenn wir das Gleiche tun wie im vorherigen Listeneintrag, können wir diesen Absatz mit Überschrift oder Wal Dif kopieren . Setze es dort hin und statt Kontakt geben wir Arbeitszeiten an und wir können das von geben wir Arbeitszeiten an Montag bis Freitag, ich weiß nicht, von 15:00 Uhr bis 20:00 Uhr machen . Und am Wochenende können wir Chels machen, die auf WhatsApp verfügbar sind Bei Instagram können wir es zum Beispiel so belassen. Jetzt fügen wir das E-Mail-Formular hinzu. Also dort im Div für das Formular oder mit der ID eines Formulars. Diese vier sind ziemlich einfach, wir werden dort eine Klasse mit der maximalen Breite von sechs Excel hinzufügen , etwas Padding, und wir werden das Patting auf einem mittleren Bildschirm und höher erhöhen, etwa 12. Wir werden ein Formular hinzufügen In dieses Formular werden wir eine Aktion einfügen In diesem Abschnitt werden wir einen Endpunkt angeben, aber ich werde das tun denn nachdem wir diese Benutzeroberfläche für das Formular codiert haben, werde ich Ihnen zeigen, wie das mit der GTFormTio-Seite funktioniert Und wenn jemand dieses Formular ausfüllt und auf Senden klickt, erhalten Sie eine E-Mail in diesem Formular Punkt IO, sodass es Lassen Sie uns ihre Methode hinzufügen, posten. Und wir werden anfangen, ihre Eingabefelder hinzuzufügen. Lassen Sie uns also zuerst ein Div hinzufügen. Lassen Sie uns ihren Abstand zu den unteren sechs erhöhen. Darin werde ich eine Eingabe, eine weitere Eingabe und den Textbereich einfügen. Für die erste Eingabe wird es vom Typ Text sein. Auch mit ID, Name, dann auch mit Platzhalter für Ihren Namen Dann auch Klassenname mit. Speichern wir es tatsächlich, damit wir es sehen können , und fügen den Rand nach unten mit dem vollen Rand hinzu. Das ist eigentlich noch nicht breit zu voll. Abgerundetes Mittel. Jetzt Rand grau 400, etwas Bettwäsche Y auf zwei, Bettwäsche links auf zwei, Bettwäsche rechts auf vier, lass es uns überprüfen. Wir können die Breite tatsächlich bis zur vollen Breite hinzufügen . Aber ja, wir werden diese Zeile hinzufügen oder wir werden sie einfach kopieren und dort platzieren, weil diese Eingabe jetzt direkt daneben war. Jetzt, da sie die volle Breite einnimmt, wird sie unten sein. Dort fügen wir einfach einen anderen Platzhalter hinzu , der Ihre E-Mail-Adresse sein wird Sagen wir es also so mit ID, E-Mail und geben Sie auch E-Mail A, wir werden dort den Namen zwei angeben. Name und dort Name zwei E-Mail. So wie das hier. Im Textbereich werden wir bei ID sein. Oder beginnen wir mit dem, was wir bei ID tun werden. Das wird ein Textbereich sein, Name wird ein Textbereich sein. Spalten, also können wir standardmäßig 30 Zeilen festlegen. Wir können standardmäßig auf fünf setzen. Es wird also so aussehen. Und wir werden einen Platzhalter setzen, um Ihre Nachricht zu schreiben. Und jetzt können wir Klassennamen machen. Also verwenden wir die Breite, um den Rand bis zu dem Rand zu füllen , den wir nicht benötigen. Machen wir einen abgerundeten mittleren Rand, einen grauen Rand für 100 und zur besseren Lesbarkeit auch noch einen Rand selbst Machen wir es so, kopieren wir es und platzieren es auch dort. Nett. Jetzt werden wir nach der Rahmenfarbe auch etwas Polsterweiß einstellen Zwei, Polsterung links zwei, und ich glaube, das war's Schauen wir uns jetzt die Seite an. Das sieht gut aus. Wir müssen auch eine Schaltfläche hinzufügen, und vielleicht ist es okay, wenn wir die Zeilen auf vier setzen. Ordnung. Nun, unter diesem Div, aber immer noch im Formular, werden wir eine Schaltfläche mit der Aufschrift Nachricht senden hinzufügen, und diese Schaltfläche wird vom Typ Senden sein und diese Schaltfläche wird vom Typ Senden mit Klassenbreite zum Ausfüllen sein. Wir müssen einen Hintergrundverlauf verwenden, um von Grau 400 über Grau 600 bis Grau 800 zu schreiben . Und jetzt müssen wir die Farben ein wenig verschieben. Ich denke, oder lassen Sie es uns vielleicht etwas dunkler machen, 600, 800 bis 900. Vielleicht ist das zu viel. Was ist mit 700, 604-hundert? Lass uns vier machen. Ich denke, das ist besser. Also, wenn wir dort auch etwas BI zu drei hinzufügen, runden wir es auf Excel ab. Es sieht besser aus. Wir müssen auch Text zu weißem Text oder besser gesagt Text der Klasse 200 für Semi-Bolt und Text-Excel hinzufügen. Und wir können kein abgerundetes Excel machen. Wir müssen das abgerundete Medium beibehalten, wie wir es für unsere Eingaben tun. Also machen wir es so. Ich denke, das ist in Ordnung. Was wir jetzt noch tun können Im Grunde ist es das, und ich werde Ihnen jetzt zeigen , wie dieses Kontaktformular funktioniert. Und für welchen Endpunkt müssen Sie ihn dort ändern. Gehen wir zu dieser Seite, ap dotgtfm dot IO slash Login. Dann melden wir uns an, klicken dort auf Erstellen, geben dort einen Namen ein und geben dort die Zeitzone ein, kopieren diesen Endpunkt und platzieren ihn dort kopieren diesen Endpunkt und Natürlich ist dieser Endpunkt nicht gültig. Sie müssen dort Ihren eigenen Endpunkt angeben , den Sie auf dieser Seite haben. 10. Fußzeile: Jetzt öffnen wir einen Explorer. Dort in Pages erstellen wir eine neue Datei, footer.j6, und dort erstellen wir Fügen wir sie zu unserer Epi Ja six, Footer hinzu. Speichern Sie Für die Fußzeile werden wir zuerst Symbole hinzufügen, also importieren Sie FA Github, Square FA Instagram Dort im Haupt-Div hatten wir eine maximale Breite von 1.300 Pixeln, zentrieren Wir werden einen Hintergrundverlauf verwenden, um von Grau 800 über Grau 900 nach Schwarz zu schreiben 800 über Grau 900 nach Schwarz zu Jetzt haben wir es auch zentriert, sodass wir es auf drei Excel runden können. Lassen Sie uns dort tatsächlich einige Inhalte hinzufügen. Wir wollen nur abgerundete Ränder oben haben , also werden wir das verwenden. Dann werden wir auch ein Rasterlayout verwenden. Und wir werden die großartigen Spalten zwei tatsächlich auf dem Handy verwenden . Und auf mittleren Bildschirmen und höher verwenden wir die Rasterspalten bis vier. Wir werden also vier Spalten nebeneinander haben. Wir werden Objekte mittig platzieren, etwas Rosa und Text zu groß verwenden . Fangen wir an, die ungeordnete Liste hinzuzufügen. Also zuerst, ungeordnete Liste. Mit Paragraph Tech wird es ein Logo geben. Mit der Paragraph-Technik können wir dann unseren Namen oder eine Beschreibung haben. Ich bin ein Costach-Entwickler und Berater. Da können wir die Icons haben. Also lass uns sie in ein DIV packen, ein Github-Quadrat haben, ein Instagram haben und warum ich es in ein DIV einfüge Weil ich sie gerne nebeneinander haben möchte. Und dafür werde ich das Flexbox-Layout und die Flex Direction-Zeile verwenden Flexbox-Layout und die Flex Direction-Zeile Ich werde eine Lücke hinzufügen und für sie auch den Text auf Grau 400 setzen Auf diese Weise muss ich für die einzelnen Symbole kein zusätzliches Staling Und unten werde ich einen Absatz 2024 hinzufügen Geh mitmachen. Dort werde ich auch das Styling für Text Gray hinzufügen, 400. Für die dortige Beschreibung fügen wir nun Text grau hinzu, ebenfalls 400. Und für das Logo würden wir so etwas wie Textgrau 200 verwenden. Auch für diese ungeordnete Liste würde ich den Rand nach links verwenden Ich würde auch Space Y22 verwenden. Also haben wir den vertikalen Abstand zwischen all diesen Elementen auf zwei gesetzt. Und ich denke, das ist genug. Wir können jetzt zu anderen ungeordneten Listen wechseln, und jetzt machen wir nur eine und wir werden sie noch zweimal kopieren Am Ende haben wir also vier Spalten. Ungeordnete Liste. Drinnen machen wir ein Listenelement mit Allgemein. Und wieder machen wir das Leerzeichen Y. Es gibt noch einen weiteren Listenpunkt, den wir zu Hause mit Projekten machen können . Dann machen wir dafür Text grau, 400 und für den allgemeinen Font Bolt. Das Gleiche gilt für das Logo, also für die Schrift Bolt. So wie das hier. Nehmen wir nun diese ungeordnete Liste und kopieren sie zweimal Die Überschrift sollte etwas Farbe haben, und wir verwenden den Textgrad 200 Dort können wir live oder wir können Project Limo Project eins machen, und dann werden wir es für Projekt zwei und drei ändern Und der letzte kann Kontakt sein. Es kann wieder eine Telefon-E-Mail geben und wir können einfach einen Listeneintrag löschen. Wenn wir keinen weiteren Inhalt haben, können wir ihn in unsere Fußzeile einfügen Schauen wir uns jetzt an, wie es aussieht. Wenn wir nun unsere Seite überprüfen, können wir dort zum Anfang unserer Kontaktkomponente gehen und dort können wir an einem gewissen Rand nach oben gehen. Lass uns 44 machen, ein höherer Wert. Das sieht auf unserer Projektseite besser aus. Übrigens, diesen März bis 44 lassen Sie uns diesen März bis 44 nur für mittlere Bildschirme und höher machen , denn auf einer mobilen Version sollte das kein Problem sein. Gehen wir zu einem Portfolio dort, tatsächlich dort zu diesem Hauptbereich, wir werden es bei Marge in den unteren Bereich, ebenfalls 44, speichern. Das ist jetzt besser Und sonst ist es in Ordnung. So würde die Seite also ohne den Hintergrund aussehen , den wir jetzt hinzufügen werden. Aber machen Sie es ein bisschen interessanter, sagen wir, wir fügen auch den Grid-Hintergrund hinzu. Gehen wir also zum VS-Code. Dort gehen wir zu Index Dot CSS. Dort werden wir ein Bodytech eröffnen. Und innerhalb dieser Bodytech werden wir den Hintergrund hinzufügen. Und der Hintergrund sieht so aus. Ich habe ihn einfach kopiert, weil das ein Hintergrund ist, den man im Internet finden kann . Man nimmt ihn einfach und wir können ihn ein bisschen modifizieren. Wir können die Farbe etwas an unsere anpassen. Also lass uns so etwas benutzen. Aber vielleicht ist es zu viel. Wenn ich die Seite jetzt dort platzieren werde, können wir das auf 50% setzen. Ich habe auch diese 800 Pixel auf 500 Pixel geändert, und es wird so in der Mitte sein. Außerdem können wir jetzt die Seite überprüfen und sie wird so aussehen, auch mit diesem tollen Hintergrund. Wir werden dies jetzt auf eine Handygröße ändern und überprüfen, wie es dort aussieht. Was wir also tun können, ist diese CV-Taste ein wenig zu bewegen, dann ist da noch etwas p. Das ist in Ordnung. Hm. Dort müssen wir diesen Erlebnisbereich verbessern und auch etwas Abstand zum Kontakt und zur Fußzeile Also lass uns gehen und es machen. Fangen wir von unten an. Also stellen wir dort, ich glaube, es ist da, Rand von links, wir stellen vom mittleren Bildschirm oben, Rand nach unten auf acht, vielleicht. Ja, von Medium aus können wir es auch zurücksetzen, ich denke, wir können den Text auf klein setzen. Ab Medium wird der Text also wieder groß sein. Außerdem finde ich, dass es einige Bettwaren gibt , nur bei mittleren Bildschirmen und höher sein sollten. Eigentlich sollte es welche geben, aber auf jeden Fall kleiner. Also lass uns sechs nehmen. Im Grunde würde ich also ein weiteres Div erstellen, diese drei ungeordnete Liste, in das DIV für dieses Gericht einfügen, ich würde ein Grid-Layout mit Grid-Aufrufen von drei hinzufügen Und jetzt, wenn Sie die Seite vergrößern, sieht es natürlich schrecklich aus, aber wir können es reparieren Also zumindest auf dem mobilen Bildschirm sieht es besser aus. Wenn wir es jetzt tun oder tun, werden wir es jetzt von dort löschen, es wird so sein, was in Ordnung ist. Und wenn wir es erhöhen, wird es schrecklich aussehen. Aber wir können es beheben, indem wir diesen Rand nach links löschen . Und tatsächlich, ja. Ich werde Ihnen also zeigen, dass wir diesen Rand auch von unten auf dem mittleren Bildschirm und von oben löschen werden . Jetzt werden wir es speichern und überprüfen. Es wird so aussehen, was besser ist und auf einem mobilen Bildschirm wie diesem. Was wir auch tun werden, ist, dass wir am Rand die Spitze von 12 erreichen werden. Fantastisch. Jetzt hast du es wahrscheinlich nicht gesehen. Oh, das hast du. Dort habe ich dem Hauptunterschied in unserer Fußzeile einen Rand nach oben hinzugefügt dem Hauptunterschied in unserer Fußzeile einen Rand nach oben 11. Abschließende Updates: Jetzt werde ich nach oben scrollen. Also müssen wir dieses Problem korrigieren, und das kann einfach behoben werden , weil wir dort einfach Hyden machen können Und auf dem mittleren Bildschirm und höher machen wir den Display-Block Lass es uns jetzt versuchen. Da sind wir also auf einem Handy. Lass es uns erhöhen. Und auf dem Desktop haben wir es da. Also werden wir dort auch etwas Lochfraß hinzufügen. Also lasst uns zehn setzen. Und auf dem mittleren Bildschirm und höher setzen wir auf Null wie folgt. Das ist die Reaktionsfähigkeit. Okay, funktioniert. Also, was fehlt noch? Wir müssen zu einem Abschnitt dort in der Haupttiefe gehen. Lassen Sie uns also bei Medium und höher auf zwei setzen. Wir werden es auf zwei zurücksetzen. Und dort werden wir die Lücke löschen. Wir werden diese Lücke nur für mittlere Bildschirme und höher schließen. Und auf dem Handy werden wir Get 12 verwenden , das ist zu niedrig. Verwenden wir 16 oder 20, und es funktioniert. Jetzt können wir es auf vier tätscheln, und das ist besser. Was wir auch tun können, ist, dass wir ab mittlerem Bildschirm Text Excel verwenden. Andernfalls verwenden wir Textarge und jetzt können wir auch den oberen Rand um etwa 12 hinzufügen den oberen Rand um etwa 12 Vielleicht machen wir 16. Und wenn wir dort für die Schaltfläche, die dort ist, in den Heldenbereich gehen , können wir den linken Rand auf sechs erhöhen. Und ab dem mittleren Bildschirm setzen wir den Rand auf links zurück. Und das war's. Jetzt werden wir die Navigation ausprobieren. Wir können den Explorer dort im Abschnitt Über uns öffnen. Wir werden eine ID über das Kontaktformular, die ID, den Kontakt, die Erfahrung, die ID, die Erfahrung und die Fußzeile erstellen Nun, wir brauchen dort keinen Ausweis, Heldenbereich. Wir können ID Home und Portfolio machen, wir können ID-Portfolio machen. Jetzt können wir zu Navbar gehen. Dort können wir sehen, dass es funktioniert, aber was die Arbeit angeht, ist es das Portfolio, genauso Nun, die Navigationsleiste funktioniert, aber wir haben da natürlich ein Problem mit dem Z-Index. Gehen wir also zum Portfolio. Dann entfernen Sie den Z-Index von zehn. Speichern Sie es jetzt. Jetzt funktioniert es. Außerdem müssen wir zur Navigationsleiste gehen. Und da müssen wir für das Symbol Display Fixed, Top Zero, Right oder Top Five, Right Five, Index bis Zehn verwenden Top Zero, Right oder Top Five, Right Five . Entschuldigung, es ist fünf. Und wir können die Größe auch auf 40 erhöhen. Das ist besser. Also werden wir jetzt Kontakt aufnehmen. Und wir werden es so haben. Was wir wahrscheinlich auch tun werden, wir werden etwas Bettwäsche machen, wir werden Hintergrund weiß, abgerundet mittel, Bettwäsche vier oder vielleicht zwei machen . Und das ist besser. Jetzt werden wir es öffnen, wir werden zur Arbeit gehen oder Erfahrungen machen oder so, und wir werden es sehen und schließen können. Eine weitere Sache, die wir tun können, um unsere UX zu verbessern. Wir können die Konstante erstellen, die Navigation schließen, dort machen wir Set NaF to pulse Jetzt gehen wir dort zu unserer Menüführung und dort können wir hinzufügen, lassen Sie uns tatsächlich alles auswählen Halten Sie also gedrückt, dort klicken wir auf On click, und wir werden die Navigation schließen. Jetzt speichern wir es und wir werden testen, also gehen wir zum Erlebnis und jetzt zu Über, und es funktioniert einwandfrei. Und das war's endlich für die Pinnwand. Schauen wir uns an, wie es aussieht. 12. AmsterdamIntroAndSetup: Handeln Sie mit Rückenwind, da sie alle im heutigen Portfolio sind. Wir werden dafür sorgen, dass das Kontaktformular funktioniert, sodass wir E-Mails erhalten Und natürlich wird es ansprechbar sein. zunächst sicher, dass wir diese Intellisense-Erweiterung und auch diese ES 7 installiert Jetzt gehen wir zum Terminal. Dort wird das neue Terminal sein, und wir werden dort unseren ersten Befehl einfügen, und das wird dieser sein. Sie können sie in einer Beschreibung finden dort werden wir dies als Frontend-Namen verwenden. Wir werden React JavaScript auswählen. Jetzt gehen wir auf der Talentseite zu Erste Schritte, Framework Guides Wet und da haben wir das schon gemacht, also verwenden wir diesen ersten Befehl. Wir sind vielleicht nicht zu unserem Frontend-Projekt gegangen , das wir erstellt haben, also werden wir es auf CD veröffentlichen. Jetzt werden wir den Befehl ausführen. Jetzt werden wir den zweiten ausführen, der da ist. Jetzt sollten wir in die Tailwind-Konfigurationsdatei gehen und das dort einfügen Dann sollten wir die Tailwind-Direktiven einfügen. Gehen wir also zum Quellordner, Index D CSS, fügen dort die Direktiven ein, und um zu versuchen, dass unser Tail-End funktioniert und verbinden wir es, gehen wir zur Abdo J Six-Datei und fügen das Ding dort unser Tail-End funktioniert und verbinden wir es, gehen wir zur Abdo J Six-Datei ein. So brauchen wir kein Logo und keinen Tweet. Außerdem brauchen wir jetzt im Grunde nichts, auch nicht diese Konstante, speichern. Lassen Sie uns das ADCSS überprüfen. Wir können es löschen. Im EO-CSS werden wir dort bleiben und das MindGS Six auch Jetzt werden wir das tun, wir werden Death so NPM run def ausführen und dass wir den Server öffnen , auf dem unsere Seite sein wird Lassen Sie uns jetzt versuchen, dass das funktioniert. Also lass uns zum Beispiel das machen und ja, es funktioniert. Also haben wir Telewnd installiert. Und jetzt können wir in unserem Ordner beginnen. Zuerst werden wir dort einige Ordner erstellen. Zuerst werden wir also Komponenten , in denen wir die Abschnitte haben werden, die wir verwenden werden. Dann haben wir dort Assets , in die wir die Bilder einfügen werden, und das wird es vorerst sein. Wir können auch das neue Terminal installieren, und wir können auch das Frontend sehen, und dort können wir die React-Scroll- und auch die React-Icons-Bibliothek installieren React-Scroll- und auch die React-Icons-Bibliothek , die wir für das reibungslose Scrollen und auch für die Symbole auf unserer Seite verwenden werden das reibungslose Scrollen und auch für die Symbole auf unserer Seite Jetzt würde ich alle Komponenten, die wir erstellen werden, vorab erstellen und sie in unseren Edo S six einfügen, damit wir das fertig haben und dann die Komponenten codieren können . Fangen wir also an. Der erste wird tatsächlich Navbar sein. Jetzt, wo wir die Erweiterungen importiert oder installiert haben, können wir diesen AFC verwenden und speichern Dann werden wir auch den Abschnitt „Fähigkeiten “ verwenden . Außerdem den Abschnitt „ Über uns“ Abschnitt „Kontakt“. Dann Puter Und was noch? Sie haben also ungefähr Kontakt nach außen. Definitiv deine Abteilung, oder? Und wir werden dort auch einen Arbeitsbereich mit unserer Arbeit haben , die wir gemacht haben. Jetzt werden wir auf dieser sechsten ABG-Seite all diese Komponenten platzieren und dann werden wir sie einfach codieren und schon ist sie fertig Also fangen wir mit Navbar an. Es wird es importieren, dann werden wir mit dem Heldenbereich fortfahren Nach dem Heldenbereich werden wir wahrscheinlich mit der Arbeit weitermachen. Dann werden wir dort einige Fähigkeiten haben. Nach den Fähigkeiten wird es einen Abschnitt über die Fähigkeiten geben. Kontaktbereich, und am Ende wird es eine Fußzeile geben. Wir haben also die 24, 67 Komponenten. Okay, das sollte in Ordnung sein. Natürlich können wir es am Ende nachbestellen. Es wird in Ordnung sein. Ich habe es gerade vorbereitet, damit wir dann einfach programmieren können. Lass uns die erste Komponente codieren. Aber vorher sollten wir einige Ressourcen hinzufügen. Ich werde diese Assets bearbeiten , die du auf einem Git findest ich dir zur Verfügung stellen werde, und natürlich auch deine eigenen Bilder verwenden, aber wenn du mitprogrammieren und etwas verwenden willst , das ich verwendet habe, kannst du natürlich auch das verwenden, das ich dir geben werde. Ich werde Ihnen auch diese Index-Punkt-CSS-Datei geben , in der ich dieses Rasterlayout oder den Rasterhintergrund für meine Webseite verwende , auch diesen grotesken Schriftbereich und auch diese CSS-Klasse , die wir für die meisten unserer Komponenten verwenden werden , um diesen Effekt zu erzielen , der einen Schattenhintergrundfilter mit unscharfem Hintergrund hat, sodass der Klasseneffekt erzeugt wird. Dann wenden wir sie einfach wie andere Taunt-Klassen und bearbeiten sie auf unser Element oder unsere Komponente Und so wird der Grid-Hintergrund übrigens aussehen Und Sie können dort auch auf der linken Seite sehen, dass es all unsere Komponenten gibt, all unsere Komponenten gibt die wir in Epilod J six importiert haben, und wir erstellen sie gerne vorab Und jetzt fügen wir allen einen Code und einen Inhalt hinzu. Lassen Sie uns also gleich darauf eingehen. 13. 1navbarAMSTERDAM: Zunächst importieren wir dort auch use state, weil wir die State-Variable verwenden werden , die unsere Navigation von der Desktop-Version auf die mobile Version umstellt unsere Navigation von der Desktop-Version Dann importieren wir die Symbole für unsere Navigation. Also werden wir Outline Close und auch Outline Menu importieren . Dann importieren wir den Link aus dem Smooth Scroll oder aus der React Scroll Library. Also von React Scroll. Und jetzt können wir in unserer NAF-Leiste über dem Return beginnen und mit der Neudefinition der Zustandsvariablen beginnen, und mit der Neudefinition der Zustandsvariablen beginnen die eine Konstante und NAP mit der Funktion Set Nap sein wird Konstante und NAP mit der Funktion Set Nap Dort werden wir eine Funktion erstellen, die Mathe handle, und diese Funktion wird die Zustandsvariable NAF setzen Wann immer wir also auf das Element klicken , das eine Klick-Funktion mit diesem Handle NAF haben soll, wird der NAF-Wert von true auf false oder umgekehrt gesetzt Da wir nun diesen Status NAF haben, können wir unsere Navigation in unserem Haupt-Div fortsetzen Dort beginnen wir einfach mit einer ungeordneten Liste mit Listeneinträgen Und in diesen Listenelementen werden wir den Link haben Das haben wir gerade aus dieser Rax-Scroll-Bibliothek importiert. Es wird für den Smooth Scroll verwendet. Lass es uns dreimal kopieren, sagen wir, weil wir es für die Homepage, für zu Hause, auch für ungefähr haben werden . Dann für das Portfolio und auch für den Kontakt. Dann lassen Sie uns dort etwas Abstand nehmen. Danach werden wir dort auch das Symbol haben, das geändert wird, wenn es mobilen Bildschirm handelt oder wenn es sich um eine Disco-Version handelt. Also werden wir dort die Onclick-Funktion bearbeiten und hinzufügen Beim Klicken nennen wir das also Handle-Navigation. Und nachdem es aufgerufen wurde, wird es den Wert der Navigationsstatusvariablen ändern . Dort fügen wir den Turner-Operator Nap hinzu und dieser führt die erste Position oder die zweite Position basierend auf dem Wert der Variablen Die erste Position ist also die wahre Position, und falls sie wahr ist, wird sie ausgeführt. Falls sie wahr ist, wird das Symbol für die geschlossene Kontur angezeigt Wir importieren es dort. Und falls es falsch ist, was der Standardstatus ist, wird das andere Symbol angezeigt, nämlich dieses Gliederungsmenü. Wir werden dort eine gewisse Größe festlegen. Stellen wir 30 ein. Lass es uns dort schließen und die gleiche Größe einstellen. Außerdem werden wir dort ein gewisses Styling für dieses Symbol festlegen, aber lassen Sie uns später darauf eingehen. Da ich den Bildschirm ändern muss, können Sie dort zum mobilen Bildschirm wechseln, und ich möchte das jetzt nicht tun. Ich möchte jetzt nur den Text beenden und dann werde ich anfangen, die Klassen hinzuzufügen. Okay. Das Letzte, was wir dort brauchen, ist die mobile Navigation. Also werden wir das Div erstellen , das eine weitere ungeordnete Liste enthalten wird Und wieder wird das dieselbe Geschichte sein. Das werden die Listenelemente mit diesen Links sein. Wir werden in diesem Div einen anderen Turner-Operator verwenden , weil wir diese Navigation nur anzeigen wollen , wenn diese OnClick-Funktion ausgeführt Also nur, wenn dieses Menü auf dieses geschlossene Symbol geändert wird oder der Wert der Variablen von force auf true geändert wird Und da im Styling werden wir wieder den Turner-Operator verwenden Dort verwenden wir also die Variable Fragezeichen und definieren die erste Position und dann die zweite oder erzwungene Position Zunächst müssen wir diese ungeordnete Liste für den Desktop tatsächlich ausblenden Für das Menü und das Schließen legen wir das Styling fest. Auf dem mobilen Bildschirm wird es also blockiert. Und dann werden wir es auf einem mittleren Bildschirm und höher verstecken. Außerdem werden wir dort einige Farben platzieren. Textgrad 300 ist also in Ordnung. Dann werden wir es reparieren. Außerdem werden wir, sobald das behoben ist, die beiden korrigieren. Versuchen wir es mit zehn und auch mit den Top Ten, also ist es nicht so, so etwas ist in Ordnung. Und wir werden auch den Z-Index einstellen. Jetzt versuchen wir es, damit es sich ändert. Das ist in Ordnung. Der Turn-Operator funktioniert also. Und was wir jetzt machen werden, ist, dass wir dort für den zweiten Turn-Operator codieren, das Styling, und es wird tatsächlich die mobile Navigation angezeigt , wenn wir darauf klicken. Wenn das also falsch ist, werden wir es auf -100% nach links korrigieren Wir werden den Text grau 300 stylen. Aber lassen Sie uns das auf unserem Bildschirm tatsächlich wahr machen. Wenn ich also darauf klicke, wird es auf -100 links repariert. Und wenn ich erneut darauf klicke, erscheint es. Nun, das ist es im Grunde genommen für diese mobile Bildschirmnavigation, aber wir müssen sie natürlich so gestalten, dass sie zumindest irgendwie gut aussieht. Fangen wir mit dem Text Grau 300 an und fahren mit dem Z-Index 240 fort, fahren mit dem Z-Index 240 fort, damit wir ihn sehen können, auch wenn es einige andere Elemente mit anderen Z-Indizes auf der Seite gibt einige andere Elemente mit anderen Z-Indizes auf der Seite Dann werden wir ihn auf Null links und auch auf Null oben fixieren Null links und auch auf Null oben Lassen Sie uns die Breite auf die volle Breite setzen. Wir können jetzt versuchen, den Hintergrund weiß zu machen. Ja, natürlich, also nimmt es die volle Breite ein und ist auf links und oben Null fixiert. So wie wir es wollen. Lassen Sie uns jetzt tatsächlich einige Hintergrundinformationen festlegen. Normalerweise verwende ich für meine Navigation so etwas wie diese graue Farbe Dann werde ich mit Leichtigkeit und Raus weitermachen, sodass unsere Navigation reibungslos hineingleitet und auch etwas länger dauert, sodass sie nicht sofort erfolgt 500 ist in Ordnung. Lass es uns jetzt versuchen. Jetzt fügen wir unserer ungeordneten Liste ein Styling hinzu. Also ja, so sieht es nicht aus. Lass uns etwas Bettwäsche hineinlegen , lass uns die Textgröße erhöhen. Lassen Sie uns auch einen Rand nach links machen. Lassen Sie uns den Index auch dort einstellen. Und was wir sonst noch für diese Links tun werden, ist, dass Sie alle Haltestellen dort platzieren, Sie halten im Grunde die Alt-Taste gedrückt und dann klicken Sie auf all diese Zeilen, und dann können wir in all diese Zeilen gleichzeitig schreiben . Ich werde ihren Klassennamen verwenden, und ich setze die Pedding-Zahl 22, und das wird es tun Okay, wir müssen auch dafür sorgen, dass dieser Link funktioniert. Was wir tun müssen, ist, dass wir ein Ziel hinzufügen müssen , wohin uns dieser Link führen wird. Also werden wir zwei hinzufügen. Und die erste, da es eine Homepage ist, wird uns zu Hero führen. Damit das reibungslose Scrollen funktioniert, müssen wir außerdem einige Werte hinzufügen. Der erste ist Spion. Wir haben es auch auf wahr gesetzt. Der zweite wird glatt sein. Natürlich wollen wir, dass es wahr ist. Und dann werden wir die Offset-Werte festlegen, die 50 sind, und auch die Dauer, und ich werde wieder die 500 verwenden. Dann kann ich es einfach von dort kopieren und dort ablegen und dann einfach dieses Kontaktportfolio verwenden weil es die IDs sein werden, die ich auf meinen Seiten platzieren werde. Also kann ich es dann einfach wiederverwenden und diese reibungslos gewachsene Navigation wird funktionieren. Lassen Sie uns das auf eine andere Bildschirmgröße ändern . Lass es uns schließen. Ändern Sie es auf einen anderen Bildschirm, und hier gehen wir zur Desktop-Navigation. Also lass uns dort so etwas wie mittlerer Bildschirm und höher machen . Das wird wieder flex mit weißem Hintergrund angezeigt , damit ich es sehen kann. Okay, also lass uns da etwas mehr hinstellen oder du kannst es jetzt tatsächlich sehen , weil ich das Fenster in meinem OBS verschiebe. Also ja, wir können weitermachen. Ich habe dafür gesorgt, dass es mit diesem weißen Hintergrund da ist, und da werde ich einfach mit dem Styling weitermachen. Ich verwende also Display Flex auf einem mittleren Bildschirm und höher, sodass das Display ausgeblendet wird. Und jetzt können wir weitermachen. Wir können den Hintergrund also nur zu diesem Zweck dort belassen , damit wir sehen, wo sich unsere Navigationsleiste befindet. Wir können so etwas wie Orange 200 machen. Oder 100. Okay. Wir werden auch eine feste Höhe verwenden, damit es nicht so dünn ist. Lass uns etwas wie, ich weiß nicht, 96 Pixel verwenden . Diese feste Höhe verwenden wir das obere Diff , weil dort die Wandnavigationsleiste steht. Also stellen wir sie dort ein. Dort wird auch die Farbe eingestellt. Dadurch bleibt das Verborgene erhalten und auf Medium wird es zu Display-Flex. Wir können dort eine maximale Breite einstellen, verwenden wir 1.200 Pixel. Wir können den Display-Flex einstellen und den Abstand dazwischen festlegen. Wir werden also einen Abstand zwischen allen Elementen haben , die wir in unserer Nickerchenleiste haben werden. Also werde ich zwischen und auch in der Mitte der Elemente rechtfertigen, also werden wir es vertikal zentrieren. So sieht unsere Navigationsleiste aus. Okay, wir müssen auch ihr MMX-Auto verwenden. Wir werden auch ihr Logo oder unseren Namen hinzufügen, und das kann nur in irgendeiner H-one-Technologie sein, also verwende ich den Namen H One, John Doe, und auf der rechten Seite die Artikel Natürlich können wir in den Elementen auch justify verwenden, wir können eine Lücke setzen, zum Beispiel auf sechs, oder einen Excel-Text. Vielleicht ist das in Ordnung. Und für das Logo oder für den Namen setzen wir auch den Text Excel und wollen vielleicht beides. Und das ist in Ordnung. Jetzt machen wir das, was ich am Anfang erwähnt habe. Wir werden anfangen oder wir werden den Hintergrund für den Klasseneffekt ändern . Wir importieren es in Index-CSS und es wird so aussehen. Außerdem werden wir etwas Bettwäsche auf einer horizontalen Linie hinzufügen, also werde ich vielleicht acht hinzufügen. Natürlich muss ich auch den Text ändern. Verwenden wir also weißen Text oder noch besser, wenn Sie etwas Dunkleres verwenden. Also Text grau 200. Okay, 300 funktioniert wahrscheinlich am besten . Und ich werde es so lassen. Versuchen wir nun, das Fenster so zu ändern, und es funktioniert. Wir müssen dies auf den gleichen Stil ändern , den wir dort in der mobilen Navigation haben. Das heißt, wir ändern es in den Link mit dem glatten Scrollen wie diesem. Ja. Und jetzt können wir es wirklich, wir brauchen die Spannung übrigens vielleicht nicht einmal Wie es aussieht. Ja, diese Ausgaben sind nicht erforderlich. Also können wir diese, du weißt schon, Klassen aus der Linkliste löschen Klassen aus der Linkliste und wir können sie behalten. 14. 2heroAMSTERDAM: In diesem Abschnitt beginnen wir mit allen Importen. Wir werden die Bilder importieren. Dann werden wir auch die anderen Bilder importieren, zwei Notizbücher und ein Handy, wenn ich mich nicht irre, damit wir dort nachschauen können, Notizbuch links, Notizbuch in der Mitte und auch Handy rechts Diese Bilder haben den gleichen Namen, also werden wir dieses Bild einfach kopieren und einfügen . Außerdem müssen wir den Typ Animation importieren, also den Typ Animation aus der Animation vom Typ React importieren Ja, ich importiere die Bibliothek nicht, also lass uns das Terminal öffnen. npMirac tippe Animation, installiere sie und das sollte sie wieder funktionieren lassen. Ja, es Jetzt können wir mit der Codierung des Heldenbereichs fortfahren, da wir alles importiert haben. Dort werden wir also den Abschnitt oder das Haupt-Div öffnen und wieder mit den Elementen beginnen. Also wollen wir die drei Bilder, die hinter dem ganzen Text in unserer Helden-Sektion stehen werden . Das wird also einen Klassennamen haben, auch eine Quelle und auch eine Anode Wir werden es dreimal wollen. Dann fragen wir uns, ob das die erste Überschrift mit unserem Reaktionsanimationstext enthält oder ja, Animationstext eingeben, wo geschrieben wird , was wir tun und so weiter. Und darunter wird es einen Absatz geben. Darin steht unser Name und darunter dieser Div. Wir werden ein Profilbild haben. Es wird nicht wirklich unter diesem Div liegen. Es wird sich daneben befinden, aber es wird am Ende dieses Abschnitts sein. Also fügen wir dort einfach ein Div hinzu. Und drinnen werden wir wieder ein Bild wie dort platzieren. Natürlich haben wir die Fehler, aber wir werden sie schnell beheben. Also die ersten Bilder werden das Notizbuch links sein, dann wird es das Notizbuch in der Mitte sein und dann wird es das Handy sein. Dann haben wir das Profilbild und es funktioniert jetzt. Wir haben die Bilder und können weitermachen. Lassen Sie uns zunächst die Animation vom Typ React betrachten. In der H-one-Technologie werden wir also eine Spanne hinzufügen. Und innerhalb des Span-Textes wird es einen Absatz geben, der Techniker bin, und es wird den anderen Text geben. Jetzt ein Umbruchtext, und darunter befindet sich der Typ Animation. Dieser Animationstyp erfordert einige Felder, die wir ausfüllen müssen. Die erste wird die Sequenz sein. Und das wird sagen, was wir mit dieser Animation schreiben wollen. Zuerst möchten wir, dass Sie Frontend, Entwickler für 1.000, zweitens, Webdesigner für die Dauer von 1.000 und drittens wieder einen Berater für die Dauer von 1.000 schreiben Entwickler für 1.000, zweitens, Webdesigner für die Dauer von 1.000 und drittens wieder . Wir werden das in Spen-Steuer umrechnen und wir werden dort auch eine Geschwindigkeit festlegen, die auf 50 gesetzt wird, und wir werden das auf unendlich wiederholen. Das heißt, es wird sich in einer Endlosschleife befinden. Wir müssen vielleicht auch zuerst die Bilder stylen , weil wir dann tatsächlich unsere Navigation sehen und damit spielen können. Jetzt können wir es nicht sehen , weil es tatsächlich so klein ist, dass man es auf dem Bildschirm noch nicht sehen kann. Gehen wir und fügen dem H etwas Styling hinzu. Da werden wir also weißen Text verwenden. Damit du sehen kannst, dass es da ist. Also, da ist Text für L, und wir machen es responsiv. Auf einem kleineren Bildschirm und höher erhöhen wir den Wert auf einem großen Bildschirm, sogar noch größer. Wir verwenden also den Text Eight XL und zusätzlich die Schrift Extra Bolt. Wir werden dort für diesen Dip auch den Klassennamen des Glases verwenden , also ist es so verpackt. Horizontale Polsterung. Lassen Sie uns die horizontale Polsterung auf fünf setzen, damit wir es etwas mehr haben, nicht an den Ecken Kommen wir nun zu den Bildern weil wir sie wirklich auf die absolute Position bringen müssen , damit wir die Helden-Sektion besser hervorheben können Dort setzen wir für jedes Bild die Position auf absolut Wir werden den unteren Z-Index setzen. Wir werden dort auch eine gewisse Breite einstellen. Also lass uns 400 Pixel verwenden. Wir werden unten auf Null setzen und wir werden eine Position auf der linken Seite setzen. Für diesen werde ich -170 Pixel verwenden. Und damit das funktioniert, müssen wir auch die Position relativ zur Hauptsenkung festlegen. Dort positionieren wir uns relativ wie folgt. Jetzt können wir all diese Klassen mit absoluten Positionen nehmen und sie jedem Bild zuordnen. Okay. Und wir gehen auch zu diesem Bild und stellen dort gewisse Breite ein, damit wir Awesome sehen können. Dort ändern wir die Positionierung, sodass wir sie bei -170 Pixeln belassen können -170 Pixeln belassen Beim zweiten können wir etwas anderes ausprobieren. Also lass uns das machen, ich weiß nicht, 320 Pixel. Ja, es wird irgendwo weiter in der Mitte sein. Und für den dritten verwenden wir 450 Pixel, weil wir wollen, dass er mehr auf der rechten Seite ist. Okay, lassen Sie uns auch die Breite auf 200 Pixel reduzieren . Es ist also ein bisschen kleiner. Und jetzt, um damit zu arbeiten, fangen wir auch an, etwas Styling für das Haupt-Div hinzuzufügen. Also werden wir ihr Rasterlayout verwenden. Und auf einem mobilen Bildschirm wird es die Standardeinstellung Grid Coms One geben, aber auf einem kleineren Bildschirm und höher werden wir Grid Comms Three verwenden Also werden wir die drei Spalten erstellen . Und wir wollen diesen Text, Sie können dort diese Art von Animation sehen auch den Absatz , den wir füllen Mein Name ist John Doe, und ich habe mehr als fünf Jahre Erfahrung und Entwicklung. Für diesen Volumentext in diesem Div setzen wir die Spaltenspanne auf zwei. Das bedeutet, dass zwei von drei Spalten benötigt werden. Auch etwas horizontale Polsterung und zentrieren Sie es mit Oh, wir haben es schon da und zentrieren Sie es vertikal so Und wir werden weitermachen, also werden wir dort eine Lücke setzen , wir werden dort auch eine maximale Breite einstellen Lassen Sie uns also wieder 1.200 Pixel verwenden. Bei mittleren Bildschirmen und höher stellen wir die Höhe des Viewports Also lass uns 70 verwenden. Lassen Sie uns es jetzt wieder zentrieren. Es fängt endlich an, in Form zu kommen , was großartig ist. Außerdem werden wir dort einige vertikale Polsterungen anbringen. Versuchen wir es mit acht. Okay. Das Handybild, wir müssen auch die untere Position ändern. Also lass uns dort etwa 500 Pixel verwenden. Es sieht besser aus. Es befindet sich also hinter unserer Navigation und wir können einen Teil des Handys sehen. Ja, du kannst mit diesen Werten für unten links spielen, und vielleicht sogar mit Wid, hängt davon ab, welche Bilder du auf deine Seite stellst und sie nach deinen Wünschen gestaltest Wenn Sie möchten, dass der Bildschirm auf dem Mobilgerät an einem anderen Ort angezeigt wird, können Sie es natürlich einem anderen Ort angezeigt wird, einfach von Medium ändern, sodass es dort angezeigt wird, und auf dem Basisbildschirm des Mobiltelefons, dass es irgendwo an der anderen Position angezeigt wird , ungefähr so Wenn Sie es dann ändern, können Sie sehen, wie sich die Unterseite des Mobiltelefons dort verändert. Lass uns tatsächlich weitermachen. Wir können das rückgängig machen, weil ich es vorerst nicht verwenden werde. Für das Bild dort werden wir dasselbe tun Wir werden es absolut machen. Wir werden es auf Null setzen, also wird es da sein, aber wir werden es auch auf Null setzen. Es wird also in der rechten unteren Ecke sein. Dann können wir auch die Breite von dort löschen. Weil wir es im obigen Div einstellen und dort die Breite für den großen Bildschirm und darüber auf 750 Pixel einstellen werden . Immer noch zu groß. Verkleinern wir es um 500 Pixel. Und jetzt werden wir damit spielen, aber 600 Pixel funktionieren. Und auf dem mobilen Bildschirm werden wir das auf 200 Pixel einstellen. Vielleicht 300. Okay, das ist zu viel. Lassen Sie uns mit der Gestaltung dieses Absatztextes fortfahren. Wir können ihn nicht einmal sehen, also werden wir ihn mit weißem Text formatieren. Jetzt können wir zumindest sehen, dass etwas unten ist. Wir werden mit etwas Abstand in der Vertikalen weitermachen. Okay, wir werden diesen Text auf jeden Fall erhöhen, aber wir werden vorsichtig damit umgehen. Wir werden mit Text klein beginnen oder vielleicht sogar okay, wir werden es so lassen, aber von einem kleineren Bildschirm aus werden wir mit TextLarge weitermachen und auf einem größeren Bildschirm können wir sogar etwas wie Text-Excel ausprobieren Wir werden den Mx mit verwenden. Hundert Pixel. Mm. Okay, und zumindest auf einem größeren oder mittleren Bildschirm stellen wir die Mix-Breite auf, ich weiß nicht, 600 Pixel ein. Wie es aussieht. Es sieht ein bisschen besser aus. Aber was ich auch tun würde , ist , dass ich den Mix automatisch einstellen würde. Nein, es sieht nicht gut aus, also hat der Rand vier übrig gelassen. Okay. Dann würde ich Text Gray machen. Okay. Natürlich werden wir das auch löschen. Also werden wir Text Gray 300 verwenden. Wir werden diese Schrift vergrößern und darüber hinaus müssen wir diese ein wenig ändern. Zuerst werden wir uns den Überblick über diese Break-Tech verschaffen. Dann werden wir dazu sagen, dass wir eigentlich nicht einmal dort Geld ausgeben müssen Richtig. Dort werden wir einen Klassennamen hinzufügen. Wir werden etwas Marsch nach unten hinzufügen. Schreiben wir so etwas wie vier. Wir werden den Text Grau 200 hinzufügen. Nun ja, 400. Vielleicht sogar 500. Vielleicht sind sogar 500 nicht so schlecht. Und höchstwahrscheinlich werden wir es so belassen. Also haben wir ihre IMA, dann den Typ Navigation, und da gibt es eine kleine Beschreibung, und das gilt vorerst für den Heldenbereich. Gehen wir also zu einem anderen Abschnitt über, und vielleicht werden wir am Ende einige letzte Updates vornehmen. Hängt vom endgültigen Design ab, wie alles aussehen wird. 15. 3aboutAMSTERDAM: Wir werden mit einem Abschnitt fortfahren. Also lass uns dorthin gehen, offen darüber reden. Wir werden dort einige Importe machen. Tatsächlich werden wir ähnliche Importe durchführen, wie wir sie dort haben. Machen wir also zwei Bilder, gehen wir zu ungefähr und platzieren sie dort. Wir werden wieder ein mittleres Notebook und wieder ein mobiles Gerät haben wollen. Damit wir die gleichen Dinge behalten können. Entferne einfach diesen. Was wir dort tun werden, ist, das Rasterlayout zu erstellen und dort vier Container zu platzieren. Und für diese Container wird in jeder Reihe ein anderes Colspan Also werden wir, ich weiß nicht, drei Kohlewannen haben und der eine Container wird zwei aufnehmen und Und unter ihnen nimmt die eine einen Colspan und die Du wirst in einer Weile sehen, wie es aussieht, lass es uns einfach programmieren und sehen Lassen Sie uns zuerst die Container erstellen, also öffnen wir das Div, kopieren es noch dreimal, machen dort einige Abstände, damit wir die Lesbarkeit für unseren Zweck verbessern , natürlich Andernfalls sollten wir dort keine Leerzeichen machen. Wir werden sie später am Ende löschen. Und dort werden wir den Text auf Weiß setzen, damit wir ihn sehen können. Auch hier ein gewisser Abstand dazwischen, mischen Sie die Breite auf 1.200 Pixel Dann werden wir das zentrieren , da wir in unserer Berichtshöhe eine andere Breite haben weil es mehr als 1.200 Pixel gibt In diesem Fall zentrieren wir es also mit Mix Auto Dann machen wir einen Rand oder einen vertikalen Rand. Wir setzen das auf 12. Dann stellen wir dort das Rasterlayout ein, und auf dem mobilen Bildschirm Standardwert eine Spalte und auf einem kleineren Bildschirm und darüber können wir für dieses Raster drei Spalten festlegen. Ja, wir werden anfangen, einige Inhalte zu bearbeiten. Also werden wir tatsächlich auch etwas auf der Seite sehen , aber noch nicht. Lass uns zuerst die Dips machen. Der erste nimmt die Spaltenspanne ein. Zwei. Es wird also zwei Spalten benötigen, und es wird den Klasseneffekt verwenden und auch auf kleineren Bildschirmen und höher wird es etwas pedalieren. Also setzen wir dort eine Peddierung von 16 auf einem kleineren Bildschirm und höher Jetzt können wir dort den Container sehen. Lass uns den zweiten machen. Auf einem kleineren Bildschirm und höher benötigt dieser also einen Colspan Außerdem wird es einen Glaseffekt haben. Dann lass uns zum dritten gehen , der von links beginnt. Also wieder das Gleiche wie beim zweiten, kleinerer Bildschirm und höher, ein Colspan, Glaseffekt, dann der vierte auf kleinem Bildschirm und höher, wir haben einen Spaltenabstand von zwei Und es wird im Grunde dasselbe sein wie das erste, also können wir es kopieren Und jetzt wirst du sehen, wie das Layout aussehen wird. Wir haben also den linken und den rechten Container, und dieser nimmt zwei von drei Kommunikationsbereichen auf und das Ganze rundum in einer untersten Reihe Und wir werden etwas mehr tippen müssen und das wird nur für den mobilen Bildschirm sein , weil wir auch einige dieser Raster auf einem mobilen Bildschirm verstecken werden Dieses wird es nur für Mobiltelefone geben, also werden wir es vorerst verstecken und wir werden später darauf zurückkommen Bei der ersten können wir weitermachen. Also werden wir es vertikal zentrieren. Dann werden wir es auch zentrieren. Nein, wir brauchen keine horizontale Zentrierung. Wir werden den Text einfach nach links legen und das war's. Darin werden wir ein weiteres Div erstellen , das unser H zwei aufnehmen wird, und es wird auch den Absatz enthalten , in dem dieses Div maximal sein wird. Also werde ich dir zeigen, warum wir eine maximale Breite benötigen. Zuerst können wir etwas Text schreiben und ich kann Ihre Website optimieren. Und der Absatz wird vorerst Epsom sein, und du kannst sehen, was auf der Seite passiert, sie ist linksbündig ausgerichtet und wir wollen das nicht Also, was wir tun werden und wir können es nicht auch zentrieren , weil ja, es nimmt die Flüssigkeit auf Also werden wir dort eine maximale Breite von 60% festlegen , und wir werden es so haben. Jetzt können wir auch das Styling für die zweite Überschrift vornehmen. Das heißt, wir machen den Text drei Excel, Schrift, Bolzen, Rand nach unten, und das wäre alles. Für die Absatztechnik machen wir den Textstrahl, ich weiß nicht, 200. Wir können jetzt zu einem anderen Div übergehen, das dieses sein wird, und es wird ein Bild geben. Dieses Bild wird eine Quelle für das Notizbuch haben. Wir werden die Breite auf einem kleinen Bildschirm auf 200 Pixel einstellen, und auf einem mittleren Bildschirm und höher werden wir dort eine Breite von 500 Pixeln einstellen. Wir müssen dort natürlich auch die Höhe einstellen. Aber vielleicht können wir es so lassen, wie es ist. Vielleicht können wir dort die absolute Position setzen . Ja, das wäre besser. Außerdem musst du dort Overflow verstecken, weil unsere Karte knapp wird Natürlich, nimm es dort und es wird so aussehen. Okay, dann können wir zu einem anderen Diff übergehen , der wieder ein Bild enthält, also können wir es einfach kopieren. Nehmen wir es und legen es da hin. Mobilbild, auch hier kopieren wir diesen Überlauf versteckt und platzieren ihn dort Es wird so sein. Dann lassen wir es für den Versteckten vorerst stehen. Und für den letzten , was wir tun können, können wir einfach das kopieren, was wir dort haben , und es an seiner Position einfügen. Und das wird es sein. Jetzt können wir einfach mit einem Text spielen. Vielleicht können wir auch Mm hmm machen. 80% Ja, ich glaube, ich werde 60 bis 80% ändern. Und dann können wir auch Text wie diesen hinzufügen. Da wird es genauso sein Fantastisch. Als ob zwei Textzeilen in Ordnung sind. Ich denke, das wird für den Arbeitsbereich sein. Ja. Und das bringt uns zum nächsten Div. Wir werden diese beiden Bilder auf einem mobilen Bildschirm verstecken , weil es nicht gut aussieht und wir es auf einem mobilen Bildschirm auf keinen Fall gut aussehen lassen können. Es ist hauptsächlich für die Desktop-Version. Also werden wir es verstecken, und wir werden es auf dem mittleren Bildschirm und über dem Displayblock machen . Kopiere dorthin und führe die gleiche Füllung für dieses zweite Div durch, damit es so aussieht. Und jetzt können wir dieses Div codieren , das nur für mobile Zwecke bestimmt ist, und es wird im Grunde diese beiden Bilder verbinden. Also nehmen wir das hin und da Dort stellen wir es auf den mittleren Bildschirm und oben auf das versteckte Display. Außerdem fügen Sie die relative Position für die absolute Position hinzu , die wir dort hinzufügen werden. Überlauf ist ausgeblendet, damit er nicht aus unserer Karte herauskommt . Außerdem haben wir eine feste Höhe für die Karte festgelegt , die 200 Pixel beträgt, und du wendest auch den Klasseneffekt an, den wir haben. Und es wird so aussehen Jetzt werden wir ein bisschen Bilder abspielen. Also zuerst diesen, wir werden einfach dort hinstellen. Wir brauchen kein mittleres Display , weil es auf dem mittleren Bildschirm und höher versteckt ist. Zuerst ist das Gewicht auf 400 Pixel eingestellt, und dann haben wir die 200 Pixel. Wir müssen dort eigentlich Null schreiben. Und wenn wir diese Seite erweitern, schauen wir mal, was passiert. Ja, es wird versteckt werden und es wird die Elemente geben, die wir schon einmal dort hatten. Aber für den mobilen Bildschirm werden wir einen Bereich erstellen, in dem sich tatsächlich beide Bilder auf einer Karte befinden. Was ich tun würde, ist, dass ich dort etwas Bettwäsche hinzufügen würde und bei mittlerer Bildschirmgröße und höher würde ich es zurücksetzen. Dann würde ich es nehmen, es auch auf den ersten Unterschied anwenden und es speichern. Und mal sehen, jetzt sieht es besser aus. Und wenn wir es erweitern , machen wir einfach Patting Four für beide Bildschirme Und ich denke, es ist in Ordnung. Ein mobiler Bildschirm wie dieser und ein mittlerer Bildschirm und höher sind so. Wir haben diesen Abschnitt, und jetzt können wir zu einem anderen wechseln, und das wird der Abschnitt mit unserer Arbeit oder unserem Portfolio mit unserem Projekt sein. 16. 4portfolioAMSTERDAM: Ich gehe zur Arbeit, Komponente. Dort müssen wir alle Bilder importieren. Also wieder können wir von dort aus ein Bild aus Assets Project One Dot PNG importieren . Ich hoffe, ich habe recht. Ja. Und dann werden wir es kopieren. Es ist also Projekt zwei, drei, vier, fünf und sechs. Fantastisch. Wir werden nun eine Konstante mit Informationen aus diesem Projekt erstellen und diese Konstante dann in htmoText abbilden, sodass wir unseren Code nicht mehrmals wiederholen müssen und alles an einem Ort haben Lassen Sie uns also unser konstantes Projekt platzieren . Dann werde ich das dort öffnen Ich werde dort einen Ausweis angeben. Das wird einer sein. Das Bild wird Projekt eins sein. Der Titel wird Projekt eins sein und die Live-URL wird dort sein, oder wir werden sie später dort platzieren. Ich meine, ich werde es nicht dort platzieren, aber wenn Sie welche haben, können Sie sie dort ablegen. Okay, jetzt werden wir das noch fünf Mal kopieren. Jetzt ändere die Zahlen. Projekt 23, vier, fünf, sechs, zwei, drei, vier, fünf, sechs. Jetzt haben wir die Konstante, sodass wir zu unserem Haupt-Div gehen können. Und dort werden wir es zuerst noch weiter aufteilen. Es wird also einen ersten Abschnitt geben, der sich mit der ersten Überschrift, meiner Arbeit, befassen wird . Und dann wird es das Projekt-Mapping geben und darin werden wir ein weiteres Div haben. Also werden wir die Klammern öffnen und dort sagen, dass Projekte das MAP-Projekt Und da fangen wir an zu tauchen. Und in dieses Div werden wir ein Bild und ein weiteres Div einfügen. Und in diesem Div werden wir einen Spentag haben , der den Projekttitel tragen wird Nach diesem San-Tech werden wir ein weiteres Div haben, das tatsächlich die URL für die Live-Demo enthalten wird die URL für die Live-Demo enthalten In diesem Div muss also ein Anker-Tag enthalten sein, und dieses Anker-Tag leitet die Person zu einer Live-Demo des Projekts weiter. Diese HRF wäre also die Live-URL des Projekts Dot. Und es wird natürlich so etwas wie f geben. Das Haupt-Div wird wieder eine maximale Breite von 1.200 Pixeln haben Wir werden es auch zentrieren. Ich werde zwei Grid-Münzen verwenden. Wir werden eine Lücke von vier zwischen allen Gegenständen haben. Wir werden die CSS-Klasse Glass verwenden , die wir in Index Dot CSS definiert haben, und Sie werden auch sagen, dass es etwas Streicheln gibt Jetzt haben wir es da, also können wir anfangen. Und für den ersten Tag werden wir auch zuerst den Text definieren. Dort werden wir also Spalte zwei einfügen, und ich werde dir erklären , warum, denn wenn wir es nicht in die zweite Spalte schreiben würden, bräuchtest du, dass du es dort sehen kannst. Sie können sehen, da ist die MW-Sache. Und wenn wir es nicht in Spalte zwei platzieren würden, würde es neben allen anderen Karten stehen. Also müssen wir es dort ablegen. Jetzt müssen wir meine Arbeit mit H eins markieren, also gut bei Text vier l, etwas Rand nach unten und auch bei Textstufe 300. Fantastisch Und jetzt können wir zu den Karten selbst gehen. Nun, die Karten, zuerst das Div, das hält, die Karten werden einen Schlüssel haben. Und dieser Schlüssel wird die Projekt-ID sein. Dann fügen wir einen Klassennamen hinzu und es wird eine Klasse für alles sein. Dann werden wir diese Transformation und den Transformationsübergang verwenden. Weil wir diese Her-Skala Eins bis Fünf verwenden wollen, und das heißt, wenn wir den Mauszeiger über die Karte mit dem Projekt bewegen, wird sie im Inneren vergrößert Es wird also einen schönen Effekt wenn wir mit der Maus über das Jetzt müssen wir auch die Dauer festlegen für die die Größe erhöht werden soll Dann müssen wir Overflow Hidden setzen, damit unserer Karte nichts ausgeht Dann etwas Schatten für die Karte. Und lass es uns versuchen. Jetzt können Sie sehen, wie der Effekt funktioniert. Es nimmt also auf diese Weise zu. Was wir jetzt hinzufügen werden, ist, dass wir für ein Bild eine Quelle angeben müssen. Die Quelle des Bildes wird also Project Dot Image sein. Fantastisch. Wir werden einige Klassen definieren. Also mit voller Höhe und zu verdeckendem Objekt. Großartig. Dort fahren wir nach dem Abschatten und legen dort eine feste Höhe fest , die etwa 200 Pixel betragen kann Und dieses Div, das den Spenteg und die andere Dif-Technologie enthält, wird einen Effekt haben, wo wir es zeigen werden und es wird der Also müssen wir etwas Opazität hinzufügen und so weiter. Fangen wir an und lassen die Gruppe schweben und fügen dort eine Deckkraft Mal sehen, was jetzt passiert. Ja, wir müssen auch die Gruppe hinzufügen. Und neben der Gruppe auch relativ, weil diese Anzeige mit der Lebenstaste absolut ist, also müssen wir das machen. Dann können wir zur Steifheit zurückkehren und endlich können wir die Deckkraft zuerst auf Null setzen Ich werde etwas Hintergrund hinzufügen. Lassen Sie uns noch einmal diese Zahlen verwenden, die ich meistens verwende. Lassen Sie mich auch das Absolute einstellen. Ich denke, wir müssen dort noch mehr Werte festlegen , um es zu sehen. Wir müssen also neben der Gegenposition stehen und dann werden wir die Gruppe darüber bewegen, wodurch das Gegenteil auf 90 erhöht Das ist der Hintergrund, den wir jetzt verwenden werden , die Position absolut , also relativ dazu. Das ist auch in Ordnung. Wir machen den Übergang zur Opazität. Und die Dauer 300, also nicht sofort. Danach müssen wir auch den Inset einstellen. Und jetzt können Sie sehen, dass es funktioniert. Der Nullpunkt passt die Positionierung des Elements an Okay, wir können jetzt mit dem Styling dieser Spen-Technologie und der zweiten oder der Inneneinrichtung weitermachen dem Styling dieser Spen-Technologie und der zweiten oder der Inneneinrichtung Das haben wir gerade eingestellt. Für das Spen-Tag setzen wir dort einfach den Text in Excel, ebenfalls vom Bolzen. Wie es aussieht. müssen wir auch den Text auf Weiß setzen, damit wir ihn überhaupt sehen können. Sieht besser aus. Und ich denke, das wird für die Spen-Technologie gelten, da müssen wir die Flex-Position festlegen. also nach dem Einblick Lassen Sie uns also nach dem Einblick Flex machen und das Center Item Center in der Mitte begründen, so wie es jetzt aussieht, besser. Das bringt uns zum Styling des Anchor-Tags selbst. Das Div, das es enthalten wird, wird also kein Styling haben. Und das Anchor-Tag selbst, schreiben wir auch auf Weiß, damit wir es überhaupt sehen können. Großartig. Da müssen wir vielleicht besser kühlen. Jetzt wollen wir einen Summenknopf draus machen . Also lass uns einfach so etwas wie Hintergrundweiß machen. Fünf setzen, auf zwei setzen, Margin Top zwei. Lassen Sie uns die Marge eigentlich unten angeben. Lass uns vier machen. Lassen Sie uns abgerundetes Excel machen. Und lassen Sie uns auch Font Bolt machen. Das wird es also für den Arbeitsbereich sein. Und jetzt können wir zur Kontaktseite übergehen, und dann werden wir mit der Fußzeile fertig sein Und wir haben auch den Bereich Fähigkeiten, aber ich glaube nicht, dass ich ihn am Ende verwenden werde Ich wollte ein Styling-Element erstellen, aber am Ende können wir es wahrscheinlich einfach löschen. Wir können auch zu Abdo J 6 gehen, es von dort löschen, von dort, und das ist 17. 5contactAMSTERDAM: Lassen Sie uns mit dem Kontakt und einer Fußzeile abschließen. Als Nächstes müssen wir auch die Symbole aus der Bibliothek React Icons AI importieren Symbole aus der Bibliothek React Icons AI Dort werden wir im Herbst LinkedIn importieren. Außerdem werden wir Fil, Git up und auch Instagram importieren. Als Nächstes werden wir in diesem Haupt-Div ein weiteres Div erstellen, das Überschrift zwei und dann einen Absatz enthält, dann wird es ein weiteres Div geben, das das E-Mail-Formular enthält. Und es wird auch auf zwei Seiten aufgeteilt sein , auf der linken und rechten Seite. Auf der linken Seite werden die Symbole angezeigt, die wir gerade importiert haben. Und auf der rechten Seite wird es das eigentliche Formular enthalten. In diesem Diff auf der rechten Seite werden wir also auch das H zwei haben, das etwas wie „Bereit zum Anfangen“ aussagt , vielleicht mit und G. Und darunter wird es ein aktuelles Formular geben. In diesem Formular werden wir zwei Dips haben. Der erste da, der zweite da. In diesem Tauchgang werden wir den ersten Input haben. Dann haben wir eine zweite Eingabe und dann eine dritte Eingabe, aber es wird nicht nur ein Textbereich sein. Und dann werden wir im nächsten Div eine Bottom-Send-Nachricht haben. Natürlich wird es für alles Klassen geben, aber ich wollte nur einen Plan machen , wie das aussehen wird, und da werden die Icons sein Aber die Icons, wir werden sie in Anchor Tech einpacken. Sie werden uns zu den Seiten weiterleiten , die wir dort einrichten werden, also Linkedin und so weiter Also werden wir etwas HRF haben. Außerdem wird es im Inneren ein Symbol geben, sodass die KI mit eingebunden Wir werden dem Symbol etwas Styling hinzufügen, und das wird noch zweimal hier und da passieren. KI scheitert bei Git up und KI scheitert auch bei Instagram. Füllen wir nun die Klassennamen aus, sodass wir dort eine feste Breite von 100 Pixeln festlegen. Und lassen Sie mich die Seite tatsächlich nach unten bewegen , damit wir sie sehen können. Nun, noch nicht, aber wir werden in der Lage sein sobald wir mehr Styling und Head-to-Do-Bearbeitung vornehmen und sie auch für die ersten beiden Symbole nach unten verschieben können. Für das nächste werden wir es nicht brauchen, oder ich meine, für das letzte. Das gefällt mir. Jetzt können Sie dort die Symbole auf unserer Seite sehen. Was wir auch mit der Diskette machen , auf der sich diese Icons befinden, wir werden ein Epsilon setzen, es wird es vertikal zentrieren, aber noch nicht jetzt, weil es technisch gesehen zentriert ist, weil es die volle Höhe annimmt , aber das wird sich bald ändern Außerdem setzen wir den violetten Text auf, ich weiß nicht, 800 Machen wir es etwas dunkler und verwenden 900. Perfekt. Für dieses Div , das diese Icons und das Formular enthält, werden wir auch bei Flexbox Layout und Justify Center Fantastisch. Für das Formular selbst werden wir etwas mehr Styling hinzufügen, also werden wir dort etwas Sein und vielleicht etwas Mix-Breite verwenden. Mischbreite sechs Excel. Lass es uns versuchen. Aber lass es uns dort machen. die maximale Breite von 1.200 Pixeln, die wir für unsere gesamte Seite verwenden Jetzt müssen wir es zentrieren. Jetzt werden wir dort den Klasseneffekt hinzufügen. Wir haben zu Beginn Exo CSS definiert, und das wird es sein Für den nächsten Tag, den wir dort haben, werden wir dort zuerst etwas Text hinzufügen , damit wir sehen können, was wir eigentlich stylen Lass uns eine Verbindung herstellen und dann anfangen, an tollen Dingen zu arbeiten. Jetzt würden wir wirklich etwas Schriftfarbe verwenden. Fügen wir also den Text Grau 500 hinzu. Natürlich auch die Textgröße. Das kann also wie Tre Excel sein. Also nach unten verschmelzen. Was sonst? Vom Boot aus. Und vielleicht ändern wir es auf fünf Excel und von kleinerem oder mittlerem Bildschirm und höher. Und auf dem Basisbildschirm auf dem mobilen Bildschirm hätte ich gerne Text drei Excel. Fantastisch. Was die Absatztechnik angeht, werden wir auch den Text grau schreiben, vielleicht 600, also ist es ein bisschen dunkler. Aber wir müssen es trotzdem sehen. Also lass uns 500 machen. Und texten Sie Excel. Nun, das ist besser. Dann würde ich für das Div, das diesen enthält, auch wieder MMx Auto verwenden, aber wir müssen ein Max With dazu machen, weil wir es sonst nicht zentrieren können Lassen Sie uns also 600 Pixel von Mx With machen. Fantastisch. Wo wir jetzt sind, okay, Textzentrum. Fantastisch. Jetzt wirst du dort auch etwas Bettwäsche benutzen. Das ist besser. Und was kommt als Nächstes? Als nächstes werden wir stylen. Nun, ich denke, wir werden einfach den Inhalt für das Kontaktformular hinzufügen und es stylen. Also werde ich dorthin gehen und mit dem Kontaktformular beginnen, und ich werde mit diesem sofort einsatzbereiten Text beginnen. Also da werde ich wieder etwas Spielraum im unteren Bereich verwenden. Ich werde den Text Excel verwenden, also erhöht es die Textgröße Textstärke um einen Bolt, den Textstrahl um 300. Fantastisch. Vielleicht eine dunklere. Das ist besser. Für das Formular selbst benötigen wir dort die Aktion, die mit dem Endpunkt von Gt Form IO ausgeführt wird . Wir werden dies in einen tatsächlichen Endpunkt ändern. Gehen wir zu dieser Seite, einem dogfdtiolash-Login. Dann melden wir uns an, klicken dort auf Erstellen. Geben Sie dort einen Namen und die Zeitzone ein, kopieren Sie diesen Endpunkt. Jetzt müssen wir in einem Diff unten auch die Methode zum Posten festlegen. Wir werden den vertikalen Abstand zwischen den Elementen auf vier festlegen, und Sie werden den unteren Rand auf sechs setzen. Jetzt müssen wir für jede Eingabe den Typ festlegen. Der erste ist also Text, ID ist Name, Name ist Name und Platzhalter, wir setzen Ihren Namen mit drei Punkten Und ich denke, wir werden es einfach kopieren und dasselbe für die anderen Eingaben tun Aber es gibt eine E-Mail-ID wenn die E-Mail auch der Name ist, und der Platzhalter ist Ihre E-Mail-Adresse Für den Textbereich ist der Typ Textbereich, es gibt keine ID. Name ist Nachricht. Die ersten Routen sind fünf. Platzhalter ist deine Nachricht. Und ich denke, wir können für diese Eingaben zu Klassennamen übergehen. Bei der ersten Eingabe haben wir alle zwei voll eingestellt. Jetzt machen wir Border Gray, 400, etwas Vertikales Padding, etwas Horizontales Pedding Und was Ähm, ich habe den Rand nicht hinzugefügt. Ich habe den Rand grau gesetzt, ihn aber nicht hinzugefügt. Ich sollte es auf jeden Fall tun. Was ist mit ein paar Grenzfunkgeräten? Sieht besser aus. Okay? Können wir es grundsätzlich auf alle anderen Eingänge kopieren ? Ich denke, wir können. Lass uns sehen, wie es aussieht. Das ist in Ordnung. Also lass uns jetzt die Taste wählen und sie wird für den Kontaktbereich sein. Ich werde dort zu diesem Button gehen. Ich werde das Textzentrum verwenden. Wir können es nicht sehen, also werde ich etwas Farbe verwenden. Lassen Sie mich die Farbe auf dem Button selbst verwenden. Also und vorher muss die Schaltfläche vom Typ Senden sein , weil sie die Nachricht sendet. Und wieder wird es voll sein. Es wird lila sein, ich weiß nicht, 500, vielleicht ein dunkleres, 700 sieht besser aus. Dann verwenden wir etwas Polsterung x oder horizontale Polsterung bis sechs Natürlich müssen wir etwas Xwid und Mm verwenden und Mm Was ist mit Medium? Okay, das ist besser. Putten ist sechs, dann setzen wir die vertikale Polsterung auf drei und wir machen eine mittlere Runde Okay, vielleicht können wir Excel darum herum machen. Das sieht besser aus. Ich denke, das wird es für unseren Kontaktbereich sein und wir können zur Fußzeile übergehen 18. 6footerAMSTERDAM: Und der Putter wird ein schneller Job für uns sein. Also lass uns dorthin gehen. Für den Futer müssen wir nicht einmal etwas importieren Es ist im Grunde nur Spen-Tech, und unten ist ein Paragraph Tech, John Doe, jon.com In der Spen-Technologie werden wir etwas wie vielleicht J Doe verwenden , so etwas wie dieses Dann können wir tatsächlich einfach ihre Break-Tech machen, ihren Ich weiß nicht Hashtag für Webentwicklung 2024. Natürlich müssen wir es jetzt ein bisschen stylen. Lassen Sie uns also wieder die maximale Breite von 1.200 Pixeln verwenden. Lass uns etwas Bettwäsche benutzen. Verwenden wir das Flexbox-Layout, damit wir das Ganze rechtfertigen können. Das heißt, wir werden einen gleichmäßigen Abstand zwischen diesen Elementen haben und ihn mit MMC Auto zentrieren Jetzt haben wir es da, aber du kannst es nicht sehen. Wir müssen die Textfarbe auf Text Grave 4500 aktualisieren. Machen Sie dasselbe für die Paragraph-Technik. 19. 7finalFixesAMSTERDAM: Die Seite ist fast fertig. Wir sollten dafür sorgen, dass diese Navigation funktioniert , weil ich glaube, ich habe vergessen, alle IDs zu Abschnitten hinzuzufügen. Also lass es uns jetzt tatsächlich machen. Kontakt Wir haben einen Ausweis, Kontakt. Lass es uns kopieren. Geh zur Arbeit. Geh zur Arbeit, geh zu About ID about, geh zu Hero. Dort werden wir ID Hero hinzufügen. Gehen wir jetzt zur Navigationsleiste und lösen das Problem. Wir können dort keine Großbuchstaben verwenden, also H. Also ändern wir es einfach in normale Briefe nach Hause über Portfolio und Kontakt. Speichern Sie es. Jetzt können wir es versuchen. Bereich Startseite. Abschnitt „Über uns“. Bereich Kontakt. Und der Portfoliobereich ist nicht benannt. Portfolio, aber es ist benannt. Arbeitsbereich und wir benennen ihn in unserer Navigationsleiste als Portfolio, was wahrscheinlich verwirrend sein kann, aber ich denke, ich werde es einfach so belassen. Wir werden dies auf einen Bildschirm für mobile Geräte umstellen. Deshalb müssen wir Overflow für den Heldenbereich verstecken In unserem Heldenbereich werden wir Overflow Hidden hinzufügen Und wir werden auch den Heldenbereich selbst für mobile Bildschirme etwas besser gestalten , denke ich, oder meine Idee ist, dass wir für das Notizbuch links auf versteckt setzen und auf mittlerem Bildschirm und höher werden wir es auf Blockieren setzen Es ist also besser lesbar. Sie verwenden diesen Glaseffekt bei mittleren Bildschirmen und höher. Für unser Bild oder Profilbild stellen wir etwas mehr als 200 Pixel ein, ab Medium und höher sind es 250. Und von Medium und höher, unterster Nullpunkt, aber ansonsten auf dem mobilen Bildschirm, schauen wir mal, was es kann. 50 vielleicht. Nein, ich mag es nicht. 140, 190. Okay. Das ist besser, glaube ich. Eigentlich gefällt mir das. Was ich also noch mehr tun werde , ist, diesen Text zu erweitern. Also werde ich dorthin gehen und die höhere maximale Breite einstellen. Also habe ich es tatsächlich da. Ich habe es nicht gesehen. Stellen Sie dort 300 Pixel ein und stellen Sie dort ein. Hmm hmm. Text klein und 250 Pixel verwenden 280 Pixel. Und was ist mit etwas Polsterbettwäsche für vier? Nun, das wäre nur in Ordnung, wenn wir die Polsterung auf dem mittleren Bildschirm und höher machen die Polsterung auf dem mittleren Bildschirm und das Gleiche auch für diese erste Überschrift tun würden, weil sie ausgerichtet werden muss Okay, das wird also auf dem mittleren Bildschirm und höher passieren. Und das passiert auf mittlerem Bildschirm und darüber und am Rand zu den unteren beiden oder, lassen Sie uns nur sechs und mittlerer Bildschirm und höher, wir werden es zurücksetzen. Lass uns das öffnen. Wir müssen zur Hero-Seite gehen. Also fügen wir dort den Z-Index hinzu. Wenn wir es jetzt öffnen, wird es funktionieren. Und nun, wir können das Bild dort lassen oder wir können es auch hinter dem Taubheitsbalken verstecken , weil es dann nicht möchte , dass es kaputt ist Also lass uns auch dort bearbeiten. Nun, was müssen wir dort noch reparieren? Also müssen wir zur Heldenabteilung gehen und den Overflow verstecken. Wir werden uns nur auf einem mobilen Bildschirm bewerben, aber auf einem mittleren Bildschirm und höher, sichtbar? So, und wir müssen das Nagbar-Problem lösen, bei dem wir nicht auf den Link klicken können , weil er sich hinter diesem Heldenbereich befindet, der dasselbe Klassenglas hat, und wir müssen zu diesem Heldenbereich gehen Als Erstes werden wir das Glas , das wir dort entfernen, wieder einsetzen Und für das Index-CSS werden wir dort platzieren, wir werden dieses Glas kopieren, wir werden Klassennavigation durchführen , diesen Hintergrundfilter entfernen und speichern. Was jetzt passieren wird, ist, dass wir zur Navbar wechseln müssen, dieses Glas auf Glas-Navigation umstellen müssen, und das wird nicht unscharf sein Jetzt funktioniert die Navigation also. Was wir tun werden, ist, dass wir einfach so wie jetzt zur Navbar wechseln und auch Excel aus dem mittleren Bildschirm und über dem Hintergrund hinzufügen werden . Wenn wir nun die Größe der Seite erhöhen, wird sie wieder unscharf Also werden wir unser Problem beheben lassen, und das wird endlich für das Design der Seite gelten Lassen Sie uns jetzt alles testen. Da ist also unsere Seite. Lassen Sie uns zunächst die funktionierende Navigation testen. Lassen Sie uns nun das mobile Bildschirmdesign überprüfen. Und dieses Navigationsrad hat sich von fest ebenfalls von dort fest auf absolut geändert . 20. 1setupINTER: In dieser Sitzung werden wir diese persönliche Portfolio-Website mit ReactJS und Tailwind CSS erstellen Tailwind CSS Wir haben ein Rasterlayout im Heldenbereich, reibungslose Scroun-Navigation, einen Projektbereich, der das Projekt wechselt, je nachdem , welches Sie auswählen, Abschnitt Skoll und einen Kontaktbereich mit einem funktionierenden Kontaktformular eine reibungslose Scroun-Navigation, einen Projektbereich, der das Projekt wechselt, je nachdem, welches Sie auswählen, den Abschnitt Skoll und einen Kontaktbereich mit einem funktionierenden Kontaktformular. Und natürlich reagiert es voll und ganz . Beginnen wir mit der Ausführung aller Befehle, die wir dort auf tailwincss.com haben Wir werden ein Terminal öffnen und sicherstellen, dass wir uns in unserem Ordner befinden Und damit dieser Befehl keinen weiteren Ordner erstellt, gehen wir sofort dorthin und statt meines Projekts geben wir dort Punkt und Kopf Enter ein, und es wird ein Projekt direkt in dem Ordner erstellt , in dem wir uns befinden. Dann müssen wir also ein C-Projekt machen , weil wir schon dabei sind. Wir werden einen weiteren Befehl für die Tailwind-Installation sowohl mit CSS als auch mit Auto-Präfixor Jetzt werden wir mit einem anderen Befehl den Rückenwind initialisieren Jetzt gehen wir in die Konfigurationsdatei. Fügen Sie diese Dinge dort ein, und jetzt werden wir im Index-CSS dorthin gehen und dort Details in Direktiven einfügen Jetzt, wo NPM Def ausführt, starten wir unsere Seite auf Bevor wir anfangen, lassen Sie uns auch ein anderes Terminal öffnen und dort NPM, I React Icons, Space, React, Scroll und Space React Animation vom Typ Space React ausführen Ich werde es verschieben, damit du es sehen kannst. Jetzt installieren wir all diese drei Bibliotheken , die wir verwenden werden, und können mit der Codierung der Navigationsleiste beginnen. Zunächst erstellen wir also einen neuen Ordner mit Komponenten. Dann erstellen wir die Now-Leiste. Dann werden wir das Snippet verwenden Abdo J 6 übergehen Wir können all das tun, dies und das. Und da machen wir einen Balken mit Enter und er wird importiert. Nachdem wir es jetzt gespeichert haben, wird es auf unserer Seite sein. Wenn Sie das Snippet für den Export verwenden möchten, verwende ich diese ES Seven-Erweiterung Falls Sie dies noch nicht getan haben, installieren Sie auf jeden Fall die Intellisense-Erweiterung, und 21. 2navbarINTERs: In der Navigationsleiste beginnen wir mit dem Import ihrer Symbole AI Outline, schließen Sie mit dem AI Outline-Menü Wir verwenden dies für die Navigation oder für die Menüschaltflächen auf dem mobilen Bildschirm. Außerdem müssen wir den Nutzungsstatus verwenden . Dort beginnen wir mit der Definition der Statusvariablen, der Navigation und der Set-Navigation. Der Standardstatus ist falsch. Dann erstellen wir unsere Funktion Handle Navigation und diese wird die Navigation auf einen anderen Wert setzen Also rufen wir das auf, wenn wir mit diesen Buttons auf eines unserer Elemente klicken Da können wir also mit dem Haupt-Div beginnen. Und wir hätten gerne ein gewisses Maximalgewicht. Lassen Sie uns also diese 1.200 Pixel verwenden. Außerdem können wir dort einen Hintergrund einstellen. Im Moment verwende ich den roten Hintergrund 200, damit wir sehen können, wo sich die Navigationsleiste befindet. Wir müssen dort etwas sterben. Jetzt möchten wir dort auch eine Höhe von 024 einstellen. Natürlich werden wir diese Hintergrundfarbe später löschen. Jetzt müssen wir nur noch sehen, wo sich unsere Navigation befindet, und wir können sie besser gestalten. Ich mische Ato, dann verwenden wir das Flexbook-Layout und zentrieren die Elemente mit der Ausrichtung zwischen und den Elementen in der Mitte Das zentriert es also horizontal und dieses zentriert es vertikal Dann werden wir auch etwas Bettwäsche benutzen. Eigentlich brauchen wir keine Bettwäsche, wenn wir dort die maximale Breite festlegen, das wird auch gut aussehen Und wir können dort eine gewisse Textgröße einstellen. Die Potex-Größe vielleicht ja. Lassen Sie uns vorerst großen Text verwenden. Fahren wir mit dem H fort, der unseren Namen tragen wird, also werde ich den RJ Do verwenden In diesem Fall können wir den Text drei in Excel formatieren und die Schriftart für beide verwenden, und wir verwenden jetzt nicht den Rand von Math. Im Grunde genommen, warum ich ihr TextLarg gemacht habe, als ich ihren Text Excel einstelle, weil ich dann nicht den Text für alle anderen Menüelemente, die in der ungeordneten Liste enthalten sein werden, groß einstellen muss alle anderen Menüelemente, die in der ungeordneten Liste enthalten sein werden, in der ungeordneten Liste enthalten sein Fangen wir mit einer darin enthaltenen Bestellliste an. Wir werden einen Listenpunkt erstellen. Und in diesem Listenelement werden wir einen Link erstellen. Und dieser Link wird von der Wrack Scroll stammen , die wir zuvor installiert haben Dieser Link ist also im Grunde eine Ankertechnologie, aber er beginnt mit der reibungslosen Scroll-Navigation Also statt href werden wir es auch dort machen, und da werden wir etwa oder vielleicht ist es tatsächlich mit dem Schrägstrich Ich bin mir jetzt nicht sicher, aber wir werden es später testen und wir werden sehen Für das Listenelement werden wir eine Auffüllung auf fünf vornehmen, und das war's Jetzt kopieren wir so viele Listenelemente, wie wir benötigen. Ich benötige für den A-Bereich, Erfahrungsbereich und für den Kontakt. Dann werde ich in den Linktext die Namen der Abschnitte einfügen. Also über Erfahrung. Nett. Und ich werde tatsächlich für den Kontakt weitermachen. Ich werde dort zusätzlich Unterricht nehmen müssen, weil wir möchten dieser Kontakt auf irgendeinen Button schaut. Ich werde einen Klassennamen hinzufügen, und in diesen Klassennamen werde ich einige Bettwäsche-Gigs und Bettwäsche Y rund um Excel und vorerst den Hintergrundstift 300 eingeben Bettwäsche Y rund um Excel und vorerst den Hintergrundstift 300 Und wir müssen dort auch das Oh, Flexbox-Layout einfügen. Nett. Und bei der mobilen Navigation, da wir das zur Folge haben, wird es beim vierten Mal Und auf mittleren Bildschirmen und höher wird es mit Display-Flex angezeigt Jetzt werden wir den Dip hinzufügen. In diesem Tauchgang machen wir den Turner-Operator. Basierend auf dem Wert einer Navigation, den wir dort haben , wir dort haben , ist der Standardwert False, wir werden True Position oder False Position ausführen Und da es standardmäßig falsch ist, werden wir zuerst diesen ausführen Es wird also das AI Outline-Menü sein, weil wir dort das Burger-Navigationssymbol anzeigen möchten, das diesem Menü ähnelt dann auf True Position klicken, wird das Kreuz angezeigt, nachdem wir auf das Menü geklickt haben. Wenn wir also darauf klicken, wird das Menü wieder angezeigt, sodass es jedes Mal wechselt, wenn der Benutzer auf dieses klickt. Also Gliederungsmenü. Nehmen wir an, es gibt eine gewisse Größe. Nehmen wir 20. Noch 120. Jetzt werden wir es da haben. Aber wir wollen es natürlich nicht auf dem Desktop haben. Das sollte auf dem Handy sein, also fügen wir zu diesem Div auf einem mobilen Bildschirm einen Display-Block auf Medium und höher hinzu, wir werden ihn verstecken. Und lassen Sie uns einen Hist-Index 40 verwenden. Damit das funktioniert, müssen wir natürlich auch die nclick-Funktion hinzufügen, die wir dort definiert haben Also diese Handle-Navigation werden wir dort in diesen Klick einfügen Jetzt werden wir es speichern und jetzt wird es funktionieren. Jetzt werden wir div hinzufügen und innerhalb dieses Divs werden wir im Grunde diese ungeordnete Liste kopieren Wir müssen ein paar Updates daran vornehmen. Das erste Update ist also, dass es keine versteckten oder Flaggen geben wird. Es wird nur etwas Bettzeug haben, und wir können den Text entsprechend vergrößern. Außerdem wird es wichtig sein, einen Klassennamen für diesen Unterschied zu erstellen, und in diesem Klassennamen werden wir diesen Index wieder höher setzen Wir werden dort auch den Text auf Grau 300 setzen . Wir werden es reparieren. Jetzt müssen wir es also so einstellen , dass es Null und Null oben ist, und die Höhe ist voll, und wir können etwas wie 60% darauf setzen. Lassen Sie uns die Ansicht tatsächlich auf den Mable-Bildschirm ändern, damit wir sehen können , sodass wir jetzt mit dem Hinzufügen eines Rahmens fortfahren können Ebenfalls am Rand rechts, Rand rechts, grau 900 Dann fügen wir etwas Hintergrund hinzu. Lassen Sie uns also etwas Graue verwenden. Ich verwende normalerweise 23, 23, 23 für den Hintergrund, aber da können wir es so etwas dunkler machen. Okay. Und wir werden mit Ps in Out und Dauer 500 weitermachen. Nachdem wir auf das Menüsymbol geklickt haben, das ist dieses, haben wir den reibungslosen Slide-Vorgang . Aber jetzt, nachdem wir auf das Symbol geklickt haben, passiert nichts, und das liegt daran, dass wir dort den ternären Operator nicht haben Also werden wir dort diese geschweiften Klammern hinzufügen dort diese geschweiften Klammern Und zu Beginn werden wir ein Navigations-Fragezeichen setzen, und wir werden dieses zuerst über die Position ausführen Also fügen wir es einfach dort ein. Und dann können wir mit einer anderen Zeile beginnen. Und dort werden wir eine Truppenstellung einrichten. Im Falle einer Kraftposition werden wir diesen Fix also auf -100% belassen Jetzt müssen wir tatsächlich das Closing machen . Jetzt werden wir es speichern. Und jetzt, nachdem wir darauf geklickt haben, wird es so funktionieren. Stellen Sie also sicher, dass Sie den Turner-Operator auch für diesen Diff korrekt geschrieben Das ist also der Di, und es gibt einen Turner-Operator. Und basierend auf dem Wert der Navigationsstatusvariablen ändern wir diese Symbole und zeigen diese Menüelemente auch auf dem mobilen Bildschirm Wir vermissen auch den Namen oder das Logo. Also werden wir es dort hinstellen. Text selbst auf beiden, und lassen Sie uns einen gewissen Spielraum wie diesen haben. Schauen Sie sich jetzt an, wie es aussieht. Vielleicht fügen wir auch hinzu , indem wir x auf vier setzen und bei mittlerem Bildschirm und höher setzen wir es auf Null zurück, setzen wir es auf Null weil wir das nur auf einem mobilen Bildschirm benötigen. Jetzt sieht es besser aus. Jetzt können wir den Hintergrund entfernen. Und ich sehe dort einen Tippfehler, also ist es natürlich eine Gliederung in der Nähe. Jetzt können wir es testen Es funktioniert also gut. Jetzt werden wir für diesen Kontakt diesen Hintergrund in die Hintergrunds und auch in die Primärfarbe des Hintergrunds ändern und auch in die Primärfarbe . Wir werden es speichern. Und wir werden jetzt zu den Ordnern gehen und dort in Index-CSS und das Indexpunkt-CSS einfügen. Ich werde es dir auf Git zur Verfügung stellen. Worum es im Grunde geht, ist, dass ich die Schrift von Google Fonts bearbeite, dann einen Hintergrund. Dann stelle ich dort die Grundfarbe ein. Wenn Sie nun einfach eine Primärfarbe in eine andere ändern möchten , ändern Sie sie dort und sie wird auf die Wandseite angewendet. Dann habe ich dort etwas Text für Überschrift zwei und Absatz und dort auch diesen Glaseffekt hinzugefügt. Wann immer ich also diese Glastastatur verwende, wird dieser Effekt auf das Element angewendet , auf das ich ihn einstellen werde, und ich werde ihn für ein paar Karten auf meiner Seite verwenden. Lassen Sie uns jetzt mit der Erstellung des Heldenbereichs fortfahren. Dort werden wir also Hero J sechs erstellen. Machen Sie einen Export, gehen Sie zu Eb Do J Six und legen Sie ihn dort ab. Jetzt können wir in der Heldenabteilung weitermachen. Ich sehe übrigens auch, dass wir ein Problem auf unserer Seite haben. Gehen wir also zu Navbar, und dort müssen wir Text Grade 200 verwenden. Jetzt ist es besser 22. 3heroINTER: Heldenseite, ich habe diese Importe gemacht. Zunächst müssen Sie die Assets für den Fall , dass Sie meine verwenden möchten, von meinem Github nehmen verwenden möchten, von meinem Github Ich werde Sie in der Beschreibung angeben, sie laden und nachdem Sie sie geladen haben, habe ich dort das Profilbild. Ich habe die drei Symbole von React Icons, AI-Bibliothek, die wir zuvor installiert haben. Dann habe ich ihren Typ Animation, aus der React-Animation, der Bibliothek, die wir auch installiert haben, und von anderen React-Icons habe ich all diese Symbole für die JavaScript-Reaktion und so weiter. Nachdem Sie diese Importe abgeschlossen haben, können wir zum Heldenbereich selbst übergehen. Dort beginnen wir im Man Div mit einer maximalen Gewichtung von 1.200 Pixeln, ähnlich wie wir es in Navbar gemacht haben oder im Grunde genommen genauso Zentriere es. Verwenden Sie dann ein Rasterlayout, da wir drei Spalten nebeneinander haben werden, aber wir werden immer noch auf dem mittleren Bildschirm und darüber die Rasterspalten acht verwenden, weil wir möchten , dass eine Spalte mehr Spalten hat. Und wenn Sie nicht verstehen, was ich meine, werden Sie es in einer Minute sehen. Lassen Sie uns nun eine Lücke zwischen ihnen nutzen, etwas Pedale machen und auf dem mittleren Bildschirm und darüber werden wir die Bettwäsche neu einstellen Lassen Sie uns auch die ID für diesen Abschnitt festlegen, sodass es die ID zu Hause sein wird und wir weitermachen können Also machen wir zuerst das Uh Di Di. Und dieses Div wird für unseren Namen oder unser Bild und unseren Namen stehen. Für dieses Div werden wir Klassennamen mit ebenfalls einem Rasterlayout erstellen, das den beiden Rasterspalten besteht. Und auf dem mittleren Bildschirm und höher verwenden wir die Spalten zehn bis fünf. Und das ist es, wovon ich gesprochen habe. Denn derzeit haben wir dort etwa acht Spalten, und auf dem mittleren Bildschirm oben nimmt dieses Div 85 dieser acht Spalten ein. Du wirst es also in einer Weile auch sehen, wenn du es noch verstehst. Was wir jetzt hinzufügen werden, ist ein Bild. Für dieses Bild fügen wir auch den Klassennamen hinzu, aber zuerst fügen wir das Bild hinzu, also das Profilbild. Wir haben es da. Lass es mich so bewegen. Und auch ein seltsames Profilbild. Was wir dort einstellen werden, ist eine gewisse Breite. Verwenden wir 800 Pixel, eine Mischung oder eine automatische Höheneinstellung oder vielleicht brauchst du sie gar nicht. Stellen wir es vorerst so ein. Lassen Sie uns auch für dieses Div unseren Glaseffekt hinzufügen. Und unter diesem Bild werden wir noch einen Unterschied hinzufügen, weil wir möchten , dass dieses Div die Animation vom Typ Reac, unseren Namen und unsere Erfahrung enthält Also mache ich in diesem Div MI Auto Margin to Left 8 und Flex Direction Column Drinnen. Ich werde den Absatz einfügen. Hi, ich bin John Doe. Ich muss die Textfarben ändern, also legen wir den Textgrad 200 fest. Dort können wir mit der Einstellung der unterschiedlichen Textgröße beginnen. Also lass uns zwei Excel, Medium und höher für Excel verwenden , dann Font Bolt, okay. Wir werden später auch mit den Größen spielen. Wir werden Breaktech machen. Das nächste Element beginnt also in einer anderen Zeile, und wir nennen das den Typ Animation. Bei diesem Animationstyp werden wir eine Sequenz erstellen, und in der Sequenz verwenden wir die Dauer des Frontend-Entwicklers bis 1.000 Webdesigner. Tatsächlich benötigen wir eine Dauer von 1.000 für die Toilette und eine Dauer von 1.000 für den Berater Darunter legen wir eine Hülle an und diese wird auf Spannweite eingestellt Das wird also Span Wrap verwenden. Und wenn Sie R CSS für Span überprüfen , haben wir dort die transparente lineare Verlaufsfarbe definiert . Also stellen wir dort die Geschwindigkeit ein, also werde ich dort 50 einstellen und das Ganze bis unendlich wiederholen. Es wird also in einer Endlosschleife laufen. Im Folgenden haben wir den Abschluss des Paragraphen Tech, und noch weiter unten können wir mit dem nächsten beginnen, und zwar mit mehr als fünf Jahren Erfahrung. Wir geben unseren Klassennamen an. Auf einem mobilen Bildschirm werden wir also Text Excel, Medium Text, Tree Excel, Schriftart Semibt vielleicht und Text Gray 400 einstellen , etwas dunkler als der Text, den wir oben haben Und sogar unter diesem Text werden wir eine Schaltfläche mit dem Download-Lebenslauf platzieren Wir werden dort ein Styling platzieren. Wir werden also von oben, Ping zu und Paring zu Y zusammenführen . Text zu groß, Schrift fett, Text zu Weiß, eigentlich Hintergrund primär, farbig und Jetzt haben wir also eine Schaltfläche wie diese. Jetzt aktualisiere dieses Bit. Derzeit ist dies also unsere erste Karte. Im Folgenden werden wir mit zwei weiteren fortfahren. Also werden wir dort eine Senke schaffen. In diesem Div werden wir ein Rasterlayout auf einem mittleren Bildschirm platzieren . Wir werden eine dritte Spalte und dann bis zu sechs Spalten erstellen. Damit stellen wir sicher, dass wir den ersten Unterschied auf einem mittleren Bildschirm aufnehmen, Spalte fünf von acht und die zweite dreizehn von acht Lass uns in diesem Div weitermachen. In diesem Div beginnen wir mit einem weiteren Diff, der die Symbole und den Text enthält. Verschieben wir es also wieder dorthin, wir machen Text fünf, Excel, Bettwäsche und auch einen Glaseffekt. Und darin werden wir einen Absatz mit Mitch Stack schreiben. Dort setzen wir Textgrad 200, Text Excel, einen Bot, Rand nach unten und Text in die Mitte. Und unter diesem Absatz werden wir alle Symbole platzieren. Aber wir haben sie schön nebeneinander, wir machen ein weiteres Div, verwenden das Rasterlayout setzen die Rasterspalten auf vier. Das heißt, nach vier Symbolen geht es zu einer anderen Zeile und es entsteht eine Lücke. In diesem Div werden wir nun die Icons platzieren, und für jedes Icon verwende ich Farbe bis 500. Für die ersten vier werde ich tatsächlich 600 verwenden. Wir können ein bisschen damit spielen, damit die Farben gut aussehen. Jetzt werden wir ein weiteres Div hinzufügen. Unter diesem erstellen Sie also ein Div. In diesem werden wir die Linked In-Symbole hinzufügen. Also voll, steh auf. Verlinkt und auch Instagram. Wir platzieren das Pluxbx-Layout, zentrieren sie und den Glaseffekt Jetzt haben wir es auf unserer Seite. Fügen wir dort einfach auch Plex Gray, 600 oder 500 hinzu. Lass uns 600 versuchen, es sieht besser aus. Außerdem benötigen wir diese Textgröße, also verwenden wir tatsächlich sieben Excel, vielleicht sechs. Schauen wir uns die Seite an. Und derzeit sieht es so aus. Vielleicht werden wir den Abstand zwischen ihnen vergrößern, also werden wir ihre Lücke vier nutzen, und das sieht besser aus. 23. Projekt 3: Portfolio: Jetzt können wir zur Portfolio-Seite übergehen. Da haben wir also das neue Dateiportfolio sechs. Dort werden wir es importieren. Und im Portfolio müssen wir zuerst die Importe durchführen. Also importiere ich den Nutzungsstatus, alle Projektbilder, das Pfeilbild und auch das Git-Up-Symbol. Dann wiederhole unseren Code nicht. Wir werden mit Projekten eine Konstante schaffen. Und darin werden wir das Projekt selbst platzieren . Bild für das erste Projekt wird also Projekt eins sein, Titel für das erste Projekt wird Projekt eins sein, Beschreibung wird die Benutzeroberfläche für Frontend-Entwicklung mit R sein und die Links werden zur Site führen. Ich werde den Link nicht haben und muss aufstehen. Und ich werde nicht auch den Link haben, sondern deinen hinzufügen. Tun Sie das jetzt für so viele Projekte, wie Sie dort haben möchten. Also werde ich dort sechs Projekte haben. Also wird es so aussehen. Jetzt können wir mit der Codierung des Portfolios selbst fortfahren. Zunächst werde ich die State-Variable verwenden um das aktuelle Projekt festzulegen. Das konstante aktuelle Projekt ist also das aktuelle Projekt. Standardmäßig wird es Null sein. Und dann machen wir uns auf den Rückweg, und da fangen wir mit dem Mann Also MI sechs, maximale Breite, da wir an 1.200 Pixel gewöhnt sind, zentrieren, ein Rasterlayout erstellen, das Raster auf acht erhöhen, auch gewisser Abstand dazwischen und auch das ID-Portfolio In diesem Div erstellen wir ein weiteres mit der Auswahl des Projekts Also können wir es dort platzieren, Projekt auswählen. Und wir werden dort auch den Pfeil platzieren. Also Pfeil mit Klassennamen, absolut mit 50 Pixeln, oben auf zehn und rechts auf 12. Dann bedeutet das, dass wir für dieses Haupt-Div oder für dieses Div, das dieses Bild enthält dieses Haupt-Div oder für dieses Div, das dieses Bild enthält, die Position relativ setzen müssen und auch den Index auf zehn setzen, Spalten 1023, das Rasterlayout, wir werden die Elemente zentrieren, Rasterspalten eins, und das sollte jetzt sein Nun setzen wir für den Absatz Textgrad 200, p zwei Bolzen und Text für Excel und minus Schräglage Y auf sechs Ich werde das vorerst auch machen, aber du musst es nicht tun. Höhe bis Ich weiß nicht, 90 vie pothet Weil ich dort in diesen Bereich scrollen möchte, wirst du ihn derzeit nicht sehen können Jetzt bist du es, also ist es jetzt besser. Also momentan ist das natürlich nicht richtig, aber es wird bald behoben sein. In diesem Gericht werden wir eine ungeordnete Liste hinzufügen. Und lassen Sie uns zuerst die Klassen dort verwenden. Also Rand nach links. X-Box-Layout, Flex-Zeile und auf mittleren Bildschirmen und höher verwenden wir Flex Colum Die Auswahl der Elemente erfolgt also auf dem mittleren Bildschirm und darüber, untereinander und auf dem mobilen Bildschirm werden sie nebeneinander Dann etwas Abstand dazwischen, Flexfolie. Jetzt werden wir es zentrieren. Auf mittlerer Bildschirmgröße und höher verwenden Sie etwas Abstand, etwas Platz Y bis zwei. Wir haben also einige Abstände zwischen ihnen. Auf mittlerem Bildschirm erhöhen wir ihn auf vier und setzen Text zwei auf Excel. Du kannst es dort sehen. In dieser ungeordneten Liste werden wir nun diese Konstante, die wir dort mit dem Projekt erstellt haben , abbilden oder über sie iterieren dort mit dem Projekt erstellt haben , Also machen wir Project Dot Map, Project Index und dort können wir anfangen, die Listenelemente zu schreiben In diesen Listeneinträgen können wir jetzt diesen Projekttitel eingeben, und das wird sich je nach dem Projekt, das wir durcharbeiten werden, ändern . Projekt 65, vier, drei, zwei und eins. Fangen wir mit dem Styling an oder verwenden zuerst die Pfeiltaste, die den Index für das Listenelement darstellt. Dann stellen wir für die OnClick-Funktion eine Pfeilfunktion ein, wir für die OnClick-Funktion eine Pfeilfunktion ein um den aktuellen Projektindex festzulegen Und wir werden dort auch den Klassennamen angeben, was wir tatsächlich in einer anderen Zeile tun können Und für diesen Klassennamen setzen wir einen Cursorzeigertext auf Grau 300. Und jetzt müssen wir dort tatsächlich etwas zaubern. Also lasst uns einen Backslash machen. Auch da, weil wir einen Turner-Operator verwenden müssen. Also machen wir das $1-Zeichen mit diesen geschweiften Klammern. Dort machen wir das aktuelle Projekt gleich dem Index und dem Turner-Operator Falls das wahr ist, werden wir das aktive Projekt setzen, und falls es falsch ist, werden wir nichts Dann haben wir den Projekttitel und wir haben einen Tippfehler gemacht Also, wo ist der Tippfehler und er schließt den Listeneintrag nicht , also sollte es jetzt in Ordnung sein Außerdem müssen wir dieses aktive Projekt dort bearbeiten, wenn wir zum Index-Punkt-CSS Die Idee ist also, dass wir jedes Mal, wenn wir auf das Projekt klicken, aktive Klasse bekommen sollten. Also das aktive Projekt, wir werden es jetzt definieren. Das aktive Projekt selbst wird also eine relative Position haben, und jetzt zaubern Sie mit dem aktiven Projekt davor und aktiven Projekt danach Dort setzen wir den Inhalt auf einen leeren Wert, Position absolut links auf Null, Breite auf 100%, die Höhe auf vier Pixel, Hintergrundfarbe auf etwas Rosa. Ich werde die Codes später finden und die unteren zwei minus sechs Pixel. Sie werden es sehen, nachdem wir auf das Projekt geklickt haben. Und auch das aktive Projekt nach zwei Hintergrundfarben, und es wird etwas Gelb sein. Auch hier muss ich den Code finden und zwar mit 80% Breite und unten zwei minus zehn Pixeln. Lassen Sie mich nun die richtigen Codewerte für die Farben Rosa und Gelb finden. Also werde ich diese beiden benutzen. Jetzt können Sie auf unserer Seite sehen , dass es für das aktive Projekt unterstrichen wurde Das ist es also, was wir wollten. Jetzt kehren wir zum Portfolio zurück, haben es dort versehentlich geschlossen und können mit der Erstellung der ausführlichen Projektvorschau fortfahren . Unter diesem Div beginnen wir also einen weiteren Diff mit einem Index. Auch für den Glaseffekt haben wir einen CSS-Index und einen Stift bis fünf Spalten. Nett. Drinnen werden wir ein Div erstellen. In diesem Div werden wir ein Bild haben. Lass uns das Styling für den dF machen. Also beim Film, auch die Höhe auf AD und für das Bild setzen wir Sours auf Projekte, aktuelles Projekt Punktbild Nett. Wir haben den ersten ausgewählt. Wir können sie alle auf den aktuellen Projekttitel des Projekts setzen . Und jetzt werden wir in einer anderen Zeile einen Klassennamen angeben, und es wird von der vollen Höhe bis zum vollständigen Objekt stehen, um es groß zu umrunden und den Rand nach unten zu verschieben. Fantastisch. Jetzt unter diesem Bild werden wir es tatsächlich in einem anderen Div machen. Also unter diesem Div machen wir ein weiteres Div. Wir werden dort etwas Bettzeug aufstellen, kannst du sechs stechen. Dort machen wir einen Absatz und in diesem Absatz werden wir Projekte tatsächlich machen, noch nicht Punkt, Projektbeschreibung. Und wir können es vorerst kopieren und dann das Styling zuerst. Wir verwenden also den Textgrad 200 und Rand oder den vertikalen Rand bis vier. Nun, unter diesem Absatz werden wir ein di haben, heute wird es ein Flexbox-Layout und Space x24 geben, und es wird auch einen Ankertext haben, in den wir diese Werte kopieren und sie tatsächlich zweimal wiederholen können diese Werte kopieren und sie tatsächlich zweimal wiederholen Und dieser Ankertext wird sich auf Links Dot Site und Link Dot Git Up beziehen Links Dot Site und Link Dot Git Es wird also den Nutzer auf die Seite mitnehmen und dort aufstehen, was er dort eingestellt hat. Wir müssen dafür etwas Styling hinzufügen. Und wir müssen es auch so machen. Und das wird als HRF sein. Und es wird KI geben, um Git zu füllen, und es wird eine View-Seite Okay. Jetzt können wir zum Styling übergehen. Setzen wir es also in eine andere Zeile, Klassenname, und wir verwenden Padding x24, Padding White to two, Background Slate 600, Text Gray 200, round Bei ihr ändern wir die Hintergrundtafel auf 700 und die Übergangsdauer Jetzt können wir das kopieren und dort dasselbe tun. Speichern Sie es. Jetzt können wir es überprüfen. Natürlich diese Referenz. In diesem Fall verwenden wir keine Anführungszeichen. Was uns von Anfang an geholfen hat, müssen wir jetzt löschen, weil es die Seite ruiniert Also ich denke, ich muss das nur nach oben verschieben, damit wir es richtig sehen können Aber vorher werde ich nur die Seite öffnen. Jetzt können wir es testen, zu einem anderen Projekt gehen und es funktioniert wie erwartet. Also ich denke, ich werde es trotzdem irgendwo dort drüben aufbewahren. Jetzt können wir zum Kontaktbereich übergehen. 24. Projekt 3: Kontakt: Lassen Sie uns dort Komponenten erstellen, wenden Sie sich an Punkt JS Six, und wissen Sie was? Lassen Sie uns sogar etwa J six und footer.j6 erstellen. Wir haben es vorbereitet und können es einfach codieren. Als Nächstes verwenden wir das A oder den Kontakt. Wir können den Kontakt verwenden und ihn später wechseln, wenn er uns nicht gefällt. Eigentlich müssen wir noch den Export dort in Über Kontakt und Fußzeile durchführen , wir müssen das Snippet verwenden Jetzt können wir es über und Potter importieren , jetzt ist das komplette Layout für die Also müssen wir nur diesen Kontakt zu Footer zitieren. Wir können dort alles schließen und den Kontakt zu Footer öffnen, damit wir alles vorbereitet haben. Fangen wir mit dem Kontakt an Also bei Kontakt importieren wir die verlinkten AI-Fill-Dateien und AI-Fill-Get Up. Okay. Nett. Dann können wir mit dem Haupt-Div beginnen und das ist mit der Einbettung von X zwei, sechs, maximaler Gewichtung auf 1.200 Pixeln, Mx, Auto, Rasterlayout auf Medium Wir werden die zweite Rasterspalte verwenden und die Elemente zentrieren. Außerdem werden wir ihre Kontakt-ID festlegen. Drinnen werden wir ein erstes Div machen. Und für dieses Div werden wir mit Let's Connect die Überschrift Cream erstellen mit Let's Connect die Überschrift Cream . Und tatsächlich können wir diese Verbindung in einen Spenek einbauen. Das heißt, diese Diskette wird Textklasse 300 haben, also Y zwei, drei, in irgendeiner Überschrift Diese dritte Überschrift enthält Text für Excel auf Semi-Bolt und March to the bottom. Im Folgenden werden wir einen Absatz schreiben. Darin werden wir etwas Text einfügen. Für den Klassennamen werden wir Text zur Rechtfertigung verwenden, der zu sieben führt. Also habe ich etwas Lori Mpsum zum Testen hingestellt, damit wir es sehen können Jetzt können wir sehen, ob der Text idealerweise rechtfertigt, was passieren wird. Die Zeilen werden dort oder an derselben Stelle nicht zur gleichen Zeit enden . Und wenn wir sieben vorne haben, verringern wir die Zeilenhöhe ein wenig. Jetzt machen wir dort ein paar Statistiken. Lassen Sie uns dort also noch ein weiteres Div machen. In dieses Div werden wir dieses einfügen, das wir gerade erstellt haben. Und unten beginnen wir mit einer DI und darin werden wir die Statistiken einfügen. Lassen Sie uns zuerst den Kurs dort machen. Also Flexbox-Layout, nach oben gruppieren, Elemente zur Mitte zusammenfügen und zu sieben kommen Dort werden wir mit Divs beginnen, aber wir werden sie kopieren, also mach dir keine Sorgen Wir werden eigentlich nicht so viel beschichten. Jetzt. In diesem Abschnitt werden wir Überschrift drei mit 11 und der Spen-Technologie machen. In der Spent-Technologie werden wir das Pluszeichen platzieren. In dieses Div fügen wir nun einige Hintergrundinformationen hinzu. Also lasst uns wieder dieses verwenden, aber ein bisschen dunkler. Vielleicht so etwas. Und lassen Sie uns die Opazität auf 40 ändern Dann fügen wir etwas Bettwäsche hinzu und runden es groß ab. Sie können es immer noch nicht sehen, aber jetzt werden wir es tun, weil wir das gut hinzufügen werden, wir werden mit dem mobilen Bildschirm beginnen, also Text nach Excel auf mittlerer Manuba, wir werden Text für Excel auf Semi-Bolt und Text bis Grad 200 verwenden Excel auf Semi-Bolt und Text bis Grad 200 Jetzt werden wir auch den Absatz mit den Projekten hinzufügen. Wir können das auch in Spenteg eintragen und der Klassenname wird dann viel Text und auf einer mittleren Textbasis wie dieser sein Ich bin mir eigentlich nicht sicher, ob wir den Spend-Text dort haben wollen, vielleicht . Lass uns sie löschen. Okay, und auch, wie es derzeit aussieht. Ich denke, wir müssen tatsächlich die Textstufe 200 hinzufügen. Okay. Jetzt nehmen wir diesen Unterschied. Noch zweimal kopieren. Das mache ich statt 115 Jahren Erfahrung und 30 Vorkunden Es tut mir leid, das wird so sein. Und jetzt findest du den richtigen Unterschied, der unter diesem liegt Und da können wir mit dem eigentlichen Formular für die E-Mail beginnen dem eigentlichen Formular für die E-Mail Also werden wir in das Formular natürlich den Klassennamen eingeben , aber noch bevor wir eine Aktion platzieren, werden wir dort später den Endpunkt angeben. Ich werde dir zeigen, nachdem wir Formular erstellt haben oder nachdem wir dieses Formular fertiggestellt haben, ich werde dir zeigen, wie man den Endpunkt hinzufügt und dafür sorgt, dass dieses Formular tatsächlich funktioniert. Die Methode wird post sein und jetzt der Klassenname. den Klassennamen angeht, so werden wir das Maximalgewicht von sechs XL haben, etwas Bettwäsche, ich weiß, mittlerer Bildschirm und höher, wir werden Wetten 12 machen. Der Ausweis wird fertig sein. Und wir können mit dem ersten Absatz beginnen. Eigentlich haben wir da. Lass uns eine Verbindung herstellen, damit wir es nicht dort machen. Fangen wir also gleich mit der Eingabe an. Innerhalb dieser Eingabe können wir es so machen und den Texttyp, die ID des Namens, den Platzhalter Ihres Namens, den Namen zum Namen und den Klassennamen bis zum unteren Rand mit dem vollen, abgerundeten Medium Fügen wir auch einen Rand hinzu. Fügen wir Grau 400 Randfarbe hinzu, PY zu zwei, Polsterung links zu zwei, Polsterung rechts zu vier. Okay. Jetzt können wir diese Eingabe nehmen und einfach die Werte ändern. Der zweite ist also für E-Mail bestimmt. Eigentlich wird der dritte für den Textbereich sein. Lassen Sie uns jetzt die zweite ändern, zweite, Typ wird E-Mail sein, ID wird ebenfalls E-Mail sein , eingegeben wird Ihre E-Mail, Name wird E-Mail sein. Das ist es. Und Texte werden einen Namen haben. Textbereich. ID, genauso wie deine Nachricht. Außerdem müssen wir ihre Münzen auf 30, sagen wir, Reihen auf vier setzen . Wir brauchen den Namen dort nicht und der Klassenname kann *** bleiben. Außerdem werden wir dort einen Button haben. Diese Schaltfläche wird vom Typ Submit sein, und die Klassennamen werden mit den vollständigen Buchstaben B, Y, zwei, drei, gerundetem Medium, grauem Text, 100, einem Semi-Bot angezeigt. Lassen Sie uns Text, Excel und die Primärfarbe des Hintergrunds verwenden. Und sende eine Nachricht. Also lass uns das vielleicht 2000 ändern. Lassen Sie uns nun überprüfen, wie wir dort eine funktionierende Aktion oder den Endpunkt für unsere Aktion einrichten können. Wenn also jemand dieses Formular ausfüllt, erhalten wir die E-Mail. Gehen wir zu dieser Seite, dotgtfm dotIO slash Login. Dann melden wir uns an, klicken dort auf Erstellen, geben dort einen Namen ein und geben dort die Zeitzone ein, kopieren diesen Endpunkt und fügen ihn dort ein. 25. Projekt 3: Über: Gehen wir nun zum Abschnitt „Über uns“ über. Dann werden wir im Abschnitt Über uns zuerst diese beiden Projekte oder die Projektbilder importieren . Dann werden wir diese Symbole importieren. Und dann können wir dorthin gehen und anfangen. Zuerst zentrieren wir im Hauptfeld den Klassennamen mit der maximalen Breite von ebenfalls 1.000 und Moto, Wetten auf sechs, verwenden wir ein Rasterlayout Das Raster kommt also aus zwei. Abstand zu acht, eigentlich kommt Raster zwei nur bei mittlerer Bildschirmgröße und höher. Platzieren Sie die Objekte in der Mitte und die ID etwa. Drinnen können wir mit dem ersten Unterschied beginnen. Und für dieses Div fügen wir eine Überschrift zu sechs hinzu, und darin fügen wir Überschrift zwei mit Fähigkeiten für diesen Ring zwei ein, wir werden Text der Stufe 200, Text drei Excel, Schrift an Bolzen und Rand an unten hinzufügen Text drei Excel, Schrift an Bolzen . Unter den Fähigkeiten werden wir einen Absatz mit etwas Text einfügen , den ich jetzt hinzufügen werde. Jetzt können wir die Formatierung hinzufügen, sodass der Text die Stufe 300 hat, vom Rand zum unteren Rand. Und im Folgenden werden wir die Symbole hinzufügen. Bevor wir sie hinzufügen, erstellen wir eine weitere ID wie diese. Klassenname dort wird Flex von Medium Screen und Bob, Flex Wrap, get to four und Text to four Excel und Justify Center sein. Jetzt füge ich die Symbole hinzu und kann das DIF verschieben Da wird es auch etwas haben. Im Inneren wird es Rubrik zwei mit Frontend-Erfahrung geben. Lassen Sie uns also Text grau 200 setzen, eigentlich Text, Excel, vom Bot und Rand nach unten. Dann fügen wir einen Absatz mit dem Klassennamen Text grau 300 und einem Rand zu den unteren vier hinzu. Ich werde etwas Text hinzufügen. Und jetzt können wir die Bilder hinzufügen , weil wir den Text haben. Also machen wir zuerst den Text links und rechts wir das Bild. Und dann haben wir unten noch ein Bild und Text zum Schreiben, weil wir auch tolle Spalten verwenden. Lassen Sie uns zuerst dieses erste Bild codieren und dann kopieren wir es einfach und vielleicht kleine Updates, aber es wird im Grunde nur zum Codieren des ersten Bildes verwendet. Also verwenden wir den Verwandten und die Gruppe. An diesem Tag werden wir einen weiteren erstellen. Und im Grunde genommen ein leerer weil er nur als Rand für unser Bild dienen wird. Also machen wir alle Breite auf voll, Höhe auf voll, positionieren Epsot Inset minus eins, Hintergrund Gradient nach rechts von lila 100 auf orange 900 und abgerundet groß Und es ist ein leeres Dif, also kann ich es dort ablegen. Unten werde ich ein weiteres Div einfügen und darin werde ich das Bild selbst einfügen Für das Bild können wir Klassennamen „abgerundet groß“ und „mittelgroß“ angeben, maximale Gewichtung bis 500 Pixel. Außerdem werde ich dort natürlich die Quelle angeben. Das wird Projekt eins sein, altes Projekt eins. Jetzt sieht es natürlich schrecklich aus. Wir müssen dieser Tiefe Styling hinzufügen. Also relative Position, und es ist besser schon mit vier, addieren zu vier, Hintergrund zu Weiß und Hintergrundopazität zu eins zu zehn Hintergrund Buller zu groß und abgerundet groß. Jetzt ist es so. Okay. Vielleicht können wir das Violett auf 300 oder vielleicht sogar 700 ändern. Ich schätze, wir können später damit spielen. Im Moment werden wir das kopieren, es unten anstelle von Projekt eins einfügen, und es wird Projekt drei geben. Äh, natürlich sollte es so sein, lass es uns tatsächlich in Projekt zwei umbenennen. Projekt zwei, so wie das. Lassen Sie uns nun überprüfen, wie die Seite aussieht. Okay, es gibt also ein Problem mit dem Rasterlayout, also lass es uns überprüfen. Wir verwenden ihre Rasterspalten zwei, was in Ordnung ist. Und wahrscheinlich, okay, dieses Div sollten wir streichen und es sollte dort enden. Ja, das ist richtig. Was wir jetzt tun können , ist so, wie es sein sollte Das sollte verschoben werden. Oh, das sollte wieder so sein. Und wir können das machen. Schauen wir uns jetzt die Seite an. Ein bisschen besser, aber wir müssen die Bilder etwas kleiner machen. Also machen wir einfach mit J 6 weiter und dort ändern wir es auf die Größe, die wir gerne hätten. Also 350 vielleicht arbeiten wir. 60, 360, wir können 360 verwenden, jetzt lass es uns überprüfen. 26. Projekt 3: Fußzeile: Für die Fußzeile werden wir keine verrückten Dinge machen. Wir werden dort einfach das FA Github Square und AA Instagram importieren das FA Github Square und AA Instagram Im Inneren werden wir ein Maximum mit 1.200 Pixeln erstellen, MMX Oddo Flexbox-Layout, rechtfertigen dazwischen, sodass wir dort einen gleichmäßigen Abstand zwischen all unseren Elementen haben , Bettung zu sechs, bei Medium Bettung zu 20, Text klein, zu mittel, Text Und Rand von oben bis 12. Drinnen machen wir einen Unterschied. Dies wird auf der linken Seite und ein Absatz auf der rechten Seite sein Wir können dort auf der rechten Seite so etwas machen. Schreiben Sie grau 400 und auf der linken Seite machen wir Leerzeichen y24 und setzen die Überschrift grün mit unserem Namen und setzen ihre DIF mit dem FA Git nach oben und mit dem A Instagram Für diesen Dip müssen wir ein Flex-Book-Layout wie Reihe erstellen, sodass sie nebeneinander liegen Etwas Lücke, Text grau, 400 und Text für Excel. Für diesen Überschriftenbaum werden wir Text Excel Text Ray 200, Funk Semi Volt schreiben. 27. Projekt 3: Letzte Korrekturen: Überprüfe, wie die Seite aussieht. Was wir jetzt tun können , ist , dass es wahrscheinlich besser wäre, wenn wir dort in die Ablogis gehen und den Abschnitt „Über uns“ mit dem Bereich „Kontakt“ austauschen Lassen Sie uns das jetzt überprüfen. Für etwa einen Abschnitt würde ich die Marge vielleicht auf 24 setzen. Okay. Und für den Kontakt würde ich die gleichen 24 tun. Jetzt habe ich es versucht und das Hovering des Projekts funktioniert nicht. Was wir also tun müssen , ist, dass wir dorthin gehen. Und wir werden Unschärfe hinzufügen müssen, Kapazität 25 Gruppierung, Kapazität 100, natürlich, Übergang und Dauer, 300 Jetzt können wir das kopieren. Leg es da hin. Speichern Sie es. Wenn wir es jetzt testen, können Sie sehen, dass es jetzt funktioniert. Und eine andere Sache ist, zu einer Navigationsleiste zu gehen. Dort müssen wir das ändern. Also das wird zuerst Portfolio sein, dann Erfahrung, dann Kontakt. Wir werden diese Schrägstriche löschen. Also zuerst wird es zwei Portfolios geben, dann der Bot, dann der Kontakt und so ähnlich wird es da sein Portfolio, Erfahrung, Kontakt, und da ist das Portfolio, ihre Erfahrung und ihr Kontakt. Speichern Sie es. Jetzt testen wir es und es funktioniert, aber es läuft noch nicht reibungslos, weil wir noch ein paar weitere Attribute hinzufügen müssen. Dort werden wir nach einem Link den True-Offset auf 50 und die Dauer auf 500 glätten. Jetzt kopieren wir es und fügen es allen Links hinzu. So wie das. Jetzt werden wir es speichern. Wir werden zur Seite zurückkehren und es wird funktionieren. Es gibt natürlich keine Erfahrung, es geht um Portfolio und so. Also da werde ich es machen. Jetzt wird es funktionieren. Wir möchten, dass dies geschlossen wird, nachdem wir darauf geklickt haben. Wir können es einfach beheben, indem wir dorthin gehen, eine weitere Funktion erstellen und das Menü schließen. Dort werden wir das Messer benutzen , um Gewalt auszuüben. Und wenn wir bei diesen Menüpunkten das Menü mit einem Klick schließen, setzen wir es auf alle anderen Elemente. Speichern Sie es. Jetzt können wir es testen. Was den Pfeil angeht, gehen wir zum Portfolio Gasix. Wir machen das vom mittleren Bildschirm und setzen die rechte Seite auf, ich weiß nicht, fünf. Lass es uns versuchen. Vielleicht zwei oder vielleicht sogar null. Zero wird dort funktionieren. So reparieren wir den Pfeil. Wir müssen den Frontend-Entwickler reparieren. Was wir dort tun, ist, die Größe auf dem mobilen Bildschirm auf Excel zu reduzieren, und wir können auch den Umbruchtext erstellen. Wenn wir es also so ausdrücken, erhalten wir diese Ausgabe. Um das Problem zu beheben, müssen wir etwa zu J 6 übergehen und dort das Flex-Layout vom mittleren Bildschirm und höher löschen . Das sollte in Ordnung sein. Dann haben wir zwei Bilder untereinander, also wäre es schön, sie mit dieser Frontend-Erfahrung zu teilen . Lass uns versuchen, es zu tun. Um dies für diese erste relative Gruppe zu korrigieren, werden wir Bestellung zwei und bei mittlerer Größe und höher Bestellung eins ausführen Und weiter unten bestellen wir eins und bei mittlerem Viereck und höher gleich zwei Im Portfolio bis G sechs werden wir den Gita Bacon auf Text in Excel einstellen Wenn wir nun in den Bereich „Über uns“ gehen, oder das ist eigentlich ein Kontaktbereich , sollten wir für die Statistik eine andere Farbe verwenden oder vielleicht die Deckkraft löschen Ich werde es in diesen ändern. Jetzt werde ich es in andere Statistiken einfügen und auch dort die Opazität löschen, es speichern und es wird so aussehen Das Letzte, was ich tun würde, ist, dem Schweben auf diesen Symbolen einen Skalierungseffekt hinzuzufügen Schweben auf diesen Symbolen einen Skalierungseffekt Gehen wir also dorthin, und wir müssen sie auch zur Anchor-Technologie mit HRF zum gewünschten Link hinzufügen Anchor-Technologie mit HRF zum gewünschten Wir werden das Symbol einfügen und den Klassen-Hover auf Skala 110, Übergangstransformation, Dauer 300 anpassen Übergangstransformation, Dauer Lass es uns testen. Lassen Sie uns jetzt für alle Symbole bearbeiten. Ich werde das noch zweimal kopieren und einfügen. Dann schneide das LinkedIn aus, lege es da hin, schneide das Instagram , lege es dort hin, speichere es für die Seite. Lassen Sie uns das endgültige Layout überprüfen. Der Smooth-Scroll funktioniert also. Die Projekte vom Typ EO mit Animationen und Symbolen werden ausgetauscht. Dort haben wir den Abschnitt „Über uns“ oder „Fähigkeiten“ und dort haben wir das Kontaktformular. 28. 1setupTRIANGLE: Sitzung, wir werden diese Website mit Rick und Tail End erstellen mit Rick und Tail Wir haben ihren Projektbereich, sie basierend auf der vom Benutzer ausgewählten Schaltfläche umschaltet. Ich helfe Ihnen auch dabei, ein Bild wie ich zu erstellen, und wir fügen auch einige Glanzeffekte hinzu. Lassen Sie uns zunächst ein Terminal öffnen. Dann führen wir den Befehl von der Endseite aus, um die ID zu erstellen . Dann installieren wir den Rückenwind, sowohl CSS als auch den Auto-Präfixor, und initialisieren dann Wir werden den Inhalt in die Tailwind-Konfigurationsdatei einfügen. Dort werden wir die Tailwind-Direktiven in Index Dot CSS einfügen in Index Dot CSS Wir werden das Epidot-CSS löschen, wir werden es in die API J six einfügen und wir werden NPM Deep ausführen, um die Seite zu öffnen Im Grunde führen wir gerade die Befehle aus, die sich auf der Endseite befinden Wir können unsere Seite überprüfen und wenn der Text unterstrichen ist, funktioniert er Lassen Sie uns einen neuen Ordner für unsere Komponenten erstellen. Im Inneren können wir mit der Navbar-Komponente beginnen. Dort werden wir das Snippet verwenden, den Export verwenden und es in die App Jasix einfügen Also machen wir dort ein leeres Fragment drinnen, wir werden die Now-Leiste machen Jetzt werden wir es importieren und es wird auf unserer Seite angezeigt. Und bevor wir dorthin gehen, werden wir den Hintergrund und die Schriftart für unsere Seite festlegen . Dort werden wir also diese Schriftart importieren , die Sie auf dem Git in der Beschreibung mit den praktischen Dateien finden . Wenn wir nun Body Tech dort öffnen, werden wir im Inneren den Bereich der Schriftfamilie definieren, groteske Wir haben dort auch den Hintergrund eingefügt. Also Hintergrund, wir werden einen linearen Farbverlauf verwenden und dort einige Grade angeben. Aber am Ende ist es im Grunde ein grauer Hintergrund. Also haben wir etwas Farbe hineingelegt. Lassen Sie uns jetzt den richtigen finden, also werde ich ihn einstellen. Und jetzt würden wir auch die Hintergrundgröße so definieren, dass sie bedeckt ist, und die Hintergrundwiederholung auf Null. Noch ein CSS, das wir in dieser Datei verwenden. Ansonsten nutzen wir alles, Rückenwind bietet, ist dieses Glas und dieser glänzende Effekt Sie finden sie auch in den praktischen Dateien, die ich Ihnen zur Verfügung stellen werde Im Grunde verwendet Glass diesen Hintergrund mit diesem Hintergrundfilter für Unschärfe. Außerdem wird der Randradius für das Element festgelegt , auf das er angewendet wird Es hat auch einen gewissen Rand und einen gewissen Boxschatten. Für den Glanzeffekt wird die absolute Position verwendet, sodass wir ein Element mit einer Position relativ zum Stilett benötigen . Dann wird der volle Radius verwendet. Bei den 50% ist es also wie ein Kreis, dann wird ein niedriger Z-Index verwendet und es gibt auch einen gewissen Hintergrund. Wir werden diese bläuliche Farbe verwenden. Um nun einen schönen Stil für unseren Text zu haben, setzen wir H auf zwei, und wir werden auf alle unsere H zwei, Text l, anwenden , und auf mittlerem Bildschirm werden wir Text für Excel anwenden. Dann wenden wir für den Absatztext den Text Excel, Tracking-Typ und den Zeilenabstand entspannt an. Das sollte für das CSS sein. Jetzt springen wir zu Navbar und fangen an, es zu codieren. 29. 2navbarTRIANGLE: Zuerst müssen wir zwei Bibliotheken installieren, also machen wir NPM, also machen wir NPM, I React Icons und React Scroll Wir werden auch us state verwenden, also werden wir dort state verwenden Dort werden wir Import, AI Outline Menu und AI Outline Close ausführen. Außerdem werden wir den Link aus React Scroll für den Smooth-Scroll importieren . Zuerst definieren wir die Zustandsvariable, sodass const No, set NF und use state default false sein werden Im Folgenden werden wir die gesamte Navigationsfunktion ausführen. Dadurch wird die Zustandsvariable grundsätzlich auf den Wert gesetzt. Wir werden dies in der Encliq-Funktion für eines der Elemente verwenden , und wir werden auch eine Funktion zum Schließen der Navigation verwenden Und dadurch wird die Navigation auf Stürze umgestellt. Das werden wir also speziell für die mobile Navigation verwenden. Immer wenn wir auf dem Link auf mobile Navigation klicken, wird die Navigation für uns geschlossen. Fügen wir zuerst einige Inhalte hinzu und dann werden wir sie stylen. Da wollen wir also Anchor Tech mit unserem Namen hinzufügen , also J Doe. Sie können auch ein Logo hinzufügen. Dann möchten Sie die Liste rückgängig machen. Dort werden wir später auch Listenelemente hinzufügen. Dort möchten wir ein Div mit der OnClick-Funktion hinzufügen , das die Navigation auslösen wird, also Togo Map Und dann möchten wir unten ein weiteres Div hinzufügen, und dieses Div wird für die mobile Navigation verwendet In diesem Div wird es also eine ungeordnete Liste geben, und darin befindet sich ein Listenelement mit dem Link Fantastisch Derselbe Fall wird es geben. Jetzt haben wir das Skelett, also können wir anfangen, es zu stylen. Eigentlich werden wir den ersten Link hinzufügen , der hier ungefähr gleich sein wird, und lassen uns auch das Symbol hinzufügen, damit wir ihn besser stylen können. Dort verwenden wir den ternären Operator. Also, basierend auf dem Wert der Navigationsvariablen, wird er die wahre Position ausführen, AI Outline Close, oder wenn sie falsch ist, was der Standardwert ist, wird sie die zweite Position ausführen, die falsche Position, das AI Outline-Menü, hoppla, so Ich werde eine Burger-Navigation erstellen. Lassen Sie uns dort auch eine Standardgröße festlegen. Also lass uns Tirty benutzen und die gleiche Größe wird dafür gelten. Jetzt speichern wir es. Auf unserer Seite können Sie die Artikel und die Navigation bereits sehen. Wenn wir jetzt zurückgehen, können wir mit dem Styling beginnen , sodass das Haupt-Div einen Klassennamen mit hat. Zuerst werden wir Flex verwenden. Dann werden wir die Textgröße erhöhen. Wir werden dazwischen begründen, um Platz zwischen allen Elementen zu schaffen. Wir werden den Text Grau 200 verwenden, damit wir sie tatsächlich sehen können. Jetzt ist es besser. Wir werden Objekte so platzieren, dass sie zentriert werden, um sie vertikal zu zentrieren. Dann werden wir eine horizontale Polsterung vornehmen. Lass uns sechs verwenden Eigentlich haben wir auch eine maximale Breite festgelegt. Ich werde für diese Seite 1.300 Pixel verwenden und sie mit MMX Auto zentrieren Wir können die Höhe auch auf 24 erhöhen. Und wenn Sie sich nicht sicher sind, wie Ihre Navigation funktioniert, können Sie den Hintergrund grundsätzlich auf Weiß setzen, um ihn jedes Mal zu überprüfen. Also bin ich damit zufrieden. Ich werde es jetzt entfernen. Das ist der Hauptunterschied. Für das Logo kann ich dort etwas HRF einstellen Wir können grundsätzlich die Homepage benutzen oder was auch immer du willst. Aber vorerst werde ich das leer benutzen. Für die ungeordnete Liste werden wir den Klassennamen auf dem Handy auf versteckt setzen , weil wir auf dem Handy dieses Div mit diesen Menüeinträgen tatsächlich anzeigen werden Dort auf mittlerem Bildschirm und höher werden wir es wieder mit Display-Flex anzeigen Wir werden dort eine gewisse Lücke zwischen den Elementen verwenden. Wir werden den Z-Index erhöhen und den Cursorzeiger verwenden. Wenn wir also mit der Maus über die Elemente fahren, haben wir einen anderen Cursor Für die Listenelemente werden wir einen Klassennamen mit Relative und Group verwenden , da wir dort einen gewissen Effekt auf Hober verwenden werden dort einen gewissen Effekt auf Hober verwenden Jetzt können wir zu Link gehen. Für den Link müssen wir festlegen, wohin er uns führen soll. In der ersten Folge geht es also um zwei Abschnitte. Außerdem setzen wir Smooth auf drei, sodass der Smooth-Scroll aktiviert ist, dann der Offset auf 50 und dann die Dauer für den Smooth-Scroll , also 500. Normalerweise verwende ich diesen Wert. Dann werden wir unter diesem Link eine Spanne festlegen, und mit dieser Spanne wird eine kleine Hober-Animation erstellt , die wir verwenden werden Also nur eine leere Spanne, da machen wir den Klassennamen und beginnen mit Absolute diesem Grund ist die relative Disposition wichtig, weil sie andernfalls diesen Artikel nicht unterstreicht Nach dem Absolutwert verwenden wir also Null unten, Null links, Breite bis volle Höhe eins, Hintergrund Himmel 600, den wir verwenden können Dann verwenden wir die Transformationsskala horizontal Null und gruppieren, zwei, skalieren horizontal 100. Wir können in einer anderen Zeile weitermachen. Dort werden wir den Übergang nutzen, transformieren. Außerdem werden wir eine gewisse Dauer festlegen und es etwas lockerer angehen. Speichern wir es jetzt und versuchen wir, ob es funktioniert. Und es funktioniert, was in Ordnung ist. Was wir jetzt tun werden , ist, dass wir zuerst diesen Link kopieren und ihn dort für das Handy platzieren. Dann werden wir diese Wand in ihr Element kopieren und sie dort und dort einfügen. Wir werden einen Bereich, einen Portfolio-Bereich und einen Kontaktbereich verwenden . Wir können dies also auf Portfolio und Kontakt ändern. Was wir dort tun werden, ist, dass wir für die distale Version kopieren werden, die Wand ist Teil, wie Sie dort sehen können Wir können dort etwas mehr Abstände machen, damit Sie den Code verlieren wollen Kopiere es ein zweites Mal und ein drittes Mal. Außerdem haben Sie den Bereich „Über uns“, den Bereich „ Portfolio“ und den Bereich „Kontakt“. Dort werden wir zum Kontakt und zum Portfolio weitergeleitet, und wir dürfen nicht vergessen die IDs zu den eigentlichen Abschnitten hinzuzufügen, damit das funktioniert. Gehen wir nun dort weiter zur Berger-Navigation. Für diesen Tag fügen wir also einen Klassennamen hinzu, bei dem die mittlere Bildschirmgröße und höher ausgeblendet sind, und wir erhöhen den Index auf 30. Jetzt gehen wir zum DIV und dort können wir zuerst für die ungeordnete Liste den Klassennamen mit Schrift Semi Bolt, Text für Excel, Leerzeichen Y auf acht setzen Text für Excel, Leerzeichen Y auf acht Der Abstand zwischen all diesen Listenelementen wird also auf acht und der Rand von oben auf 24 gesetzt acht und der Rand von oben auf 24 Sie werden jetzt y sehen, weil wir dort für diesen DIF, der diese ungeordnete Liste enthält, dort einen anderen ternären Operator verwenden werden diesen DIF, der diese ungeordnete Liste enthält, dort einen anderen ternären Und im Grunde wieder derselbe Fall wie zuvor. Basierend auf dem Wert des NAF wird es Disposition oder Disposition ausführen Also, wie bei Disposition, wenn wir die mobile Navigation öffnen, machen wir zuerst wenn wir die mobile Navigation öffnen, diesen Text mittig, setzen den Index auf 20, feste Höhe in voller Breite, links Null und oben Null und etwas Hintergrund Normalerweise verwende ich dieses graue Modell 2020, 23 oder 23, 23, ja, richtig? Und wenn es falsch ist, verwende ich feste Position und links minus -100% Speichern Sie es. Jetzt können wir es testen. Also, wenn ich es jetzt öffne, werden wir es so haben. Und wir brauchen ihre eigene Klickfunktion. Wenn wir auf die Artikel klicken, sollte sie geschlossen werden. Also halten wir die Taste gedrückt und klicken dann auf „Navigation schließen“. Jetzt funktioniert es. Und auch für die funktionierenden Disc-Versionen. 30. 3heroTRIANGLE: Großartig als deine Datei, hero.j6. Holen Sie sich den Export dorthin, tippen Sie auf JSix, legen Sie den Helden dort hin, können Sie ihn stylen, Jetzt können wir die Helden-Sektion machen. Zuerst installieren wir die Bibliothek mit Animation vom Typ React, also npMiractType-Animation Jetzt importieren wir das Profilbild, also das Profilbild von Und tatsächlich müssen wir die Assets jetzt bearbeiten. Sie können praktische Dateien auf einem Git finden. Also bearbeite ich es gerade und dort werde ich Assets Profile Picture Dot PNG machen. Speichern Sie es und wir haben uns gestritten. Jetzt werde ich einen weiteren Import mit dem Typ Animation machen. Fantastisch. Diese Heldenseite wird ein Haupt-Div haben, dann ein geordnetes Div , das einen Text enthält, und dann ein Bild mit dem Profilbild. Aber ich werde es etwas später bearbeiten. Fangen wir mit dem Styling des Haupt-Divs an. Da werden wir also das Rasterlayout verwenden. Auf dem mobilen Bildschirm ist es standardmäßig Rasterspalten eins eingestellt, auf dem mittleren Bildschirm und darüber werden wir dort die Rasterspalten zwei einstellen Wir platzieren Objekte in der Mitte. Wir werden die maximale Breite dieses Heldenabschnitts auf 1.250 Pixel festlegen dieses Heldenabschnitts auf 1.250 Pixel Wir werden es zentrieren. Falls Sie auch hier nicht wissen, wo Sie sich befinden, können Sie den Hintergrund weiß einstellen. Aber ich muss dort einige Inhalte hinzufügen, um sie zu sehen. Dann etwas Rand nach unten. Für einen anderen Abschnitt von Medium werden wir ihn erhöhen. Da haben wir also einen gewissen Abstand, und das wird es vorerst sein. Außerdem können wir vielleicht mit einem gewissen Abstand nach oben gehen. Lass uns 14 verwenden. Das ist besser. Für das Haupt-Div legen wir ein maximales Gewicht von 800 Pixeln fest. Darin werden wir einen Absatz und unter den Absatz die zweite Überschrift einfügen. Und in den Absatz werden wir einen Text einfügen. A, jetzt werden wir es kaputt machen, also wird es in einer anderen Zeile beginnen . Und da werden wir tatsächlich ein Spenteg platzieren, damit wir diesen Jon Do stylen können, dann werden wir wieder ein Break-Tag setzen und dort werden wir einen Typ Animation einfügen Wir können es so schließen. Und innerhalb dieser Art von Animation werden wir eine Sequenz erstellen, die im Grunde genommen von Entwicklern für diese Zeit entwickelt wird . Die Dauer beträgt 1.000, der Webdesigner ebenfalls 1.000 und die Dauer des Beraters ebenfalls 1.000. Dann stellen wir dort eine Geschwindigkeit ein, die 50 sein wird, dann eine Wiederholung, die unendlich sein wird. Und dann so. Und dann ein Klassenname , der fett und kursiv geschrieben wird. Speichere es. Jetzt ist es gescheitert. Und es ist an der Unendlichkeit gescheitert, wir brauchen mich. Ja, das ist es. Und was sonst? Da sind wir beim Text mit mehr als fünf Jahren Erfahrung. Und jetzt können wir den weißen Hintergrund entfernen. Und wir können anfangen, es so zu gestalten, dass wir den Text tatsächlich sehen können. Für die Absatztechnologie verwenden wir also den Text Grau 200 auf Medium und höher. Es wird die Größe sechs Excel auf einem Bildschirm oder einem mobilen Bildschirm haben, es wird Text drei Excel sein und es wird eine enge Nachverfolgung haben. Die Buchstaben sind also näher dran. Sieht jetzt auf unserer Seite so aus. Lass uns weitermachen. Lassen wir das Span-Tag so, wie es jetzt ist, aber für später können wir so etwas wie Text Blue 200 machen , etwa so. Aber lassen wir es vorerst leer. Dort haben wir das Styling gemacht. Dafür vergessen wir schon jetzt nicht, wir für H zwei dort schon das Styling im Index von CSS gemacht haben . Aber wir werden dort vielleicht auch etwas Farbtext grau 300 hinzufügen . Okay. Und jetzt werden wir das Bild dort platzieren. Das wird also ziemlich einfach sein. Dort werden wir die Quelle mit dem Profilbild erstellen und der Klassenname wird eine Breite von 500 Pixeln haben. Ich denke, lass uns das von einem mittleren Bildschirm aus machen. Auf Mobilgeräten verwende ich normalerweise Breite von etwa 300 Pixeln. Das Bild wurde übrigens auf canva.com erstellt. Da hast du das Bild. Da hast du dieses Element und du legst dort die Farbe fest. Dann spielst du mit der Position und legst das Bild hinein. Dann musst du es als transparentes Bild herunterladen und natürlich die Ecken abschneiden. Was wir jetzt auch hinzufügen werden, sind die Schaltflächen. Also direkt unter diesem H zwei, immer noch in diesem Div, werden wir New Div machen. Und dieses neue Div wird die Taste eins und die Taste zwei gedrückt halten. Die erste Taste wird wie „Lebenslauf herunterladen“ sein, und die zweite wird wie „Ansicht W“ sein . Was wir nun für diese Schaltflächen tun werden , ist , dass sie nebeneinander liegen. Lassen Sie uns das anhand des Flexbox-Layouts und mithilfe von Flex Row festlegen. Dann werden wir einen gewissen Abstand zwischen ihnen festlegen, Rand zum unteren Rand auf dem mittleren Bildschirm und darüber. Lassen Sie uns diesen Rand zurücksetzen. Es ist im Grunde genommen für den mobilen Bildschirm, weil das Bild dann direkt unter den Tasten war und es nicht gut aussah. Lassen Sie uns nun das Styling für die Schaltflächen vornehmen. Also für den ersten setze ich zunächst den Zen-Index, dann den Cursorzeiger, dann auch den Schriftbolzen, Textgrad 200, ebenfalls mit zwei Hälften, dann den Rand von oben. Dann würde ich auch Bettwäsche für zwei Personen verwenden. Und jetzt fangen wir mit den Farben an. Fangen wir also mit einer anderen Zeile an, und ich werde den Hintergrundverlauf ab einer bestimmten Farbe auf rechts setzen . Ich werde in einer Minute mit einer Farbe beginnen. Zu einer Farbe. Auf diese Weise erhalten wir einen Farbverlauf mit drei Farben und wir werden dieses abgerundete Excel erstellen. Jetzt kann ich dort mit dem Unterricht beginnen und dort auch den Index auf zehn setzen, Crouser auf Zeiger, Punkt auf Bolzen, Text auf Klasse 200 mit 12 Rand von oben bis sechs, Hochzeit zu zwei, und ich sage dort einen Rand, weil dieser umrandet und nicht mit der Farbe gefüllt wird umrandet und nicht mit der Farbe gefüllt wird Also Rand und Rand grau 400, und ich werde auch abgerundetes Excel verwenden. Ich kann es auch in eine andere Zeile setzen , damit Sie den gesamten Code sehen können. Jetzt werde ich es speichern. Ich habe zwei Schaltflächen auf meiner Seite, aber ich werde jetzt die Farbe hinzufügen. Lassen Sie mich also die Codes von der Farbe abrufen , die ich dort verwenden möchte. Ich werde diese Farbe verwenden und jetzt werden wir den Hover-Effekt für die Schaltflächen hinzufügen Fangen wir also oben an. Ich füge die Transformation, die Übergangstransformation und dann ihre Skala auf eins zu fünf hinzu. Es wird sie erhöhen, und auch bei Hover wird es etwas Schatten geben Wir können das jetzt kopieren und auf eine andere Schaltfläche legen. Wir haben da. Speichern Sie es. Lass es uns versuchen. 31. 4aboutTRIANGLE: Lassen Sie uns jetzt den Abschnitt „ Über uns“ erstellen. Also ungefähr J sechs. Wir können es importieren. Jetzt leg es da hin. Zuerst müssen wir die Bilder importieren , also importieren Sie das Projekt. Eines aus den Assets und ich werde es tatsächlich aus dem Video machen, und außerdem importieren wir all diese Symbole aus der Bibliothek, in der wir React Icons DI installiert haben, und dort werden wir JavaScript verwenden und so weiter. Wir werden dort mit dem Styling von de Mandiv beginnen. Also werden wir nächste Woche wie üblich auf 1.300 Pixel setzen, es zentrieren, etwas Abstand, dann ein Rasterlayout auf dem mittleren Bildschirm und darüber, Rasterspalten zwei, etwas Abstand, Elemente zentriert dann ein Rasterlayout auf dem mittleren Bildschirm und darüber, Rasterspalten zwei, etwas Abstand, platzieren und auch ihre ID setzen, was für unsere Navigation dient Im Inneren beginnen wir mit den Karten. Auf dieser Seite werden wir also sieben Karten haben , von denen die echten Karten im Rasterlayout dargestellt sind. der Desktop-Version wird es jedoch nur sechs Karten geben. Auf Mobilgeräten werden wir eine zusätzliche Karte haben, um dort ein besseres Styling-Element zu haben Fangen wir also damit an. Klassenname, der auf dem mittleren Bildschirm und darüber ausgeblendet wird . Aber eigentlich machen wir das später versteckt, damit wir es jetzt sehen können. Lassen Sie uns den Hintergrund mit weißem Hintergrund als oppositionellen Hintergrund verwenden . Verschwommen groß, abgerundet, groß und auch bettwäschig bis sechs In diesem Unterschied werden wir nun tatsächlich die Icons einfügen Also DI HTML 5, es ist da mit ihrem Klassennamen, und da können wir die Farbe einstellen. Also für diesen werde ich die Farbe Orange, 600, einstellen. Und jetzt mache ich das für alle Icons, die ich von dort will. Also werde ich es tatsächlich mit Video machen. Jetzt kannst du es sehen. Ich habe es da. Also kann ich dort tatsächlich mehr Klassen hinzufügen. Flexbox-Layout, Flex Rep, Cap Four, Text für Excel und Justify Center Jetzt werde ich es speichern. Ich habe es so. Und lassen Sie uns tatsächlich überprüfen, wie es auf dem Handy aussehen würde, also werde ich es so machen. Jetzt können wir sehen, dass es so aussehen wird. Ordnung. Jetzt können wir es verstecken, wie wir es wollen. Also werden wir ein Bild machen, das vor dem mittleren Bildschirm und höher versteckt ist, weil es nur auf dem Handy zu Styling-Zwecken verfügbar sein wird. Lassen Sie uns jetzt tatsächlich damit beginnen, die Festplatten , die wir auf dem Desktop haben werden, auch zu der ersten für das Image bestimmt ist. Da ist also das neue Div Dort fügen wir oben zu Hiddon einen mittleren Bildschirm hinzu und für das Bild setzen wir es zuerst relativ ein, weil wir eine absolute Position innerhalb verwenden und es gruppieren werden Und mach dir keine Sorgen, wir werden diese Elemente verwenden, also werden wir es einmal codieren und dann einfach kopieren und einfügen Dort erstellen wir ein Div und das wird ein leeres Diff sein. Es wird nur zum Stylen sein. Wir werden also eine bestimmte Breite und Höhe haben, bis wir fallen können. Wir werden eine absolute Position haben, also haben wir dort die Position relativ dazu. Wir werden Inset minus eins machen. Wir machen einen Hintergrundverlauf nach rechts und stellen diesen Wert von 100 auf Blaugrün 900 Farbe Wir machen es rund um groß. Wir können jetzt mit einer Unterstreichung beginnen, und wir machen Unschärfe, Plasität auf 25 Gruppenübergänge, Plastität auf 100 und Übergang und Dauer Jetzt speichern wir es drinnen und fügen ein weiteres Div ein, fügen ein weiteres Div ein das das Bild tatsächlich enthält So können wir dort die Quelle des Bildes angeben, das das erste Projekt sein wird. Wir können auch dort sein. Also geben wir da Projekt eins und einen Klassennamen ein , der groß gerundet wird und auf mittlerer Leinwand und darüber sagen wir, dass er mit 500 Pixeln gemischt wird. Jetzt können wir nach unten scrollen. Wir haben das Bild. Es funktioniert also so Was wir noch hinzufügen werden , ist , dass wir bis in den Tag hinein , an dem das Bild gehalten wird, die relative Position mit dem Ganzen, der Bettwäsche auf vier, dem Hintergrund auf Weiß, dem Hintergrund auf Opazität, zehn und dem Hintergrund unscharf auf große Breite, abgerundet, groß setzen mit dem Ganzen, der Bettwäsche auf vier, dem Hintergrund auf Weiß, dem Hintergrund auf Opazität, zehn und dem Hintergrund unscharf auf große Breite, abgerundet, groß Wir speichern es, und wir werden es so haben. Es wird tatsächlich nach unten scrollen. Wenn wir nun unter dem Div weitermachen und ein weiteres Div hinzufügen, wird das im Grunde der Bereich Skills sein. Sie können den Klassennamen mit der Überschrift auf sechs setzen. In diesen Unterschied werden wir Überschrift zwei mit Fähigkeiten einfügen. Also Styling da. Also Textklasse 200, Text drei, Excel und Teichschraube und Rand nach unten. Unter dem Himmel werden wir einen Absatz mit Textstufe 300 platzieren , Rand bis unten vier Und jetzt, im Inneren, was habe ich eigentlich gemacht? Wir müssen es kürzen, es in den Unterricht bringen. In diesem Absatz werden wir etwas Text schreiben. Also werde ich es dort ablegen. Ich werde es vom Video abschreiben und da haben wir es. Jetzt haben wir es da, also können wir unten einige Symbole platzieren. Also werde ich noch ein Div machen. Für dieses Div werden wir Klassen mit Medium und höher Flex, Flex to Wrap, bis zu vier, Text für Excel, Justify Center und Hidden on Mobile Screen machen und höher Flex, Flex to Wrap, bis zu vier, Text für Excel, . Jetzt können wir ein paar Icons nehmen, die wir dort haben. Kopiere es und füge es dort ein. Wir können es so stylen. Speichern Sie es. Nun, was wir dort wollen. HTML-CSS, gutes Strap-Gel-Skript, reagiert. Hinweis, ich denke, das ist in Ordnung. Was wir nun tun werden, ist das , was wir dort sonst noch tun wollen ? Ich glaube nichts. Ich denke, das kann es sein. Wir können später mit den Rändern spielen, wenn wir wollen, was das Styling angeht, aber im Moment ist es gut. Ich denke also, wir können weitermachen. Im Grunde möchten wir, dass wir diesen Wandabschnitt kopieren und darunter platzieren möchten , damit wir ihn dann auf der linken Seite unter dem Bild sehen können . Dann möchten wir das Bild dort machen und es wieder unten platzieren. Also wird es auf die rechte Seite kommen, und dann werden wir es wiederholen. Also werden wir dieses Bild machen und es wieder dort platzieren. Es wird auf die linke Seite kommen. Und wenn Sie diesen Text nehmen, wird er wieder auf die rechte Seite kommen. Jetzt können wir einfach den Text und die Bilder aktualisieren. Das erste ist also Projekt eins, zwei und drei. Das erste ist also Projekt eins, zweite ist Projekt zwei. Der dritte ist tatsächlich da. Projekt zwei. Und das dritte ist Projekt drei. So wie das hier. Jetzt werden wir den Text aktualisieren. Für den ersten haben wir also die Fähigkeiten. Für den zweiten werde ich den Text jetzt so aktualisieren und für den dritten Text werde ich jetzt auch so aktualisieren. Jetzt können wir überprüfen, wie es aussieht. Natürlich können wir mit den Symbolen, Texten und Bildern für unsere Projekte spielen , aber es ist so. Und später werden wir unten sogar den Glanzeffekt hinzufügen. Eine Sache, die wir reparieren sollten, sind die Symbole. Also für den letzten würde ich den Befehl Eigentlich, lass uns diesen kopieren oder lass es uns machen. Sogar. Da sprechen wir also über die FTC Also würde ich dort eine Notiz machen. Dann können wir Mongoi B machen. Dann können wir Rea machen und du stehst auf Dann lassen Sie uns ein paar Farben hinzufügen. Also lass uns das kopieren und einfügen. Und ich würde dort grün hinstellen. Wir können dort auch grün, blau, grau stehen lassen . Dann würde ich zu diesen Icons für das Frontend gehen. Also im Grunde können wir da dieses, dieses, dieses Bootstrap-Ja-Skript verwenden , dieses Bootstrap-Ja-Skript verwenden Lass uns die Notiz löschen. Lassen Sie es uns so ausdrücken. 32. 5portfolioTRIANGLE: Kopieren Sie diese Importe, öffnen Sie den Explorer-Ordner und die Komponenten, klicken Sie auf Sie, erstellen Sie eine portfolio.j6-Komponente, starten Sie dort einen Explorer und fügen Sie sie in Eb do JSix ein Dort können wir die Projekte einfügen. Also werden wir dort tatsächlich sechs davon verwenden, und ich werde sie etwas später ändern. Wir werden auch das Gita-Symbol verwenden, also KI füllt Gita also KI füllt Gita Wir werden auch den Nutzungsstatus verwenden. Von React aus, und jetzt kann ich die Projekte ändern und wir können anfangen. Zunächst werden wir also eine Konstante mit Projekten schaffen. Schreiben Sie keinen sich wiederholenden Code, wir speichern ihn in dieser Konstante, und von dort aus ordnen wir ihn zu und verwenden die Benutzeroberfläche für die Beschreibung des Bildtitels Beschreibung des Bildtitels für die Frontend-Entwicklung mit React Verlinken Sie auch die Seite und gehen Sie nach oben und dort unten, wir können das einfach kopieren und einfügen Ich werde sechs Projekte verwenden, also eins, zwei, drei, vier, fünf, sechs, wir können die Werte in Bilder ändern. Also Projekt sechs, fünf und so weiter. Ich werde es jetzt für alles wie dieses tun. Du kannst es dort sehen. Und wir können zum Portfolio übergehen. Zuerst machen wir das konstante aktuelle Projekt, zwei legen das aktuelle Projekt fest. Also machen wir dort eine Zustandsvariable und der Standardwert ist Null. Dann können wir im Gegenzug anfangen zu schreiben. Wir können das Styling für das Haupt-Div festlegen, das wiederum mit einer relativen Klasse sein wird , weil wir dort später einige absolute Werte für den Glanzeffekt verwenden werden, maximale Breite wird dort 800 Pixel betragen Wir werden es zentrieren. Lassen Sie uns dann die Polsterung dort auf dem mittleren Bildschirm und darüber einen vertikalen Rand festlegen. Lass uns 20 verwenden Flexboxs-Layout, Flex-Richtung, ColumO Medium Screen und höher, Flex-Richtungszeile Und ID wird Portfolio sein. Haben wir etwa einen Ausweis gemacht? Ja. Jetzt können wir also damit beginnen, dort in den Hauptbereich unserer Portfoliokomponente zu schreiben . Wir werden dort im Grunde ein Div mit den Projektinformationen und einer ungeordneten Liste Das wird die Optionen enthalten, und wir werden die Projekte auswählen und das wird sich auf unserer Website ändern Fangen wir also mit dem Projekt und wir werden ihren Hintergrund weiß haben oder wir brauchen ihn vielleicht gar nicht. Wir werden den Glaseffekt verwenden , den wir dort im Index zu CSS definiert haben. Also wenden wir das alles auf unsere Karte an, um den Glaseffekt zu erzielen, oder wir öffnen nach dem Glaseffekt die Karte komplett, mit einem Rand zu zwei und der maximalen Gewichtung mit 600 Pixeln. Jetzt können wir es dort auf unserer Seite sehen. Also unten werden wir ein Div einfügen, und dieses Div wird mit einem Bild versehen sein. Und dieses Bild wird dort eine Variable haben anstatt wie bei Projekt One, Quelle, zum Beispiel. Aber vorerst werde ich für das Styling ihre Quelle von Project One verwenden. Dann wird es auch etwas Altes geben. So kann ich vorerst das erste Projekt und auch die Breite einiger Klassennamen auf die volle Breite, die Höhe auf die volle Breite, das Objekt auf die Abdeckung setzen und auch die Breite einiger Klassennamen auf die volle Breite, die Höhe auf die volle , es zu groß abrunden und den Rand nach unten verschieben. Fantastisch. Dieses Div, sagen wir das auch mit Voll und Höhe auf 80. Also legen wir eine gewisse Höhe für das Bild fest. Und unter diesem Div werden wir einen Absatz setzen, und dieser Absatz wird eine Beschreibung enthalten, und wir werden diese Variable später erstellen. Der Klassenname wird als Text grau 200 sein und bis zum Rand oder senkrechter Rand bis vier sein. Dann erstellen wir darunter ein Div. Und dieses Div wird den Ankertext für das Git und den Link zur Seite hochhalten den Ankertext für das Git . Das erste wird also auf der Seite angezeigt und das zweite wird so sein, als würde KI Git up ausführen. Nett. Lassen Sie uns das Flexbox-Layout und den vertikalen Abstand bis vier verwenden. Für die erste Ankertechnologie, die HRF, legen wir das vorerst fest , aber das wird variabel sein Dann werden wir unseren Klassennamen mit etwas horizontaler Bettwäsche setzen . Wir machen daraus einen Knopf. Also machen wir das und wir legen den Hintergrund fest, du wirst sehen können, wie er aussieht. Eigentlich werden wir für die Seite den Hintergrund Slate 600 Text Grau, 200 Round Large verwenden . Ihr Hintergrund Schiefer 700, dann der Übergang und die Dauer 300. Wir werden es speichern. Jetzt können wir es schon auf der Seite sehen. Wir werden fast das Gleiche tun, wenn wir aufstehen. Also groß auf vier, y auf zwei, Hintergrund auf Grau 800, Text auf Grau 200, Text auf Excel, rundet es groß. An anderer Stelle setzen wir Hintergrundgrau 600 und einige Übergänge und Dauer Jetzt haben wir es auch für Git. Lass es uns überprüfen. Okay. Jetzt wird es auch die HRF geben. Vorerst belassen wir es nur bei der Hastek, und wir Und wir können mit dieser ungeordneten Liste fortfahren. Dort legen wir einen gewissen Spielraum nach links fest. Flexbox-Layout, Flex-Zeile auf einem mobilen Bildschirm, und auf dem mittleren Bildschirm oben, machen wir Flex Colum some gap, flex rep, so dass es auf dem mobilen Bildschirm eingeschlossen ist , richten Sie die Mitte aus, sodass es horizontal zentriert ist, Rand nach oben, und auch auf mittlerem Bildschirm ändern wir den Abstand Auf dem Bildschirm eines Mobilgeräts beträgt der Abstand sechs. Diese ungeordnete Liste. Zuerst müssen wir dort vor den Listenelementen eine Projektübersicht erstellen Also ordnen wir die Konstante, die wir dort erstellt haben , oben auf dieser ab Wir erstellen Projektübersicht, Projekt, Index und öffnen es dort Darin fügen wir das eigentliche Listenelement ein. In das dortige Listenelement fügen wir einen Schlüssel ein, der der Index sein wird. Wir fügen dort den Klick ein, der so aussieht , als ob er den aktuellen Projektindex festlegen würde. Und auch nach diesem und vor dem Ende der Technik werden wir einen Klassennamen eingeben. Innerhalb des Klassennamens werden wir eigentlich nicht mit einem Backslash beginnen, aber das würde uns gefallen und jetzt machen wir Im Inneren können wir mit dem Cursorzeiger beginnen und ihn in eine andere Zeile setzen Text grau, 300, Hintergrund, Schiefer 700, abgerundet groß, Bettwäsche, dann ein Mischgewicht von 100 Pixeln auf Hier ändern wir den Hintergrund auf Schiefer 800, und wir machen Übergang und Dauer auf 300. Ich muss scrollen, damit Sie sehen können, was jetzt wichtig ist Ich werde das in einer anderen Zeile machen , ist, dass wir nicht dort enden werden. Wir machen ein 1-Dollar-Zeichen und geschweifte Klammern. Im Inneren sagen wir, dass das aktuelle Projekt dem Index entspricht, und dort, falls es ausgewählt ist, setzen wir alle Background Slate auf 900 und falls wir nichts setzen Das ist also ein weiterer Turn-Operator, den wir dort mit diesem Fragezeichen verwenden werden Was wir damit sagen, ist, dass wir, wenn dieses festgelegte aktuelle Projekt ausgewählt wird, wenn dieses festgelegte aktuelle Projekt ausgewählt wird, die Hintergrundtafel eine dunkle Farbe haben werden. Schauen wir uns jetzt an, wie es tatsächlich funktioniert. Wir müssen nur das Projekt, den Titel, dort platzieren. Jetzt ist die Magie passiert, also können wir auf unsere Seite gehen und sie testen. Auf unserer Seite können Sie sehen, dass es sich ändert. Auf unserer Seite können Sie sehen, dass es tatsächlich funktioniert, aber es ändert nichts an den Bildern, weil wir auf den Bildern keine Variable gesetzt haben, sondern das fest codierte Bild. Also lass es uns reparieren. Dort müssen wir nach oben scrollen. Und so fängst du dort mit der Bildquelle an. Dort werden wir Projekte machen. Aktuelles Projekt Punkt Image. Jetzt können wir das im Grunde kopieren und alles einfügen. Aber statt Bild geben wir einen Titel an. Jetzt können wir es auch dort kopieren. Aber statt Bild werden wir ihre Beschreibung angeben. Und jetzt gehen wir zum Ankertext und zu HFF HRF, zweiter HRF Und dort werden wir die Links Dot Sit und Links Dot GiTA platzieren Dot Sit und Links Dot GiTA Jetzt speichern wir es. Lass es uns testen. Wie Sie sehen können, ändert es die Bilder und es wird auch die Site und das Git Up verwenden , das Sie dort in der Konstante angegeben haben . Also wird es diese Seite und dieses Giup für das gleiche Projekt verwenden , wo du es eingerichtet hast 33. 6contactTRIANGLE: Wir können weiter zum Kontaktformular gehen, dort werden wir eine neue Komponente erstellen, kontaktieren Sie die J Füge es zu Abo J Six hinzu. Und wir werden dort einen Import durchführen, also werden wir KI als Fehler bei LinkedIn und KI als Fehler bei Git up importieren. Fantastisch. Da können wir mit dem Mann Div beginnen. Also machen wir zuerst Rosa. Wir machen eine maximale Gewichtung von, verwenden 1.000 Pixel, mischen Codo und geben dort auch eine Kontakt-ID ein Lassen Sie uns dort tatsächlich mit mehr Klassen weitermachen. Also werden wir den Glaseffekt, den wir bearbeiten , in einem Index einstellen , dass CSS dort ist. Dann legen wir ein Rasterlayout auf dem mittleren Bildschirm und höher fest. Wir verwenden die zweite Rasterspalte und platzieren die Elemente in der Mitte. Also was sonst? Eigentlich Hmm. Eigentlich werden wir ein anderes Div verwenden oder wir wollen Lassen Sie uns eigentlich mit der Codierung des Kontaktformulars fortfahren und es später mit der Benutzeroberfläche aktualisieren. Also werde ich unser erstes Div machen. In diesem Div werden wir eine ungeordnete Liste erstellen. In der ungeordneten Liste werden wir Artikel auflisten Zuerst wird KI bei LinkedIn versagen. Zweitens wird KI scheitern. Steh auf. Für das erste Listenelement werden wir dort einen Klassennamen festlegen. Wir können sie dort schon sehen, aber sie sind zu klein. Also lasst uns jetzt dort in dieser ungeordneten Liste weitermachen. Lassen Sie uns MI tatsächlich auf Auto setzen. Also vertikaler Rand auf Auto, Auffüllung, um auf sechs zu schreiben , weil wir sie dann auf dem richtigen Kontaktformular haben werden Dort werden wir für diesen Listeneintrag ein Flexbox-Layout festlegen Und für dieses LinkedIn werden wir eine Klasse mit dem Namen Breite 70 Pixel festlegen Musste auch Textstufe 300 machen. Nun, was wir auch tun, ist, dass wir das im Grunde genommen tatsächlich kopieren, es dort ablegen und die KI dort platzieren können . Lassen Sie uns nun etwas Abstand dazwischen herstellen und fahren wir fort. es uns in Lassen Sie es uns in diesem Listenelement also tatsächlich so machen. Was auch da sein wird, ist eine Diskette mit der Überschrift drei, die Kontakt sein wird. Und mit Absatz wird das Handy sein, so etwas, und noch eins, das E-Mail sein wird, so. Jetzt können wir durchhalten. Dort können wir Klassennamen mit grauem Text bis 400 eingeben. Und dann Kontakt, wir können Text Large, Font, Bolt und Text Grey 200 machen. Schauen wir uns die Seite an. Sieht besser aus. Aber da vermissen wir natürlich immer noch viel. Lassen Sie uns also das Styling dort machen. Lass uns da etwas Ähnliches machen, wir können es vielleicht auch als Waldif Aber was wir dort vermissen, ist ein gewisser Spielraum fünf. Jetzt lass es uns abholen und da hinstellen. In der zweiten können wir Arbeitsstunden machen. Wir können dort Montag bis Freitag und Samstag bis Sonntag oder Wochenende machen oder was auch immer du willst, vielleicht kannst du einfach von Montag bis Freitag dort leben , weil wir am Wochenende nicht arbeiten werden, oder? können wir also machen. Ich weiß nicht. Von 10:00 Uhr bis 17:00 Uhr. Und vom Styling her haben wir es derzeit so Ich denke also, es wird sich ein wenig ändern, nachdem wir ein Formular erstellt haben, und später können wir es aktualisieren Was wir also tun müssen, ist, dass unter oder unter dieser ungeordneten Liste wir unter oder unter dieser ungeordneten Liste ein Div erstellen und das wird das Div mit dem E-Mail-Kontaktformular sein Grill anzuordnen Lassen Sie uns zunächst dieses Div löschen , um den Jetzt speichern, wir sollten zwei Spalten haben. Also, wenn ich diesen Text speichere, sollte er auf der rechten Seite sein, und er ist da, also funktioniert er. Für diesen Tag, Inside, werden wir mit dem Formular beginnen, oder wir können das Formular anstelle des World-Div verwenden, sodass wir nicht einmal das DIF verwenden müssen Wir beginnen also mit dem Klassennamen, der maximalen Breite entspricht Lassen Sie uns tatsächlich sechs Excel verwenden, etwas Abstand auf mittlerem Bildschirm, wir werden die ausstehenden noch weiter erhöhen ID wird Form sein. Jetzt speichern wir es. Lassen Sie uns dort einige Inhalte einfügen, damit wir sie auf der Seite überprüfen können. Es ist da. In das Formular werden wir die Eingaben einfügen. Es wird also eine erste Eingabe geben, dann wird es eine zweite Eingabe geben. Dann wird es einen Textbereich für den Text oder für die Nachricht geben, und dann haben wir die Schaltfläche für die Nachricht senden. Nett. Lass es uns tatsächlich so machen. Und so. Und lass uns anfangen. Für die Eingabe ist der Typ des ersten Textes also Text, ID ist Name, Platzhalter ist Ihr Name Der Name wird der Name sein, und der Klassenname ist der Rand von unten bis zwei, Breite bis zur vollen Breite, abgerundet bis zur Mitte und dann ein gewisser Rand Nun ja, Rückenrandfarben der Randklasse 400, PI zwei, Bettwäsche links zwei, zwei auch, Bettwäsche rechts bis vier Okay Nun, es ist dem zweiten ziemlich ähnlich, also machen wir es Aber anstatt Text einzugeben, wird es E-Mail-ID, E-Mail, Platzhalter, Ihre E-Mail eingeben E-Mail, Platzhalter, Ihre E-Mail und der Name wird E-Mail sein. Das wird dasselbe sein. Für den Textbereich können wir die Felder quasi kopieren. Typ ist Textbereich, ID ist Textbereich, dann Spalten. Standardmäßig 30 Zeilen bis vier. Platzhalter, deine Nachricht. So, deine Nachricht. Typ. Eigentlich gibt es für den Textbereich keinen Typ. Es gibt einen Namen. Also lass es uns so benutzen. Und das ist in Ordnung. Gehen wir jetzt zum Button. Für die Schaltfläche wird es Typ sein. Einreichen mit dem Klassennamen bis zur Breite vier, Farbe stellen wir in einer Minute fest. Bettwäsche weiß bis drei, rund bis mittel, Text bis grau 200 von halbfett und Text bis Excel. Gehen wir jetzt zur Helden-Sektion. Gehen wir zu diesem Button. Lassen Sie uns tatsächlich diese Verlaufsfarbe nehmen. Kopieren, zurück zum Kontakt. Wir können dort mit der neuen Zeile beginnen, den Gradienten dort platzieren und ihn speichern. Nun, und das war's. Wir haben den Kontaktbereich. Ich sehe dort ein Problem. Es ist nicht unten, also fehlen uns einige. Wir vermissen dort etwas auf der Seite, wie Sie sehen können. Eigentlich tun wir das nicht, es ist nur eine lange Schlange. Ich habe es nicht richtig gesehen. Also ja, das ist für einen Kontaktbereich. Eigentlich noch eine Sache. Ich denke, das Wichtigste im Formular ist, dass wir auch eine Methode hinzufügen müssen, die Post sein wird, und das Wichtigste, was wir dort lesen müssen damit es wirklich voll funktionsfähig ist, wir müssen eine Aktion hinzufügen, und in diesem Abschnitt müssen wir einen Endpunkt hinzufügen, und den Endpunkt werden Sie hinzufügen, wie ich es Ihnen jetzt zeigen werde. Gehen wir zu dieser Seite, einem dotgtfm-Punkt-IO-Slash-Login. Dann melden wir uns an, klicken dort auf Erstellen, geben dort einen Namen ein und geben dort die Zeitzone ein, Und dann wirst du den Endpunkt dort einfügen. Jetzt testen wir es und es funktioniert. Also erhalten wir jetzt die E-Mail in GettForMio. 34. 7-Fuß-DREIECK: Lassen Sie uns nun die Fußzeile erstellen, also die Komponenten, die wir erstellen, eine neue Komponentenfußzeile J six, wie diese, fügen sie Lass uns importieren. Lass uns jetzt dorthin gehen. Das wird ziemlich schnell gehen. Zuerst werden wir die FA Github, Square und FA Instagram wie folgt importieren . Nett. Im Inneren werden wir das D für eine linke Seite und auch für die rechte Seite platzieren . Also werden wir dort ein Relayout verwenden. Lassen Sie uns ein maximales Gewicht von 1.300 Pixeln haben. Lass es uns zentrieren. Lassen Sie uns dort das Flexbox-Layout erstellen Begründen Sie einen Wert zwischen Fitting und sechs bei mittlerem FTTING bis 20. Text zu klein ist in Ordnung auf Medium, Text in Excel ist auch in Ordnung. Oder lassen Sie uns den Text zu groß reduzieren und von oben auf 12 wechseln Lassen Sie uns nun zum ersten Div auf der rechten Seite springen, dann zum ersten Div auf der linken Seite springen, dann zu diesem Div auf der rechten Innerhalb oder innerhalb des Diffs auf der linken Seite werden wir eine Überschrift drei mit J Doe haben. Kann es so machen. Und das Div , das das Anker-Tag enthalten wird. Dort befindet sich das FA-Github-Quadrat und darunter das FA Instagram. Jetzt machen wir das Styling, dort machen wir Space Y vier. Wir haben einen gewissen Abstand zwischen den Elementen zwischen den H-Drei und diesem DIF Für die H-Drei verwenden wir Text zwei, Excel. Wir können jetzt durch die Seite scrollen, damit wir sie sehen können. Natürlich Textstufe 200, damit wir es wirklich besser sehen können. Willst du vielleicht einen Bolzen oder einen Halbbolzen. Mm hmm. Dann würde ich zu diesem Div das Flexbox-Layout, Flex Row, hinzufügen, sodass die Symbole nebeneinander liegen Also Lücke, Textgrau 400 und Text für Excel , weil wir zumindest die Icons tatsächlich sehen können. Für das andere Div auf der rechten Seite müssen wir dann vielleicht nicht einmal dort eintauchen. Lassen Sie uns dort einen Absatz mit Dak bei 24 J Doe platzieren. Und setzen wir dort den Text Grau 400 ein. Lass uns die Seite sehen. So wird unsere Fußzeile aussehen. Und ich denke, das ist es Also jetzt sollten wir unsere Seite fertig haben. Was uns fehlt, ist der Glanzeffekt, den wir jetzt machen werden. 35. 8shinyEffectTRIANGLE: Wir müssen dort eine neue Komponente erstellen und wir werden sie Shiny Effect mit Jasix nennen Wir werden es jetzt nirgends hinstellen . Wir werden es einfach dort machen. Also da drinnen, in der Rückseite, wird das Becken eigentlich leer sein. Der Klassenname wird der Leuchteffekt sein, und dieser Glanzeffekt ist keine Rückenwind-Klasse. Es ist die Sache Lass uns tatsächlich andere schließen ist die, die wir dort bearbeiten. Du kannst es auf Git up finden. Ich werde dir praktische Dateien zur Verfügung stellen. Also werden wir uns dort bewerben und auch die Stellenarten festlegen. Und wir werden diese Positionsstile dort definieren. Da bleiben wir also konstant bei den Positionsstilen und setzen die W-Breite, -Höhe und den Index auf zwei minus eins. Wir werden einige Eingabeparameter benötigen. Drinnen setzen wir also links, rechts, oben und die Größe auf 500. Was wir dort tun werden, ist auch eine Bedingung. Wenn wir also diesen glänzenden Effekt definieren, müssen wir nicht jedes Mal die linke oder rechte Seite definieren. Bei dieser Gelegenheit verwenden wir die linke Seite undefiniert. Dann werden die Positionsstile übrig bleiben und wir müssen die linken Pixel mit dem umgekehrten Schrägstrich verwenden Im Grunde können wir es jetzt kopieren und dasselbe für die rechte Seite tun Right ist undefiniert, daher werden wir es nach dem Aufrufen dieser Komponente nicht definieren Wir werden die Positionsstile von rechts auf die rechten Pixel setzen, was Null sein kann Dann verwenden wir für die Oberseite dasselbe wie dort, sodass wir es kopieren und dort platzieren können. Aber der höchste Wert wird top sein. Der Gewichtswert entspricht der Größe und die Höhe entspricht ebenfalls der Größe. Wir setzen uns dort hin. Jetzt können wir versuchen, es zu benutzen. Scrollen wir also die Seite nach oben. Gehen wir jetzt zum Heldenbereich und stellen Sie sicher, dass er gespeichert ist. Im Heldenbereich, irgendwo zwischen dem Div und dem Bild, werden wir einen Glanzeffekt erzielen. Also glänzender Effekt. Jetzt wird es eingegeben. Stellen Sie also sicher, dass es für jede Seite, auf der Sie es verwenden möchten, dorthin importiert wird. Und da müssen wir die Linke definieren. Verwenden wir, ich weiß nicht 100. Top 200 und Größe, etwa 1.600. Nehmen wir an, Sie können jetzt den Glanzeffekt auf unserer Seite sehen Glanzeffekt auf unserer Seite Was aber auch auf unserer Seite passiert, ist, dass wir diese vertikale Schriftrolle haben , mit der Sie nach links und rechts scrollen können. Und wir müssen das beheben, indem wir diese Glanzeffekte tatsächlich in ein Div einfügen. Wir haben Overflow wirklich ausgeblendet Lassen Sie uns also ein Div erstellen und dort eine absolute Position hineinlegen, also keinen Überlauf, der auf dem mobilen Bildschirm versteckt Auf einem mittleren Bildschirm oben machen wir den Überlauf sichtbar Drinnen sorgen wir für einen glänzenden Effekt. Oh, ich habe es tatsächlich verstanden. Leg es da hin. Und wir werden es auch ein zweites Mal dort platzieren , weil wir natürlich mehr Glanzeffekte wollen. Beim ersten fügen wir ein weiteres Div ein. Also werden wir es so formulieren. Und im Div für das erste werden wir es tatsächlich auf dem mobilen Bildschirm verstecken, dort kein Chaos anrichten. Also machen wir Hidden und Medium Block. Übrigens, auf dem Handybildschirm dieses glänzende *** nicht so gut sichtbar. Am Ende kannst du es also einfach verstecken und auf dem mittleren Bildschirm oben blockieren, weil es dort so gut wie sichtbar ist. Aber auf dem mobilen Bildschirm war der gesamte Bildschirm voller Elemente und all der Inhalte, die wir dort haben Es ist dort also kaum sichtbar , aber du kannst es so machen Jetzt speichern wir es. Und wir werden den Wert ändern. Der erste wird also 100, 216 hundert sein. Den zweiten China-Effekt können wir ein wenig verschieben. Dort können wir Top Zero und bei der Größe 1.200 verwenden Schauen wir uns jetzt die Seite an. Also haben wir es so. Wir haben immer noch die vertikale Schriftrolle, also lassen Sie uns das reparieren. Im Grunde müssen wir die Größen ändern. Wir müssen vorsichtig damit sein. Nehmen wir etwa 1.412.100 , um eine solche Wirkung Jetzt können wir diesen glänzenden Effekt auch auf eine andere Seite übertragen, aber wir müssen ihn natürlich dort importieren . Lass uns das machen Wenn wir zum Beispiel auf das Portfolio gehen, werden wir uns dort irgendwo zwischen der ungeordneten Liste und dem DIF bewegen. Lass uns dorthin gehen Lass es uns da hinstellen. Wir können da nur den einen Glanzeffekt belassen. Lassen Sie uns da die Größe Null angeben. Wir können 900 gebrauchen. Und lassen Sie uns diese Überläufe jetzt machen , denn es sollte uns gut gehen Und jetzt kannst du den Fehler sehen. Vergiss also nicht, es so zu importieren . Lass uns die Seite überprüfen. Jetzt können Sie es dort in Portfolios sehen. Jetzt kannst du mit den Glanzeffekten spielen, wie du willst, sie dort auf der Seite platzieren und so weiter. Da wir jetzt auch im Portfolio sind, da wir den Glanzeffekt hinzugefügt haben, vergessen Sie nicht, dass es einen gewissen Z-Index hat, also müssen wir zu der Seite gehen und dort den Z-Index erhöhen. Wenn wir also nachschauen, hat es einen Z-Index von eins. Also müssen wir zum ersten Dif gehen , den Z-Index auf zehn setzen und ihn speichern Dann der zweite, setze den Index auf zehn, speichere ihn. Jetzt lass uns testen. Und es funktioniert sogar dort. Okay, und das war's. Schauen wir uns an, wie es aussieht.