静态 HTML 网站合集·
介绍
这是我设计的登陆页面和博客模板的集合。这些主题基于 HTML、CSS、javascript、jquery 和 Bootstrap。我正在创建这个存储库作为一个作品集,以展示我作为前端 Web 开发人员的工作以获得工作机会,无论是自由职业者、兼职、全职还是合同工作,这些设计只是我的设计的一个简单部分工作因为我不能把我的客户的作品放在这里公开。如果您认为我的服务对您有用并且有兴趣雇用我,请随时给我发送电子邮件。
在此存储库中,您将找到以下设计
点击主题名称即可查看实时预览,这些设计不用于个人或商业用途,仅用于展示目的(以展示我的前端技能)。
- Canox:简单、干净、个性化、现代且专业的博客,非常适合制作专业博客网站。
- Covid-19:Covid-19:用于查看冠状病毒统计数据的简单登陆页面,并了解如何通过来自 API 的实时统计数据和交互式地图来查看各个国家/地区的最新统计数据来保护自己免受感染。这个设计是由设计师 Shahriar Hossain 设计的,我只是通过对设计进行一些更改以使其看起来更好,将设计转换为前端代码。
- Konish:一家技术公司的美丽而简单的登陆页面。这项工作是我作为前端 Web 开发人员的第一份工作。
- 投影与碰撞:我在大马士革大学信息技术工程学院学习三年级的投影与碰撞项目的网络信息演示。
- Sass:技术公司的另一个登陆页面。您可以在此处查看 Behance 上的演示文稿。
- Sellvas:杂志和博客模板主题,优雅干净的设计杂志和博客主题。它配备了建立美丽博客和照片库所需的一切,采用现代简约设计,易于维护,每个细节都无可挑剔。该主题包含超过 10 种布局变体以及许多帖子和错误页面样式,以匹配每种设计风格。
- 故事: 简单干净的登陆页面,用于查看古董和手工作品,该网站是由 Majd Shamm 设计的,但我将该设计转换为静态网站。
- Tieqode:一支由专业人士组成的团队,拥有必要的业务和技术技能、良好的领导力、经验和知识,可以为客户提供最佳的解决方案和服务。当我加入TIEQODE团队时,我在他们的网站上工作,您可以在此处查看该网站。
- 婚礼:婚礼活动的现代而美丽的登陆页面。
关于这些主题
这些设计的主要特点
- HTML5、CSS3、Javascript、jQuery 和 Bootstrap。
- 漂亮的视差效果。
- 有效的脚本和组织良好的代码。
- 简约、现代、简洁的设计。
- 使用免费的谷歌字体,如 Roboto 和 Raleway。
- 所有文件都有很好的注释,以便于编辑。
- 支持轮播滑块。
- 包括 jquery 和 CSS3 效果。
- 下拉菜单和普通菜单也针对移动设备进行了优化。
- 支持面包屑导航,以实现更好的导航。
- 跨浏览器兼容。
- 很棒的字体和 Ion 图标集成。
- 帖子格式支持。
- 帖子下的相关帖子。
- 包括作者框。
- 自定义错误 404 页面。
使用的 JavaScript 库
在这些主题中,有一些Javascript文件导入,所有需要的文件和插件都包含在项目文件中,这些文件和插件是:
- jQuery:jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它通过可在多种浏览器上运行的易于使用的 API,使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等事情变得更加简单。凭借多功能性和可扩展性的结合,jQuery 改变了数百万人编写 JavaScript 的方式。
- Bootstrap:免费开源 CSS 框架,针对响应式、移动优先的前端 Web 开发。它包含基于 CSS 和 JavaScript 的版式、表单、按钮、导航和其他界面组件的设计模板。
- Owl Carousel:是一个库,帮助我在网站中制作具有漂亮过渡效果和样式的滑块。
- 视差:是一项现代功能,我使用此功能在鼠标滚动时向布局添加良好的视差效果。
- Font Awesome 和 Ion Icon:在网站上使用的矢量图标和社交徽标。 Font Awesome 是网络上最受欢迎的图标集和工具包,38% 使用第三方字体脚本的网站都使用它,而 Ion Icons 是一款高级设计的图标,可在网络、iOS、Android 和桌面应用程序中使用。它支持 SVG 和网络字体。
- Mixitup:用于动画 DOM 操作的高性能、无依赖库,使您能够通过精美的动画来过滤、排序、添加和删除 DOM 元素。 MixItUp 与您现有的 HTML 和 CSS 配合得很好,使其成为响应式布局的绝佳选择,并与内联流、百分比、媒体查询、Flexbox 等兼容。
- TypedJs:一个类型库。输入任何字符串,然后观察它以您设置的速度键入,退格所键入的内容,然后为您设置的任意数量的字符串开始一个新句子。
- 最后,在
main.js
文件中,我收集了上述所有内容:我实现了一些插件来在主题中创建效果。这些插件已打包,因此我不需要手动编辑文件中的任何内容。唯一需要知道的是如何调用该方法。
使用的图像和插图
设计中使用的所有图像都是100%免费的,但这仅用于演示目的,我使用了以下网站的图像、图标和插图: