10日で10 CSSプロジェクトを構築:プロジェクト6

18395 ワード
webdev css beginners tutorial テキストリンク
再び歓迎.10日目のCSSプロジェクトの日6とプロジェクト6です.
あなたがこのシリーズから他の記事を読んでいないならば、最初に彼らをチェックしてください.この記事の最後にそれらを見つけることができます.
今日、我々は"Intro component with sign-up form"からFrontendmentorを造るつもりです


開始前
  • スターターファイルをダウンロードする
  • コードエディターでスターターファイルを開きます.
  • スタイルを作成します.CSSファイルとHTMLファイル
    • にリンクします
  • スタイルガイドをチェックしてください.MDファイル
    • セットアップを終えました.この計画を終えましょう.
    from here
    パート1 : HTML
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <link rel="stylesheet" href="style.css" />
    <title>Frontend Mentor | Intro component with sign up form</title>
  </head>
  <body>
    <main class="container">
      <section class="left">
        <h1>Learn to code by watching others</h1>
        <p>
          See how experienced developers solve problems in real-time. Watching
          scripted tutorials is great, but understanding how developers think is
          invaluable.
        </p>
      </section>
      <section class="right">
        <button class="btn btn-blue">
          <span class="bold">Try it free 7 days</span> then $20/mo. thereafter
        </button>
        <form>
          <input type="text" placeholder="First Name" />
          <input type="text" placeholder="Last Name" />
          <input type="text" placeholder="Email Address" />
          <input type="text" placeholder="Password" />
          <button class="btn btn-green">Claim your free trial</button>
          <small>
            By clicking the button, you are agreeing to our
            <span> Terms and Services</span></small
          >
        </form>
      </section>
    </main>
  </body>
</html>
    いつもあなたのHTMLファイルにこのHTMLをコピーして、ペーストして、それを通してスキャンしてください.あなたが我々がスタイルを知っているように.

    パート2 : CSS
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); 

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

body {
    font-family: 'Poppins', sans-serif;
    background: url("./images/bg-intro-desktop.png") hsl(0, 100%, 74%) no-repeat; 
    background-size: cover; 
}
    ここでは、Googleフォントから推奨される(style . mdファイル)フォントをインポートします.
    そして、すべての要素からのマージンとパディングを削除し、ボックスのサイズを変更する.
    その後、フォント、背景、画像、色を体に追加しました.

    /* main styles */
.container {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh;
    width: 1100px;  
    margin: auto; 
    color: #fff; 
}

.left {
    width: 50%; 
    padding-right: 4rem;  
}

h1 {
    font-size: 2.8rem;  
    line-height: 1.2; 
}

p { 
    font-size: .9rem; 
    padding-top: 2rem; 
    opacity: .9;  
}
    ここで、我々は、Flexboxで水平に、そして、垂直に容器を中心におきました.そして、それに固定幅を与えました.
    それから、我々は50 %といくつかのパディングの左のセクション幅を与えました.その後、タイトルと説明をスタイルしました.

    /* right styles */

.right {
    width: 50%; 
}

form {
    display: flex; 
    flex-direction: column; 
    background: #fff; 
    padding: 35px; 
    border-radius: 10px;  
}

input, button {
    padding: 20px;  
    width: 100%; 
    border-radius: 10px; 
}

button {
    border: 0; 
    margin: 20px 0; 
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    color: #fff;   
    word-spacing: 2px; 
}

.btn-blue {
    background-color: hsl(248, 32%, 49%);
} 

span {
    font-weight: 200;   
}

.bold {
    color: #fff; 
    font-weight: 700; 
}

.btn-green {
    background-color: hsl(154, 59%, 51%);
    text-transform: uppercase; 
    font-size: 1rem; 
    font-weight: 500; 
}
    この部分では、右セクション幅50 %を与え、フォームとボタンをスタイル.

    input {
    margin-bottom: 20px; 
    border: 2px solid hsl(246, 25%, 77%);
    font-size: .9rem;
    font-weight: 600;  
} 

small {
    color: hsl(246, 25%, 77%);
    text-align: center; 
 }

span {
    color: red; 
    font-weight: 700; 
}
    ここでは、フォームの下部に入力とテキストを入力します.
    デスクトップのデザインを行います.

    @media screen and (max-width: 900px) {
    .container {
        display: block; 
        width: 100%; 
        height: auto;  
        margin: 0 auto; 
        padding: 2rem 0;  
        text-align: center; 
    }

    .container > section {
        padding: 0; 
        margin: 0 auto; 
        width: 80%;   
    }

    h1 {
        font-size: 2rem; 
    }

    p {
        text-align: center; 
        padding: 1rem;       
    }
}
    モバイルデザインでは、デザイン表示ブロックを作りました.したがって、セクションはお互いの上に滞在します.
    また、各セクションに80 %の幅を追加しました.また、タイトルを小さくしました.


    前職

    結論
    今日のプロジェクトのためです.あなたが記事が好きで、この1つのようなより多くの記事が欲しいならば、以下を考慮してください.
    また、Twitterで私と接続することができます
    読書ありがとう.
    CentOS 7接続mysql 8ヒント2059-authentication plugin'caching_sha2_password
    trydeを使用したserdeのフィールドと型の検証