To begin with, let's create the initial layout of the page:
- Create a file called index.html and write the following HTML:
<html>
<head>
<title>Everyday Market</title>
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<header class="app-header app-bg">
<div class="maxHeight flex flex-align-items--center">
<img src="images/logo.png" class="app-logo" />
<span class="app-slogan">Shop 'till you Drop</span>
</div>
</header>
<div class="app-main">
</div>
</body>
</html>
- Create a file named app.css and add the relevant CSS:
html {
box-sizing: border-box;
font-size: 62.5%; /* =10px */
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
font-size: 1.4rem;
}
.hidden {
display: none !important;
}
.app-header {
height: 100px;
border-bottom: 1px solid black;
}
.app-header::after {
content: "";
height: 100px;
opacity: 0.5;
background: url('images/herobg.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
.app-logo {
height: 80px;
margin-left: 50px;
}
.app-slogan {
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
font-weight: bold;
margin-left: 5px;
}
.app-main {
padding-top: 10px;
background-color: rgb(236,236,236);
height: calc(100% - 100px);
width: 100%;
position: relative;
top: 0; lefT:0;
}
.clear-fix {
clear: both;
float: none;
}
.maxHeight {
height: 100%;
}
.flex {
display: flex;
}
.flex-justify-content--center {
justify-content: center;
}
.flex-align-items--center {
align-items: center;
}
If you look closely, both the HTML and CSS reference two images: logo.png and herobg.jpg.
To see these images, make sure to place these files in a folder named images located where the HTML and CSS files are.
You can now view the HTML page in your browser and see the basic layout of the page, it should look similar to this:
