10h30/odin-landing-page
1
0
Fork 0
mirror of https://github.com/10h30/odin-landing-page.git synced 2026-07-11 18:55:58 +09:00
Code Issues Packages Projects Releases Wiki Activity

Add more style to style.css

Browse Source
This commit is contained in:
Thuan Bui
2025-02-08 19:59:45 +09:00
parent 9a4f1c8a51
commit 5918d39091
2 changed files with 53 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+18 -13
View File
@@ -8,17 +8,19 @@
</head>
<body>
<header class="header">
<div class="header-wrap">
<div class="logo">HeaderLogo</div>
<div class="nav">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li><a href="#product">Product</a></li>
<li><a href="#quote">Quote</a></li>
<li><a href="#cta">CTA</a></li>
</ul>
</div>
</div>
</header>
<div class="hero">
<div id="hero">
<div class="hero-wrap">
<div>
<h1>This is awesome</h1>
<p>This is an awesome website that I am developing.</p>
@@ -27,9 +29,10 @@
<div>
<img src="https://dev.toanphu.vn/wp-content/uploads/6-4-1000x667.jpg">
</div>
</div>
</div>
<div class="product">
<h3>This is Product List</h3>
<div id="product">
<h2>This is Product List</h2>
<div class="product-loop">
<div>Product 1</div>
<div>Product 2</div>
@@ -37,12 +40,14 @@
<div>Product 4</div>
</div>
</div>
<div class="quote">
<blockquote>When you can’t find someone to follow, you have to find a way to lead by example.
<cite>Roxane Gay</cite>
</blockquote>
<div id="quote">
<div class="quote-wrap">
<blockquote>When you can’t find someone to follow, you have to find a way to lead by example.
<cite>Roxane Gay</cite>
</blockquote>
</div>
</div>
<div class="call-to-action">
<div id="cta">
<div class="blue-box">
<div class="left">
<h3>Call to Action. It's Time</h3>
@@ -53,6 +58,6 @@
</div>
</div>
</div>
<footer class="footer">Footer</footer>
<footer class="footer">Copyright 2025. Made with love by Thuan Bui</footer>
</body>
</html>
style.css
+35 -13
View File
@@ -57,12 +57,16 @@ body {
font-family: Roboto;
margin: 0
}
header {
background-color: var(--dark-background);
color: #F9FAF8;
.header-wrap,
.hero-wrap {
max-width: 1024px;
display: flex;
justify-content: space-between;
align-items: center;
}
header {
background-color: var(--dark-background);
color: #F9FAF8;
padding: 20px 40px;
}
@@ -76,7 +80,12 @@ header .nav ul {
gap: 20px
}
.hero {
header .nav ul a {
color: #e5e7eb;
font-size: 18px;
text-decoration: none;
}
#hero {
background-color: var(--dark-background);
color: #F9FAF8;
display: flex;
@@ -85,11 +94,17 @@ header .nav ul {
padding: 40px;
}
.hero h1 {
#hero h1 {
font-size: 48px;
color: #F9FAF8;
font-weight: 900;
}
#hero p {
color: #e5e7eb;
font-size: 18px;
}
.button {
background-color: #3882F6;
color: #FFF;
@@ -105,14 +120,17 @@ header .nav ul {
border: 1px solid #FFF;
}
.hero div {
#hero div {
flex: 1;
}
.product {
padding: 40px;
#product {
padding: 60px 0;
text-align: center;
}
#product h2 {
margin-bottom: 30px;
}
.product-loop {
display: flex;
@@ -120,14 +138,17 @@ header .nav ul {
.product-loop div {
flex: 1;
}
.quote {
#quote {
background: #e5e7eb;
padding: 40px;
font-size: 36px;
color: #1F2937;
font-style: italic;
font-weight: 300;
}
.quote-wrap {
max-width: 900px;
padding: 60px 40px;
}
cite {
font-size: 18px;
@@ -136,11 +157,11 @@ cite {
font-weight: 600;
}
.call-to-action {
#cta {
padding: 40px;
}
.call-to-action .blue-box {
#cta .blue-box {
background-color: #3882F6;
padding: 20px;
display: flex;
@@ -152,6 +173,7 @@ cite {
footer {
background-color: var(--dark-background);
color: #F9FAF8;
padding: 10px 40px;
padding: 20px 40px;
text-align: center;
}