Creative Billboard Design with Wooden Textures

Introduction

In this project, you will learn how to create a creative billboard design that combines the history of "Fanciful Valley" and the prosperity of "Dream Bay". You will learn how to style the billboard with a wooden-textured background and a tilted top sign, creating a captivating artistic experience for passersby.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set the border radius and background image of the billboard element
• How to round the top corners and tilt the top sign element

🏆 Achievements

After completing this project, you will be able to:

• Use CSS properties like border-radius and transform to create unique design elements
• Incorporate background images to enhance the overall aesthetic of a web design
• Combine design elements to create a cohesive and visually appealing layout

Set Up the Project Structure

To get started, open the experiment environment, and the directory structure is as follows:

├── css
│   └── style.css
├── images
│   └── woodiness.jpg
└── index.html

Among them:

• index.html is the main page.
• images is the folder for storing project images.
• css/style.css is the CSS file where you need to supplement the code.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open the "Web 8080" on the top of the VM and manually refresh the page to see the following effect in your browser:

Set the Billboard Background

In this step, you will learn how to set the background of the billboard element and round its corners.

1. Open the css/style.css file.

2. Locate the .billboard class.

3. Add the following code to set the border radius and background image:

   border-radius: 10px;
   background-image: url(../images/woodiness.jpg);
   

   • The border-radius property sets the border radius of the .billboard element to 10 pixels, creating rounded corners.
   • The background-image property sets the background image of the .billboard element to woodiness.jpg located in the images folder.

Tilt the Top Sign

In this step, you will learn how to round the top corners of the top sign element and tilt it.

1. Locate the .top-sign class in the css/style.css file.

2. Add the following code to round the top corners and tilt the element:

   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   transform: skewX(-20deg);
   

   • The border-top-left-radius and border-top-right-radius properties set the top left and top right corners of the .top-sign element to have a radius of 15 pixels, creating rounded corners.
   • The transform: skewX(-20deg) property tilts the .top-sign element by -20 degrees on the x-axis.

After completing these three steps, the billboard should have a rounded, wooden-textured background, and the top sign should be tilted with rounded top corners, as shown in the completed effect image.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.