# Profile Card
There were a lot of reading in the first assignment, weren't it? Ok Let's do something fun. Have you seen this guy on our [website](https://www.coderschool.vn/en/)? This is Charles and his iconic smile :)


#### Requirememnts:

- Use the tag `h1` for the title
- Use this color code `#f26d69` for the sub title
- Make the card look exactly the same of the sample above :)

Don't worry, we know you are new to this field. Therefore, the instruction will be given. We want to check that you can follow instructions. And we want to get to know you better which means you are encouraged to put your own information to the profile card.

### Create a card with content

<div class="wrapper">
      <div class="card">
        <img
          src="https://cdn.sanity.io/images/vrx9irrf/production/c098644ad608a6f9e9aab362f7231aaa9fbb2509-676x422.jpg"
          alt="Charles"
          style="width: 100%"
        />
        <h1>Charles Lee</h1>
        <p class="sub-title">Co-Founder & CEO</p>
        <p class="content">
          Charles Lee graduated from UC Berkeley in the US and has worked as a
          software engineer for 10 years in Silicon Valley. He spent 3 years
          consulting for Walmart Labs, designing courses for CodePath, and
          mentoring for Bloc.io.
        </p>
    </div>
</div>

.wrapper {
    margin: auto;
    max-width: 300px;
}
.card {
    font-family: "Montserrat", sans-serif;
    border: 1px solid #d74742;
    /*YOUR CODE HERE*/
}

.sub-title {
    color: #f26d69;
    font-size: 18px;
}
.content {
    font-size: 14px;
    margin: 0;
    /*YOUR CODE HERE*/
}

#### Common stuff
At this point, you should be able to handle these following requirements:

- Center all text in the card
- Round the corner of the card by 20px
- You might face an issue with the top border of the card which is caused by the overlap image. Fix that with the property `overflow:hidden` and see what happen
- With the `content`, stretches the lines so that each line has equal width (like in newspapers and magazines). [hint](https://www.w3schools.com/cssref/pr_text_text-align.asp)
- Give `content` a [padding shorthand](https://www.w3schools.com/css/css_padding.asp) with the flowing value: padding top is 0, the other three are equal to `1.5rem`

### An icon is worth a thousand words
Yes, we'll add an icon that link to the your profile page on **Linkedin** when you click on it (if you haven't got linkedin account yet, it can be your facebook address).

<img
    src="https://cdn.sanity.io/images/vrx9irrf/production/c098644ad608a6f9e9aab362f7231aaa9fbb2509-676x422.jpg" 
    alt="Charles" 
    style="width: 100%"
/>
<a class="linkedin" href="https://www.linkedin.com/in/charleslee5/">\
    <i class="fab fa-linkedin"></i>
</a> /*add this line*/
<h1>Charles Lee</h1>

`<i class="fab fa-linkedin"></i>` : this is the Linkedin icon, which is wrapped around by the `<a>` (link from one page to another, [more](https://www.w3schools.com/tags/tag_a.asp)).

With a given class `linkedin` to the `<a>`tag, now it your turn to:

i { /*this is how we select the tag, call it name without # or . */
    border-radius: 0.5rem;
    padding: 0.5rem;
    border: 1px solid red;
}

.linkedin {
    /* Follow requirements and put YOUR CODE here
    - Give it a 25px font size
    - Give it the same color as the card border
    - Round the corner with 0.5rem
    */
}

### Advanced positioning
We want the icon lies on the top right of the card, we'll use the property `position`. This [concept](https://developer.mozilla.org/en-US/docs/Web/CSS/position) is quite advance, don't worry if you can't understand it just yet. We will learn more about it in the main course.

- Add `position: relative` to the class `card`
- Add `position: absolute;` `right: 1rem;` `top: 1rem` to the class `linkedin`

You now will see we successfully place the icon on the top right of the card.

### One last step: magical color
There is still one step to go to make our card perfectly match the sample. Can you point out what is the remain issue?
.
.
.

Yes, that's it! The border color and a little shadow around the card!

We are now, working on the `wrapper` class and the `card`. The idea is that, we will change the `background-color`of the `wrapper` with the gradient. Then give a `white` `background-color` to our card!

Let's see how it works.

.wrapper {
    margin: auto;
    max-width: 300px;
    box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(147.86deg, #f06b67 11.65%, #6486ff 89.61%);
    /*Then give it a rounded corner by 20px*/
}
.card {
    font-family: "Montserrat", sans-serif;
    border: 1px solid #d74742;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    /* Give it a white backgound color to see some magic*/
}

Oops.. I bet you can't see anything change. Yes, we forget to add one more thing.
- Give `padding: 1px` to the `wrapper`
- And delete the line `border: 1px solid #d74742;` in the class `card` to see the real magic now :)
Do you know why? Think about it, we will ask you about that in the main course!

### Optional
There is a change for you to practice that cool stuff we just learn with the linkedin icon. Try to change the color of the icon border! (This one is optional, you can move on to the next assignment from now)