WORKSHOP

2021. augusztus 5.

Mik azok a programnyelvek és mire jók?
A mai nap két programnyelve: HTML és CSS
Hogyan dolgozunk a CodePenben?
Mit fogunk elkészíteni?

Kezdhetjük

Step 1

Heading

1. FELADAT:

Beilleszteni a

elembe egy szöveget:

“Dr. Radia Perlman”

`[codepen_embed height=500 theme_id=1 slug_hash='KKNvZpQ' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]`

Step 2

Paragraph elem

2. FELADAT:

Beilleszteni egy

elembe az alábbi szöveget:

“Dr. Radia Perlman is a network engineer and software designer known to some as “the mother of the Internet.” She is best known for her spanning tree algorithm, or STP for short. STP solved the initial problem of data sharing between computers and stopped data from becoming trapped in a loop.”


[codepen_embed height=500 theme_id=1 slug_hash='yLVopbx' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Step 3

Anchor elem

3. FELADAT:

Beilleszteni egy linket egy elembe:

https://en.wikipedia.org/wiki/Radia_Perlman

[codepen_embed height=500 theme_id=1 slug_hash='xxRLprv' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Step 4

Image importálása

4. FELADAT:

Beilleszteni egy tagba a megfelelő helyre a linket és az alt attribútumot.

https://sbrc2015.ufes.br/wp-content/uploads/foto.jpg

[codepen_embed height=500 theme_id=1 slug_hash='BaQdJww' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Step 5

Betűtípus és háttér

5. FELADAT:

Beilleszteni a háttérkép url-ét, illetve a font típust:

https://source.unsplash.com/WkfDrhxDMC8

'Trebuchet MS', sans-serif

[codepen_embed height=500 theme_id=1 slug_hash='rNWzJqW' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Step 6

Content card szerkesztése

6. FELADAT:

Beilleszteni az alábbi értékeket:

HTML -> hozzáadni class=”card-container”
width: 50%
text-align: center
background-color: alpha értéket .7-re állítani
border-radius: 10px

[codepen_embed height=500 theme_id=1 slug_hash='dyOzdae' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Step 7

Fénykép szerkesztése

7. FELADAT:

Beilleszteni az alábbi értékeket:

border-radius: 50%
margin-top: -80px
filter: grayscale(100%)

[codepen_embed height=500 theme_id=1 slug_hash='poNraXy' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Step 8

hover effektus és transition

8. FELADAT:

Beilleszteni a következő értékeket:

img: hover
transform: scale(1.2)
filter: grayscale(0%)

img > transition: all 1.5s ease-in-out

[codepen_embed height=500 theme_id=1 slug_hash='bGBrvbb' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Step 9

link és gomb szerkesztése

9. FELADAT:

Beilleszteni az alábbi értékeket:

color: white
margin: 60px auto 0 auto
background-color: grey
text-decoration: none

[codepen_embed height=500 theme_id=1 slug_hash='Yzpxaqd' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Step 10

ELKÉSZÜLT oldal

KÉSZ NÉVJEGYKÁRTYA OLDAL:

[codepen_embed height=500 theme_id=1 slug_hash='PobKRzM' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Time's up

Image importálása

4. FELADAT:

WORKSHOP

2021. augusztus 5.

Heading

1. FELADAT:

elembe egy szöveget:

“Dr. Radia Perlman”

`[codepen_embed height=500 theme_id=1 slug_hash='KKNvZpQ' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]`

Paragraph elem

2. FELADAT:

Anchor elem

3. FELADAT:

Betűtípus és háttér

5. FELADAT:

Content card szerkesztése

6. FELADAT:

Fénykép szerkesztése

7. FELADAT:

hover effektus és transition

8. FELADAT:

link és gomb szerkesztése

9. FELADAT:

ELKÉSZÜLT oldal

KÉSZ NÉVJEGYKÁRTYA OLDAL:

Jelentkezőknek

Hírlevél

WORKSHOP

2021. augusztus 5.

Heading

1. FELADAT:

elembe egy szöveget: “Dr. Radia Perlman” [codepen_embed height=500 theme_id=1 slug_hash='KKNvZpQ' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Paragraph elem

2. FELADAT:

Anchor elem

3. FELADAT:

Image importálása

4. FELADAT:

Betűtípus és háttér

5. FELADAT:

Content card szerkesztése

6. FELADAT:

Fénykép szerkesztése

7. FELADAT:

hover effektus és transition

8. FELADAT:

link és gomb szerkesztése

9. FELADAT:

ELKÉSZÜLT oldal

KÉSZ NÉVJEGYKÁRTYA OLDAL:

Jelentkezőknek

Hírlevél

elembe egy szöveget:

“Dr. Radia Perlman”

`[codepen_embed height=500 theme_id=1 slug_hash='KKNvZpQ' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]`