#Simple website css templates how to#
#Simple website css templates code#
#Simple website css templates tv#

The builder uses an HTML ecommerce website template for a simple landing page as a complete or fully responsive website became spread and popular. The red and blue colors are commonly used in amateur boxing and other combat sports, which is why I chose them for the website.Web design and responsive site prototyping, including eCommerce, have changed recently. Both red and blue colors have been set as the secondary color and primary color respectively in the CSS variables. To style the logo, I will make the first red, the second blue, and the. I also set a transition (declared in the variables) so you will be able to see every transition on the website.Īll links will be blue in appearance and red on hover – correlating to the primary and secondary colors. This way the padding and margin set will be more intentional.

#Simple website css templates code#

In the CSS code snippet above, I’m removing the default margin and padding assigned to all elements by browsers and setting the box-sizing to border-box.

I also have some CSS variables declared and some less complicated resets. We need to style the logo to make it look like one, and we'll use Flexbox to place the logo and menu items side by side.įor the whole web page, I will be using the Roboto font. The navbar looks pretty ugly at this point, so we need to style it. The nav menu now looks like this in the browser: The bars will be span tags placed in a container div with a class of hamburger. The bars will be hidden on the desktop version and visible on mobile phones.įor this, I will be using bars made with raw HTML and CSS, not icons. In addition, we need some bars for the mobile menu. The nav menu items are generic links placed in an unordered list tag, as shown in the snippet below: It’s a combination of the words “Jab” and “TV”, with a punch emoji. Later, we'll place the dark and light theme switcher between the logo and nav items, but let’s focus on the logo and menu items first.įor the logo, I won’t be using an image but a combination of text and emoji placed inside a span tag so I can style them differently. The navbar will have a logo to the left and nav menu items to the right. We will be coding the landing page section by section so it doesn’t get too complicated to understand. The basic HTML boilerplate looks like this: The CSS files, JavaScript files, icons, and images go in their respective subfolders inside the assets folder. The HTML and readme files and a screenshot for the readme are in the root. The folder structure follows the convention that many front end developers use.

#Simple website css templates how to#

How to Make a Hamburger Menu for the Landing Page.

How to Make the Landing Page Responsive.

How to Style the Dark and Light Theme Switcher.

How to Make the Dark and Light Theme Switcher.

How to Style the Email Subscription Section.How to Make the Email Subscription Section.How to Style the Lightbox Image Gallery.To follow along with me, grab the starter files from this GitHub repoĬheck out the live demo too so you can get familiar with what we are building. I believe that as a beginner, you will be able to level up your CSS too after completing this tutorial. and most importantly, a responsive web page.

#Simple website css templates tv#

The name of our fictional TV channel is JabTV, and the purpose of making the landing page is to collect emails.īy the end of this tutorial, you will be able to make: In this text-based tutorial, I’m going to take you through how to make a landing page for a boxing TV channel with plain HTML, CSS, and JavaScript. It can help drive customers to your site where they'll find your products and services and hopefully take action. Having a good landing page for your website is important.