Skip to content

Instantly share code, notes, and snippets.

@LaunchedBerry07

LaunchedBerry07/footer-columns.markdown

Created August 24, 2022 06:12
Show Gist options
  • Save LaunchedBerry07/7add56e5e7e45cc9b43146b55f6dc17b to your computer and use it in GitHub Desktop.
Save LaunchedBerry07/7add56e5e7e45cc9b43146b55f6dc17b to your computer and use it in GitHub Desktop.
Download ZIP
Footer Columns
Raw
index.html
<div class="container-footer w-container">
<div class="w-row">
<div class="footer-column w-clearfix w-col w-col-4"><img src="https://uploads-ssl.webflow.com/5966ea9a9217ca534caf139f/596d33f36607b12cfdaf8ad2_LogoWhite.png" alt="" width="40" class="failory-logo-image">
<h3 class="footer-failory-name">Failory</h3>
<p class="footer-description-failory">Lorem ipsum dolor sit amet.<br></p>
</div>
<div class="footer-column w-col w-col-8">
<div class="w-row">
<div class="w-col w-col-8">
<div class="w-row">
<div class="w-col w-col-7 w-col-small-6 w-col-tiny-7">
<h3 class="footer-titles">Learn</h3>
<p class="footer-links"><a href="" target="_blank"><span class="footer-link">Failed Startups<br></span></a><a href=""><span class="footer-link">Successful Startups<br></span></a><a href=""><span class="footer-link">Blog</span></a><span><br></span><a href=""><span class="footer-link">Entrepreneurial Tools<br></span></a><a href=""><span class="footer-link">Startup Cemetery<br></span></a><a href=""><span class="footer-link">Podcast</span></a><strong><br></strong></p>
</div>
<div class="w-col w-col-5 w-col-small-6 w-col-tiny-5">
<h3 class="footer-titles">Other</h3>
<p class="footer-links"><a href=""><span class="footer-link">Sponsor Us!<br></span></a><a href=""><span class="footer-link">Open Startup<br></span></a><a href=""><span class="footer-link"></span></a><a href=""><span class="footer-link">Contribute<br></span></a><a href=""><span class="footer-link">FAQ</span></a><strong><br></strong></p>
</div>
</div>
</div>
<div class="column-center-mobile w-col w-col-4">
<h3 class="footer-titles">Follow Us!</h3><a href="" target="_blank" class="footer-social-network-icons w-inline-block"><img src="https://uploads-ssl.webflow.com/5966ea9a9217ca534caf139f/5c8dbf0a2f2b67e3b3ba079c_Twitter%20Icon.svg" width="20" alt="Twitter icon"></a><a href="" target="_blank" class="footer-social-network-icons w-inline-block"><img src="https://uploads-ssl.webflow.com/5966ea9a9217ca534caf139f/5c8dbfe70fcf5a0514c5b1da_Instagram%20Icon.svg" width="20" alt="Instagram icon"></a><a href="" target="_blank" class="footer-social-network-icons w-inline-block"><img src="https://uploads-ssl.webflow.com/5966ea9a9217ca534caf139f/5c8dbe42e1e6034fdaba46f6_Facebook%20Icon.svg" width="20" alt="Facebook Icon"></a><a href="" target="_blank" class="footer-social-network-icons w-inline-block"><img src="https://uploads-ssl.webflow.com/5966ea9a9217ca534caf139f/5c8dc0002f2b676eb4ba0869_LinkedIn%20Icon.svg" width="20" alt="LinkedIn Icon"></a><a href="" target="_blank" class="footer-social-network-icons w-inline-block"><img src="https://uploads-ssl.webflow.com/5966ea9a9217ca534caf139f/5c8dc0112f2b6739c9ba0871_Pinterest%20Icon.svg" width="20" alt="Pinterest Icon" class=""></a>
<p class="footer-description">Email me at: <a href=""><strong class="link-email-footer">Lorem Ipsum</strong></a><br></p>
</div>
</div>
</div>
</div>
</div>
Raw
style.css
body {
background: #111;
}
div.container-footer.w-container {
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
max-width: 940px;
padding-bottom: 40px;
padding-top: 70px;
}
div.container-footer.w-container:after {
clear: both;
content: " ";
display: table;
grid-column-end: 2;
grid-column-start: 1;
grid-row-end: 2;
grid-row-start: 1;
}
div.container-footer.w-container:before {
content: " ";
display: table;
grid-column-end: 2;
grid-column-start: 1;
grid-row-end: 2;
grid-row-start: 1;
}
div.w-row {
box-sizing: border-box;
margin-left: -10px;
margin-right: -10px;
}
div.w-row:after {
clear: both;
content: " ";
display: table;
grid-column-end: 2;
grid-column-start: 1;
grid-row-end: 2;
grid-row-start: 1;
}
div.w-row:before {
content: " ";
display: table;
grid-column-end: 2;
grid-column-start: 1;
grid-row-end: 2;
grid-row-start: 1;
}
div.footer-column.w-clearfix.w-col.w-col-4 {
box-sizing: border-box;
float: left;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
position: relative;
width: 33.3333%;
}
div.footer-column.w-clearfix.w-col.w-col-4:after {
clear: both;
content: " ";
display: table;
grid-column-end: 2;
grid-column-start: 1;
grid-row-end: 2;
grid-row-start: 1;
}
div.footer-column.w-clearfix.w-col.w-col-4:before {
content: " ";
display: table;
grid-column-end: 2;
grid-column-start: 1;
grid-row-end: 2;
grid-row-start: 1;
}
img.failory-logo-image {
border-width: 0;
box-sizing: border-box;
display: inline-block;
float: left;
max-width: 100%;
vertical-align: middle;
}
h3.footer-failory-name {
box-sizing: border-box;
color: #FFFFFF;
display: block;
font-family: Lato, sans-serif;
font-size: 20px;
font-weight: 900;
line-height: 1.1em;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 24px;
}
p.footer-description-failory {
box-sizing: border-box;
color: rgba(255, 255, 255, 0.8);
display: block;
font-family: Lato, sans-serif;
font-size: 17px;
font-weight: 300;
letter-spacing: .5px;
line-height: 1.5em;
margin-bottom: 16px;
margin-top: 15px;
}
br {
box-sizing: border-box;
}
div.footer-column.w-col.w-col-8 {
box-sizing: border-box;
float: left;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
position: relative;
width: 66.6667%;
}
div.w-col.w-col-8 {
box-sizing: border-box;
float: left;
min-height: 1px;
padding-left: 0;
padding-right: 0;
position: relative;
width: 66.6667%;
}
div.w-col.w-col-7.w-col-small-6.w-col-tiny-7 {
box-sizing: border-box;
float: left;
min-height: 1px;
padding-left: 0;
padding-right: 0;
position: relative;
width: 58.3333%;
}
h3.footer-titles {
box-sizing: border-box;
color: #FFFFFF;
display: block;
font-family: Lato, sans-serif;
font-size: 20px;
font-weight: 900;
line-height: 1.1em;
margin-bottom: 0;
margin-left: 0;
margin-top: 24px;
}
p.footer-links {
box-sizing: border-box;
color: rgba(255, 255, 255, 0.8);
display: block;
font-family: Lato, sans-serif;
font-size: 17px;
font-weight: 300;
letter-spacing: .5px;
line-height: 1.8em;
margin-bottom: 16px;
margin-top: 2px;
}
a {
background-color: transparent;
box-sizing: border-box;
color: #FFFFFF;
font-family: Lato, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.2em;
text-decoration: none;
}
a:active {
outline: 0;
}
a:hover {
outline: 0;
}
span.footer-link {
box-sizing: border-box;
color: rgba(255, 255, 255, 0.8);
font-weight: 300;
}
span.footer-link:hover {
color: #FFFFFF;
font-weight: 400;
}
span {
box-sizing: border-box;
}
strong {
box-sizing: border-box;
font-weight: 700;
}
div.w-col.w-col-5.w-col-small-6.w-col-tiny-5 {
box-sizing: border-box;
float: left;
min-height: 1px;
padding-left: 0;
padding-right: 0;
position: relative;
width: 41.6667%;
}
div.column-center-mobile.w-col.w-col-4 {
box-sizing: border-box;
float: left;
min-height: 1px;
padding-left: 0;
padding-right: 0;
position: relative;
width: 33.3333%;
}
a.footer-social-network-icons.w-inline-block {
background-color: transparent;
box-sizing: border-box;
color: #FFFFFF;
display: inline-block;
font-family: Lato, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.2em;
margin-right: 8px;
margin-top: 10px;
max-width: 100%;
opacity: .8;
text-decoration: none;
}
a.footer-social-network-icons.w-inline-block:active {
outline: 0;
}
a.footer-social-network-icons.w-inline-block:hover {
opacity: 1;
outline: 0;
}
img {
border-width: 0;
box-sizing: border-box;
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
p.footer-description {
box-sizing: border-box;
color: rgba(255, 255, 255, 0.8);
display: block;
font-family: Lato, sans-serif;
font-size: 17px;
font-weight: 300;
letter-spacing: .5px;
line-height: 1.5em;
margin-bottom: 16px;
margin-top: 15px;
}
strong.link-email-footer {
box-sizing: border-box;
font-weight: 700;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment