Bloggeriz Footer Tasarımı

Bloggeriz Footer Tasarımı

 

css Kodları

<style type="text/css">
* {
  margin: 0;
  padding: 0;
  box-sizing: border;
}

body {
  margin-right: auto;
  margin-left:  auto;
  max-width: 90%;
  padding-right: 10px;
  padding-left:  10px;
  background: #ddd;
  font-size: 16px;
}

.section-1,
 {
  margin: 30px 0;
  padding: 60px 10px;
}

/***********************************************
* Flexbox Footer Styling
***********************************************/
.flex-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 50px 0;
  color: #fff;
  background: #3e3e3e;
  font-family: "Gotham SSm A","Gotham SSm B","UCF Sans Serif Alt","Helvetica Neue",Arial,sans-serif;
}

.flex-footer a {
  color: #fff;
}

.flex-item {
  padding: 30px;
  text-align: center;
}

.flex-h2 {
  font-size: 2.375em;
  text-align: center;
  text-transform: uppercase;
}

.social-links {
  margin: 0 8px;
  padding:10px 5px;
  width: 60px;
  color: #3e3e3e;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 2em;
}

.social-links:hover {
  opacity: .8;
  transform: scale(.9);
}

.flex-links,
.flex-copyright {
  font-size: 1.3em;
  
}



@media only screen and (max-width: 780px) {

}
</style>

<script src="https://kit.fontawesome.com/38b3a95b1b.js" crossorigin="anonymous"></script>

<link href="https://fonts.googleapis.com/css?family=Advent+Pro:300|Roboto:300&display=swap" rel="stylesheet">

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

Html Kodları

<!-- Flexbox -->

<div class="section-1">
  <footer class="flex-footer">
    <h2 class="flex-h2"><a href="https://www.bloggeriz.com/">Bloggeriz com</a></h2>
    <div class="flex-item flex-social-links">
      <a href="https://www.facebook.com/"><i class="fab fa-facebook-f social-links"></i></a>
      <a href="https://twitter.com/"><i class="fab fa-twitter social-links"></i></a>
      <a href="https://www.bloggeriz.com/social/"><i class="fas fa-code-branch social-links"></i></a>
      <a href="https://www.youtube.com/user/"><i class="fab fa-youtube social-links"></i></a>
      <a href="https://www.instagram.com/"><i class="fab fa-instagram social-links"></i></a>
    </div>
    <div class="flex-item flex-links">
      <p> <a href="https://www.bloggeriz.com/search/label/Blogger">Blogger</a> | <a href="https://www.bloggeriz.com/search/label/Wordpress%20Themes">Wordpress Themes</a> | <a href="https://www.bloggeriz.com/search/label/Wep%20Tasar%C4%B1m">Wep Tasarım</a> | <a href="https://www.bloggeriz.com/search/label/Seo">Online Seo</a> | <a href="https://www.bloggeriz.com/search/label/Psd">Psd</a> | <a href="https://bloggeriz.com/search/label/%C4%B0nternet">İnternet</a> | <a href="https://bloggeriz.com/search/label/Haber">Haber</a> | <a href="https://www.bloggeriz.com/search/label/Bayanlar%20%C4%B0%C3%A7in">Bayanlar Bölümü</a> </p>
    </div>
    <div class="flex-item flex-copyright">tc.securityline@gmail.com | <a href="tel:+90 312 000 00 00">+90 312 000 00 00</a><br />
      &copy; <a href="https://www.bloggeriz.com/">2009-2021 - Sitedeki İçerikler Link Verilmeden Yayınlanamaz.</a></div>
  </footer>
</div>


 

Demosuna Bakabilirsiniz.

 

 https://codepen.io/bloggeriz/pen/GRNmOro