fylo dark theme landing page

fylo dark theme landing page - Frontend Mentor

你好呀！感谢您查看这个项目！

这是前端导师挑战的解决方案，包括构建一个看起来尽可能接近给定设计的登陆页面。目标是通过构建一个现实的项目来提高我的网页布局技能。

1.目录✒️

• fylo dark theme landing page - Frontend Mentor
  • 1.目录✒️
  • 2. 概述
    • 挑战
    • 如何运行项目：
    • 链接
  • 3.我的流程？
    • 内置
    • 我学到了什么
    • 有用的资源
  • 4.作者??

2. 概述

挑战

用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 查看页面上所有交互元素的悬停状态

fylo 深色主题登陆页面挑战" style="max-width: 100%;">

您可以在前端导师页面查看挑战详细信息。

如何运行项目：

我选择使用 Adalab Starter Kit 来处理这个使用 Node 和 Gulp 创建的项目。因此，首先需要安装Node JS才能运行它。

1. 打开存储库根文件夹中的终端。
2. 在终端中使用以下命令安装本地依赖项：

npm install

1. 使用以下命令开始运行项目，该命令将打开一个显示页面实时版本的浏览器窗口。

npm start

链接

• 实时站点网址：https://leireomadina.github.io/fylo-dark-theme-landing-page/
• 解决方案网址：即将推出

3.我的流程？

内置

• 语义HTML5标记
• HTML模板系统
• CSS3自定义属性
• 弹性盒
• CSS 网格
• 采用BEM方法的SASS
• 咕噜咕噜
• 响应式设计和移动优先工作流程

我学到了什么

• 使用@for在 SCSS 中创建循环：在本例中，我只想选择推荐部分的第二张和第三张卡。

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

• 使用和管理svg 文件：使用 viewBox 属性修改其位置和尺寸，添加标题和 desc 标签以提高可访问性、内联和 CSS 样式、使用填充或描边自定义颜色...
• 使用ARIA 角色来提高Web 可访问性：例如，查看这些导航菜单角色。

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

有用的资源

• 如何使用 @for 创建 Sass 循环：https://www.youtube.com/watch?v=6CbsNFXMYgs。您还可以查看 SASS 官方文档。
• ARIA 角色、状态和属性列表 (MDN)：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
• 内联 SVG 样式：https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s
• 更多资源即将推出..

4.作者??

• LinkedIn：leire-ordeñana-madina
• 推特：@risingdana
• 电子邮件：[email protected]
• 行为: leireomadina
• Codepen: leireomadina
• 前端导师：@leireomadina

谢谢您的宝贵时间？