دانلود رایگان فوتر زیبا برای سایت و وبلاگ

6 1 دقیقه خواندن

همانطور که می دانید، فوتر یکی از اجزای اصلی وب سایت محسوب می شود به همین دلیل برای شما عزیزان یک فوتر آماده آماده کرده ام. می توانید از این کد در طراحی وب سایت خودتان استفاده نمایید و از رقیبان خود متفاوت باشید.

قسمت پایینی سایت که توضیحاتی در رابطه با حق نشر سایت ( کپی رایت )، شبکه های اجتماعی سایت، نوع طراحی سایت و… قرار میگیرد را فوتر footer مینامند که امروزه قرار دادن این بخش برای هر سایت لازم میباشد.

این فوتر با استفاده از کد های HTML و CSS نوشته شده است و آیکون های شبکه های اجتماعی آن را میتوانید به سلیقه خودتان تغییر دهید یا حتی آیکون سایر شبکه های اجتماعی را به آن اضافه نمایید.

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>فوتر زیبای سایت</title>
  </head>
  <body>
<div class="footer">
  <span class="name">وب سایت شخصی سیدرضا بازیار</span>
    <span class="social-media">
    <a href="https://www.facebook.com/SRBazyar" class="fa fa-facebook-square"></a>
    <a href="https://twitter.com/seyedrezabazyar" class="fa fa-twitter-square"></a>
    <a href="https://www.youtube.com/channel/UCgFgsVUAyt41bme2oLjeUag" class="fa fa-youtube-square"></a>
    <a href="https://www.linkedin.com/in/seyedrezabazyar" class="fa fa-linkedin-square"></a>
    <a href="https://www.instagram.com/bazyarseyedreza" class="fa fa-instagram"></a>
    <a href="http://vk.com/seyedrezabazyar" class="fa fa-vk"></a>
    <a href="https://plus.google.com/104455170556222389049" class="fa fa-google-plus"></a>

  </span>  
  <span class="copyright">Copyright © 2016, All Rights Reserved</span>
    <span class="quick-access">
      <a>Design By:</a> <a href="https://www.seyedrezabazyar.com">Seyed Reza Bazyar</a>
  </span>  
</div>  
  </body>
</html>

@import url("http://fonts.googleapis.com/css?family=Cookie");
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

* { margin: 0; padding: 0; box-sizing: border-box; }

.footer {
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;  
  background-color: black;
  background-image: url("https://www.seyedrezabazyar.com/codetools/files/Elegant-Black.jpg");
  background-size: contain;
  background-position: top center;
  background-repeat: repeat;  
}

.footer > span {
  display: block;
  color: #dddddd;
  font-family: sans-serif;
}

.footer > span > a {
  color: steelblue;
  text-decoration: none;
}

.footer > .name {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 200%;
  font-family: cookie;
}

.footer > .social-media { margin-bottom: 10px; }
.footer > .social-media > a {
  padding: 0 5px;
  font-size: 38px;
}

.footer > .copyright { font-size: 60%; }

.footer > .quick-access > a {
  border-right: 1px solid steelblue;
  padding: 0 1em;
  font-size: 60%;
}
.footer > .quick-access > a:last-child { border: 0; }

مشاهده دمو آنلاین

برچسب ها