Anatomy of a Semantic-UI Template: Cover

Two important components

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

Custom CSS code for layout

.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);
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Software House

Bootstrap 4: Accordion — How to create an Accordion using Bootstrap 4 Cards

OpenVidu 2.18.0: improved recordings, client SDK, reconnection capabilites and much more

Building a Live Tweet Dashboard using Tweepy, MySQL and Streamlit

Boosting performance of IntelliJ IDEA …and the rest of JetBrains’ IDEs

Recursion Visualized

Top 6 Reasons to Choose Postman for API Testing

Optimize and resize images in AWS S3 in real-time with ImageKit

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
Chun Ming Wang

Chun Ming Wang

More from Medium

Chrome Extension: Remove unwanted Elements

How Browsers Work: The main flow

Figure: Webkit main flow

CSS, the silent beautifier.

5 Easy Steps to Make Your Website More Accessible

Website Accessibility Header