10日で10 CSSプロジェクトを構築:プロジェクト8
17446 ワード
10日目のCSSプロジェクトの日8とプロジェクト8です.
あなたがこのシリーズから他の記事を読んでいないならば、最初に彼らをチェックしてください.この記事の最後にそれらを見つけることができます.
今日、我々は"Base Apparel coming soon page
"からFrontendmentorを造るつもりです
開始前は、スターターファイルfrom here をダウンロードしますコードエディターでスターターファイルを開きます. スタイルを作成します.CSSファイルとHTMLファイル にリンクしますスタイルガイドをチェックしてください.MDファイル
パート1 : HTML
パート2 : CSS
その後、フォントを本体に追加し、マージンとパディングを削除しました.
と右のセクションに背景画像を追加しました.
とデスクトップヒーローを削除し、モバイルヒーローを挿入しました.
前職
結論
今日のプロジェクトのためです.あなたが記事が好きで、この1つのようなより多くの記事が欲しいならば、以下を考慮してください.
また、Twitterで私と接続することができます
読書ありがとう.
あなたがこのシリーズから他の記事を読んでいないならば、最初に彼らをチェックしてください.この記事の最後にそれらを見つけることができます.
今日、我々は"Base Apparel coming soon page
"からFrontendmentorを造るつもりです
開始前
パート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"
/>
<title>Frontend Mentor | Base Apparel coming soon page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="container">
<section class="left">
<div class="inner">
<img src="./images/logo.svg" alt="logo" class="logo" />
<img src="./images/hero-mobile.jpg" alt="hero-mobile" class="mobile-hero">
<h1><span>We're</span> coming soon</h1>
<p>
Hello fellow shoppers! We're currently building our new fashion store.
Add your email below to stay up-to-date with announcements and our
launch deals.
</p>
<form>
<input type="email" placeholder="Email Address" />
<button><img src="./images/icon-arrow.svg" alt="" /></button>
</form>
</div>
</section>
<section class="right desktop-hero"></section>
</main>
</body>
</html>
これはHTML、コピー、ペーストです.そして、一度それをスキャンして、あなたが我々がスタイリングであることを知っているように.パート2 : CSS
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
margin: 0;
padding: 0;
}
まず、Googleフォントからフォントをインポートしました.ボーダーとパディングが幅の中にとどまるように、あらゆる箱に境界ボックスをボックス化することを加えました.その後、フォントを本体に追加し、マージンとパディングを削除しました.
/* main style */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.left {
width: 60%;
}
/* right */
.desktop-hero {
background: url("./images/hero-desktop.jpg") center no-repeat;
background-size: cover;
width: 40%;
height: 100vh;
}
ここでは、我々は、フレックスボックスでコンテナを中心に.次に、左セクション幅を60 %、右区間幅を40 %とした.と右のセクションに背景画像を追加しました.
.inner {
width: 70%;
margin: 0 auto;
}
.logo {
width: 200px;
}
.mobile-hero {
display: none;
}
h1 {
font-size: 4.5rem;
text-transform: uppercase;
letter-spacing: 5px;
color: hsl(0, 6%, 24%);
margin-bottom: 0;
}
h1 span {
font-weight: 300;
color: hsl(0, 36%, 70%);
}
p {
line-height: 1.8;
color: hsl(0, 36%, 70%);
}
form {
position: relative;
}
input {
width: 100%;
padding: 1rem 1.5rem;
outline: none;
border: 2px solid hsl(0, 36%, 70%);
border-radius: 5rem;
font-size: .9rem;
}
input::placeholder {
color: hsl(0, 36%, 70%);
}
button {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: .5rem 2rem;
border-radius: 5rem;
border: 2px solid hsl(0, 36%, 70%);
background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%) );
}
この部分では、モバイルヒーローを削除するので、それだけでモバイルで表示されます.その後、タイトル、段落、フォームをスタイルしました.@media screen and (max-width:900px) {
.container {
height: auto;
margin: auto;
}
.left {
width: 100%;
}
.inner {
width: 100%;
margin: auto;
}
h1 {
font-size: 3.5rem;
text-align: center;
}
p, form {
margin: 20px 40px;
text-align: center;
}
.logo {
margin: 20px;
text-align: left;
}
.desktop-hero {
display: none;
}
.mobile-hero {
display: block;
width: 100%;
}
}
これは携帯電話のデザインです.ここでは容器の固定高さを取り除いた.そして、タイトルと段落を少し小さくしました.とデスクトップヒーローを削除し、モバイルヒーローを挿入しました.
前職
結論
今日のプロジェクトのためです.あなたが記事が好きで、この1つのようなより多くの記事が欲しいならば、以下を考慮してください.
また、Twitterで私と接続することができます
読書ありがとう.
Reference
この問題について(10日で10 CSSプロジェクトを構築:プロジェクト8), 我々は、より多くの情報をここで見つけました https://dev.to/coderamrin/build-10-css-projects-in-10-days-project-8-2bjbテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol