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

16979 ワード
tutorial css beginners テキストリンク
私の「10日で10個のCSSプロジェクトを構築する」シリーズへようこそ
これは日4とプロジェクト4です.
あなたがこのシリーズの他の記事を読んでいないならば、最初に彼らをチェックしてください.この記事の最後にリストします.
今日、Single Price Grid Componentからfrontendmentorを構築します


*スターターファイルをダウンロードします**
Frontendmentorすべてのプロジェクトのスターターファイルを提供します.したがって、hereからfrontendmentorからプロジェクトスターターファイルをダウンロードする前に
お気に入りのコードエディターで起動ファイルを開き、コーディングを開始しましょう.

パート1 : HTML
  <body>
    <main class="container">
      <section class="top">
        <h1>Join our community</h1>
        <h2>30-day, hassle-free money back guarantee</h2>
        <p>
          Gain access to our full library of tutorials along with expert code
          reviews. Perfect for any developers who are serious about honing their
          skills.
        </p>
      </section>
      <section class="bottom">
        <div class="left"> 
          <h2>Monthly Subscription</h2>
          <div><span class="big">&dollar;29</span> <span>per month</span> </div>  
          <p>Full access for less than &dollar;1 a day</p>
          <button>Sign Up</button>
        </div>
        <div class="right"> 
          <h2>Why Us</h2>
          <ul>
            <li>Tutorials by industry experts</li>
            <li>Peer &amp; expert code review</li>
            <li>Coding exercises</li>
            <li>Access to our GitHub repos</li>
            <li>Community forum</li>
            <li>Flashcard decks</li>
            <li>New videos every week</li>
          </ul>
        </div>
      </section>
    </main>
  </body>
これは全体のマークアップです.

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

/* global styles */
* {
    box-sizing: border-box; 
    font-family: 'Karla', sans-serif; 
}

body {
    margin: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    background: hsl(204, 43%, 93%);
}
ここでは、Googleフォントからフォントをインポートします.そして、すべての要素のために境界ボックスを定める箱を加えました.
そして、ウェブページの上で水平に、そして、垂直にすべてを中心にボディーの上でflexboxを使用しました.
/* main design */
.container {
    width: 680px; 
    max-width: 100%;
    box-shadow: 0 14px 28px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.10);   
}

h2 {
    font-size: 21px;   
}
私たちはコンテナに680 pxの固定幅を与え、箱の影を追加しました.
このように見える

/* top styles */
.top {
    background: #fff; 
    padding: 40px 30px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
}

h1 {
    color: hsl(179, 62%, 43%); 
}

.top h2 { 
    color: hsl(71, 73%, 54%);
}

.top p {
    color: hsl(218, 22%, 67%);
    line-height: 1.6; 
    font-size: 18px; 
}
ここでは、トップの背景色を白、いくつかのパディングを与えた.
その後、ヘッダーと段落をスタイルします.


/* bottom styles */
.bottom {
    color: #fff; 
    display: flex; 
}

p, ul {
    opacity: .7;    
}

/* left */ 

.left {
    background: hsl(179, 62%, 43%);
    flex: 1; 
    padding: 40px 30px; 
    border-bottom-left-radius: 5px; 
}

.left span.big {
    font-size: 50px;
    font-weight: 700; 
    color: #fff;  
    opacity: 1; 
    margin-right: 10px;  
}

button {
    width: 100%; 
    border: 0; 
    background: hsl(71, 73%, 54%);
    padding: 15px 0; 
    font-size: 20px; 
    color: #fff; 
    font-weight: 700; 
    border-radius: 5px;  
    margin-top: 20px;    
}
我々は、左と右の互いの隣にスタックので、下のセクションに表示flexを追加しました.
その後、左のセクションをスタイルしました.

/* right */

.right {
    background: hsl(179, 62%, 46%); 
    flex: 1; 
    padding: 40px 30px; 
    border-bottom-right-radius: 5px; 
}

ul {
    list-style-type: none; 
    padding: 0; 
}

li {
    line-height: 1.7;   
}
このスニペットでは、右下のセクションをスタイルし、リストをスタイリングしました.
これはデスクトップデザインです.

今、我々はモバイル版を設計するつもりです.

@media screen and (max-width:800px) {
    body {
        height: auto; 
    }

    .top,
    .left,
    .right {
        border-radius: 0;  
    } 

    .bottom {
        display: block; 
    }
}
モバイル版では、左と右のお互いのトップを言うように、我々はちょうど表示ブロックに底部の表示フレックスを削除しました.


前職
Build 10 CSS projects: project 3

結論
読書ありがとう.
閉じるこの動画はお気に入りから削除されています.
そして、あなたが私が@ coderamringでTwitterで私に続くものを知っていたいならば
EL (Expression Language)
MySqlテーブルのテーブル名にキーワードがあります.どのように処理しますか.