Static HTML Website Designs

Sammlung statischer HTML-Websites ·

Einführung

Dies ist eine Sammlung von Landingpages und Blog-Vorlagen, die von mir entworfen wurden. Diese Themes basieren auf HTML, CSS, Javascript, JQuery und Bootstrap. Ich erstelle dieses Repository als Portfolio, um meine Arbeit als Frontend-Webentwickler zu zeigen und eine Arbeitsmöglichkeit zu finden, sei es freiberuflich, Teilzeit, Vollzeit oder Vertragsarbeit, und diese Designs sind nur ein einfacher Teil meiner Arbeit Arbeit, weil ich die Werke meiner Kunden hier nicht öffentlich veröffentlichen kann. Wenn Sie der Meinung sind, dass meine Dienste für Sie von Nutzen sein könnten und Sie daran interessiert sind, mich einzustellen, senden Sie mir gerne eine E-Mail.

In diesem Repository finden Sie die folgenden Designs

Klicken Sie auf den Namen des Themas, um die Live-Vorschau anzuzeigen. Diese Designs sind NICHT für den persönlichen oder kommerziellen Gebrauch bestimmt, sondern nur für Anzeigezwecke (um meine Frontend-Kenntnisse zu zeigen).

• Canox: Einfaches, sauberes, persönliches, modernes und professionelles Blog, ideal für die Erstellung einer professionellen Blogging-Website.
• Covid-19: Covid-19: Einfache Landingpage zum Anzeigen der Statistiken zum Coronavirus und zum Sehen, wie Sie sich davor schützen können, mit Echtzeitstatistiken von der API und einer interaktiven Karte, um die neuesten Statistiken nach Ländern anzuzeigen. Dieses Design wurde vom Designer Shahriar Hossain entworfen und ich habe das Design lediglich in Frontend-Codes umgewandelt, indem ich einige Änderungen am Design vorgenommen habe, damit es besser aussieht.
• Konish: Schöne und einfache Landingpage für ein technisches Unternehmen. Und diese Arbeit ist eine meiner ersten Arbeiten als Frontend-Webentwickler.
• Projection & Collision: Web-Informationsdemo für das Projection & Collision -Projekt des dritten Jahres meines Studiums an der Fakultät für Informationstechnologie-Ingenieurwesen der Universität Damaskus.
• Sass: Eine weitere Landingpage für ein technisches Unternehmen. und die Präsentation auf Behance können Sie hier sehen.
• Sellvas: Magazin- und Blog-Vorlagenthema im eleganten und klaren Design eines Magazin- und Blog-Themas. Vollgepackt mit allem, was Sie zum Einrichten eines schönen Blogs und einer Fotogalerie benötigen, verfügt es über ein modernes, minimalistisches Design, ist leicht zu pflegen und bis ins kleinste Detail makellos. Und dieses Thema enthält mehr als 10 Layoutvarianten und viele Beitrags- und Fehlerseitenstile, die zu jedem Stil des Designs passen.
• Geschichte: Einfache und übersichtliche Landingpage für Antiquitäten und Handarbeiten. Diese Website wurde von Majd Shamma entworfen, aber ich habe dieses Design in eine statische Website umgewandelt.
• Tieqode: Ein Team von Fachleuten mit den erforderlichen geschäftlichen und technischen Fähigkeiten, fundierter Führung, Erfahrung und Wissen, um den Kunden die besten Lösungen und Dienstleistungen zu liefern. Und als ich zum TIEQODE -Team kam, habe ich an deren Website gearbeitet, und Sie können die Website hier sehen.
• Hochzeit: Moderne und schöne Landingpage für eine Hochzeitsveranstaltung.

Über diese Themen

Hauptmerkmale dieser Designs

