10 天内构建 10 个 CSS 项目：项目 5

欢迎阅读我的“10天打造10个CSS项目”系列。这是第5天，也是第5个项目。如果您还没有阅读本系列的其他文章，请先阅读它们。我会在本文末尾列出它们。

今天我将从frontendmentor构建Huddle 登陆页面。

** 像往常一样，在开始之前下载启动文件 **
从这里

然后在代码编辑器中打开启动文件。
现在，我们开始编写代码吧。

第 1 部分：HTML

<body>
  <header>
    <img src="./images/logo.svg" alt="logo">
  </header>

  <main>
    <section class="left">
      <img src="./images/illustration-mockups.svg" alt="illustration-mockups">
    </section>
    <section class="right">
      <h1>Build The Community Your Fans Will Love</h1>
      <p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. 
  Create connections with your users as you engage in genuine discussion. </p>
  <button>Register</button> 
    </section>
  </main>
  <footer>
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-twitter"></i> 
    <i class="fab fa-instagram"></i> 
  </footer>
</body>

这只是将标记复制并粘贴到代码编辑器中。然后通读一遍。

第 2 部分：CSS

现在我们要设计我们的项目。

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;600&display=swap'); 

/* global syles */

* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0; 
}

body {
    font-family: 'Open Sans', sans-serif; 
    background: hsl(257, 40%, 49%) url("./images/bg-desktop.svg") no-repeat; 
    padding: 50px 60px;   
}

这里我们导入了“style-guide.md”文件中提供的字体。这些字体来自谷歌字体。
我们用全局选择器为每个元素添加了一些全局样式。

然后我们给正文添加了字体、背景颜色、图像和一些填充。

到目前为止就是这样。

/* hader */
header img {
    width: 200px; 
}

/* main styles */
main {
    display: flex; 
    padding-top: 85px; 
    justify-content: space-between; 
} 

.left {
    padding-right: 2.5em; 
} 

.right {
    color: #fff;    
}

h1 {
    font-size: 2.5em; 
    font-family: 'Poppins';
    padding-bottom: 20px; 
}

p {
    line-height: 1.7;
    opacity: .8;  
}

button {
    padding: 15px 60px; 
    margin-top: 30px; 
    border-radius: 5rem;
    border: 0; 
    cursor: pointer; 
    color: hsl(257, 40%, 49%);
    font-size: 1em;
    font-weight: 600;   
}

button:hover {
    color: #fff; 
    background: hsl(300, 69%, 71%); 
}

这里我们给徽标设定了 200px 的宽度。

为主面板添加了显示弹性。这样，左右面板将保持相邻。

并对右侧部分的文本和按钮进行样式设置。

/* footer */

footer {
    text-align: right;  
}

.fab {
    border: 2px solid #fff; 
    padding: 10px 10px; 
    border-radius: 50%; 
    margin-left: 20px; 
    color: #fff;   
}

.fa-facebook-f {
    padding: 10px 13px;   
}

.fab:hover {
    color: hsl(300, 69%, 71%);
    border-color: hsl(300, 69%, 71%); 
    cursor: pointer; 
}

这是页脚部分的样式。在页脚中，我们添加了 3 个社交图标。
我们将它们右对齐。并添加了样式。

现在是移动设计。

@media screen and (max-width: 1000px) {

    main {
        flex-direction: column; 
    }

    .left img {
        width: 100%; 
    }

    .right {
        padding-top: 40px; 
        text-align: center;  
    }

    h1  {
        font-size: 1.8em; 
    }

    button {
        padding: 15px 90px; 
    }

    footer {
        text-align: center;
        padding-top: 80px;  
    } 

}

在移动端设计中，我们只是在主元素上添加了 flex-direction 列。这样，各个部分就互相重叠了。

并将文本和页脚居中对齐。

先前文章：

构建 10 个 CSS 项目：项目 4

结论

今天的项目就到这里。
如果你想看更多类似的文章，可以关注我。

谢谢阅读。

文章来源：https://dev.to/coderamrin/build-10-css-projects-in-10-days-project-5-301b