HTML
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RNK</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#about">O nas</a>
</li>
<li>
<a href="#services">Oferta</a>
</li>
<li>
<a href="#contact">Kontakt</a>
</li>
<li>
<a href="#prices">Cennik</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Width Image Header -->
<header class="header-image">
<div class="headline">
<div class="container">
<h1>ELEKTROINSTAL</h1>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<hr class="featurette-divider">
<!-- First Featurette -->
<div class="featurette" id="about">
<h2 class="featurette-heading">O nas</h2>
<p class="lead">Nasza firma zajmuje się wykonywaniem nowych oraz modernizacją starych instalacji dla domów, mieszkań a także budynków przemysłowych.
Wykonujemy usługi dla osob prywatnych jak i firm, a długoletnia praktyka oraz doświadczenie pozwala nam na wykonanie naszej pracy na najwyższym poziomie jak również doradzić naszym klientom rozwiązania które ułatwią korzystanie z naszych usług
Współpraca z przedsiębiorstwami handlowymi w naszej branży pomogła nam wynegocjować najlepsze ceny za materiały dzięki czemu możemy zaoferować Panstwu usługi oraz materiały najwyższej jakości w najlepszych cenach</p>
</div>
<hr class="featurette-divider">
<!-- Second Featurette -->
<div class="featurette" id="services">
<h2 class="featurette-heading">Oferta</h2>
<div class="list">
<ul>
<li>
Wykonanie instalacji elektrycznych domów, mieszkań, oraz budynków gospodarczych i firm.
</li>
<li>
Modernizacja instalacji elektrycznych.
</li>
<li>
Wykonanie instalacji zewnętrznych.
</li>
<li>
Wykonywanie instalacji odgromowych.
</li>
<li>
Instalacja oraz serwis systemów alarmowych.
</li>
<li>
Instalacja oraz serwis systemów monitorigu.
</li>
<li>
Instalacja domofonów oraz videomofonów.
</li>
<li>
Wykonujemy również pomiary izolacji oraz oporności instalacji na domach i budynkach.
</li>
</ul>
</div>
</div>
<hr class="featurette-divider">
<!-- Third Featurette -->
<div class="featurette" id="contact">
<h2 class="featurette-heading">Kontakt</h2>
<p class="contact">Tomasz Walocha </br></br>Telefon: 575689850</br></br>Email: walocha.tomasz@gmail.com</br></br>Adres: 28-340 Sędziszów </br></br>ul.Jędrzejewska 5</p>
<div class="location">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2533.7840769209297!2d20.067072950888345!3d50.575378386136286!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47170af388d81cf1%3A0x5bf5e8f2c2c880db!2zSsSZZHJ6ZWpvd3NrYSA1LCAyOC0zNDAgU8SZZHppc3rDs3c!5e0!3m2!1spl!2spl!4v1494708890182" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<hr class="featurette-divider">
<!-- Fourth Featurette -->
<div class="featurette" id="prices">
<h2 class="featurette-heading">Cennik</h2>
<p class="lead">Oferta przedstawiona poniżej jest tylko ofertą poglądową ponieważ każdy klient jest traktowany przez nas indywidualnie. Po obejrzeniu obiektu do pracy przygotowywana jest przez nas darmowa wycena zlecenia którą następnie negocjujemy z klientem i staramy się by obie strony były zadowolone z ceny usługi. </p>
</div>
<hr class="featurette-divider">
<!-- Footer -->
<footer>
<div class="stopka">
<p>Copyright © Ropczan_Studio 2017</p>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
CSS
/*
* Start Bootstrap - One Page Wonder (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
margin-top: 50px;
background: url('images/dark_fish_skin.png');
color: #fff;
}
.header-image {
display: block;
width: 100%;
color: #000;
margin-bottom: 100px;
min-height: 1000px;
text-align: center;
background: url('images/burza.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
hr{
border-color: #000;
}
.headline {
padding: 120px 0;
}
.headline h1 {
font-size: 80px;
background: #fff;
background: rgba(255,255,255,0.6);
}
.headline h2 {
font-size: 77px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.featurette-divider {
margin: 80px 0;
}
.featurette {
margin-top: 100px;
overflow: hidden;
}
.featurette-heading {
text-align: center;
font-size: 50px;
margin-top: 40px;
margin-bottom: 60px;
}
.contact{
text-align: left;
margin-left: 50px;
margin-right: 100px;
margin-top: 80px;
margin-bottom: 100px;
font-size: 21px;
float: left;
}
.lead{
text-align: center;
clear: both;
margin-bottom: 150px;
}
.location{
margin-bottom: 100px;
}
.list{
text-align: justify;
margin-bottom: 150px;
margin-left: 50px;
font-size: 21px;
}
footer {
background: #000;
text-align: center;
width: 100%;
padding: 15px;
}
@media(max-width:1200px) {
.headline h1 {
font-size: 90px;
}
.headline h2 {
font-size: 63px;
}
.featurette-divider {
margin: 50px 0;
}
.featurette-heading {
font-size: 35px;
}
}
@media(max-width:991px) {
.headline h1 {
font-size: 55px;
}
.headline h2 {
font-size: 50px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-heading {
font-size: 30px;
}
}
@media(max-width:768px) {
.container {
margin: 0 15px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-heading {
font-size: 25px;
}
}
@media(max-width:668px) {
.headline h1 {
font-size: 50px;
}
.headline h2 {
font-size: 32px;
}
.featurette-divider {
margin: 30px 0;
}
}
@media(max-width:640px) {
.headline {
padding: 75px 0 25px 0;
}
.headline h1 {
font-size: 50px;
}
.headline h2 {
font-size: 30px;
}
}
@media(max-width:375px) {
.featurette-divider {
margin: 10px 0;
}
}
Witam, robię prostą stronę wizytówkę one page, pobrałem templatke z bootstrapa, którego lekko nie ogarniam. Mam problem z ustawieniem stopki na całą stronę, może ktoś pomóc? Nie wiem też jak dopasować czcionke w klasie lead przy mniejszych wymiarach.
