Web Development Kodex

backgrounds

about.html

<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <title>Backgrounds</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>


<body id="about">
  <header>
    <h1>Backgrounds</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="things.html">Things</a></li>
        <li><a href="junk.html">Junk</a></li>
        <li><a href="stuff.html">Stuff</a></li>
      </ul>
    </nav>
  </header>
  <div class="wrapper">
    <div class="container">
      <h2>Heading</h2>
      <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.</p>
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.</p>
      <p>Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
    </div>
    <!-- .container-->
  </div>
  <!-- .wrapper-->
  <footer>
    <small><a href="https://opensource.org/licenses/MIT">MIT</a></small>
  </footer>
</body>


</html>

index.html

<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <title>Backgrounds</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>


<body id="home">
  <header>
    <h1>Backgrounds</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="junk.html">Junk</a></li>
        <li><a href="stuff.html">Stuff</a></li>
        <li><a href="things.html">Things</a></li>
      </ul>
    </nav>
  </header>
  <div class="wrapper">
    <div class="container">
      <h2>Heading</h2>
      <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.</p>
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.</p>
      <p>Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
    </div>
    <!-- .container-->
  </div>
  <!-- .wrapper-->
  <footer>
    <small><a href="https://opensource.org/licenses/MIT">MIT</a></small>
  </footer>
</body>


</html>

junk.html

<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <title>Backgrounds</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>


<body id="junk">
  <header>
    <h1>Backgrounds</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="junk.html">Junk</a></li>
        <li><a href="stuff.html">Stuff</a></li>
        <li><a href="things.html">Things</a></li>
      </ul>
    </nav>
  </header>
  <div class="wrapper">
    <div class="container">
      <h2>Heading</h2>
      <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.</p>
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.</p>
      <p>Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
    </div>
    <!-- .container-->
  </div>
  <!-- .wrapper-->
  <footer>
    <small>Powered by NGINX</small>
  </footer>
</body>


</html>

stuff.html

<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <title>Backgrounds</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>


<body id="stuff">
  <header>
    <h1>Backgrounds</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="junk.html">Junk</a></li>
        <li><a href="stuff.html">Stuff</a></li>
        <li><a href="things.html">Things</a></li>
      </ul>
    </nav>
  </header>
  <div class="wrapper">
    <div class="container">
      <h2>Heading</h2>
      <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.</p>
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.</p>
      <p>Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
    </div>
    <!-- .container-->
  </div>
  <!-- .wrapper-->
  <footer>
    <small><a href="https://opensource.org/licenses/MIT">MIT</a></small>
  </footer>
</body>


</html>

styles.css

body {
  font-size: 16px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin: 0;
}


a {
  color: crimson;
  text-decoration: none;
}


a:hover {
  color: red;
}




/* Backgrounds
------------------------------------------*/


#home {
  background: url(images/pattern.png) repeat-y;
}


#junk {
  background: url(images/pattern.png) repeat-x;
}


#junk h1 {
  color: red;
}


#things {
  background: url(images/paint.png) no-repeat 100% 0px;
}


#stuff {
  background: url(images/cosmic-thing.jpg) fixed;
  background-size: cover;
}




/* Layout
------------------------------------------*/


header,
.container,
footer {
  margin: 0 auto;
  width: 88%;
  max-width: 1080px;
}


.wrapper {
  background: #ffffff;
  padding: 1em 0;
}


#stuff .wrapper {
  background: rgba(255, 255, 255, .6);
}




/* Navigation
------------------------------------------*/


nav ul {
  padding: 0;
  list-style: none;
  display: flex;
}


nav ul li {
  margin-right: .5em;
}


nav ul li a {
  padding: .5em 1em;
  background: #cccccc;
  border-radius: 15px;
  transition: 1s;
}


nav ul li a:hover {
  background: pink;
}

things.html

<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <title>Backgrounds</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>


<body id="things">
  <header>
    <h1>Backgrounds</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="junk.html">Junk</a></li>
        <li><a href="stuff.html">Stuff</a></li>
        <li><a href="things.html">Things</a></li>
      </ul>
    </nav>
  </header>
  <div class="wrapper">
    <div class="container">
      <h2>Heading</h2>
      <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.</p>
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.</p>
      <p>Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
    </div>
    <!-- .container-->
  </div>
  <!-- .wrapper-->
  <footer>
    <small><a href="https://opensource.org/licenses/MIT">MIT</a></small>
  </footer>
</body>


</html>