tod
/
odin-landing-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initlal commit, forgot to preserve changes 

My bad, didn't commit every breakthrough and parts (shrug...)

Well then, better luck next time, future me!

But the project has been completed, but it looks smallish in the browser, maybe modify it later? In the small simple VS Code browser it looks good and fine
This commit is contained in:
NetMan 2023-12-29 19:42:25 +01:00
commit 14668850d2
4 changed files with 280 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

92
index.html Normal file
View File

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="enclosure darkblue">
<div class="header">
<div class="logo">Header Logo</div>
<div class="navbar">
<ul>
<li>
<a href="#">header link one</a>
</li>
<li>
<a href="#">header link two</a>
</li>
<li>
<a href="#">header link three</a>
</li>
</ul>
</div>
</div>
</div>
<div class="enclosure darkblue">
<div class="nutshell">
<div class="text">
<h1 class="caption">This website is awesome</h1>
<span class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam, quos, provident unde quaerat cupiditate, recusandae delectus voluptate sapiente.</span>
<button>Sign up</button>
</div>
<div class="image">
this is a placeholder for an image
</div>
</div>
</div>
<div class="enclosure white">
<div class="info">
<h1 class="caption">Information</h1>
<div class="boxes">
<div class="box">
<div class="frame"></div>
this is some subtext under an illustration or image
</div>
<div class="box">
<div class="frame"></div>
this is some subtext under an illustration or image
</div>
<div class="box">
<div class="frame"></div>
this is some subtext under an illustration or image
</div>
<div class="box">
<div class="frame"></div>
this is some subtext under an illustration or image
</div>
</div>
</div>
</div>
<div class="enclosure lightgray">
<div class="quote">
<span class="content"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, optio earum. Aperiam commodi soluta alias assumenda est velit voluptates? Eligendi sequi voluptate magni tempore amet delectus corporis praesentium.</em></span>
<br>
<span class="utterer"><strong>-Thor, God of Thunder</strong></span>
</div>
</div>
<div class="enclosure white">
<div class="fillaction">
<div class="action blue">
<div class="text">
<h3>Call to action! It's time!</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit!
</div>
<div class="button">
<button>Sign up</button>
</div>
</div>
</div>
</div>
<footer class="darkblue">
Copyright &copy; The Odin Project 2023
</footer>
</body>
</html>

188
style.css Normal file
View File

@ -0,0 +1,188 @@
body {
margin: 0;
padding: 0;
flex-direction: column;
display: flex;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
min-height: 100vh;
}
.enclosure {
display: flex;
justify-content: center;
}
.enclosure > *{
width: 1000px;
}
h1,h2,h3,h4,h5,h6 {
padding: 0;
margin: 0;
}
.darkblue {
background-color: #1f2937;
color: #fff;
}
.blue {
background-color: #3882f6;
color: #fff;
}
.logo {
font-size: 24px;
font-weight: 600;
}
.header {
display: flex;
justify-content: space-between;
gap: 35px;
padding: 10px 12px;
align-items: center;
}
.header ul {
list-style: none;
padding: 0;
display: flex;
gap: 15px;
}
.header a {
color: #fff;
text-decoration: none;
}
.nutshell {
display: flex;
padding: 30px;
justify-content: space-around;
gap: 15px;
}
.nutshell .text {
flex: 1;
}
.nutshell .content {
display: block;
padding: 5px 0 10px 0;
}
.nutshell .image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: #77777d;
}
.nutshell button {
display: block;
background-color: #3882f6;
border: none;
color: #fff;
padding: 6px 24px;
border-radius: 5px;
cursor: pointer;
}
.info {
text-align: center;
padding: 35px 20px;
}
.info .caption {
margin-bottom: 20px;
}
.white {
background-color: white;
}
.info .boxes {
display: flex;
justify-content: center;
gap: 10px;
}
.info .box {
font-size: 0.92rem;
display: flex;
flex-direction: column;
align-items: center;
width: 160px;
}
.info .frame {
border: 3px solid #3882f6;
border-radius: 10px;
height: 100px;
width: 100px;
}
.lightgray {
background-color: lightgray;
}
.quote {
padding: 70px;
}
.quote .content {
font-size: 1.6rem;
font-weight: lighter;
}
.quote .utterer {
width: 100%;
display: inline-block;
text-align: right;
}
.fillaction {
display: flex;
justify-content: center;
align-items: center;
padding: 65px 85px;
}
.fillaction .action {
flex: 1;
border-radius: 5px;
padding: 30px 60px;
display: flex;
align-items: center;
}
.fillaction .text {
flex: 1;
}
.fillaction button {
background-color: transparent;
border: 2px solid #fff;
display: block;
color: #fff;
padding: 6px 24px;
border-radius: 5px;
cursor: pointer;
width: fit-content;
}
footer {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}