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 draft content for header and hero section

Browse Source
This commit is contained in:
Thuan Bui
2025-02-08 19:14:57 +09:00
parent 20cb4955a0
commit d233d6919d
2 changed files with 56 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+15 -4
View File
@@ -7,12 +7,23 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">Header</header>
<div class="main">
<div class="hero">Hero</div>
<header class="header">
<div class="content-wrap">
<div class="logo">HeaderLogo</div>
<div class="nav">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</header>
<div class="hero">
<div class="content-wrap">Hero</div>
</div>
<div class="section1">Section 1</div>
<div class="section2">Section 2</div>
</div>
<footer class="footer">Footer</footer>
</body>
</html>
style.css
+40
View File
@@ -0,0 +1,40 @@
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
:root {
--dark-background: #1F2937;
}
body {
font-family: Roboto;
}
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;
}
header .logo {
font-size: 24px;
}
header .nav ul {
list-style: none;
display: flex;
gap: 20px
}
.hero {
background-color: var(--dark-background);
color: #F9FAF8;
}
footer {
background-color: var(--dark-background);
color: #F9FAF8;
padding: 10px 40px;
}