ハウツーとスタイル

ようこそ！

我々が去ったところ－GitHub
今日やっていること

ベース層アプリケーション

の構築

後ろから始める

最後の章で論じたように、デザインをコンポーネントの階層構造に分解しました.デザイン内のすべてのコンポーネントは、1つのコンポーネントの上に構築されます.Appコンポーネント.
アプリケーションコンポーネントは、Webページの背景として動作し、アプリケーション間でコンテキストを提供します.
Webページの主な特徴は、光の暗い垂直勾配ですので、私たちが開始されます.
新しいアプリケーションでスタイルと呼ばれる新しいディレクトリを作成します.CSSファイル.我々は今、アプリケーションコンポーネントにインポートします.

import './styles/App.css'

function App() {
  return (
    <>
      Hello World!
    </>
  );
}

CSS Gradientと呼ばれるきちんとしたウェブサイトを使用することで、CSSを簡単に作成できます.

body {
  background: linear-gradient(0deg, rgba(0, 3, 10, 1) 0%, rgba(0, 25, 34, 1) 100%);
  height: 2779px;
}

コンポーネントの追加を開始するまで、デザインが指定する高さをハードコーディングしました.

構造が必要

今、我々はミックスにボディコンポーネントを追加することによって始めることができる背景を完了しました.
このために、コンポーネントディレクトリ内に新しいbodyコンポーネントを作成します.
本体は、アプリケーション内の主要なコンポーネントを収容し、ユーザーがサイトをブラウズするセンターピースになります.しかし、平均時間のために、我々は今のところそれのためにCSSを実行しています.
bodyコンポーネント内ではまずボディをインポートしなければなりません.CSSファイル、10分間何か忘れてしまったこと.Figma仕様に従って、我々は80 %の不透明度で中心的な黒い背景を作成しなければなりません.これを実現するには、次のように実装します.

.frame {
  background: rgba(0, 0, 0, .8);
  height: 2779px;
  width: 720px;
}

.x-center {
  margin: auto;
}

function Body() {
  return (
    <div className='frame x-center'>

    </div>
  )
}

これは次のようになります.

最後のフッター

我々が終わる前に、フッターのためにフレーミングを加えます.同様のプロセスに従い、次のようになります.

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 71, 98, 0.2);
  height: 79px;
  width: 100%;
}

import '../styles/Footer.css'

function Footer() {
  return (
    <>
      <div className='footer'></div>
    </>
  )
}

最終的なデザインは現在このように見えます(これは拡大されています).

ギタブ

我々がどこにいるかについて見るために、各々のポストの終わりに最終的なコミットにこのlinkに続くことができます!