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 content to index.html

Browse Source
This commit is contained in:
Thuan Bui
2025-02-08 19:44:31 +09:00
parent c8c434e8a0
commit 8d54adc739
2 changed files with 144 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+21 -5
View File
@@ -8,7 +8,6 @@
</head>
<body>
<header class="header">
<div class="content-wrap">
<div class="logo">HeaderLogo</div>
<div class="nav">
<ul>
@@ -17,21 +16,38 @@
<li>Three</li>
</ul>
</div>
</div>
</header>
<div class="hero">
<div class="content-wrap">
<div>
<h1>This is awesome</h1>
<p>This is an awesome website that I am developing.</p>
<a href="#">Sign Up</a>
</div>
<div>
<img src="https://dev.toanphu.vn/wp-content/uploads/6-4-1000x667.jpg">
</div>
</div>
<div class="product">
<h3>This is Product List</h3>
<div class="product-loop">
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<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>
<div class="call-to-action">
<div class="bule-box">
<h3>Call to Action</h3>
<button><a href="#">Click Here</a></button>
</div>
</div>
<div class="section1">Section 1</div>
<div class="section2">Section 2</div>
<footer class="footer">Footer</footer>
</body>
</html>
style.css
+123 -6
View File
@@ -1,21 +1,69 @@
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
}
/* 2. Remove default margin */
* {
margin: 0;
}
body {
/* 3. Add accessible line-height */
line-height: 1.5;
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* 5. Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}
/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
/*
9. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}
:root {
--dark-background: #1F2937;
}
body {
font-family: Roboto;
margin: 0
}
header {
background-color: var(--dark-background);
color: #F9FAF8;
padding: 10px 40px;
}
.content-wrap {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 80%;
margin: 0 auto;
padding: 20px 40px;
}
header .logo {
@@ -31,10 +79,79 @@ header .nav ul {
.hero {
background-color: var(--dark-background);
color: #F9FAF8;
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px;
}
.hero h1 {
font-size: 48px;
color: #F9FAF8;
font-weight: 900;
}
.button {
background-color: #3882F6;
color: #FFF;
text-decoration: none;
padding: 5px 20px;
border-radius: 10px;
display: inline-block;
margin-top: 10px;
}
.button.alt {
background-color: transparent;
border: 1px solid #FFF;
}
.hero div {
flex: 1;
}
.product {
padding: 40px;
text-align: center;
}
.product-loop {
display: flex;
}
.product-loop div {
flex: 1;
}
.quote {
background: #e5e7eb;
padding: 40px;
font-size: 36px;
color: #1F2937;
font-style: italic;
font-weight: 300;
}
cite {
font-size: 18px;
display: block;
text-align: right;
font-weight: 600;
}
.call-to-action {
padding: 40px;
}
.call-to-action .blue-box {
background-color: #3882F6;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: #FFF
}
footer {
background-color: var(--dark-background);
color: #F9FAF8;
padding: 10px 40px;
text-align: center;
}