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

17713 ワード
webdev css beginners tutorial テキストリンク
私のCSSプロジェクトブログシリーズへようこそ.
10日目のCSSプロジェクトの7日目と7日目のプロジェクトです.
あなたがこのシリーズから他の記事を読んでいないならば、最初に彼らをチェックしてください.この記事の最後にそれらを見つけることができます.
今日、我々は"Four card feature section
"からFrontendmentorを造るつもりです


開始前
  • は、スターターファイルfrom here
    • をダウンロードします
  • コードエディターでスターターファイルを開きます.
  • スタイルを作成します.CSSファイルとHTMLファイル
    • にリンクします
  • スタイルガイドをチェックしてください.MDファイル
    • セットアップを終えました.この計画を終えましょう.

    パート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 | Four card feature section</title>
  </head>
  <body>
    <div class="container">
      <header> 
        <h2 class="light">Reliable, efficient delivery</h2>
        <h2>Powered by Technology</h2>
        <p>
          Our Artificial Intelligence powered tools use millions of project data
          points to ensure that your project is successful
        </p>
      </header>

      <div class="card-container">
        <div class="card supervisor"> 
          <h4>Supervisor</h4>
          <p>Monitors activity to identify project roadblocks</p>
          <img src="./images/icon-supervisor.svg" alt="" class="icon" />
        </div>
        <div class="card teamBuilder">
          <h4>Team Builder</h4>
          <p>
            Scans our talent network to create the optimal team for your project
          </p>
          <img src="./images/icon-team-builder.svg" alt="" class="icon" />
        </div>
        <div class="card calculator">
          <h4>Calculator</h4>
          <p>
            Uses data from past projects to provide better delivery estimates
          </p>
          <img src="./images/icon-calculator.svg" alt="" class="icon" /> 
        </div>
        <div class="card karma">
          <h4>Karma</h4>
          <p>Regularly evaluates our talent to ensure quality</p>
          <img src="./images/icon-karma.svg" alt="" class="icon" />
        </div>
      </div>
    </div>
  </body>
</html>

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

 * {
     box-sizing:  border-box; 
 }

 body {
     margin: 0; 
     padding: 0; 
     font-family: 'Poppins', sans-serif;
     background-color: hsl(0, 0%, 98%); 
 } 

p {
    color: hsl(229, 6%, 66%);
    line-height: 1.8;  
}

h2,
h4 {
    color: hsl(234, 12%, 34%);
}
    このスニペットはグローバルなスタイルです.まず、Googleフォントからフォントをインポートします.そして、それを身体に適用した.そして、PとH 2、H 4をスタイリングしました.
    /* main styles */

.container {
    max-width: 1100px; 
    width: 100%; 
    margin: 0 auto; 
    padding: 4rem 0; 
    display: flex; 
    justify-content: center; 
    flex-direction: column;  
}

header {
    text-align: center; 
    width: 500px; 
    margin: auto; 
    padding-bottom: 2rem; 
}

h2 {
    margin: 0; 
    font-size: 2rem; 
}

h2.light {
    font-weight: 300;  
}
    この部分では、コンテナとヘッダーをスタイルします.容器には,100 pxの幅と100 %の固定最大幅を加えた.また、我々はFlexboxで容器を中心におきました.
    そして、見出しタイトルに、私たちは彼らに大きいフォントサイズを与えて、もう片方の光を作りました.

    .card-container {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;  
}

.card {
    width: 330px; 
    background-color: #fff; 
    margin: 10px; 
    padding: 26px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.card h4 {
    font-size: 1.3rem; 
}

img {
    display: block;
    margin-left: auto; 
}

.supervisor {
    border-top: 5px solid hsl(180, 62%, 55%); 
}

.teamBuilder {
    border-top: 5px solid hsl(0, 78%, 62%); 
} 

.karma {
    border-top: 5px solid hsl(34, 97%, 64%); 
}

.calculator {
    border-top: 5px solid hsl(212, 86%, 64%); 
} 

.supervisor,
.calculator {
    transform: translateY(50%); 
}
    この部分では、私たちはカードを作ります、そして、これは最後の部分です.
    まず最初に、カードコンテナーがフレックスを与えたので、カードはお互いの上ではなく互いの隣に座ります.
    その後、カードのスタイルを整えました.私たちはカードの固定幅といくつかのマージンとパディングをカードの内側と外側のいくつかのスペースを作るために与え、いくつかのボックスの影は良い効果を確認します.その後、カードのタイトルとカードのイメージをスタイル.最後に、我々は各カードにボーダートップを追加しました.そして、彼らが50 %を得るように、最後の、そして、最初のカードは変換を加えました.

    それで、我々はデスクトップ・デザインを終えました.
    @media screen and (max-width:700px) {
    header {
        width: 80%;  
    }

    h2 {
        font-size: 1.5rem;    
    }

    .supervisor,
    .calculator {
        transform: translateY(0%);  
    }
}
    モバイルスタイルでは、ヘッダー幅を80 %に減らしました.ヘッダを少し小さくしました.
    また、変換は、カードをお互いの上に重複しない削除されます.


    前職

    結論
    今日のプロジェクトのためです.あなたが記事が好きで、このもののようなより多くの記事が欲しいならば、@で@で私について考えてください.
    また、Twitterで私と接続することができます
    読書ありがとう.
    Javaテクノロジーを使用して、Excelテーブルの内容をmysqlデータベースにインポート
    PADRは、デprojetoプロトタイプエムPHP