Skip to content

Commit

Permalink
Finished landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@dellaighted
dellaighted committed Jun 14, 2024
1 parent fa5a888 commit c08eb2a
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 42 deletions.
54 changes: 36 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,19 @@

<body>
<div class="container">
<!--This is the header (blue) section-->
<div id="section-one">
<div class="header-top">
<div class="logo">Header Logo</div>
<ul class="list">
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
</ul>
</div>

<!--This is the header section-->
<div class="header">
<div class="logo">Header Logo</div>
<ul class="list">
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
</ul>
</div>

<!--This is the first section-->
<div class="section-one">
<div class="header-bottom">
<div class="textbox">
<div class="big">This website is awesome</div>
Expand All @@ -33,35 +35,51 @@
</div>
</div>

<!--This is the second (white) section-->
<!--This is the second section-->
<div class="section-two">
<p class="info">Some random information.</p>
<div class="box-row">
<div class="box-container">
<div class="box"></div>
<p>Some text here</p>
<p>this is some subtext under an illustration or image</p>
</div>
<div class="box-container">
<div class="box"></div>
<p>Some text here</p>
<p>this is some subtext under an illustration or image</p>
</div>
<div class="box-container">
<div class="box"></div>
<p>Some text here</p>
<p>this is some subtext under an illustration or image</p>
</div>
<div class="box-container">
<div class="box"></div>
<p>Some text here</p>
<p>this is some subtext under an illustration or image</p>
</div>
</div>
</div>

<!--This is the third (gray) section-->
<!--This is the third section-->
<div class="section-three">
<p id="quote">
“Happiness is not something ready made. It comes from your own actions.”
This is an inspiring quote, or a testimonial from a customer.
Maybe it's just filling up space, or maybe people will actually read it.
Who knows? All I know is that it looks nice.
</p>
<p id="author">Dalai Lama XIV</p>
<p id="author">-Thor, God of Thunder</p>
</div>

<!--This is the fourth section-->
<div class="section-four">
<div class="section-four-text">
<p id="big-text">Call to action! It's time!</p>
<p id="little-text">Sign up for our product by clicking that button right over there!</p>
</div>
<div id="bottom-button">Sign up</div>
</div>

<!--This is the footer-->
<div class="footer">
<p>Copyright © The Odin Project 2021</p>
</div>

</div>
Expand Down
96 changes: 72 additions & 24 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
.container{
display: flex;
flex-direction: column;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#section-one{
background-color:#1F2937;
color:#F9FAF8;
font-family: 'roboto';
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: stretch;
}

.header-top{
.header{
display: flex;
flex-direction: row;
justify-content: space-between;
color: white;
background-color:#1F2937;
align-items: center;
margin-top: 20px;
margin-left: 200px;
margin-right: 200px;
padding-top: 20px;
padding-left: 200px;
padding-right: 200px;
}

.logo{
Expand All @@ -36,6 +29,16 @@
color: #E5E7EB;
}

.section-one{
background-color:#1F2937;
color:#F9FAF8;
font-family: 'roboto';
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: stretch;
}

.header-bottom{
font-weight: 800;
display: flex;
Expand Down Expand Up @@ -91,40 +94,85 @@ figcaption{
display: flex;
flex-direction: row;
font-size: 20px;
margin-left: 200px;
margin-right: 200px;
justify-content: center;
margin: 0 300px 70px 300px;
}

.box-container{
display: flex;
flex-direction: column;
margin: 40px;
align-items: center;
text-align: center;
padding: 30px;
}

.box{
border-style: solid;
border-color: #3882f6;
width: 100px;
height: 100px;
width: 150px;
height: 150px;
border-radius: 10px;
}

.section-three{
display: flex;
flex-direction: column;
background-color: silver;
padding: 80px;
justify-content: center;
align-items: center;
}

#quote{
font-style: italic;
font-size: 36px;
text-align: center;
font-weight: 100;
text-align: left;
padding: 50px 300px 0 300px;
margin-right: 70px;
}

#author{
font-size: 20px;
font-weight: bold;
text-align: right;
padding-right: 150px;
padding-left: 500px;
padding-bottom: 100px;
}

.section-four{
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #3882f6;
margin: 80px 150px;
}

.section-four-text{
flex-direction: column;
color:white;
padding: 30px 150px;
}

#big-text{
font-size: 30px;
font-weight: 800;
}

#little-text{
font-size: 20px;
}

#bottom-button{
margin: 100px 200px 100px 20px;
border-style: solid;
padding: 10px 15px;
border-color: white;
border-radius: 10px;
color: white;
}

.footer{
background-color: #1F2937;
color:white;
font-size: 20px;
padding: 20px;
text-align: center;
}

0 comments on commit c08eb2a

Please sign in to comment.