Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter um div com um atributo class com o valor business-card que conterá todos os outros elementos. 1. Dentro do elemento .business-card, deve haver um elemento img com um atributo class com o valor profile-image. Você pode definir a fonte da imagem para https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/flower.jpg, se desejar. Deve haver um atributo alt com uma descrição significativa. 1. Dentro do elemento .business-card, após o elemento img, você deve ter três elementos p com um atributo class que possui, respectivamente, os valores full-name, designation e company. 1. O primeiro elemento p deve conter seu nome. 1. O segundo elemento p deve conter sua designação. 1. O terceiro elemento p deve ter o nome da sua empresa. 1. Deve haver um elemento hr abaixo do terceiro elemento p. 1. Após o elemento hr, devem haver dois elementos p. No primeiro elemento p, você deve ter um endereço de e-mail como texto. No segundo elemento p, o texto deve ser um número de telefone. 1. Após os dois elementos p, deve haver um elemento a com uma classe portfolio-link, o texto Portfolio e ele deve linkar para uma URL válida. 1. Deve haver um elemento hr após o elemento a contendo o link do portfólio. 1. Você deve ter outro elemento div com um atributo class com o valor social-media. Dentro deste elemento, deve haver um elemento h2 com o texto Conecte-se comigo. 1. Dentro dos elementos .social-media, devem haver três elementos a. Os elementos a devem conter os textos Twitter, LinkedIn e GitHub, respectivamente, com links para sites válidos. 1. Você deve vincular a folha de estilo styles.css utilizando a tag link na seção head do arquivo HTML. 1. O plano de fundo da sua página deve ser rosybrown. A fonte geral deve ser Arial, com uma alternativa de sans-serif. 1. O seletor .business-card deve ter propriedades para definir o elemento com largura de 300px e uma cor de fundo de sua escolha. Também deve-se definir um padding de 20px em todos os lados e uma margin superior de 100px. O texto deve estar alinhado ao centro e o tamanho da fonte deve ser 16px. As margens esquerda e direita devem ser definidas como auto. 1. O seletor .profile-image deve ter uma propriedade max-width com o valor 100%. 1. Todos os elementos p devem ter uma margin superior e inferior de 5px. 1. Todos os links na página não devem estar sublinhados.

Testes:

• Você deve ter um `div` principal com um atributo `class` com o valor `business-card`.
• Dentro do elemento `.business-card`, deve haver um elemento `img` com um atributo `class` com o valor `profile-image`.
• A fonte da imagem deve ser definida para uma imagem válida.
• O atributo `alt` da imagem deve ser definido para uma descrição significativa.
• Dentro do elemento `.business-card`, após o elemento `img`, deve haver um elemento `p` com um atributo `class` com o valor `full-name`.
• Após o elemento `.full-name`, deve haver um elemento `p` com um atributo `class` com o valor `designation`.
• Após o elemento `.designation`, deve haver um elemento `p` com um atributo `class` com o valor `company`.
• O primeiro elemento `p`, aquele com a classe `full-name`, deve conter seu nome.
• O segundo elemento `p`, aquele com um atributo `class` de `designation`, deve conter sua designação.
• O terceiro elemento `p`, aquele com o atributo `class` com valor `company`, deve conter o nome da sua empresa.
• Após o terceiro elemento `p`, aquele com o atributo `class` com valor `company`, deve haver um elemento `hr`.
• Após o primeiro elemento `hr`, deve haver um elemento `p` com um endereço de e-mail como seu texto.
• Após o elemento `p` do e-mail, deve haver outro elemento `p` com um número de telefone como seu texto.
• Após o elemento de número de telefone `p`, deve haver um elemento `a` com a classe `portfolio-link`.
• O elemento `.portfolio-link` deve ter o texto `Portfolio`.
• Seu elemento `.portfolio-link` deve ter um `href` válido.
• Após o elemento `a` contendo seu portfólio, deve haver outro elemento `hr` como um divisor.
• Após o segundo elemento `hr`, deve haver um elemento `div` com um atributo `class` com o valor `social-media`.
• Dentro do elemento `.social-media`, deve haver um elemento `h2` com o texto `Connect with me`.
• Dentro do elemento `.social-media` devem existir três elementos `a`.
• O primeiro elemento `a` deve conter o texto `Twitter`.
• O `href` do primeiro elemento `a` deve apontar para um link válido.
• O segundo elemento `a` deve conter o texto `LinkedIn`.
• O `href` do segundo elemento `a` deve apontar para um link válido.
• O terceiro elemento `a` deve conter o texto `GitHub`.
• O `href` do terceiro elemento `a` deve apontar para um link válido.
• O elemento `link` deve estar dentro do elemento `head`.
• O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`.
• O elemento `link` deve ter o atributo `href` com o valor `styles.css`.
• Você deve definir a cor de fundo da página no seletor `body` para `rosybrown`.
• Você deve definir a fonte da página como `Arial` no elemento `body` com uma alternativa de `sans-serif`.
• Seu seletor `.business-card` deve ter uma propriedade `width` com o valor `300px`.
• Seu seletor `.business-card` deve ter uma propriedade `background-color` com um valor de cor válido.
• Seu seletor `.business-card` deve ter uma propriedade `padding` com o valor `20px`.
• Seu seletor `.business-card` deve ter uma margem superior de `100px`.
• O texto dentro do elemento `.business-card` deve estar alinhado ao centro.
• O tamanho da fonte do texto dentro do elemento `.business-card` deve ser `16px`.
• As margens esquerda e direita do elemento `.business-card` devem ser definidas como `auto`.
• Seu seletor `.profile-image` deve ter uma propriedade `max-width` com o valor `100%`.
• Seus elementos `p` devem ter uma `margin` superior e inferior de `5px`.
• Os links da página não devem ter sublinhado.