Anatomy of a Semantic-UI Template: Cover

Two important components

Read the cover-plain.html line by line. Two important components are observed. They are segment and menu.

{
position: relative;
margin: 1rem 0;
padding: 1em 1em;
}
.ui.segment:last-child {
margin-bottom: 0;
}

Custom CSS code for layout

There is custom-written CSS code inside <style> tag. Most is for formatting text, color, and space, etc. It is not explained here. However, two points are worthy of mention. The first one (denoted here as Rule 1 for convenience) is:

.ui.inverted.vertical.segment { 
height: 100vh;
background-color: rgb(51, 51, 51);
}
.ui.inverted.vertical.segment footer.ui.segment {
height: 80px;
width: 100%;
position: absolute;
bottom: 0;
color: gray;
}
div.ui.inverted.vertical.segment {
height: 100vh;
background-color: rgb(51, 51, 51);
}
.ui.inverted.vertical.segment footer.ui.segment {
width: 100%;
position: absolute;
bottom: 0;
color: gray;
background-color: rgb(51, 51, 51);
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store