Scribd
Upload
3 views

day13-class-notes

Uploaded by

mayankwanjari90
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

day13-class-notes

Uploaded by

mayankwanjari90
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<footer>

-> It defines the content to display at the bottom margin of a web page.
-> Typically footer comprises of copyrights, contact details, social bars,
services etc.

<aside>
-> It defines the content which is not relative to current context or that
navigates the user to another website.
-> It contains the content outside the current context.

syntax:
<aside>
social media ads,....
</aside>

Note: display : flex -> Keeps flexible columns, which changes according to the
width of the screen.
display : grid -> Keeps fixed no of columns.
Default screen width is 1200px, so max no of columns in a page is 12.
we can split the grid into columns using "grid-template-columns".
Every columns size can be set using pixel or fractions.
eg:: 200px 5fr
pixels are fixed and fractions are responsive[will be adjusted as per the
width of the screen].

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FooterPage</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-
icons.css">
<style type="text/css">
footer{
background-color: black;
color:white;
font-family: Arial;
padding:10px;

/*Arranging the columns through grid style */


display: grid;
grid-template-columns: 2.4fr 2.4fr 2.4fr 2.4fr 2.4fr;
}
.footer-brand-name{
font-weight: bold;
font-size:15px;
padding:10px;
}
.data~span{
display: block;
font-size:8px;
color:grey;
padding:2px;

}
aside span{
margin-right:8px;
}
.data div{
padding-bottom: 10px;
}

</style>
</head>
<body>
<footer>
<div>
<div class="footer-brand-name">
Shopper.
</div>
<aside>
<span class="bi bi-facebook"></span>
<span class="bi bi-youtube"></span>
<span class="bi bi-instagram"></span>
<span class="bi bi-twitter"></span>
</aside>
</div>

<div >
<div class="data">SUPPORT</div>
<span>Contact Us</span>
<span>FAQs</span>
<span>Size Guide</span>
<span>Shipping & Returns</span>
</div>

<div >
<div class="data">Shop</div>
<span>Men's Shopping</span>
<span>Women's Shopping</span>
<span>Kids' Shopping</span>
<span>Discounts</span>
</div>

<div >
<div class="data">Company</div>
<span>Our Story</span>
<span>Careers</span>
<span>Terms & Conditions</span>
<span>Privacy & Cookie policy</span>
</div>

<div >
<div class="data">Contact</div>
<span>1-202-555-0105</span>
<span>1-202-555-0106</span>
<span>[email protected]</span>
</div>

</footer>
</body>
</html>

You might also like