Build a Local Library Homepage UI in Pure HTML5, and CSS3

Hey guys welcome. In this tutorial, we will build a simple UI for a Local Library.

Let’s get started.

The HTML Structure

We first, need to build the HTML5 structure of the page.

The Main Header

We will start with the header. For header, we will use a heading, and a small description

<header>
    <h1>Welcome to Your Local Library</h1>
    <p>Discover a world of knowledge, inspiration, and community at our library. Explore books, attend events, and connect with fellow readers.</p>
</header>
Code language: HTML, XML (xml)

The Navigation

Next, we will need a navigation bar. For that, we will add some items in it. For example, we will add:

• Home
• Catalog
• Events
• Services and
• Contact

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#catalog">Catalog</a></li>
        <li><a href="#events">Events</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>
Code language: HTML, XML (xml)

The Features Section

Now, before we dive into features, let’s make sure we have everything inside a container. Then inside the container, we can list the features.

For features, we will add icons, heading, and a small description. Now, for icons, we will use a CDN.

<link href="https://cdn.jsdelivr.net/npm/iconoir@7.4.0/css/iconoir.css" rel="stylesheet">Code language: HTML, XML (xml)

Here, we have used iconoir, but you can use anything you like.

Now, let’s list the features. But first, let’s open a container, and inside that, we will list the features.

<div class="container">
    <section class="features">
        <div class="feature-card">
            <i class="iconoir-book"></i>
            <h3>Browse Books</h3>
            <p>Explore our vast collection of books across all genres.</p>
        </div>
        <div class="feature-card">
            <i class="iconoir-calendar"></i>
            <h3>Events</h3>
            <p>Join our community events, book clubs, and author talks.</p>
        </div>
        <div class="feature-card">
            <i class="iconoir-wifi"></i>
            <h3>Free Wi-Fi</h3>
            <p>Stay connected with our high-speed internet access.</p>
        </div>
        <div class="feature-card">
            <i class="iconoir-laptop"></i>
            <h3>Digital Resources</h3>
            <p>Access e-books, audiobooks, and online databases.</p>
        </div>
    </section>
Code language: JavaScript (javascript)

The Categories Section

Next, let’s add some categories for our UI. Since it’s a library UI, you can add varieties of categories that you love. For now, I will the following.

• Fiction
• Non-Fiction
• Young Adult
• Children
• Science & Tech
• History
• Romance
• Mystery & Thriller
• Science Fiction
• Biography

These are enough for now, and as the UI grows, we can extend them later. For now, let’s add the required HTML. We will add an icon, and the category name.

<section class="categories">
    <h2>Explore by Category</h2>
    <div class="category-list">
        <div class="category-item">
            <i class="iconoir-book-stack"></i>
            <p>Fiction</p>
        </div>
        <div class="category-item">
            <i class="iconoir-bookmark-book"></i>
            <p>Non-Fiction</p>
        </div>
        <div class="category-item">
            <i class="iconoir-star"></i>
            <p>Young Adult</p>
        </div>
        <div class="category-item">
            <i class="iconoir-baby"></i>
            <p>Children's</p>
        </div>
        <div class="category-item">
            <i class="iconoir-light-bulb"></i>
            <p>Science & Tech</p>
        </div>
        <div class="category-item">
            <i class="iconoir-map"></i>
            <p>History</p>
        </div>
        <div class="category-item">
            <i class="iconoir-heart"></i>
            <p>Romance</p>
        </div>
        <div class="category-item">
            <i class="iconoir-skull"></i>
            <p>Mystery & Thriller</p>
        </div>
        <div class="category-item">
            <i class="iconoir-planet"></i>
            <p>Science Fiction</p>
        </div>
        <div class="category-item">
            <i class="iconoir-pen"></i>
            <p>Biography</p>
        </div>
    </div>
</section>
Code language: HTML, XML (xml)

These come exactly below the features, which is inside the container. Make sure the categories are nested inside container, just like features.

The Books Section

Now, let’s add the books section. For demo, we will use picsum random images. If you already have the images, you can use those.

Our books section will have a list of cards, and these cards will have a heading, images, a small description, and a borrow button.

