|
HTML tag Footer 바닥글 정보파일
https://cafe.daum.net/GKFDYDLF/bb5U/2
index_html tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Lato|Nanum+Gothic:700|Raleway&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="StyleiTechFooter.css">
<title>Responsive Footer</title>
<style></style>
</head>
<body>
<section>
<h1>Cool Responsive Footer</h1>
<div class="dummy-text">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br/><br/>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
</section>
<footer>
<div>
<span class="logo">iTechnology</span>
</div>
<div class="row">
<div class="col-3">
<div class="link-cat" xxxxxxxxonclick="footerToggle(this)">
<span class="footer-toggle"></span>
<span class="footer-cat">Solution</span>
</div>
<ul class="footer-cat-links">
<li><a href=""><span>Interprise App Development</span></a></li>
<li><a href=""><span>Android App Development</span></a></li>
<li><a href=""><span>ios App Development</span></a></li>
</ul>
</div>
<div class="col-3">
<div class="link-cat" xxxxxxxxonclick="footerToggle(this)">
<span class="footer-toggle"></span>
<span class="footer-cat">Industries</span>
</div>
<ul class="footer-cat-links">
<li><a href=""><span>Healthcare</span></a></li>
<li><a href=""><span>Sports</span></a></li>
<li><a href=""><span>ECommerce</span></a></li>
<li><a href=""><span>Construction</span></a></li>
<li><a href=""><span>Club</span></a></li>
</ul>
</div>
<div class="col-3">
<div class="link-cat" xxxxxxxxonclick="footerToggle(this)">
<span class="footer-toggle"></span>
<span class="footer-cat">Quick Links</span>
</div>
<ul class="footer-cat-links">
<li><a href=""><span>Reviews</span></a></li>
<li><a href=""><span>Terms & Condition</span></a></li>
<li><a href=""><span>Disclaimer</span></a></li>
<li><a href=""><span>Site Map</span></a></li>
</ul>
</div>
<div class="col-3" id="newsletter">
<span>Stay Connected</span>
<form id="subscribe">
<input type="email" id="subscriber-email" placeholder="Enter Email Address"/>
<input type="submit" value="Subscribe" id="btn-scribe"/>
</form>
<div class="social-links social-2">
<a href=""><i class="fab fa-facebook-f"></i></a>
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-linkedin-in"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-tumblr"></i></a>
<a href=""><i class="fab fa-reddit-alien"></i></a>
</div>
<div id="address">
<span>Office Location</span>
<ul>
<li>
<i class="far fa-building"></i>
<div>Los Angeles<br/>
Office 9B, Sky High Tower, New A Ring Road, Los Angeles</div>
</li>
<li>
<i class="fas fa-gopuram"></i>
<div>Delhi<br/>
Office 150B, Behind Sana Gate Char Bhuja Tower, Station Road, Delhi</div>
</li>
</ul>
</div>
</div>
<div class="social-links social-1 col-6">
<a href=""><i class="fab fa-facebook-f"></i></a>
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-linkedin-in"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-tumblr"></i></a>
<a href=""><i class="fab fa-reddit-alien"></i></a>
</div>
</div>
<div id="copyright">
© All Rights Reserved 2019-2020
</div>
<div id="owner">
<span>
Designed by <a href="https://www.codingtuting.com">CodingTuting.Com</a>
</span>
</div>
</footer>
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="StyleiTechFooter.js"></script>
<script>
/* Code by CodingTuting.Com */
function footerToggle(footerBtn) {
$(footerBtn).toggleClass("btnActive");
$(footerBtn).next().toggleClass("active");
}
</script>
</body>
</html>
index_CSS5 tag
<style>
/* Code by CodingTuting.Com */
html {
scroll-behavior: smooth;
}
body {
padding: 0;
margin: 0;
}
section {
text-align: justify;
padding: 0 2em 2em;
}
h1 {
text-align: center;
font-family: roboto;
font-weight: 400;
font-size: 35px;
color: #656565;
}
.dummy-text {
color: #3c3b3b;
font-family: lato;
font-size: 20px;
line-height: 1.5;
}
.col-6 {
width:50%;
display: inline-table;
}
footer {
background-color: #3c3b3b;
padding: 3em 4em 2em;
}
footer .logo {
color:#fff;
font-size: 28px;
font-family: roboto;
}
footer .row {
margin: 2em 0;
font-family: lato;
color: #fff;
position: relative;
border-bottom: 1px solid #cecece;
}
.footer-toggle {
display: none;
}
.link-cat {
cursor:pointer;
}
footer ul {
padding:0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
footer ul li {
list-style-type: none;
padding:0;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
line-height: 2;
}
footer .footer-cat, #newsletter span {
font-size: 20px;
}
.footer-cat-links a {
color: #cecece;
text-decoration: none;
position: relative;
}
.footer-cat-links.active > li a {
pointer-events: auto;
}
.footer-cat-links a:after {
top: 21px;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
width: 0;
background: #fff;
-webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
}
.footer-cat-links a:hover:after, .footer-cat-links a:focus:after {
width: 100%;
left: 0;
}
footer #subscribe {
margin: 20px 0px 30px;
}
input#subscriber-email {
outline: none;
padding: 8px;
background: #212121;
border: 1px solid #cecece;
color: #cecece;
border-radius: 4px 0px 0px 4px;
}
input#subscriber-email::-webkit-input-placeholder {
color:rgb(202, 196, 196);
}
input#subscriber-email:-ms-input-placeholder {
color:#cecece;
}
input#subscriber-email::-ms-input-placeholder {
color:#cecece;
}
input#subscriber-email::placeholder {
color:#cecece;
}
.col-3 {
display: inline-table;
width:25%;
}
.col-3#newsletter {
width:24%
}
.col-3#newsletter #btn-scribe {
margin-left: -4px;
border: 1px solid #cecece;
border-radius: 0px 4px 4px 0;
padding: 8px 5px;
background-color: #e2e2e2;
color: #212121;
cursor: pointer;
}
.social-2 {
display: none;
}
.social-links {
bottom: 44px;
position: absolute;
left: 0;
}
.social-links a {
color: #fff;
font-size: 20px;
border: 1px solid;
border-radius: 20px;
padding: 6px;
-webkit-transition:all .2s ease-in;
transition:all .2s ease-in;
}
.social-links a:not(:last-child) {
margin-right: 10px;
}
.social-links a:hover, .social-links a:focus {
background-color: #212121;
}
.social-links a i {
width: 25px;
height: 25px;
text-align:center;
}
#newsletter #address li:not(:first-child) {
padding: 20px 0;
}
#newsletter #address li i {
font-size: 45px;
width: auto;
padding: 5px;
}
#newsletter #address li div {
color: #cecece;
font-size: 14px;
width: 80%;
text-align: left;
float: right;
line-height: 1.3;
}
#copyright {
text-align: center;
color:#fff;
font-family: lato;
}
#owner {
text-align: center;
padding: 20px 0 0px;
color: #fff;
font-family: lato;
}
#owner a {
color:#fff;
}
/* iPads to Smartphone for Common Elements ----------- */
@media only screen and (max-width : 1024px) {
.col-3 {
display: block;
width: 100%;
padding-bottom: 1em;
position: relative;
}
.col-3#newsletter {
width: 100%;
position: relative;
padding-bottom: 0;
padding-top: 1em;
}
footer .footer-cat {
margin-left: 25px;
}
.footer-toggle,.footer-toggle::after {
background: #fff;
height: 2px;
width: 15px;
position: absolute;
display: block;
-webkit-transition:all .4s ease-in;
transition:all .4s ease-in;
}
.footer-toggle {
top: 11px;
cursor:pointer;
}
.footer-toggle::after {
content: '';
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.btnActive .footer-toggle::after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.footer-cat-links {
margin: 0 0em 0px 1.6em;
}
.footer-cat-links a {
pointer-events: none;
}
.footer-cat-links li {
line-height: 0;
opacity: 0;
}
.footer-cat-links.active > li{
line-height:2;
opacity:1;
}
.social-1 {
display: none !important;
}
.social-2 {
display: block;
position: absolute;
top: 7.5em;
bottom: 0px;
height:20px;
padding-bottom: 1.5em;
width: 100%;
}
#address {
margin-top: 6em;
}
#newsletter #address li i {
width: auto;
}
#newsletter #address li div {
font-size: 14px;
width: auto;
text-align: -webkit-auto;
float: none;
line-height: 2;
display: inline-block;
padding: 10px 0 15px;
}
#newsletter #address li div:last-child {
padding-bottom: 0;
}
#newsletter #address li:not(:first-child) {
padding: 20px 0 0;
}
}
/* iPads (portrait)----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
footer {
padding-right:3em;
padding-left:3em;
}
.col-3 {
</style
index_JavaScript tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="StyleiTechFooter.js"></script>
<script>
/* Code by CodingTuting.Com */
function footerToggle(footerBtn) {
$(footerBtn).toggleClass("btnActive");
$(footerBtn).next().toggleClass("active");
}
</script>
index_JavaScript tag
<h2> Footer tag 바닥글 </h2>
<P>Lorem Ipsum은 인쇄 및 조판 산업의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 이는 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트의 출시로 대중화되었으며, 최근에는 Lorem Ipsum 버전을 포함하는 Aldus PageMaker와 같은 데스크탑 출판 소프트웨어로 대중화되었습니다.
독자가 페이지 레이아웃을 볼 때 읽을 수 있는 페이지 내용 때문에 주의가 산만해진다는 것은 오랫동안 확립된 사실입니다. Lorem Ipsum을 사용하는 이유는 'Content here, content here'를 사용하는 것과는 달리 문자의 다소 정규 분포를 가지므로 읽을 수 있는 영어처럼 보이게 한다는 것입니다. 현재 많은 데스크탑 출판 패키지와 웹 페이지 편집기는 Lorem Ipsum을 기본 모델 텍스트로 사용하고 있으며, 'lorem ipsum'을 검색하면 아직 초기 단계에 있는 많은 웹 사이트를 발견할 수 있습니다. 때로는 우연히, 때로는 고의로(유머를 삽입하는 등) 다양한 버전이 수년에 걸쳐 발전해 왔습니다.</p>
HTML tag 바닥글 Footerr 소스보기
</div>
<ul class="footer-cat-links">
<li><a href=""><span>Healthcare</span></a></li>
<li><a href=""><span>Sports</span></a></li>
<li><a href=""><span>ECommerce</span></a></li>
<li><a href=""><span>Construction</span></a></li>
<li><a href=""><span>Club</span></a></li>
</ul>
</div>
</div>
</div>
<div class="social-links social-1 col-6">
<a href=""><i class="fab fa-facebook-f"></i></a>
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-linkedin-in"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-tumblr"></i></a>
<a href=""><i class="fab fa-reddit-alien"></i></a>
</div>
</div>
HTML tag 바닥글 Footerr 소스보기
HTML tag Footer 글 정보파일
|
첫댓글 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default 잔뇨21:59分