HTML & CSS

 OPGAVE TIL HTML & CSS – MIDDEL – DESIGNS 2

Opgave 2

Opgave 2 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen flowerAll
< div class=”flowerAll” >< /div >
 
Nu skal du tilføje klassen for body og flowerAll i din CSS.
body {
  background-image: radial-gradient(circle,#C1CF13, #71EA76);
  overflow: hidden;
}
.flowerAll {
  width: 600px;
  margin: auto;
}

Opgave 2 – Del 2

Nu skal vi have den næste div ind i HTML’en. Det skal være et barn som holder på alle bladene. Skriv det så det ser således ud:

< div class=”flowerAll” >
    < div class=”greenLeafs” >< /div >
< /div>

  • Gå ned i dit CSS og lav din klasse til greenLeafs.
.greenleafs {
  position: absolute;
}

Opgave 2 – Del 3

Nu skal vi op i HTML’en igen. For nu skal vi lave de 3 div bokse(børn) inden i greenLeafs, skriv det så det ser således ud:

< div class=”flowerAll” >
    < div class=”greenLeafs” >
        < div class=”flower5-bgLeafs bg-Leaf1″ >< /div>
        < div class=”flower5-bgLeafs bg-Leaf2″ >< /div >
        < div class=”flower5-bgLeafs bg-Leaf3″ >< /div >
    < /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til flower5-bgLeafs. De andre klasser bg-Leaf1 til 3 tager vi bagefter, det fortæller hvorhenne bladene skal sidde.
.flower5-bgLeafs {
  position: absolute;
  height: 150px;
  width: 300px;
  background-image: linear-gradient(-25deg, #44BD2B 45%, #328C20 50%, #44BD2B 45%);
  border-radius: 200px 0 200px 0;
  border: 2px solid green;
  box-shadow: -50px 0px 50px 20px black inset;
  filter: drop-shadow(5px 5px 15px black);
}

Opgave 2 – Del 4

Vi bliver i CSS’en. For nu skal vi vi lave klasserne der placerer bladene.

  • Gå ned i dit CSS og lav dine klasser til bg-Leaf1 til 3.
.bg-Leaf1 {
  transform: rotate(-20deg);
  margin-left: 320px;
  margin-top: 50px;
}
.bg-Leaf2 {
  transform: rotate(70deg);
  margin-left: 320px;
  margin-top: 350px;
}
.bg-Leaf3 {
  transform: rotate(200deg);
  margin-left: 0px;
  margin-top: 200px;
}

Opgave 2 – Del 5

Nu skal vi op i HTML’en igen. For nu skal vi lave en div boks(barn) inden i  flowerAll, skriv det så det ser således ud:

< div class=”flowerAll” >
    < div class=”greenLeafs” >
        < div class=”flower5-bgLeafs bg-Leaf1″ >< /div>
        < div class=”flower5-bgLeafs bg-Leaf2″ >< /div >
        < div class=”flower5-bgLeafs bg-Leaf3″ >< /div >
    < /div >

 

    < div class=”flower5-bg” >< /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til flower5-bg. Den skal rumme de 5bagerste blomster blade.
.flower5-bg {
  position: absolute;
  height: 550px;
  width: 550px;
  margin-left: 20px;
  margin-top: 150px;
  transform: rotate(30deg);
  filter: hue-rotate(30deg) drop-shadow(5px 5px 15px black);
}

Opgave 2 – Del 6

Nu skal vi op i HTML’en igen. For nu skal vi lave de 5 div bokse(børn) inden i  flower5-bg, som skal være bladene. Skriv det så det ser således ud:

< div class=”flowerAll” >
    < div class=”greenLeafs” >
        < div class=”flower5-bgLeafs bg-Leaf1″ >< /div>
        < div class=”flower5-bgLeafs bg-Leaf2″ >< /div >
        < div class=”flower5-bgLeafs bg-Leaf3″ >< /div >
    < /div >

 

    < div class=”flower5-bg” >
        < div class=”flower5-leaf leafOne leafShadow” >< /div >
        < div class=”flower5-leaf leafTwo leafShadow” >< /div >
        < div class=”flower5-leaf leafThree leafShadow” >< /div >
        < div class=”flower5-leaf leafFour leafShadow” >< /div >
        < div class=”flower5-leaf leafFive leafShadow” >< /div >
    < /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til flower5-leaf.
.flower5-leaf {
  position: absolute;
  height: 120px; 
  width: 250px;
  background-image: linear-gradient(#EDEFC2 45%, #CFD1A9 50%, #EDEFC2 45%);
  box-shadow: -50px 0px 50px 20px #B0B388 inset;
  border-radius: 50%;
  filter: hue-rotate(217deg) ;
}

Opgave 2 – Del 7

Vi bliver i CSS’en. For nu skal vi lave klassen til 5 blade, der placerer dem.

  • Gå ned i dit CSS og lav din klasse til leafOne, leafTwo, leafThree, leafFour, leafFive og deres skygge leafShadow.
.leafOne {
  transform: rotate(150deg);
  margin-left: 260px;
}
.leafTwo {
  transform: rotate(220deg);
  margin-left: 230px;
  margin-top: 150px;
}
.leafTree {
  transform: rotate(300deg);
  margin-left: 70px;
  margin-top: 180px;
}
.leafFour {
  transform: rotate(0deg);
  margin-left: 0px;
  margin-top: 50px;
}
.leafFive {
  transform: rotate(80deg);
  margin-left: 110px;
  margin-top: -60px;
}
.leafShadow {
  box-shadow: 50px 0px 50px 20px #B0B388 inset,
              50px 0px 50px 10px #B0B388 inset;
}

Opgave 2 – Del 8

Nu skal vi op i HTML’en igen. For nu skal vi lave endnu en blomst, som skal hedde flower5. Den skal have 5 div bokse(børn) inden i lige som flower5-bg. Så vi tager og kopier hele flower5-bg med de 5 div bokse inden i og sætter ind neden under. 

MEN!!
HUSK at fjerne klassen leafShadow OG TILFØJ midten af blomsten som et ekstra div barn denne gang. Skriv det så det ser således ud:

< div class=”flowerAll” >
    < div class=”greenLeafs” >
        < div class=”flower5-bgLeafs bg-Leaf1″ >< /div>
        < div class=”flower5-bgLeafs bg-Leaf2″ >< /div >
        < div class=”flower5-bgLeafs bg-Leaf3″ >< /div >
    < /div >

 

    < div class=”flower5-bg” >
        < div class=”flower5-leaf leafOne leafShadow” >< /div >
        < div class=”flower5-leaf leafTwo leafShadow” >< /div >
        < div class=”flower5-leaf leafThree leafShadow” >< /div >
        < div class=”flower5-leaf leafFour leafShadow” >< /div >
        < div class=”flower5-leaf leafFive leafShadow” >< /div >
    < /div >

    < div class=”flower5″ >
        < div class=”flower5-leaf leafOne” >< /div >
        < div class=”flower5-leaf leafTwo” >< /div >
        < div class=”flower5-leaf leafThree” >< /div >
        < div class=”flower5-leaf leafFour” >< /div >
        < div class=”flower5-leaf leafFive” >< /div >
        < div class=”flower-middle” >< /div>
    < /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til flower5.
.flower5 {
  position: absolute;
  height: 550px;
  width: 550px;
  margin-left: 100px;
  margin-top: 150px;
  filter: brightness(1.1) ;
}

Opgave 2 – Del 9

Vi bliver i CSS’en. For nu skal vi vi lave klassen til midten af blomsten.

  • Gå ned i dit CSS og lav dine klasser til flower-middle.
.flower5-middle {
  position: absolute;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-image: radial-gradient(circle at 75% 35%, gold, 40%, orangered);
  margin-left: 220px;
  margin-top: 80px;
  box-shadow: -10px 0px 20px 5px orange inset, 
              0px 0px 20px 5px rgba(1,1,1,0.5);
}
   
     

Her under vises/eksekveres koden