<section class="books">
    <h2>Featured Books</h2>
    <div class="book-list">
        <div class="book-card">
            <img src="https://picsum.photos/250/200?random=6" alt="Book cover 1">
            <div class="book-card-content">
                <h3>The Night Circus</h3>
                <p>A magical tale of two young illusionists bound in a mysterious competition within an enchanted circus.</p>
                <a href="#borrow">Borrow Now</a>
            </div>
        </div>
        <div class="book-card">
            <img src="https://picsum.photos/250/200?random=7" alt="Book cover 2">
            <div class="book-card-content">
                <h3>Sapiens</h3>
                <p>A captivating exploration of how Homo sapiens came to dominate the Earth.</p>
                <a href="#borrow">Borrow Now</a>
            </div>
        </div>
        <div class="book-card">
            <img src="https://picsum.photos/250/200?random=8" alt="Book cover 3">
            <div class="book-card-content">
                <h3>The Hobbit</h3>
                <p>Join Bilbo Baggins on an epic adventure filled with dragons, wizards, and treasure.</p>
                <a href="#borrow">Borrow Now</a>
            </div>
        </div>
        <div class="book-card">
            <img src="https://picsum.photos/250/200?random=9" alt="Book cover 4">
            <div class="book-card-content">
                <h3>Educated</h3>
                <p>A memoir of a woman who transforms her life through the power of education.</p>
                <a href="#borrow">Borrow Now</a>
            </div>
        </div>
        <div class="book-card">
            <img src="https://picsum.photos/250/200?random=12" alt="Book cover 5">
            <div class="book-card-content">
                <h3>Dune</h3>
                <p>A sci-fi epic of political intrigue and survival on the desert planet of Arrakis.</p>
                <a href="#borrow">Borrow Now</a>
            </div>
        </div>
        <div class="book-card">
            <img src="https://picsum.photos/250/200?random=13" alt="Book cover 6">
            <div class="book-card-content">
                <h3>Pride and Prejudice</h3>
                <p>A classic romance novel exploring love, class, and societal expectations.</p>
                <a href="#borrow">Borrow Now</a>
            </div>
        </div>
        <div class="book-card">
            <img src="https://picsum.photos/250/200?random=14" alt="Book cover 7">
            <div class="book-card-content">
                <h3>The Girl with the Dragon Tattoo</h3>
                <p>A gripping mystery thriller following a hacker and a journalist solving a decades-old disappearance.</p>
                <a href="#borrow">Borrow Now</a>
            </div>
        </div>
        <div class="book-card">
            <img src="https://picsum.photos/250/200?random=15" alt="Book cover 8">
            <div class="book-card-content">
                <h3>Becoming</h3>
                <p>An intimate memoir by Michelle Obama, chronicling her life and experiences.</p>
                <a href="#borrow">Borrow Now</a>
            </div>
        </div>
    </div>
</section>
Code language: HTML, XML (xml)

These too are listed and nested under the container. You can add this exactly below categories.

The Gallery Section

Next, we can add some images for gallery. These images can be photos of the local library. For now, we will use the picsum random images.

<section class="gallery">
    <h2>Our Library</h2>
    <div class="gallery-grid">
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=2" alt="Library interior">
            <div class="gallery-caption">Main Reading Room</div>
        </div>
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=3" alt="Reading nook">
            <div class="gallery-caption">Cozy Reading Nook</div>
        </div>
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=4" alt="Book shelves">
            <div class="gallery-caption">Extensive Book Collection</div>
        </div>
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=5" alt="Study area">
            <div class="gallery-caption">Quiet Study Area</div>
        </div>
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=10" alt="Community room">
            <div class="gallery-caption">Community Event Space</div>
        </div>
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=11" alt="Children's section">
            <div class="gallery-caption">Children's Reading Corner</div>
        </div>
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=16" alt="Computer lab">
            <div class="gallery-caption">Computer Lab</div>
        </div>
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=17" alt="Outdoor patio">
            <div class="gallery-caption">Outdoor Reading Patio</div>
        </div>
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=18" alt="Reference section">
            <div class="gallery-caption">Reference & Research Section</div>
        </div>
        <div class="gallery-item">
            <img src="https://picsum.photos/200/150?random=19" alt="Media room">
            <div class="gallery-caption">Multimedia Resource Room</div>
        </div>
    </div>
</section>
Code language: HTML, XML (xml)

again, this is nested under the container, below the books section.

The Contact Section

Next, we have the contact section. This will be a simple contact card, that we can use to display contact information.

    <section class="contact-section">
        <h2>Contact Us</h2>
        <p>123 Library Lane, Booktown, BK 12345</p>
        <p>Email: info@locallibrary.org</p>
        <p>Phone: (123) 456-7890</p>
        <p>Hours: Mon-Fri 9AM-8PM, Sat-Sun 10AM-5PM</p>
    </section>
</div>
Code language: HTML, XML (xml)

Here, you can see we have added the closing tag of the container.

