Skip to content

Commit

Permalink
finished the project, not responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@timmcgeegit
timmcgeegit committed Jan 31, 2024
1 parent 4b18c13 commit e2838ac
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 30 deletions.
86 changes: 62 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,42 +8,80 @@

</head>
<body>

<div class="home-hero">
<div class="inside-hero">
<div class="inside-header">
<div class="header-logo">
Header Logo
</div>
<div id="nav" class="main-nav">
<div><a href="google.com">Page One</a></div>
<div><a>Page Two</a></div>
<div><a>Page Three</a></div>
</div>
</div>
<div class="hero-body" style="">
<div class="hero-text">
<h2>This website is awesome</h2>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur.</p>
<button class="btn">Sign up</button>
<div class="content-container">
<div class="inside-header">
<div class="header-logo">
Header Logo
</div>
<div id="nav" class="main-nav">
<div><a>Page One</a></div>
<div><a>Page Two</a></div>
<div><a>Page Three</a></div>
</div>
</div>
<div>
<img src="../odin-landing-page/assets/borbaunsplash.jpeg" alt="An image of a guy">
<div class="hero-body" style="">
<div class="hero-text">
<h2>This website is awesome</h2>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur.</p>
<button class="btn">Sign up</button>
</div>
<div>
<img src="../odin-landing-page/assets/borbaunsplash.jpeg" alt="An image of a guy">
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inside-section">
<div class="section-spacer">
<div>
<h2>Section header is here</h2>
<h2 style="text-align: center;">Section header is here</h2>
</div>
<div style="display: flex;">
<div >
<div class="content-container section-one">
<div>
<img class="featured-img" src="https://plus.unsplash.com/premium_photo-1706430116060-4055d33e5f83?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</div>
<div>
<img class="featured-img" src="https://plus.unsplash.com/premium_photo-1706430116060-4055d33e5f83?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</div>
<div>
<img class="featured-img" src="https://plus.unsplash.com/premium_photo-1706430116060-4055d33e5f83?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</div>
<div>
<img class="featured-img" src="https://plus.unsplash.com/premium_photo-1706430116060-4055d33e5f83?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</div>

</div>
<div class="section-two section-spacer">
<div class="content-container">
<p class="quote"><em>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.</em></p>
<p class="attribute">— Thor, God of Thunder</p>
</div>

</div>

<div class="section-three section-spacer">
<div class="content-container">
<div class="cta-1">
<div>
<h2>Call to action! It's time.</h2>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit.</p>
</div>
<div>
<button class="btn-white">Click Here</button>
</div>
</div>

</div>
</div>
</div>
<div class="footer">
<div><p>Copyright © The Odin Project 2024</p></div>
</div>

</body>
</html>
83 changes: 77 additions & 6 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
body {
font-family: sans-serif;
margin: 0px;
}


.home-hero {
background-color: #1f2937;
padding: 50px 20px;
margin: 0px;
width: 100%;
}

.inside-hero {
.content-container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}

.section-spacer {
margin-top: 75px;
margin-bottom: 75px;
}

.inside-header {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -72,13 +80,76 @@ body {
border-radius: 5px;
}

.inside-section {
max-width: 1000px;
.btn-white {
background-color: #1f293700;
padding: 10px 20px;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
}

.section-one {
display: flex;
flex-direction: row;
gap: 20px;
align-content: center;
justify-content: space-between;

}

.featured-img {
max-width: 100%;
}

.section-two {
background-color: #e5e7eb;
padding: 50px 20px;
}


.quote {
font-size: 26px;
color: #1f2937;
font-weight: 100;
max-width: 50ch;
margin-left: auto;
margin-right: auto;

}

img.featured-img {
aspect-ratio: 1/1;
object-fit: cover;
.attribute {
text-align: right;
font-weight: bold;
font-size: .8rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.cta-1 {
background-color: #3882f6;
color: #fff;
padding: 50px 150px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
max-width: 700px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
.cta-1 h2 {
margin-bottom: 5px;
}

.cta-1 p {
margin-top: 5px;
}

.footer {
padding: 5px;
text-align: center;
background-color: #1f2937;
color: #fff;
}

0 comments on commit e2838ac

Please sign in to comment.