biuro strona kodowanie

Budujemy prostą stronę internetową cz. 5

Czas czytania: 4 minut

To już przed ostatnia część mojego kursu. Omówię w niej ostatnie dwie części budowanej strony internetowej.

W 6 ostatniej części pokażę animacje jakie warto dodać do strony. Linki do poprzednich części kursu znajdziecie poniżej:

Sekcja design

Podobnie jak sekcja znajdująca się zaraz pod nagłówkiem nie jest zbyt skompilowana.

<section id="design">
     <div class="container">
    <div class="row">
        <div class="col-12">
        <h3>Lorem ipsum dolor sit amet, </h3>
        <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae 
                 ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas 
                 sit, <a href="">aspernatur aut</a> odit aut fugit, sed quia consequuntur magni dolores eos</p>
                
        </div>
       </div>
    </div>
</section>

Specjalnie do tej sekcji nie trzeba nic dodawać. Pojawia się tu jednak zwykły link. Nie posiada on określonego miejsca prowadzenia, jednak jak widać w projekcie wyróżnia się na tle reszty tekstu.

section a, footer a, section a:focus, footer a:focus{
    color: red;
}
section a:hover, footer a:hover{
    opacity: 0.7;
    color: red; 
    text-decoration:none;
}

Powyższy kod wprowadza nas również do następnej sekcji, którą jest stopka (footer).

Stopka / footer strony – <Footer>

To już ostatnia sekcja.

footer - stopka
footer – stopka
<footer>
          <div class="container bootom">
        <div class="row">
              <div class="col-12 col-md-4">
                <ul>
                <li>sed ut perspiciatis</li>
                <li>unde omnis iste</li>
                <li>natus error sit</li>
                <li>voluptatem accusantium</li>
                <li>doloremque laudantium</li>
                </ul>
              </div>
              <div class="col-12 col-md-4">
                <ul>
                <li>sed ut perspiciatis</li>
                <li>unde omnis iste</li>
                <li>natus error sit</li>
                <li>voluptatem accusantium</li>
                <li>doloremque laudantium</li>
                </ul>
              </div>
              <div class="col-12 col-md-4">
                <ul>
                <li>sed ut perspiciatis</li>
                <li>unde omnis iste</li>
                <li>natus error sit</li>
                <li>voluptatem accusantium</li>
                <li>doloremque laudantium</li>
                </ul>
              </div>            
        </div>
    </div>
    <div class="container text-center">
        <p>© 2017-2018 Company Name</p>
        <p>
        <a href="#">Privacy terms suport</a>
        </p>
    </div>
</footer>

W tej sekcji posiadamy wypunktowaną listę. A właściwie 3 wypunktowane listy. Kolumny można stworzyć również w inny sposób ja jednak wybrałam bardziej tradycyjny. Jak byście jednak chcieli spróbować zrobić inaczej alternatywną metodę znajdziecie pod linkiem.

section, footer{
    padding: 30px 0;
}

Domyślne wypunktowanie na stronach jest w formie kropek. W projekcie jest ono jednak kwadratowe – dlatego dopisałam do CSS:

section ul, footer ul{
    list-style:square;
}

Teraz jeszcze dodam odstęp:

footer .bootom{
padding: 30px 0;
}

Podsumowanie kodu strony

Wiemy jak wyglądają już pojedyncze sekcje – warto jednak jeszcze raz zobaczyć kod w całości. I tak nasz index.html prezentuje się następująco:

