Andrew

@font-face {
font-family: 'opensans';
src: url("https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOVuhpOqc.woff2") format('woff2');
}
@font-face {
font-family: 'roboto';
src: url("https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2") format('woff2');
}

<footer>
<ul>
  <li><a>About</a></li>
  <li><a>Contact</a></li>
  <li><a>News</a></li>
  <li><a>Home</a></li>
</ul>
</footer>

footer{
position: fixed;
bottom: 0;
width: 100%;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

блока-попапа где то на главной странице(где лучше всего?) и скрывать его через css

.center-footer-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items:center;
}

.single-goods h3{
//че угодно
}
.single-goods p{
//че угодно
}
.single-goods img{
//че угодно
}
.single-goods button{
//че угодно
}