Hallo liebe SIQUANDO´s ... Ich benutze das Design Reykjavik Midborg mit Shop Pro 6
Ich möchte gerne bei meinem Design einen Footer einfügen... dazu habe ich folgende Code Zeilen :
<style>
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#282d32;
}
.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}
.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}
.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}
.footer-dark ul a:hover {
opacity:0.8;
}
@media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align:center;
padding-bottom:20px;
}
}
.footer-dark .item.text {
margin-bottom:36px;
}
@media (max-width:767px) {
.footer-dark .item.text {
margin-bottom:0;
}
}
.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}
.footer-dark .item.social {
text-align:center;
}
@media (max-width:991px) {
.footer-dark .item.social {
text-align:center;
margin-top:20px;
}
}
.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}
.footer-dark .item.social > a:hover {
opacity:0.9;
}
.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}
</style>
...UND ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Services</h3>
<ul>
<li><a href="#">Web design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h3>About</h3>
<ul>
<li><a href="#">Das Unternehmen</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>Company Name</h3>
<p>
Machen Sie aus Ihrer Wohnung ein Zuhause
Wir helfen Ihnen dabei Ihren Wohnraum so zu gestalten, wie Sie es sich vorstellen.
Von der Planung zum Wohntraum – Auf diesem Weg begleiten wir sie mit kreativen Ideen, fundiertem Fachwissen, großer Einsatzbereitschaft und viel Einfühlungsvermögen.
Wir liefern alles aus einer Hand – pünktlich an die Baustelle - in Deutschland, Europa und wenn Sie möchten auch in die ganze Welt.
</p>
</div>
<div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
</div>
<p class="copyright">Company Name © 2018</p>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Das ganze kommt von hier : https://jsfiddle.net/Grobbert/70s6yr12/1/
Die Frage ist... die ich leider nicht gelöst bekomme... wohin mit den Codezeilen ???
Ich hoffe ihr könnt mir verraten wie bzw. wo ich einen CSS/HTML Code "eingarbeitet" bekomme...
Die Testseite ist : https://2022.decke-wand-boden.de/
Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »W2D Fan« (26.07.2022, 16:59)
