helixxchi

テクノロジープログラミング一般的なカテゴリ

HTMLおよびCSSソースコードのレスポンシブフッターコード

23 9月 2021

レスポンシブフッターコード：フッターは、ドキュメントの下側の最良のセクションまたは本文です。ウェブサイトへのレスポンシブフッターの追加モバイル時代のこの完全なソースコードでは、レスポンシブフッターは絶対に不可欠なステップバイステップのレスポンシブフッターHTMLCSSの例です。

レスポンシブフッターコード| 無料のソースコード

Webサイトのフッターは、Webページの下部に情報とナビゲーションオプションを追加することにより、訪問者を支援します。

フッターの重要性：

フッター要素には通常、次のものが含まれます。

著作権
プライバシーポリシー
ナビゲーション
ソーシャルアイコン
メールサインアップ
あなたの使命
あなたの価値観
コンタクト
住所
電話
ファックス番号

お見逃しなく：サブメニュー付きのレスポンシブドロップダウンメニュー

HTMLコード

ステップ1：まず、次のHTMLをコピーして貼り付けることができます。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
   </head>
<body>
 <footer>
   <div class="article">
     <div class="left box">
       <div class="upper">
         <div class="topic">About us</div>
         <p>"PakaInfo was founded in January 2018 with the aim of sharing a place for General Information languages articles.</p>
       </div>
       <div class="lower">
         <div class="topic">Contact us</div>
         <div class="phone">
           <a href="#"><i class="fas fa-phone-volume"></i>+007 9898 015*</a>
         </div>
         <div class="email">
           <a href="#"><i class="fas fa-envelope"></i><a rel="nofollow noopener" target="_blank" href="https://www.pakainfo.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4ddcbd1d6c3c9c5c5cdc8cac5c9c1e4c3c9c5cdc88ac7cbc9">[email protected]</a></a>
         </div>
       </div>
     </div>
     <div class="middle box">
       <div class="topic">Our Services</div>
       <div><a href="#">Software source aPI, Development</a></div>
       <div><a href="#">Software dev Source code, Reasearch</a></div>
       <div><a href="#">Software User Interface Source code</a></div>
       <div><a href="#">Laravel Development, Source code</a></div>
       <div><a href="#">Mobile Application Source code</a></div>
       <div><a href="#">Blogging & Earning</a></div>
     </div>
     <div class="right box">
       <div class="topic">Subscribe us</div>
       <form action="#">
         <input type="text" placeholder="Enter Your email address">
         <input type="submit" name="" value="Send">
         <div class="media-icons">
           <a href="#"><i class="fab fa-facebook-f"></i></a>
           <a href="#"><i class="fab fa-instagram"></i></a>
           <a href="#"><i class="fab fa-twitter"></i></a>
           <a href="#"><i class="fab fa-youtube"></i></a>
           <a href="#"><i class="fab fa-linkedin-in"></i></a>
         </div>
       </form>
     </div>
   </div>
   <div class="bottom">
     <p>Copyright © 2022 <a href="#">Pakainfo</a> All rights reserved</p>
   </div>
 </footer>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<div class="topic">About us</div>

<p>"PakaInfo was founded in January 2018 with the aim of sharing a place for General Information languages articles.</p>

</div>

<div class="topic">Contact us</div>

</div>

<a href="#"><i class="fas fa-envelope"></i><a rel="nofollow noopener" target="_blank" href="https://www.pakainfo.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4ddcbd1d6c3c9c5c5cdc8cac5c9c1e4c3c9c5cdc88ac7cbc9">[email protected]</a></a>

</div>

<div class="topic">Our Services</div>

<div><a href="#">Software source aPI, Development</a></div>

<div><a href="#">Software dev Source code, Reasearch</a></div>

<div><a href="#">Software User Interface Source code</a></div>

<div><a href="#">Laravel Development, Source code</a></div>

<div><a href="#">Mobile Application Source code</a></div>

<div><a href="#">Blogging & Earning</a></div>

</div>

<div class="topic">Subscribe us</div>

</div>

</form>

</div>

</div>

</footer>

</body>

</html>

CSSコード：

ステップ2：以下のカスタムCSSコードをWebページのメインスタイルシートに追加します。

