# Project 1 - "Link Tree" Landing Page

In this first project, we'll build a "link-tree" replacement. "Link tree" is a
popular website for making landing pages that collects all of your social media
or other web links into one spot that you can include in your profile to
promote your brand, store, or resume. This is one of the best beginner projects
to work on.


--------------------------

## Can you build the design by looking at the solution?

- You will probably get stuck, so use the clues for snippets of code to read,
  understand as best you can, modify, and then include via copy and paste.

- Challenge mode: To truly put your skills to the test, carefully examine the
  solution in your browser, see how much of the solution you can recreate
  without checking the clues (copying and pasting text, image URLs, etc, is
  okay).

- Remember: It's always okay to copy & paste from previous activities!



--------------------------

## Clue 1

1. Open `clue1.html` in your text editor
2. Examine the code: This clue will provide most of the HTML of the Link Tree
replacement, consisting of `<p>` tags and an `<h1>` tag. The only thing we
haven't seen yet are the "emojis" mixed in.
3. Copy and paste this code into a new HTML document, such as the empty file
called "project1.html" included here




--------------------------

## Clue 2

1. Open `clue2.html` in your text editor
2. Examine the code: This clue consists of a `<style>` tag that provides some
of the colors and layout of the project
3. Copy and paste this code into your project's HTML document, above any
existing code


--------------------------

## Clue 3

1. Open `clue3.html` in your text editor
2. Examine the code: This clue consists of a bunch of `<a>` tags that have
placeholder links to popular social media and art sites. This code includes
something new: A common technique is to use `href="#"` as a placeholder, when
you haven't yet added something to link it to.
3. Copy and paste each link below each paragraph that corresponds to that link.


* **Hint:** The top "LinkedIn" one will look like this:

        <p>💼 Read the testimonials given by my past clients on my LinkedIn page:</p>
        <a href="#">LinkedIn</a>


--------------------------

## Clue 4

1. Open `clue4.html` in your text editor
2. Examine the code. This clue consists of another `<style>` tag that provides
both color, padding, and sizing of p tags and a tags.
3. Copy and paste the `a` tag rule into your `<style>` tag
4. Copy and paste the padding-top property (`padding-top: 20px;`) into the `p`
rule in your `<style>` tag


* **Hint:** The p tag rule in your HTML will look like this:


        p {
            color: DarkSlateGray;
            padding-top: 20px;
        }