<!doctype html>  <!-- tag informujący z jakiego języka będziemy korzystać -->
<html lang="pl"> <!-- tag otwierający -->
  <head> <!-- głowa strony -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Nowa strona</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
  </head> <!-- zamknięcie głowy -->
  <body>
      <header class="top">
       <nav class="navbar navbar-expand-md navbar-light bg-light navbar-white">
        <div class="container">
          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#topmenu" aria-controls="topmenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="navbar-collapse collapse" id="topmenu" style="">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#word">word</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#us">us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#technology">technology</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#design">design</a>
              </li>
            </ul>
          </div>
         </div>
        </nav>
      </header>
      <section id="word">
         <div class="container">
            <div class="row">
                <div class="col-12">
                <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos</p>
                </div>
          </div>
         </div>
      </section>
      <section id="us">
         <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-md-6 image"><img src="https://www.aurainweb.pl/wp-content/uploads/2018/10/grafik.jpg" class="img-fluid"></div>
                <div class="col-12 col-md-6"><p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos</p></div>
          </div>
         </div>
      </section>
      <section id="technology">
       <div class="container">
            <div class="row align-items-center">
                    <div class="col-12 col-md-6 order-md-2 image"><img src="https://www.aurainweb.pl/wp-content/uploads/2018/10/grafik.jpg" class="img-fluid"></div>
                <div class="col-12 col-md-6 order-md-1"><p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos</p></div>                
          </div>
         </div>
      </section>
      <section id="design">
      <div class="container">
            <div class="row">
                <div class="col-12">
                <h3>Lorem ipsum dolor sit amet, </h3>
                <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, <a href="">aspernatur aut</a> odit aut fugit, sed quia consequuntur magni dolores eos</p>
                
                </div>
          </div>
         </div>
      </section>
       <footer>
          <div class="container bootom">
            <div class="row">
              <div class="col-12 col-md-4">
                <ul>
                <li>sed ut perspiciatis</li>
                <li>unde omnis iste</li>
                <li>natus error sit</li>
                <li>voluptatem accusantium</li>
                <li>doloremque laudantium</li>
                </ul>
              </div>
              <div class="col-12 col-md-4">
                <ul>
                <li>sed ut perspiciatis</li>
                <li>unde omnis iste</li>
                <li>natus error sit</li>
                <li>voluptatem accusantium</li>
                <li>doloremque laudantium</li>
                </ul>
              </div>
              <div class="col-12 col-md-4">
                <ul>
                <li>sed ut perspiciatis</li>
                <li>unde omnis iste</li>
                <li>natus error sit</li>
                <li>voluptatem accusantium</li>
                <li>doloremque laudantium</li>
                </ul>
              </div>            
          </div>
         </div>
         <div class="container text-center">
              <p>© 2017-2018 Company Name</p>
              <p>
                <a href="#">Privacy terms suport</a>
              </p>
        </div>
    </footer> 
  </body> 
</html>  <!-- tag kończący stronę -->

Z kolej nasz plik CSS wygląda tak:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin-ext');

body{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:18px;
}


section, footer{
    margin: 60px 0;
}
section ul, footer ul{
    list-style:square;
}
section a, footer a, section a:focus, footer a:focus{
    color: red;
}
section a:hover, footer a:hover{
    opacity: 0.7;
    color: red; 
    text-decoration:none;
}

h3{
    padding-bottom: 14px;
    font-weight: 600;
}

.top{
    background: url(https://www.aurainweb.pl/wp-content/uploads/2018/10/baner.jpg);
    background-position: center;
    background-size: cover;
    height: 30%;
    min-height: 400px;
    position:relative;
    margin-bottom:30px;
    background-attachment: fixed;
}
.top nav{
    position:absolute;
    bottom:0;
    width:100%;
    border-bottom: 1px solid #ccc;
    padding: 0;
}
.top nav.navbar-white li{
    padding: 0 15px;
}
.top nav.navbar-white li:first-of-type{
    padding: 0 0px;
}
.top nav.navbar-white li a{
    color: #333;
    border-bottom: 2px solid transparent;
    padding: 15px;
}
.top nav.navbar-white li a:hover, .top nav.navbar-white li a.active{
    border-bottom: 2px solid red;
}
/*   */

.top .fixed-top{
    position:fixed;
    top: 0;
    bottom: auto;
}




#us p, #technology p{
    padding: 18px 2% 0;
}
#us img, #technology img{
    width: 100%;
    height: auto;
}
#us img:hover, #technology img:hover{
    -webkit-filter: grayscale(60%);
-moz-filter: grayscale(60%);
-o-filter: grayscale(60%);
-ms-filter: grayscale(60%);
filter: grayscale(60%);
}
.image{
padding:0;
}
footer .bootom{
padding-top: 30px;
    padding-bottom: 30px;
}

@media only screen and (max-width: 767px) {
    .navbar-light .navbar-toggler{
        margin: 6px 0;
    }   
  .top nav.navbar-white li{
    padding: 0;
    text-align: center;
  }
}

Powyższy kod pozbawiony jest praktycznie animacji. Kwestia animacji jak i sam gotowy szablon pojawią się w ostatniej części.

Drobne poprawki RWD

W celu poprawienia wyglądu strony na urządzeniach mobilnych możemy dodać kod:

@media only screen and (max-width: 767px) {
    .navbar-light .navbar-toggler{
    margin: 6px 0;
     }  
  .top nav.navbar-white li{
    padding: 0;
    text-align: center;
  }
}