How to add CSS & JS to Docker image

  css, docker, dockerfile, html, javascript

I’ve got 3 scripts

index.html style.css and script.js

$(document).mousemove(function (event) {
  $('.torch').css({
    'top': event.pageY,
    'left': event.pageX
  });
});
html {
  height: 100%;
}

body {  
  height: 100%;
  background: url("https://wallpapercave.com/wp/6SLzBEY.jpg") no-repeat left top;
  background-size: cover;  
  overflow: hidden;
    
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.text h1{
  color: #011718;
    margin-top: -200px;
  font-size: 15em;
    text-align: center;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7), -10px 10px 0px rgba(0,0,0,0.4), -15px 15px 0px rgba(0,0,0,0.2);
    font-family: monospace;
  font-weight: bold;
}

.text h2{
  color: black;
  font-size: 5em;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
    text-align: center;
    margin-top: -150px;
    font-family: monospace;
  font-weight: bold;
}
.text h3{
  color: white;
    margin-left: 30px;
  font-size: 2em;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
    margin-top: -40px;
    font-family: monospace;
  font-weight: bold;
}
.torch {
  margin: -150px 0 0 -150px;
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 9999em #000000f7;
    opacity: 1;
  border-radius: 50%;
  position: fixed;
    background: rgba(0,0,0,0.3);
  
  &:after {
    content: '';
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    box-shadow: inset 0 0 40px 2px #000,
            0 0 20px 4px rgba(13,13,10,0.2);  
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
<link rel="stylesheet" href="style.css">
  <h1>404</h1>
    <h2>Hello Foo</h2>
  <h3>Sorry you're lost.. Come back later</h3>
</div>
<div class="torch"></div>

All in a src directory.

I’m trying to bundle this into a docker image in order to create a 404 error page.
I able to build the image and it renders the index.html page but the CSS isn’t loading and being new to this I’m not sure what I’m doing wrong.

This is my dockerfile.

FROM nginx:stable
COPY src/ /usr/share/nginx/html

Source: Docker Questions

LEAVE A COMMENT