This post will give you a static template for your roofing website. I built this template from scratch. You can use it for free. You can also convert this template or create the same layout on WordPress, Squarespace, Wix, etc. This template is unique, mobile responsive, fast loading, easy to manage/edit & professional. This will be an inspiration for anyone who needs a roofing website. If you don’t have enough budget to buy a theme or template or if you don’t want to spend money, you can download this template and create your roofing website within half an hour. Moreover, […]
Read More →A landing page is a great opportunity to get leads and make sales. It also helps the visitors to navigate through different content of your website. Your prospects get a clear idea about what you do and why they should interact with you. In this post, I will show you how to create a perfect landing page using only HTML, CSS & a small amount of JavaScript. I also have added a link to download the full template. Before you get started, see the live demo of the finished page that you’re going to build. Did you like it (live […]
Read More →
To create a coming soon template or page, the most important part is the countdown timer. You can come up with any styles but your audience may want to see the remaining time to go live. In this post, I will show you how to create a static coming soon page only using HTML & CSS. I used a few lines of JavaScript only for the countdown timer. You can download the template & use it on your projects for free. Before you start, see the live preview of the coming soon page that you are going to build. If […]
Read More →
In this post, I will show how you can create a simple ribbon in pricing cards. Also, I will give you a downloadable template that contains 3 pricing cards and a ribbon. In the real world, the ribbon is used only with one card/item that you want to highlight. And this is what I built in this post. Around the web, you’ll get many ribbon samples. But the problem happens when you try to implement them on your own projects. This is just because most of the samples are created with a blank HTML div that has a specific width […]
Read More →In this post, I will show you how to create a resume or CV (curriculum vitae) using HTML & CSS. Also, I will give you the downloadable template so you can edit the information and quickly get started. The template I built for this post is completely mobile responsive. I will also tell you why this digital resume is essential and how you can host your resume online for free & how you’ll get a shareable URL from GitHub Pages. Also, I will show you how you can create a JPG/PNG/PDF of your resume. Let’s get started. Create a resume […]
Read More →
The best way to create a spinning animation using CSS is to use the keyframe & animation property. You can create many different variations in the keyframe and plug it into the animation property. In this post, I will show you a very simple and easy-to-build spinning box that rotates clockwise. See its demo below. Code for this spinner To create the above rotating spinner, I have the following HTML: HTML As you see in the above HTML, I only have a span tag with an animate-me class. You can use div or any other HTML tags. We need to […]
Read More →In this post, I will give you some examples of gradient background colors and explain how you can make them yourself. You’ll learn how to use the background image and background color (semi-transparent) together where the color stays on top of the image. Last but not least, you’ll also learn how to implement a semi-transparent gradient background on top of a background image. You can check the live preview of the examples in the link below. Let’s get started. Gradient background color examples In this section, I will give you some examples and their CSS. After that, I will explain […]
Read More →
In this post, I will show you to wrap text around an image. You’ll also learn different versions of this wrapping. Such as wrapping the image from the top-right-bottom, top-left-bottom, top-right, bottom-left, etc. Last but not least, you’ll also learn how to fix/optimize the layout for mobile. Because you don’t want this wrapping or floating alignment on mobile, right? I will use HTML & CSS to demonstrate all the examples but you can implement the same concept on other technologies such as WordPress, AMP, etc. You can check the demo of all the examples that I will create in the […]
Read More →
In this post, I will show you how to center elements both vertically & horizontally using CSS Flexbox. Also, I will give multiple examples to solve problems in different scenarios. Before you start, please check the live demo of the examples that you’ll build. Let’s get started. Centering elements using Flexbox (both vertical & horizontal directions As mentioned earlier, I will give you multiple examples so you can solve problems in any circumstance. Let’s check them one by one. Example 1: Center alignment a collection of items that are stacked one after another As you see in the screenshot above, […]
Read More →
The position: absolute can’t work alone. Because the absolutely positioned element also needs to position itself compared to a certain (another) element. And this is where the position: relative comes into play. But if you do not specify the relative position, then it (absolutely position element) will consider its nearest container (ancestor) element as the relative. In this post, I will show how you can perfectly center-align HTML elements using absolute position. After reading this post, you’ll be able to center align any elements both horizontally & vertically. Before you dive in, you can check the live demo of the […]
Read More →