Forever

The last question was asked for the first time, half in jest, on May 21, 2061, at a time when humanity first stepped into the light.

Someday

Then you know everything's got to run down someday.

Updates

Link
Link
Link
Link

The Last Question

Will mankind one day without the net expenditure of energy be able to restore the sun to its full youthfulness even after it had died of old age? Or maybe it could be put more simply like this: How can the net amount of entropy of the universe be massively decreased?

I know all about entropy

Multivac fell dead and silent. The slow flashing of lights ceased, the distant sounds of clicking relays ended.

Then, just as the frightened technicians felt they could hold their breath no longer, there was a sudden springing to life of the teletype attached to that portion of Multivac. Five words were printed:

INSUFFICIENT
DATA
FOR
MEANINGFUL
ANSWER

The Last Question by Isaac Asimov

Layout

background image

save as style.css

* {
    box-sizing: border-box;
}
body {
    font-family: monospace;
    font-size: 14px;
    margin: 0;
    background: #f5b7af url(bg_dots.png);
}
#container {
    max-width: 800px;
    margin: 0 auto;
}

/* header text */
.header {
    padding: 20px;
    text-align: center;
    color: #efe9db;
    font-size: 40px;
    text-shadow: 1px 0px #272727, 0px 2px #272727, 0px -1px #272727, -1px 0px #272727;
    font-style: italic;
}

/* navigation bar */
.nav {
    background-color: #efe9db;
    margin: 0;
    padding: 10px;
    border-radius: 16px 16px 0 0;
    border-color: #272727;
    border-style: solid;
    border-width: 3px 3px 0 3px;
    text-align: right;
    box-shadow: 3px  4px #272727;
}
.nav a {
    color: #272727;
    padding: 10px;
    text-decoration: none;
    text-align: center;
}
/* this adds a / before the links in the navigation bar */
.nav a::before {
    content: "/";
    padding-right: 6px;
}
.nav a:hover {
    background-color: #272727;
    color: #efe9db;
}

/* main box that holds left and right colums */
.main {  
    display: flex;
    flex-wrap: wrap;
    border: 3px solid #272727;
    margin-bottom: 20px;
    box-shadow: 3px  4px #272727;
}

/* left sidebar area */
.left-side {
    flex: 30%;
    background-color: #272727;
    padding: 5px 15px;
    color: #efe9db;
}
.left-side a, .left-side a:visited {
    color: #efe9db;
    text-decoration: none;
    border-bottom: 1px dotted #efe9db;
    padding: 0 2px;
}
.left-side a:hover {
    color: #f5b7af;
}
.left-side a:active {
    position: relative;
    top: 1px;
    left: 1px;
}

/* right content area */
.right-side {
    flex: 70%;
    background-color: #efe9db;
    padding: 5px 20px;
    color: #272727;
}
.right-side a, .right-side a:visited {
    color: #272727;
    text-decoration: none;
    border-bottom: 1px dotted #272727;
    padding: 0 2px;
}
.right-side a:hover {
    color: #efe9db;
    background-color: #272727;
    padding: 2px;
}
.right-side a:active {
    position: relative;
    top: 1px;
    left: 1px;
}
/* this limits the width of images so the layout doesn't stretch */
.left-side img, .right-side img {
    max-width: 100%;
}

/* headers */
h1 {
    font-size: 16px;
    font-weight: normal;
    padding: 4px 10px;
    border: 3px solid #272727;
    border-radius: 16px;
    box-shadow: 3px  3px #272727;
    margin: 15px 0;
}
h2 {
    font-size: 16px;
    font-weight: normal;
    color: #efe9db;
    padding: 4px 10px;
    border: 3px solid #272727;
    border-radius: 16px;
    background-color: #272727;
    box-shadow: 3px  3px #f5b7af;
    margin: 15px 0;
}
h3 {
    font-size: 16px;
    font-weight: normal;
    color: #272727;
    padding: 4px 10px;
    border: 3px solid #efe9db;
    border-radius: 16px;
    background-color: #efe9db;
    box-shadow: 3px  3px #f5b7af;
    margin: 15px 0;
}
h4 {
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    text-align: center;
    border-bottom: 1px dotted;
}

/* mark (highlighted text) style */
mark {
    background-color: #f5b7af;
}

/* underline style */
u{
    text-decoration: none;
    box-shadow: inset 0 -5px 0 0 #f5b7af;
}

@media screen and (max-width: 700px) {
    .main, .nav {   
        flex-direction: column;
    }
    .right-side {
        order: 1;
    }
    .left-side {
        order: 2;
    }
}

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>

<div id="container">
    
    <div class="header">
        My Website
    </div>

<div class="nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Links</a>
        <a href="#">Etc.</a>
    </div>

<div class="main">

<div class="left-side">
            <h3>Forever</h3>
            <p>The last question was asked for the first time, half in jest, on May 21, 2061, at a time when humanity first stepped into the light.</p>

<h3>Someday</h3>
            <p>Then you know everything's got to run down someday.</p>

<h4>Updates</h4>
            <a href="#">Link</a><br>
            <a href="#">Link</a><br>
            <a href="#">Link</a><br>
            <a href="#">Link</a><br>

</div>

<div class="right-side">
            <h1>The Last Question</h1>
            <p>Will mankind one day without the net expenditure of energy be able to restore the sun to its full youthfulness even after it had died of old age? Or maybe it could be put more simply like this: How can the net amount of entropy of the universe be massively decreased?</p>

<h2>I know all about entropy</h2>
            <p>Multivac fell dead and silent. The slow flashing of lights ceased, the distant sounds of clicking relays ended.</p>

<p>Then, just as the <b>frightened</b> technicians felt they could hold their breath <i>no longer</i>, there was a <u>sudden</u> springing to life of the <mark>teletype</mark> attached to that portion of <a href="#">Multivac</a>. Five words were printed:</p>

<ul>
                <li>INSUFFICIENT</li>
                <li>DATA</li>
                <li>FOR</li>
                <li>MEANINGFUL</li>
                <li>ANSWER</li>
            </ul>

<p><center><a href="https://users.ece.cmu.edu/~gamvrosi/thelastq.html">The Last Question by Isaac Asimov</a></center></p>

</div> 
    </div> 
</div>

</body>
</html>