Replicating Digital Ocean Navigation Bar With HTML And CSS
Introduction
In this tutorial, we embark on a journey to replicate the navbar featured on the Digital Ocean website, providing hands-on experience in web development using HTML and CSS. We will explore the HTML and CSS, unraveling the secrets behind building a navigation bar that not only mirrors the aesthetics of a tech giant but also embraces responsive design principles.
Prerequisites
A basic understanding of HTML and CSS is essential. Familiarity with HTML tags, elements, attributes, and CSS styling properties is fundamental for comprehending the tutorial’s instructions. You will need a text editor for coding purposes, and popular choices include Visual Studio Code, Sublime Text, or Atom. By meeting these prerequisites, you’ll be well-prepared to follow the tutorial seamlessly and gain valuable insights into web development using HTML and CSS.
Step 1: Inserting the Logo
<!DOCTYPE HTML>
<html>
<head>
<title>Digital Ocean</title>
</head>
<body>
<nav>
<img src="dig.png" />
</nav>
</body>
</html>In the first place, we define the doctype of the document by the use of <!DOCTYPE HTML> and then we add the title of the document i.e. Digital Ocean. Within the <body> section, the navigation bar is defined by the <nav> element. It incorporates an image element <img src=”dig.png” /> for the logo, where the src attribute points to the logo file named “dig.png.”
Step 2: Inserting Unordered Lists
<nav>
<img src="dig.png" />
<ul>
<li><a href="">Products</a></li>
<li><a href="">Solutions</a></li>
<li><a href="">Developers</a></li>
<li><a href="">Businesses</a></li>
<li><a href="">Pricing</a></li>
</ul>
<ul>
<li><a href="">Log In</a></li>
<li><a class="signup" href="">Sign Up</a></li>
</ul>
</nav>Two unordered lists (<ul>) are employed to organize the navigation items. The first list encompasses navigation links such as Products, Solutions, Developers, Businesses, and Pricing, each wrapped in list item tags (<li>) and anchored with <a> tags. The second list comprises Log In and Sign Up links, similarly enclosed in list items. The need for second list is to maintain a gap between the two navigation lists. The “Sign Up” link possesses an additional class attribute (<a class=”signup” href=””>). This class, denoted as “signup,” is strategically assigned for targeted styling purposes in the accompanying CSS.
Step 3: Basic Styling
In this step, we delve into the realm of styling, enhancing the visual appeal of our Digital Ocean-inspired navigation bar using Cascading Style Sheets (CSS). Let’s break down the additional styles added to the existing HTML structure:
<style>
body {
background: gray;
}
nav {
border: 2px solid white;
height: 76px;
padding: 0 80px;
background: #fff;
display: flex;
justify-content: space-between;
}
</style>Explanation:
- Background Styling (body): The <style> tag encapsulates CSS rules, and the first rule targets the body element. The background color is set to gray, providing a consistent backdrop for the entire webpage.
- Navigation Bar Styling (nav): The second rule targets the <nav> element, refining the styling of our navigation bar. The border property adds a white border around the navigation bar, enhancing its visibility. The height property sets the bar’s height to 76 pixels, and padding adds space inside the bar. The background property establishes a white background color. Employing flexbox (display: flex and justify-content: space-between) ensures a horizontal layout with equal spacing between the logo and navigation links.
This basic styling step sets the stage for a cleaner and more structured appearance. The subsequent steps will further refine the aesthetics, introduce hover effects, and add special styling to certain elements. As we progress, the navigation bar will evolve into a visually striking component of the webpage, capturing the essence of Digital Ocean’s design principles.
Step 4: Style Navigation Links
Building upon the foundational styling established in Step 2, we now focus on refining the appearance of the navigation links within our Digital Ocean-inspired navigation bar.
<style>
/* Previous styles remain unchanged */
ul {
list-style-type: none;
display: flex;
margin: auto;
}
li {
padding: 0 20px;
}
a {
text-decoration: none;
color: rgb(36, 51, 90);
font-weight: bold;
}
a:hover {
background-color: gray;
padding: 10px 5px;
border-radius: 5px;
}
</style>Explanation:
- List Styling (ul): The ul selector targets unordered lists and introduces styling for a clean, organized layout. list-style-type: none; removes the default bullet points from list items, contributing to a sleeker appearance. display: flex and margin: auto ensure the list items are horizontally centered within the navigation bar.
- List Item Styling (li): The li selector adds padding around each list item, providing spacing between the navigation links.
- Anchor Element Styling (a): The a selector customizes the appearance of anchor elements. text-decoration: none; removes underlines from links, enhancing a cleaner look. The color property sets the text color to an RGB value (36, 51, 90), creating a dark blue shade. font-weight: bold; imparts a bold styling to the link text.
- Hover Effect for Links (a:hover): The :hover pseudo-class introduces an interactive effect when users hover over navigation links. The background color changes to gray, and additional padding and border-radius create a subtle elevation effect, enhancing the visual feedback during interaction.
These styles contribute to a cohesive and aesthetically pleasing navigation bar. The hover effect provides users with a clear indication of interactivity, making the navigation experience more engaging. As we progress, further customization and enhancements will be applied to achieve a navigation bar that aligns with Digital Ocean’s design principles.
Step 5: Create the Sign Up Button
In this step, we focus on styling the “Sign Up” button to make it stand out within our Digital Ocean-inspired navigation bar. The button is given a distinctive appearance and interactive hover effects.
<style>
/* Previous styles remain unchanged */
a.signup {
align-items: center;
border-radius: 10px;
background-color: blue;
color: white;
padding: 10px 10px;
height: 40px;
justify-content: center;
width: 100%;
}
a.signup:hover {
background-color: #3399FF;
color: white;
}
</style>Explanation:
- “Sign Up” Button Styling (a.signup): The a.signupde selector targets the anchor element with the class “signup,” which corresponds to our “Sign Up” button. The styling properties applied are:
- align-items: center;
Aligns the content of the button vertically at the center. - border-radius: 10px;
Adds rounded corners to create a softer, more visually appealing button. - background-color: blue;
Sets the background color to a blue shade. - color: white;
Defines the text color as white for better contrast. - padding: 10px 10px;
Adds padding to the button for a comfortable and balanced appearance. - height: 40px;
Sets the height of the button to 40 pixels. - justify-content: center;
Centers the content horizontally within the button. - width: 100%;
Spans the entire width of its container.
2. Hover Effect for “Sign Up” Button (a.signup:hover): The :hover pseudo-class introduces a hover effect for the “Sign Up” button. When hovered over, the background color changes to a lighter blue (#3399FF), providing a visual indication of interactivity. The text color remains white for consistent visibility.
By applying these styles, the “Sign Up” button becomes a focal point within the navigation bar, ensuring it is both visually appealing and responsive to user interaction. This step adds a finishing touch to our navigation bar, making it more engaging and aligned with the overall design inspiration from Digital Ocean.
Final Code
<!DOCTYPE HTML>
<html>
<head>
<title>Digital Ocean</title>
<style>
body
{
background: gray;
}
nav
{
border: 2px solid white;
height: 76px;
padding: 0 80px;
background: #fff;
display: flex;
justify-content: space-between;
}
ul
{
list-style-type: none;
display: flex;
margin: auto;
}
li
{
padding: 0 20px;
}
a
{
text-decoration: none;
color: rgb(36, 51, 90);
font-weight: bold;
}
a:hover
{
background-color: gray;
padding: 10px 5px;
border-radius: 5px;
}
a.signup
{
align-items: center;
border-radius: 10px;
background-color: blue;
color: white;
padding: 10px 10px;
height: 40px;
justify-content: center;
width: 100%;
}
a.signup:hover
{
background-color: #3399FF;
color: white;
}
</style>
</head>
<body>
<nav>
<img src="dig.png" />
<ul>
<li><a href="">Products</a></li>
<li><a href="">Solutions</a></li>
<li><a href="">Developers</a></li>
<li><a href="">Businesses</a></li>
<li><a href="">Pricing</a></li>
</ul>
<ul>
<li><a href="">Log In</a></li>
<li><a class="signup" href="">Sign Up</a></li>
</ul>
</nav>
</body>
</html>Conclusion
This tutorial guided us through the step-by-step process of creating a sophisticated and user-friendly navigation bar inspired by Digital Ocean, using HTML and CSS. Commencing with the establishment of a well-structured HTML document, we progressively applied styles to enhance the visual appeal and functionality of the navigation bar. Basic styling provided a clean foundation, while subsequent refinements focused on the navigation links, introducing a hover effect for a more engaging user experience. Through the harmonious integration of HTML and CSS, we crafted a navigation bar that not only mirrors the aesthetic principles of Digital Ocean but also offers a responsive and visually appealing interface.
