Joyce

by mrjordy

HTML

<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<body>
  <header id="header">
  <div class="logo">logo<br>signature</div>
  <nav>
    <ul>
  <li><a href="#">gallery</a></li>
  <li><a href="#">our services</a></li>
  <li><a href="#">about</a></li>
  <li><a href="#">contact</a></li>
</ul>
  </nav>
  </header>
  <div class="content">
  <section class="entirewebsite">entire website</section>
  </div>
  <footer class="footer">&copy;<span class="colortext">2020 </span>companyname</footer>
</body>

CSS

.colortext {
  color: #ff7600;
}

body {
  font-family: 'Quicksand', sans-serif;
  color: #333;
  font-size: 15px;
  margin: 0;
  overflow: hidden;
}

nav {
    display: inline-block;
    vertical-align: top;
    float: right;
}
.logo {
    display: inline-block;
    margin-left: 8px;
    margin-top: 4px;
}
.footer {
    bottom: 4px;
    position: absolute;
    margin-left: calc(50vw - 78px);
    text-shadow: 1px 1px 1px white;
}
header {
    height: 46px;
}
ul {
    list-style-type: none;
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}
a {
    text-decoration: none;
    color: #ff7600;
}
a:hover {
    text-decoration: underline;
}
nav > ul > li {
    display: inline-block;
    line-height: 50px;
    margin-right: 14px;
}
.entirewebsite {
    background: url(https://www.tokkoro.com/picsup/2988110-photography-house-interior-interior-design___mixed-wallpapers.jpg);
    background-size: cover;
    height: calc(100vh - 54px);
    border: 4px white solid;
}