I'm trying to clone the Google home page and I designed the footer using flexbox, but now I can't position it at the bottom of the page. How can I fix that or is there any other technique to tackle this problem.
Here is the screenshot and code of the page. I know it's messy and lack of design. First I just want to get the structure right.
```html
<body>
<div class="heading">
<div></div>
<div class="gmail">
<p>Gmail</p>
</div>
<div class="images">
<p>images</p>
</div>
<div class="gapps">
<button></button>
</div>
<div class="dp">
<p>dp</p>
</div>
</div>
<div class="container">
<div class="google-logo">
<img
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt="Google logo"
/>
</div>
<div class="search-bar">
<input
type="search"
name="q"
aria-label="Search through site content"
/>
</div>
<div class="search-buttons">
<div class="search-button">
<button>Google Search</button>
</div>
<div class="feeling-lucky">
<button>I'm Feeling Lucky</button>
</div>
</div>
</div>
<div class="footer">
<div class="srilanka">
<p>Sri Lanka</p>
</div>
<div class="footer-bottom">
<div class="footer-bottom-left">
<div class="about">
<p>About</p>
</div>
<div class="advertising">
<p>Advertising</p>
</div>
<div class="business">
<p>Business</p>
</div>
<div class="how-search-works">
<p>How Search Works</p>
</div>
</div>
<div class="footer-bottom-right">
<div class="privacy">
<p>Privacy</p>
</div>
<div class="terms">
<p>Terms</p>
</div>
<div class="settings">
<p>Settings</p>
</div>
</div>
</div>
</div>
</body>
```
```css
body {
height: 100%;
}
body {
font-size: 14px;
font-family: arial, sans-serif;
color: #222;
}
.heading {
display: flex;
justify-content: flex-end;
padding-bottom: 100px;
}
.gmail {
padding: 0 15px;
}
.images {
padding: 0 15px;
}
.gapps {
padding: 0 15px;
}
.dp {
padding: 0 15px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.google-logo {
padding-bottom: 3vh;
}
.search-bar {
padding-bottom: 3vh;
}
.search-buttons {
display: flex;
justify-content: center;
}
.feeling-lucky {
padding-left: 2vh;
}
.footer {
display: flex;
flex-direction: column;
}
.footer-bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-bottom-left {
display: flex;
}
.srilanka {
padding: 0 15px;
}
.about {
padding: 0 15px;
}
.advertising {
padding: 0 15px;
}
.business {
padding: 0 15px;
}
.how-search-works {
padding: 0 15px;
}
.privacy {
padding: 0 15px;
}
.terms {
padding: 0 15px;
}
.settings {
padding: 0 15px;
}
.footer-bottom-right {
display: flex;
justify-items: flex-end;
}
```
Aucun commentaire:
Enregistrer un commentaire