How to make a sample HTML site using Semantic UI?

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no" />
    <title>Semantic UI Template</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" type="text/css" />
    <style type="text/css">
        body {
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: grayscale;
        }

        @media only screen and (min-width: 768px) {
            .ui.container {
                width: 730px;
                max-width: 730px;
            }
        }

        .ui.container .right.menu .item.active {
            background-color: #337ab7;
            color: white;
        }

        .ui.container>.ui.message {
            background-color: #ABE6FA;
            box-shadow: none;
            padding: 4rem 2rem;
        }

        .ui.container h1.ui.header {
            font-size: 2.5rem;
            text-align: center;
        }

        @media only screen and (min-width: 768px) {
            .ui.container h1.ui.header {
                font-size: 4.5rem;
            }
        }

        .ui.container p.lead {
            font-size: 1.5rem;
            color: #333333;
            line-height: 1.4;
            font-weight: 300;
        }

        .ui.container .ui.grid .row {
            margin-bottom: 1.5rem;
        }

        .ui.container>.ui.menu {
            border-width: 0 0 1px 0;
            border-radius: 0;
            height: 6rem;
            box-shadow: none;
            margin-bottom: 28px;
        }

        .ui.container>.ui.menu .header.item {
            padding-left: 0;
            font-size: 1.6rem;
            color: #777777;
        }

        .ui.container .right.menu .item {
            color: #337ab7;
            padding: 0.8em 0.6em;
            margin: 1.6em 0.2em;
            background: none;
            transition: color 0.1s ease;
            border-radius: 0.28571429rem;
            font-size: 14px;
        }
    </style>
</head>

<body id="root">
    <div class="ui container">
        <div class="ui borderless menu">
            <a class="header item">Semantic UI</a>
            <!-- Navbars -->
            <div class="right menu">
                <a class="active item">Home</a>
                <a class="item">About</a>
                <a class="item">Contact</a>
            </div>
            <!-- End of Navbars -->
        </div>

        <!-- Featured Blog -->
        <div class="ui message">
            <div class="ui center aligned grid">
                <h1 class="ui">How to make a sample HTML site using Semantic UI?</h1>
                <p class="lead">
                    This is a sample HTML template for starters on web development. <br>It uses Semantic UI as its front-end framework. Enjoy!
                </p>
                <a class="ui green button">Read more!</a>
            </div>
        </div>
        <!-- End of Featured Blog -->

        <!-- List of other Blogs -->
        <div class="ui two column stackable padded grid">
            <!-- Left Column -->
            <div class="column">
                <h2 class="ui header">Blog 1</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusamus, assumenda animi excepturi omnis quam, eaque voluptatibus harum facilis aperiam beatae repellat sit itaque deleniti voluptatem porro sequi corporis numquam!
                </p>
                <h2 class="ui header">Blog 2</h2>
                <p>
                    Autem ratione recusandae commodi reiciendis nihil corporis numquam! Ratione repellat facere, nam iure quis voluptatum consectetur quas asperiores. Dignissimos repellat vero vitae?
                </p>
                <h2 class="ui header">Blog 3</h2>
                <p>
                    Suscipit deserunt omnis nostrum provident quo, nisi optio aut magnam! Natus voluptates est sunt nemo ut architecto ab saepe necessitatibus modi cumque!
                </p>
            </div>
            <!-- End of Left Column -->

            <!-- Right Column -->
            <div class="column">
                <h2 class="ui header">Blog 4</h2>
                <p>
                    Saepe facere quos repellendus cupiditate blanditiis nesciunt expedita ullam dolor vitae cum, voluptates rem reiciendis, architecto soluta minus praesentium earum, aliquid officiis.
                </p>
                <h2 class="ui header">Blog 5</h2>
                <p>
                    Dicta non ipsum laudantium optio nostrum aspernatur, explicabo quis ab modi quisquam hic qui eos porro nobis. Non nesciunt explicabo quis itaque!
                </p>
                <h2 class="ui header">Blog 6</h2>
                <p>
                    Blanditiis ipsa similique quasi aspernatur dignissimos, consequuntur tempora fugiat velit totam deleniti eius ea quas magnam, dolor commodi debitis? Quisquam, quis ipsa?
                </p>
            </div>
            <!-- End of Right Column -->
        </div>
        <!-- End of List of other Blogs -->

        <!-- Footer -->
        <div class="ui divider"></div>
        <footer>&copy; 2021 Curbside Coder</footer>
        <!-- End of Footer -->
    </div>
</body>

</html>

This is how it will look like once done.

Published by Christian Foster

Code-blooded, coffee-lover, tall, dark and chubby. I love to draw, has motion-sickness and a sleepy-head. BTW, graduate of BS Computer Science, Associate in Computer Science and certified UiPath RPA Developer. Loyal to my partner and a father of a cute bouncing baby daughter!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: