# Name card project for Jozsef Varadi
**Description**
I need you to create a name card (obviously with your name and stuff)
Your main knowledge resource will be -> google :) use it wisely
**Deadline: 2022-11-01 Tuesday evening**
---
**Specifications:**
- [ ] I would like to have a nice background with an image (see resouces section)
- [ ] I would like to have a **460*240px name card**
- [ ] That name card should have a decent **shadow** (google helps you)
- [ ] That name card should be **aligned to the middle** of the page (both horizontally and vertically)
- [ ] the **vector graphic icons** in the project (see resouces section for the **svg**s)
- [ ] it should have 2 regions
- - [ ] the **left region** is 120px, with a logo and JV text under it
- - [ ] the **right region** is 340px, containing the data
- [ ] The content part should have an **inner container with a rounded border**
- [ ] The *name* should be an H1 and a *position* should be a H2 tag
- [ ] The name should have a **bottom border**
- [ ] The **icons** (message and phone) and the value next to them should be **nicely aligned**
- [ ] the **facebook icon should have a border, and positioned to the bottom right**
---
**Getting started**
Start with the following steps, which gives you:
- the css browser differences are cleared (search for "reset css" for further information)
- a basic google font is applied (see google webfonts for further information)
- some basic styles applied (we will discuss it next week)
1. **Include Webfonts for the project**
1. Click on the cog in the HTML part
2. In the **Stuff for <head>** section add the following. That is going to include a Montserrat webfont, thats the font we are going to use
[Montserrat webfont link]( https://fonts.google.com/specimen/Montserrat)
```
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;600&display=swap" rel="stylesheet">
```
2. **CSS**
1. Click on the cog in the CSS part
2. In the **CSS Base** section choose **Reset**
3. Start with the following CSS code
```
body {
font-family: 'Montserrat', sans-serif;
}
.clearfix {
overflow: auto;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
*{
box-sizing: border-box;
}
.icon {
fill: #000;
stroke: #000;
}
.icon svg {
fill: inherit;
width: 100%;
height: 100%;
}
```
**Additional Help, How would I do?**
* ask me or google when you are stuck :)
* 99% google helps you, try to be not too specific when searching :)
* always include the technology and loosely the problem when using google search:
* e.g: "html align a box middle both horizontally and vertically"
* this means that I need a HTML solution, for the mentioned problem
**How would I do? (Step by step guide)**
* change the background (if I change the screen size, the background should stretch and be 100%)
* create a box with a proper size
* move the box to the middle of the page
* create the sections with proper sizes and colors
* now add a box shadow to the box
* add the necessary content to the 2 sections, be careful, since there is an inner border (do not add any icons yet, easier to add them later on)
* format the text part, with the right size, weight, border, etc (just use something instead of the icons yet, see next step)
* use something instead of the icons, like a big W character, and format that first
* now (everything should be pretty now) use the icons from the resources section
* we should be fine now :)
> Tadaa!!!! - Greta Eniko VARADI
---
**Resources**
**Background for the <body> tag**
https://s3-us-west-2.amazonaws.com/s.cdpn.io/326221/bg.jpg
**Logo icon**
```
<!-- climber -->
<span class="icon">
<svg viewBox="0 0 401 512">
<circle cx="94" cy="71" r="46" />
<polygon points="401,181 359,231 339,301 314,318 293,363 277,418 235,460 203,511 401,512" />
<path d="M234,5a7.2,7.2 0 01 14,3l-25,145l-197,188c-8,10-14,25-10,40l18,47c9,24,10,47,1,75a7.2,7.2 0 01-13-6c7-18,6-47-3-70l-15-37c-9-22-2-44,13-60l192-182z" />
<path d="M121,318l57-14l25,19c2,2,3,4,4,6l27,72a21,21 0 01-45,10l-21-57l-46-35z"/>
<path d="M209,132a7.2,7.2 0 01 5,37h-84l22,79l57-14c6-1,10-1,16,2l68,46a7.2,7.2 0 01-26,38l-57-39l-88,22c-20,3-30-2-36-19l-28-75l-18,27l22.5,61a7,7 0 01-32.5,19l-27-72c-3-5-3-16,0-21l45-67c8-11,25-24,43-24z" />
</svg>
</span>
```
**Phone icon**
```
<!-- phone -->
<span class="icon">
<svg viewBox="0 0 500 500">
<path d="M128,21q40,75,53,91.5q10,15.5-2,27.5c-10,13-38,32-45,40c-10,9-12,15-3,32q54,105,158,156c18,10,20,5,32-5c8-8,20-27,35-41c10-11,20-12,32-3q14,11,88,51c9,5,11,8,9,27q-7,40-22,51q-67,53-133,29c-180-55-286-195-315-336q-4-62,36-105q10-13,30-17c35-11,42-6,47,2z" />
</svg>
</span>
```
**Message icon**
```
<!-- message -->
<span class="icon">
<svg viewBox="0 0 500 500">
<ellipse rx="250" ry="175" cx="250" cy="250" />
<path d="M 297,422 C 329,451 379,473 439,482 C 446,481 452,468 446,462 C 416,431 407,417 398,391 Z" />
</svg>
</span>
```
**Facebook icon**
```
<!-- facebook -->
<span class="icon">
<svg viewBox="17 12 466 466">
<path d="M205,183v-63c1-71 43-103 97-107c27-1 48,0 73,3v74h-53c-20,0-31,13-32,35v58h82l-11,82h-71v212h-85v-212h-71v-82z" />
</svg>
</span>
```
**Palette**
* font color for the page: #222222
* background for the card: #ffffff
* background for the left (dark) section: #333333
* color for the logo: #aaaaaa
* color for the text under the logo: #dddddd
* color for the border under the name: #999999
**Measures**
* phone and message icon sizes: 22px*22px
* facebook icon size: 30px*30px
* the padding for the content area outer part: 20px
* the radius for the inner border: 20px
* the padding for the content area inner part: 20px
* position for facebook logo: *bottom right(15px,15px)*
Sign in with Wallet
Connect another wallet