HTML & CSS

 OPGAVE TIL HTML & CSS – MIDDEL – DESIGNS 1

Opgave 1

Opgave 1 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen jord1
< div class=”jord1″ >< /div >
 
Nu skal du tilføje klassen for body og jord1 i din CSS.
body {
  background-color: #333333;
}
.jord1 {
  position: absolute;
  height: 200px;
  width: 100%;
  background-color: #2FD43C;
  margin-top: 400px;
}

Opgave 1 – Del 2

Nu skal vi have den næste div nedenunder ind i HTML’en, så det ser således ud:

< div class=”jord1” >< /div >
< div class=”svamp1″ >< /div >

  • Gå ned i dit CSS og lav din klasse til hexagon1.
.svamp1 {
  position: absolute;
  margin-top: 80px;
  margin-left: 40%;
}

Opgave 1 – Del 3

Vi går op i HTML’en igen. For nu skal vi indsætte div boksen(barn) på svamp1.

< div class=”jord1” >< /div >
< div class=”svamp1″ >
    < div class=”svamp1-stang” >< /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til svamp1-stang.
.svamp1-stang {
  position: absolute;
  height: 200px;
  width: 100px;
  background-image: linear-gradient(90deg, #6E642D, #FFE369, #E5D05F);
  border-radius: 30px;
  margin-top: 150px;
  margin-left: 100px;
}

Opgave 1 – Del 4

Vi går op i HTML’en igen. For nu skal vi indsætte 4 div bokse(børn) ind under svamp1 igen.

< div class=”jord1” >< /div >
< div class=”svamp1″ >
    < div class=”svamp1-stang” >< /div >
    < div class=”grass1″ id=”g1″ >< /div >
    < div class=”grass1″ id=”g2″ >< /div >
    < div class=”grass1″ id=”g3″ >< /div >
    < div class=”grass1″ id=”g4″ >< /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til grass1 og id’erne g1, g2, g3 og g4.
.grass1 {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid green;
  margin-top: 300px;
}
#g1 {
  margin-left: 70px;
}
#g2 {
  margin-left: 110px;
}
#g3 {
  margin-left: 150px;
}
#g4 {
  margin-left: 190px;
}

Opgave 1 – Del 5

Vi går op i HTML’en igen. For nu skal vi indsætte en div boks(barn) ind under svamp1 igen, så det ser således ud.

< div class=”jord1” >< /div >
< div class=”svamp1″ >
    < div class=”svamp1-stang” >< /div >
    < div class=”grass1″ id=”g1″ >< /div >
    < div class=”grass1″ id=”g2″ >< /div >
    < div class=”grass1″ id=”g3″ >< /div >
    < div class=”grass1″ id=”g4″ >< /div >
    < div class=”svamp1-top” >< /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til svamp1-top.
.svamp1-top {
  position: absolute;
  height: 200px;
  width: 300px;
  border-radius: 40% 40% 5vh 5vh/80% 80% 5vh 5vh;
  background-image: linear-gradient(#750273,#E605E2);
  box-shadow: -5px -10px 20px 10px #540253 inset;
  z-index: 10;

  /*mask gør at alt ud over højde og vidde på denne boks ikke vises*/
  -webkit-mask-image: radial-gradient(white 100%, rgba(0, 0, 0, 0.1) 50%);
  mask-image: radial-gradient(square, black 100%, rgba(0, 0, 0, 0.5) 50%);
}
 Vi bruger -webkit- for at være sikker på at det kan ses i flere browsere

Opgave 1 – Del 6

Vi bliver i CSS’en. For nu skal vi indsætte en klasse ::after på svamp1-top for at få en skinnede effekt på svampen.

  • Gå ned i dit CSS og lav din klasse til svamp1-top::after.
.svamp1-top::after {
  content: ' ';
  display: block;
  position: absolute;
  background: #fff;
  width: 30vh;
  height: 3vh;
  margin-left: -15vh;
  left: 50%;
  bottom: 4vh;
  z-index: 2;
  border-radius: 48%;
  filter: blur(2vh);
}
 Vi bruger content: ‘ ‘; for at den tager indholdet fra svamp1-top i betragtningen når den tilføjer ::after linjerne.

Opgave 1 – Del 7

Vi går op i HTML’en igen. For nu skal vi indsætte 6 div bokse(børn) ind under svamp1-top, så det ser således ud.

< div class=”jord1” >< /div >
< div class=”svamp1″ >
    < div class=”svamp1-stang” >< /div >
    < div class=”grass1″ id=”g1″ >< /div >
    < div class=”grass1″ id=”g2″ >< /div >
    < div class=”grass1″ id=”g3″ >< /div >
    < div class=”grass1″ id=”g4″ >< /div >
    < div class=”svamp1-top” >
        < div class=”svamp1-plet1″ >< /div >
        < div class=”svamp1-plet2″ >< /div >
        < div class=”svamp1-plet3″ >< /div >
        < div class=”svamp1-plet4″ >< /div >
        < div class=”svamp1-plet5″ >< /div >
        < div class=”svamp1-plat6″ >< /div >
< /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til svamp1-plet1.
.svamp1-plet1 {
  position: absolute;
  height: 90px;
  width: 80px;
  background-image: linear-gradient(90deg, white 7%, #E5D05F);
  border-radius: 50%;
  margin-top: -20px;
  margin-left: 50px;
}
 

Opgave 1 – Del 8

Vi bliver i CSS’en. For nu skal vi indsætte en klasse næste plet på svampen.

  • Gå ned i dit CSS og lav din klasse til svamp1-plet2.
.svamp1-plet2 {
  position: absolute;
  height: 100px;
  width: 100px;
  background-image: linear-gradient(90deg, white 7%, #E5D05F);
  border-radius: 50%;
  margin-top: 80px;
  margin-left: 20px;
}

Opgave 1 – Del 9

Vi bliver i CSS’en. For nu skal vi indsætte en klasse næste plet på svampen.

  • Gå ned i dit CSS og lav din klasse til svamp1-plet3.
.svamp1-plet3 {
  position: absolute;
  height: 40px;
  width: 80px;
  background-image: linear-gradient(90deg, white 7%, #E5D05F);
  border-radius: 50%;
  margin-top: 60px;
  margin-left: 130px;
}

Opgave 1 – Del 10

Vi bliver i CSS’en. For nu skal vi indsætte en klasse næste plet på svampen.

  • Gå ned i dit CSS og lav din klasse til svamp1-plet4.
.svamp1-plet4 {
  position: absolute;
  height: 40px;
  width: 60px;
  background-image: linear-gradient(90deg, white 7%, #E5D05F);
  border-radius: 50%;
  margin-top: -10px;
  margin-left: 150px;
}

Opgave 1 – Del 11

Vi bliver i CSS’en. For nu skal vi indsætte en klasse næste plet på svampen.

  • Gå ned i dit CSS og lav din klasse til svamp1-plet5.
.svamp1-plet5 {
  position: absolute;
  height: 50px;
  width: 60px;
  background-image: linear-gradient(90deg, white 7%, #E5D05F);
  border-radius: 50%;
  margin-top: 40px;
  margin-left: 230px;
}

Opgave 1 – Del 12

Vi bliver i CSS’en. For nu skal vi indsætte den sidste klasse / plet på svampen.

  • Gå ned i dit CSS og lav din klasse til svamp1-plet6.
.svamp2-plet6 {
  position: absolute;
  height: 50px;
  width: 80px;
  background-image: linear-gradient(90deg, white 7%, #E5D05F);
  border-radius: 50%;
  margin-top: 120px;
  margin-left: 180px;
}
   
     

Her under vises/eksekveres koden