Workshop 2021.02.23.2021.02.20.|By andi 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: centerbackground-color: alpha értéket .7-re állítaniborder-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: greytext-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 ElőzőKövetkező