The Footer Section

Now, finally we will add the footer section, that is outside the container.

<footer>
    <p>© 2025 Local Library. All rights reserved.</p>
</footer>
Code language: HTML, XML (xml)

CSS Integration

Now, that our HTML section is ready, let’s start styling it with the CSS. Let’s 1st add some Google fonts to our code.

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
Code language: HTML, XML (xml)

Here, I have added the Roboto font, with font weight 400, and 700.

Next, let’s create a separate stylesheet, where we can write our CSS.

<link rel="stylesheet" href="style.css">
Code language: HTML, XML (xml)

Alright. Now that we have our CSS file, let’s start styling.

Styling the body

1st, let’s style the body of UI.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

body {
    background-color: #f5f5f5;
}
Code language: CSS (css)

Here, I have used border-box as box-sizing, and I have set the body font to 14px. You can change that if you want to. You can apply em, rem, or what ever that suits you.

Right now our UI looks like this

Styling the Header

Now, let’s style the header.

header {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://picsum.photos/1200/400?random=1');
    background-size: cover;
    background-position: center;
    height: 400px;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 1rem;
}

header p {
    font-size: 1.2rem;
    max-width: 600px;
}Code language: CSS (css)

For the background, I have used a linear gradient, and a picsum image. Which would change every time you refresh. For now that is, but you can change the to a fixed one later.

Right now, this is how our header looks.

Also, you can see I have used the Playfair display font for the main heading.

Styling the Navbar

Now, let’s style our navbar.

nav {
    background-color: #2c3e50;
    padding: 1rem;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
}

nav a:hover {
    color: #3498db;
}
Code language: CSS (css)

now, we have use flex to build the navbar, and here’s how it looks.

Styling the Container

Since we will be adding everything inside the container, let’s style that too.

.container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}
Code language: CSS (css)

and here’s how that looks now.

Styling the Features

Now, that the container is ready, let’s start styling the features section, and the features in it.

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.feature-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card i {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
Code language: CSS (css)

and this is how our features section looks now.

Styling the Categories

Now, we need to style the categories. We will use the similar styles, but to keep it modular, let’s write a separate set of styles for that.

.categories {
    margin-bottom: 2rem;
}

.categories h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.category-item {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.category-item:hover {
    transform: translateY(-5px);
}

.category-item i {
    font-size: 2rem;
    color: #3498db;
    margin-bottom: 0.5rem;
}
Code language: CSS (css)

and this is how it looks now.

I know some icons are missing, but we can add the later. For now, let’s build the UI first. Let’s move on to the next one.

Styling the Books Section

Now, the core part of our UI. The books section. We can use the card design here. But again, to keep it customizable, am gonna write a separate set of styles for this.

.books {
    margin-bottom: 2rem;
}

.books h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.book-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.book-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s;
}

.book-card:hover {
    transform: translateY(-5px);
}

.book-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.book-card-content {
    padding: 1rem;
}

.book-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.book-card p {
    color: #666;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.book-card a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
}

.book-card a:hover {
    text-decoration: underline;
}
Code language: CSS (css)

that’s a lot of code, and styles. But now, look how good it looks.

That’s actually looking pretty awesome. Especially with the hover effects. Let’s move on to the next one.

Styling the Gallery

For gallery it’s just images and caption. So, we will show the caption, when the user hovers the image.

Here’s how that works.

.gallery {
    margin-bottom: 2rem;
}

.gallery h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s;
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}
Code language: CSS (css)

Now, let’s see how that looks.

Those images look pretty cool in a grid. Plus, check put how cool the hovered caption looks.

Okay, let’s move on to the contact section.

Styling the Contact Section

Now, we will keep the contact section, simple and neat.

.contact-section {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
    text-align: center;
}

.contact-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.contact-section p {
    margin-bottom: 0.5rem;
}
Code language: CSS (css)

and this is how it looks.

This keeps the contact section, simple and neat. Now finally we have the footer section.

Styling the Footer

Now, inside footer, we can add many things. But we kept it simple and neat. Now, let’s make sure we also style it simple and neat.

footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 1rem;
    position: relative;
    bottom: 0;
    width: 100%;
}
Code language: CSS (css)

and finally, this is how it looks.

Now, this actually goes so well with our theme.

Responsive Design

Now, let’s make it compatible to work with any device screen.

@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    .book-card h3 {
        font-size: 1.1rem;
    }
}
Code language: CSS (css)

That’s it. That is all we need. and look how it looks in the phone screen.

Here’s the complete project.

Download Now