@import url('https://fonts.googleapis.com/css2?family=Poppins:<a rel="nofollow noopener" target="_blank" href="https://www.pakainfo.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d7a6a65794d3f3d3d">[email protected]</a>;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
  text-decoration: none;
}
footer{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #111;
}
footer .article{
  max-width: 1350px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer .article p,a{
  color: #fff;
}
footer .article .box{
  width: 33%;
  transition: all 0.4s ease;
}
footer .article .topic{
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;

}
footer .article p{
  text-align: justify;
}
footer .article .lower .topic{
  margin: 24px 0 5px 0;
}
footer .article .lower i{
  padding-right: 16px;
}
footer .article .middle{
  padding-left: 80px;
}
footer .article .middle a{
  line-height: 32px;
}
footer .article .right input[type="text"]{
  height: 45px;
  width: 100%;
  outline: none;
  color: #d9d9d9;
  background: #000;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 17px;
  border: 2px solid #222222;
}
footer .article .right input[type="submit"]{
  height: 42px;
  width: 100%;
  font-size: 18px;
  color: #d9d9d9;
  background: #eb2f06;
  outline: none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  border: 2px solid #eb2f06;
  transition: all 0.3s ease-in-out;
}
.article .right input[type="submit"]:hover{
  background: none;
  color:  #eb2f06;
}
footer .article .media-icons a{
  font-size: 16px;
  height: 45px;
  width: 45px;
  display: inline-block;
  text-align: center;
  line-height: 43px;
  border-radius: 5px;
  border: 2px solid #222222;
  margin: 30px 5px 0 0;
  transition: all 0.3s ease;
}
.article .media-icons a:hover{
  border-color: #eb2f06;
}
footer .bottom{
  width: 100%;
  text-align: right;
  color: #d9d9d9;
  padding: 0 40px 5px 0;
}
footer .bottom a{
  color: #eb2f06;
}
footer a{
  transition: all 0.3s ease;
}
footer a:hover{
  color: #eb2f06;
}
@media (max-width:1100px) {
  footer .article .middle{
    padding-left: 50px;
  }
}
@media (max-width:950px){
  footer .article .box{
    width: 50%;
  }
  .article .right{
    margin-top: 40px;
  }
}
@media (max-width:560px){
  footer{
    position: relative;
  }
  footer .article .box{
    width: 100%;
    margin-top: 30px;
  }
  footer .article .middle{
    padding-left: 0;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

@import url('https://fonts.googleapis.com/css2?family=Poppins:<a rel="nofollow noopener" target="_blank" href="https://www.pakainfo.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d7a6a65794d3f3d3d">[email protected]</a>;300;400;500;600;700&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins',sans-serif;

text-decoration: none;

}

footer{

width: 100%;

position: fixed;

bottom: 0;

left: 0;

background: #111;

}

footer .article{

max-width: 1350px;

margin: auto;

padding: 20px;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

footer .article p,a{

color: #fff;

}

footer .article .box{

width: 33%;

transition: all 0.4s ease;

}

footer .article .topic{

font-size: 22px;

font-weight: 600;

color: #fff;

margin-bottom: 16px;

}

footer .article p{

text-align: justify;

}

footer .article .lower .topic{

margin: 24px 0 5px 0;

}

footer .article .lower i{

padding-right: 16px;

}

footer .article .middle{

padding-left: 80px;

}

footer .article .middle a{

line-height: 32px;

}

footer .article .right input[type="text"]{

height: 45px;

width: 100%;

outline: none;

color: #d9d9d9;

background: #000;

border-radius: 5px;

padding-left: 10px;

font-size: 17px;

border: 2px solid #222222;

}

footer .article .right input[type="submit"]{

height: 42px;

width: 100%;

font-size: 18px;

color: #d9d9d9;

background: #eb2f06;

outline: none;

border-radius: 5px;

letter-spacing: 1px;

cursor: pointer;

margin-top: 12px;

border: 2px solid #eb2f06;

transition: all 0.3s ease-in-out;

}

.article .right input[type="submit"]:hover{

background: none;

color: #eb2f06;

}

footer .article .media-icons a{

font-size: 16px;

height: 45px;

width: 45px;

display: inline-block;

text-align: center;

line-height: 43px;

border-radius: 5px;

border: 2px solid #222222;

margin: 30px 5px 0 0;

transition: all 0.3s ease;

}

.article .media-icons a:hover{

border-color: #eb2f06;

}

footer .bottom{

width: 100%;

text-align: right;

color: #d9d9d9;

padding: 0 40px 5px 0;

}

footer .bottom a{

color: #eb2f06;

}

footer a{

transition: all 0.3s ease;

}

footer a:hover{

color: #eb2f06;

}

@media (max-width:1100px) {

footer .article .middle{

padding-left: 50px;

}

@media (max-width:950px){

footer .article .box{

width: 50%;

}

.article .right{

margin-top: 40px;

}

@media (max-width:560px){

footer{

position: relative;

}

footer .article .box{

width: 100%;

margin-top: 30px;

}

footer .article .middle{

padding-left: 0;

}

注：Flexboxを使用したレスポンシブナビゲーションバーとドロップダウン（更新、jQueryなし）

お見逃しなく： jQueryモバイルハンバーガーメニュー

私はあなたがについてのアイデアを得ることを願っています サブメニュー付きのレスポンシブドロップダウンメニュー。
フィードバックをお願いします infinityknow.comブログ。
この記事に関する貴重なフィードバック、質問、コメントはいつでも歓迎します。
この投稿を楽しんで気に入った場合は、共有することを忘れないでください。

参考資料 : www.pakainfo.com