Static HTML Website Designs

Collection de sites Web HTML statiques ·

Introduction

Il s'agit d'une collection de pages de destination et de modèles de blog conçus par moi. Ces thèmes sont basés sur HTML, CSS, javascript, jquery et Bootstrap. Je crée ce référentiel sous forme de portfolio pour montrer mon travail en tant que développeur Web front-end afin d'obtenir une opportunité d'emploi, qu'il s'agisse de travaux indépendants, à temps partiel, à temps plein ou sous contrat, et ces conceptions ne sont qu'une simple partie de mon parce que je ne peux pas mettre les œuvres de mes clients ici pour le public. Si vous pensez que mes services pourraient vous être utiles et que vous êtes intéressé à m'embaucher, n'hésitez pas à m'envoyer un email.

Dans ce référentiel, vous trouverez les modèles suivants

Cliquez sur le nom du thème pour voir l'aperçu en direct, et ces conceptions ne sont PAS destinées à un usage personnel ou commercial, elles sont uniquement à des fins d'affichage (pour montrer mes compétences frontend).

• Canox : blog simple, propre, personnel, moderne et professionnel, idéal pour créer un site Web de blog professionnel.
• Covid-19 : Covid-19 : page de destination simple pour consulter les statistiques du coronavirus et voir comment vous en protéger avec des statistiques en temps réel provenant de l'API et une carte interactive pour afficher les dernières statistiques par pays. Ce design est conçu par le designer Shahriar Hossain et j'ai uniquement converti le design en codes frontend en apportant quelques modifications au design pour le rendre meilleur.
• Konish : page de destination belle et simple pour une entreprise technique. Et ce travail est l'un de mes premiers travaux en tant que développeur Web frontend.
• Projection & Collision : Démonstration d'informations Web pour le projet Projection & Collision de la troisième année de mes études à la faculté d'ingénierie des technologies de l'information de l'Université de Damas.
• Sass : Une autre page de destination pour une entreprise technique. et vous pouvez voir la présentation sur behance ici.
• Sellvas : thème de modèle de magazine et de blog dans un thème de magazine et de blog au design élégant et épuré. Doté de tout ce dont vous avez besoin pour créer un magnifique blog et une galerie de photos, c'est un design minimaliste moderne, facile à entretenir et impeccable dans les moindres détails. Et ce thème contient plus de 10 variantes de mise en page et de nombreux styles de publications et de pages d'erreur pour correspondre à chaque style de conception.
• Histoire : Page de destination simple et propre pour les antiquités et les œuvres manuelles à visualiser, et ce site a été conçu par Majd Shamma, mais j'ai converti cette conception en un site Web statique.
• Tieqode : Une équipe de professionnels dotés des compétences commerciales et techniques requises, d'un leadership solide, de l'expérience et des connaissances nécessaires pour fournir les meilleures solutions et services aux clients. Et lorsque j'ai rejoint l'équipe TIEQODE , ​​j'ai travaillé sur leur site Web, et vous pouvez voir le site ici.
• Mariage : page de destination moderne et magnifique pour un événement de mariage.

À propos de ces thèmes

Principales caractéristiques de ces conceptions

• HTML5, CSS3, Javascript, jQuery et Bootstrap.
• De jolis effets de parallaxe.
• Scripts valides et codes organisés sympas.
• Des designs minimalistes, modernes et épurés.
• J'ai utilisé des polices Google gratuites comme Roboto et Raleway.
• Tous les fichiers sont bien commentés pour une édition facile.
• Supporte le curseur du carrousel.
• Incluez les effets jquery et CSS3.
• Les menus déroulants et les menus normaux sont également optimisés pour les appareils mobiles.
• Supportez le fil d'Ariane pour une meilleure navigation.
• Compatible avec plusieurs navigateurs.
• Intégration géniale des polices et des icônes Ion.
• Prise en charge des formats de publication.
• Articles connexes sous les articles.
• Coffret auteur inclus.
• Erreur personnalisée 404 pages.

Bibliothèques javascript utilisées

Dans ces thèmes, certains fichiers Javascript sont importés, et tous les fichiers et plugins nécessaires sont inclus avec les fichiers du projet et ces fichiers et plugins sont :

• jQuery : jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Il simplifie grandement les choses telles que la traversée et la manipulation de documents HTML, la gestion des événements, l'animation et Ajax grâce à une API facile à utiliser qui fonctionne sur une multitude de navigateurs. En combinant polyvalence et extensibilité, jQuery a changé la façon dont des millions de personnes écrivent du JavaScript.
• Bootstrap : framework CSS gratuit et open source destiné au développement Web frontal réactif et axé sur les mobiles. Il contient des modèles de conception basés sur CSS et JavaScript pour la typographie, les formulaires, les boutons, la navigation et d'autres composants d'interface.
• Owl Carousel : est une bibliothèque qui m'a aidé à créer des curseurs sur des sites Web avec de superbes effets et styles de transition.
• Parallaxe : est une fonctionnalité moderne, j'utilise cette fonctionnalité pour ajouter de jolis effets de parallaxe à la mise en page lors du défilement de la souris.
• Font Awesome & Ion Icons : icônes vectorielles et logos sociaux à utiliser sur les sites Web. Font Awesome est le jeu d'icônes et la boîte à outils les plus populaires du Web, et il est utilisé par 38 % des sites qui utilisent des scripts de polices tiers, et Ion Icons est une icône conçue de qualité supérieure pour une utilisation dans les applications Web, iOS, Android et de bureau. Et c'est la prise en charge du SVG et des polices Web.
• Mixitup : bibliothèque hautes performances et sans dépendances pour la manipulation animée du DOM, vous donnant le pouvoir de filtrer, trier, ajouter et supprimer des éléments DOM avec de belles animations. MixItUp fonctionne bien avec votre HTML et CSS existants, ce qui en fait un excellent choix pour les mises en page réactives et compatible avec le flux en ligne, les pourcentages, les requêtes multimédias, la flexbox, etc.
• TypedJs : une bibliothèque qui tape. Entrez n'importe quelle chaîne et regardez-la taper à la vitesse que vous avez définie, reculez ce qu'elle a tapé et commencez une nouvelle phrase pour le nombre de chaînes que vous avez définies.
• Et enfin dans le fichier main.js je rassemble tout ce qui précède : j'implémente quelques plugins pour créer les effets dans les thèmes. Ces plugins sont emballés, je n'aurai donc pas besoin de modifier manuellement quoi que ce soit dans le fichier. La seule chose qu’il faut savoir est comment appeler la méthode.

Images et illustrations utilisées

Toutes les images utilisées dans les conceptions sont 100 % gratuites, mais c'est uniquement à des fins de démonstration, et j'ai utilisé les images, icônes et illustrations des sites Web suivants :

• Pixels
• Pixabay
• Icône plate
• Freepik