💻 Project #2: Build a Town

Project Setup & Overview

🏙️ In this creative project, you will use CSS positioning to place elements creatively on a webpage. Your goal is to design a unique townscape with icons, backgrounds, and div boxes styled into different shapes.

🧠 BRAINSTORM: Pick a fun theme! (city, rural, suburbs, island, fantasy, etc).

📥 PROJECT SETUP & SUBMISSION INSTRUCTIONS

Go to the public template repository for our class: BWL-CS HTML/CSS/JS Template
Click the button above the list of files then select Create a new repository
Specify the repository name: CS1-CSS-Town
Click

Now you have your own personal copy of this starter code that you can always access under the Your repositories section of GitHub!
Now on your repository, click and select the Codespaces tab
Click Create Codespace on main and wait for the environment to load, then you’re ready to code!
📝 Write code in this Codespace during class.

Instructions

🖼️ Add a Background Image:
- Find an image to use for the ground, such as grass, bricks, or a texture (check out this Seamless Textures website). Feel free to experiment with different images to find one that fit your vision for the town.
- In your CSS file, set the background to the image’s url.
```
 body {
  background: url( );
  background-size: 20%;
  width: 100%;
 		height: 100%;
  margin: 0;
  padding: 0;
 }
```
🌈 Create a Gradient Background:
- In your HTML file, add a <div> with an id="sky" to represent the sky.
- In your CSS file, style the sky with a linear-gradient of your choice. Experiment with different combinations of colors to create your ideal sky!
```
 #sky {
  background: linear-gradient(DeepSkyBlue, LightSkyBlue, AliceBlue);
  width: 100%;
  height: 60%;
  position: absolute;
  z-index: 0;
 }
```
⭐️ Add a Symbol/Emoji:
- Add a symbol or emoji to represent something in the sky. It could be a ☀️ (sun), 🌙 (moon), ☁️ (cloud), or any other symbol of your choice!
- In your HTML file, add a <span> element (inline container) to hold your symbol: <span id="sky-symbol">☀️</span>
- In your CSS file, select your symbol to adjust the size and position it in the sky. Adjust the top and left properties to place the symbol exactly where you’d like.
```
 #sky-symbol {
  font-size: 150px;
  position: absolute;
  top: 5%;
  left: 10%;
 }
```
🟪 Make Rectangles with Divs:
- In your HTML file, add a <div> with an id="building-1" to represent a structure in your town (like a house, store, or office building).
- In your CSS file, style it to give it a unique color and position it on the page.
- Feel free to choose a different color, size, or position for your building.
```
 #building-1 {
  background: lightgray;
  width: 100px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 200px;
 }
```
🔺 Make Triangles with Divs:
- INSIDE the building <div>, add another <div> with an id of "roof-1" or a name of your choice.
- Style it to look like a triangular roof, as in the code snippet below.
- Adjust the colors, shapes, and sizes to fit your design. You could even use another symbol, like 🏠 or 🏛️, to create a roof effect.
```
 #roof-1 {
  border-bottom: 60px solid brown;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  position: relative;
  bottom: 60px;
 }
```
🎨 Customize your Town:
- Get creative! Add more buildings, symbols, or decorative elements to make the town your own.
- Experiment with shapes, colors, and different icons to add personality to your town.
- See below for a checklist of minimum requirements for this project.

Minimum Requirements

Buildings or Structures:

Include at least 3 buildings or structures (e.g., houses, stores, towers) created using <div> elements.
- Each building should have a distinct style, size, or color to add variety to your townscape.

Symbols or Emojis:

Use at least 10 symbols or emojis to represent elements of your town.
- Icons or emojis can be added in the sky (e.g., ☁️ or 🌙), as landmarks (e.g., 🏛️ or 🏫), or as decorations (e.g., 🏠 or 🚗).
- Ensure that these icons are positioned and sized appropriately to fit into the overall design.

Sky Design:

The sky must include a gradient background.
- You can customize the colors to create a sunrise, sunset, daytime, or nighttime feel.
Include at least one emoji or icon in the sky (e.g., ☀️, 🌙, or ☁️).

Extra Decorative Element(s):

Add at least one extra decoration to each building or structure, such as a roof, door, window, or tree.
- Each extra element should be styled differently from the main building, using unique colors, shapes, or positioning.

Creative Positioning:

Use CSS positioning (like absolute or relative) to place elements creatively around the town.
- Experiment with different top, left, right, or bottom values to arrange your buildings and icons in a way that resembles a town layout.

📖 RESOURCES: While working on this activity, you are encouraged to look up CSS properties on Google or W3Schools, review our Unit 1 Notes or Unit 2 Notes, and make use of the helpful SheCodes CSS Tools.