• HTML5, CSS3, Javascript, jQuery und Bootstrap.
• Schöne Parallaxeneffekte.
• Gültige Skripte und gut organisierte Codes.
• Minimale, moderne und klare Designs.
• Verwendete kostenlose Google-Schriftarten wie Roboto und Raleway.
• Alle Dateien sind gut kommentiert, sodass sie leicht bearbeitet werden können.
• Unterstützen Sie den Karussellschieber.
• Fügen Sie JQuery- und CSS3-Effekte ein.
• Dropdown-Menüs und normale Menüs sind auch für mobile Geräte optimiert.
• Unterstützen Sie Breadcrumb für eine bessere Navigation.
• Cross-Browser-kompatibel.
• Font Awesome und Ion-Icon-Integration.
• Unterstützung für Postformate.
• Verwandte Beiträge unter Beiträge.
• Inklusive Autorenbox.
• Benutzerdefinierte Fehler 404-Seiten.

Verwendete Javascript-Bibliotheken

In diesen Themes werden einige Javascript-Dateien importiert und alle benötigten Dateien und Plugins sind in den Projektdateien enthalten. Diese Dateien und Plugins sind:

• jQuery: jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Mit einer benutzerfreundlichen API, die in einer Vielzahl von Browsern funktioniert, werden Dinge wie das Durchlaufen und Bearbeiten von HTML-Dokumenten, die Ereignisbehandlung, Animation und Ajax viel einfacher. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise verändert, wie Millionen von Menschen JavaScript schreiben.
• Bootstrap: Kostenloses und quelloffenes CSS-Framework, das auf die reaktionsfähige Front-End-Webentwicklung mit dem Fokus „Mobile First“ ausgerichtet ist. Es enthält CSS- und JavaScript-basierte Designvorlagen für Typografie, Formulare, Schaltflächen, Navigation und andere Schnittstellenkomponenten.
• Owl Carousel: ist eine Bibliothek, die mir dabei geholfen hat, Schieberegler mit wunderschönen Übergangseffekten und -stilen auf Websites zu erstellen.
• Parallaxe: ist eine moderne Funktion. Ich verwende diese Funktion, um dem Layout beim Scrollen mit der Maus schöne Parallaxeneffekte hinzuzufügen.
• Font Awesome & Ion Icons: Vektorsymbole und soziale Logos zur Verwendung auf den Websites. Font Awesome ist das beliebteste Icon-Set und Toolkit im Web und wird von 38 % der Websites verwendet, die Schriftskripte von Drittanbietern verwenden. Ion Icons ist ein Premium-Icon für die Verwendung in Web-, iOS-, Android- und Desktop-Apps. Und es unterstützt SVG und Web-Schriftarten.
• Mixitup: Leistungsstarke, abhängigkeitsfreie Bibliothek für die animierte DOM-Manipulation, die Ihnen die Möglichkeit gibt, DOM-Elemente mit wunderschönen Animationen zu filtern, zu sortieren, hinzuzufügen und zu entfernen. MixItUp lässt sich gut mit Ihrem vorhandenen HTML und CSS kombinieren, was es zu einer großartigen Wahl für responsive Layouts macht und kompatibel mit Inline-Flow, Prozentsätzen, Medienabfragen, Flexbox und mehr ist.
• TypedJs: eine Bibliothek, die typisiert. Geben Sie eine beliebige Zeichenfolge ein und beobachten Sie, wie sie mit der von Ihnen festgelegten Geschwindigkeit tippt, was sie eingegeben hat, mit der Rücktaste und beginnt einen neuen Satz für die von Ihnen festgelegte Anzahl von Zeichenfolgen.
• Und schließlich sammle ich in der Datei main.js alles oben Gesagte: Ich implementieren ein paar Plugins, um die Effekte in den Themes zu erzeugen. Diese Plugins sind gepackt, sodass ich nichts in der Datei manuell bearbeiten muss. Das einzige, was Sie wissen müssen, ist, wie die Methode aufgerufen wird.

Verwendete Bilder und Illustrationen

Alle in den Designs verwendeten Bilder sind 100 % kostenlos, dienen jedoch nur zu Demozwecken. Ich habe die Bilder, Symbole und Illustrationen von den folgenden Websites verwendet:

• Pexels
• Pixabay
• Flaticon
• Freepik