I have 4 Div with class col-md-3 in one row
but the text does appear really ugly. i have made an little overview here:
Prod. Comp. (middle) lang. div4
text texttext text text
textta text txt txt
this means, the text is not under the /Product, company, languange, and the 4th Division
i want to have it look like this
div1 div2 (middle) div3 div4
text texttext text text
textta text txt txt
here is my code
HTML:
<div class="container">
<div class="row" id="footerRow">
<div class="col-xs-12 col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2> </h2>
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
here is my css code:
#footerRow{
text-align: center;
}
the solution should be responsive bootstrap if possible!
Remove padding and margin for zero. Remove text-align:center for #footerRow
#footerRow ul {margin:0px;padding:0px}
#footerRow ul li{
text-align: left;
list-style:none
}
#footerRow h2{min-height:30px}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="footerRow">
<div class="col-xs-12 col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2> </h2>
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
Just change center to left
text-align: left
Here are a few examples.
see if this is what you'r looking for https://jsfiddle.net/DTcHh/26745/
just remove
#footerRow{
text-align: center;
}
try to this...
ol, ul {list-style: none;}
#footerRow ul {margin:0px;padding:0px}
<!DOCTYPE html>
<html>
<head>
<title>Stack Overflow</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row" id="footerRow">
<div class="col-xs-12 col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2> Div4</h2>
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Here JSFiddle Here enter link description here
ul{
list-style-type: none;
padding: 0px;
}
#footerRow{
display: inline-flex;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="footerRow">
<div class="col-xs-12 col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Social </h2>
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
Related
So I am trying to create a footer and I have a couple of links featured however the default text-decoration on the links is weirdly not responding to text-decoration none. All the other text-decoration options are working except the text-decoration none. I have even tried making changes to the bootstrap.min.css file as I saw it suggested as a solution however it hasn't worked.
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item{
text-decoration: none;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
'none' option.
Give it to the a-element
.company-item a {
text-decoration: none;
color: inherit;
}
This would be your code:
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a{
text-decoration: none;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
You have to use company-item a when styling because links are styled by default so you have to call directly to that element. Also, added !important; for good measures.
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a {
text-decoration: none !important;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a{
text-decoration: none;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
i think the problem was it was selecting the list items and not the links
anyway this works
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
I want to put the ul next to each other so that they are side by side. I tried using inline-block and float left, but it looks messy.
.left{
position:absolute;
padding-left:200px;
}
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
You can do it like this. This is one way.
i pretend to make this first column fixed, but when i add position:fixed, the columns overlap each other, how to fix this?
If its not possible, i want to know a sample that gives me a
side navbar fixed and responsive with bulma
<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile">
<p class="menu-label is-hidden-touch">Header</p>
<ul class="menu-list">
<li>
CIT
<ul><li>Items</li><li>Items</li>
</ul>
</li>
<li>
Other
<ul>
<li>other</li>
</ul>
</li>
</ul>
</aside>
<div class="container column is-10">
<div class="section">
<div class="card">
<div class="card-header" id="go-first">
<p class="card-header-title">CIT</p>
</div>
<div class="card-content">
<div class="content">
header
</div>
<div class="columns">
<div class="column">
...
</div>
</div>
</div>
</div>
</div>
</div>
</section>
```
As I understood, your sidebar disappears on mobile, right?
Have you tried removing is-hidden-mobile class from aside element?
<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section">
<p class="menu-label is-hidden-touch">Header</p>
<ul class="menu-list">
<li>
CIT
<ul><li>Items</li><li>Items</li>
</ul>
</li>
<li>
Other
<ul>
<li>other</li>
</ul>
</li>
</ul>
</aside>
<div class="container column is-10">
<div class="section">
<div class="card">
<div class="card-header" id="go-first">
<p class="card-header-title">CIT</p>
</div>
<div class="card-content">
<div class="content">
header
</div>
<div class="columns">
<div class="column">
...
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I am trying to put a div next to each other. I have tried to use float: left etc, also I am using bootstrap however I have tried the column setting but it does not work,
HTML:
<div class="container">
<div class="Mainbody2">
<div class="ref1">
<h2>About</h2>
<p>Text GOES HERE</p>
<h2>Statement!</h2>
<p>STATMENT GOES HERE</p><br />
<br />
<br />
<h2>Number1</h2>
<ul>
<li>link1</li>
<li>link1</li>
<li>link1</li>
<li style="list-style: none"><br /></li>
<li>link1</li>
<li>link1</li>
<li>link1</li>
<li style="list-style: none"><br /></li>
</ul>
</div>
<div class="ref2">
<h2>Description</h2>
<ul>
<li>link2</li>
<li>link2</li>
<li>link2</li>
<li style="list-style: none">
<br />
<h2>Libraries</h2>
</li>
<li>link2</li>
<li>link2</li>
<li>link2</li>
</ul>
</div>
</div>
</div>
Link to Fiddle
Just to make it clear i am trying to get Description next to Number 1 and then Libraries next to description
Thanks again for the help
See this fiddle
I've changed your HTML a bit as below
<div class="container">
<div class="Mainbody2">
<div class="ref1">
<div class="left">
<h2>About</h2>
<p>Text GOES HERE </p>
<h2>Statement!</h2>
<p>
STATMENT GOES HERE
</p>
</div>
<div class="right">
<h2>Description</h2>
<li> link2</li>
<li> link2</li>
<li> link2</li>
</div>
</div>
<div class="ref2">
<div class="left">
<h2>Number1</h2>
<li> link1</li>
<li> link1</li>
<li> link1</li>
<br>
<li> link1</li>
<li> link1</li>
<li> link1</li>
</div>
<div class="right">
<h2>Libraries</h2>
<li> link2</li>
<li> link2</li>
<li> link2</li>
</div>
</div>
</div>
</div>
also, added the below CSS
.left,
.right,.ref1,.ref2 {
float: left;
}
.ref1,.ref2{
padding:10px;
width:100%;
}
.left,.right{
width:50%;
}
add md and sm to you div <div class="col-lg-2 col-md-2 col-sm-2">
<div class="container">
<div class="Mainbody2">
<div class="col-md-2 col-sm-2 col-xs2">
<h2>About</h2>
<p>Text GOES HERE </p>
<h2>Statement!</h2>
<p>
STATMENT GOES HERE
</p>
<br /> <br /> <br />
<h2>Number1</h2>
<li> link1</li>
<li> link1</li>
<li> link1</li>
<br />
<li> link1</li>
<li> link1</li>
<li> link1</li>
<br />
</div>
<div class="col-md-2 col-sm-2 col-xs2">
<h2>Description</h2>
<li> link2</li>
<li> link2</li>
<li> link2</li>
<br />
<h2>Libraries</h2>
<li> link2</li>
<li> link2</li>
<li> link2</li>
</div>
</div>
</div>
see js fiddle http://jsfiddle.net/vrupp3wr/
set the proper col lenght for your need
Have you tried something like this?
<div class="row">
<div class="col-md-4">column 1</div>
<div class="col-md-4">column 2</div>
<div class="col-md-4">column 3</div>
</div>
With Bootstrap you have to designate one div as a row and the nested divs can be columns.
this works for me
<div class="row">
<div class="col-xs-6">
<div class="panel">
<fieldset>
<legend>Legend</legend>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one
</label>
</div>
</fieldset>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="exampleInputEmail">
Email address</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
</div>
</fieldset>
</div>
</div>
</div>
Hi I am trying to display 5 responsive rows in one line in footer but it seems like its not working exactly the way I want it.
Here is my code
<footer>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="col-md-2 customer">
<h3>Customer Service</h3>
<p>Unit 36/65 Marigold St,Revesby
NSW 2212 <br>
P | (02) 9773 8773
<br>
F | (02) 977 8125
<br>
E | info#trevell.com.au</p>
</div>
<div class="col-md-2 col-md-offset-1 company">
<h3>The Company</h3>
<ul>
<li>Our Profile</li>
<li>Home Designs</li>
<li>Showcase</li>
<li>Commercial</li>
<li>Career</li>
<li>Blog</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-md-2 dc">
<h3>Our Display Center</h3>
<ul>
<li>Freemans Ridge Estate</li>
<li>Homeworld Camden South</li>
<li>Brooks Beach Estate Horsley</li>
</ul>
</div>
<div class="col-md-2 lp">
<h3>House & Land Packages</h3>
<ul>
<li>House & Land Packages</li>
<li>Display Home for Sale</li>
</ul>
</div>
<div class="col-md-2 nl">
<h3>Newsletter</h3>
<p>Be the first to know about Trevelle Special offers</p>
<i class="fa fa-envelope fa-2x"></i>
</div>
</div>
</div>
</div>
</footer>
I even tried to replace col-md-2 with col-md-3 but the last columns moves to next line. Here is attached image I am trying to make exact like this Image
Follow this example
CSS:
#media(min-width:768px){
div.col-sm-7.seven-three{width:60%!important;}
div.col-sm-5.five-two{width:40%!important;}
}
HTML:
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 seven-three">
<div class="row">
<div class="col-sm-4" style="background-color:#000;">Column 1</div>
<div class="col-sm-4" style="background-color:#333;">Column 2</div>
<div class="col-sm-4" style="background-color:#444;">Column 3</div>
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6" style="background-color:#555;">Column 4</div>
<div class="col-sm-6" style="background-color:#666;">Column 5</div>
</div>
</div>
</div>
</div>
Here's JSFiddle
Try this
<footer>
<div class="container">
<div class="row">
<div class="col-md-2 customer">
<h3>Customer Service</h3>
<p>Unit 36/65 Marigold St,Revesby
NSW 2212 <br>
P | (02) 9773 8773
<br>
F | (02) 977 8125
<br>
E | info#trevell.com.au</p>
</div>
<div class="col-md-2 company">
<h3>The Company</h3>
<ul>
<li>Our Profile</li>
<li>Home Designs</li>
<li>Showcase</li>
<li>Commercial</li>
<li>Career</li>
<li>Blog</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-md-3 dc">
<h3>Our Display Center</h3>
<ul>
<li>Freemans Ridge Estate</li>
<li>Homeworld Camden South</li>
<li>Brooks Beach Estate Horsley</li>
</ul>
</div>
<div class="col-md-3 lp">
<h3>House & Land Packages</h3>
<ul>
<li>House & Land Packages</li>
<li>Display Home for Sale</li>
</ul>
</div>
<div class="col-md-2 nl">
<h3>Newsletter</h3>
<p>Be the first to know about Trevelle Special offers</p>
<i class="fa fa-envelope fa-2x"></i>
</div>
</div>
</div>
</footer>
you shouldn't use nesting col under a row, and keep all children of row plus to 12
<footer class="container">
<div class="col-md-12 row">
<div class="col-md-3">
<div class="comp-name">
<h2>Company Name</h2><br>
<p>Halimun Street 25
Jakarta, Indonesia
12850</p><br>
YourDomin.com
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="row">
<div class="col-md-4 menu-list">
<ul>
<li>Sitemap</li>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Menu</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-4 lorem">
<ul>
<li>Lorem Ipsum</li>
<li>Neque</li>
<li>Suspendisse</li>
<li>Dictum</li>
<li>Porttitor</li>
<li>Tincidunt</li>
<li>Enim lobortis</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li>Lorem Ipsum</li>
<li>Neque</li>
<li>Suspendisse</li>
<li>Dictum</li>
<li>Porttitor</li>
<li>Tincidunt</li>
<li>Enim lobortis</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img src="assets/images/footer_logo.png" alt=""><br>
<p class="text-muted">Copyright © <?php print date("Y"); ?> Freepik
Company S.L. All rights reserved.</p><br>
<p>
<i class="fa-brands fa-facebook-square"></i>
<i class="fa-brands fa-instagram-square"></i>
<i class="fa-brands fa-twitter-square"></i>
</p>
</div>
</div>
</footer>