diff --git a/1-the-basics/form.html b/1-the-basics/form.html new file mode 100644 index 0000000..738a00a --- /dev/null +++ b/1-the-basics/form.html @@ -0,0 +1,45 @@ + + + + + + + document + + + + +
+
+ Please enter your contact details + +
+ +
+ + +
+
+ Please select the courses that you are interested in (required): + +
+ +
+ +
+ +
+ +
+ Please enter a massage (optional): + +
+ + +
+ + + + \ No newline at end of file diff --git a/1-the-basics/img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg b/1-the-basics/img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg new file mode 100644 index 0000000..8d93d8f Binary files /dev/null and b/1-the-basics/img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg differ diff --git a/1-the-basics/style.css b/1-the-basics/style.css new file mode 100644 index 0000000..b17d0c8 --- /dev/null +++ b/1-the-basics/style.css @@ -0,0 +1,30 @@ +.contenido-p{ + font-family: Arial, Helvetica, sans-serif; + font-size: 22px; + background-image: url(img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg) ; + background-size: cover; + background-repeat: no-repeat; + width: 100%; + padding: 20px; + } + .btn:hover{ + background-color: #133e11; + color: #6294a6; + font-family: Arial, Helvetica, sans-serif; + + } + .btn{ + width: 138px; + height: 30px; + border-radius: 5px; + background-color: #575a57; + color: white; + font-size: 15px; + } + .footer{ + background-color: #9fa7aa; + height: 100px; + margin: 0px; + padding: 1px; + width: 100%;; + } \ No newline at end of file diff --git a/2-positioning/positioning.html b/2-positioning/positioning.html new file mode 100644 index 0000000..ff00734 --- /dev/null +++ b/2-positioning/positioning.html @@ -0,0 +1,69 @@ + + + + + + + Position + + + + +
+

This is my first layout

+
+ + + +
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only + five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with + the release of Letraset sheets containing Lorem Ipsum passages, and + more recently with desktop publishing software like Aldus PageMaker + including versions of Lorem Ipsum. +

+
+
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only + five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with + the release of Letraset sheets containing Lorem Ipsum passages, and + more recently with desktop publishing software like Aldus PageMaker + including versions of Lorem Ipsum. +

+
+
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only + five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with + the release of Letraset sheets containing Lorem Ipsum passages, and + more recently with desktop publishing software like Aldus PageMaker + including versions of Lorem Ipsum. +

+
+ + + + diff --git a/2-positioning/style.css b/2-positioning/style.css new file mode 100644 index 0000000..f71b61c --- /dev/null +++ b/2-positioning/style.css @@ -0,0 +1,53 @@ +.header{ + width: 100%; + background-color: black; + color: white; + font-size: 7px; + border-width: 3px; + border-style: solid; + border-color: #2ff60b; +} + +.cont-p{ + width: 200px; + border-width: 3px; + border-style: solid; + border-color: #1031f7; + position: fixed; + top: 49px; + left: 10px; +} + +.indice{ + color: #1031f7; + text-decoration: #1031f7; + font-size: 20px; + +} + +.cont-2{ + width: 70%; + + padding-left: 227px; + margin: 0; + display: inline-block; +} + +.cont-2 p{ + border-width: 3px; + border-style: solid; + border-color: red; + margin: 0px; +} +footer{ + background-color: black; + width: 100%; + color: white; + font-size: 25px; + border-width: 3px; + border-style: solid; + border-color: #f4d944; +} + + + diff --git a/5-flexbox/assets/img-super-heroe/fondo-2.jpg b/5-flexbox/assets/img-super-heroe/fondo-2.jpg new file mode 100644 index 0000000..a27f604 Binary files /dev/null and b/5-flexbox/assets/img-super-heroe/fondo-2.jpg differ diff --git a/5-flexbox/assets/img-super-heroe/fondo-3.jpg b/5-flexbox/assets/img-super-heroe/fondo-3.jpg new file mode 100644 index 0000000..b413250 Binary files /dev/null and b/5-flexbox/assets/img-super-heroe/fondo-3.jpg differ diff --git a/5-flexbox/assets/img-super-heroe/fondo4.jpg b/5-flexbox/assets/img-super-heroe/fondo4.jpg new file mode 100644 index 0000000..20e0119 Binary files /dev/null and b/5-flexbox/assets/img-super-heroe/fondo4.jpg differ diff --git a/5-flexbox/assets/img-super-heroe/images.jpg b/5-flexbox/assets/img-super-heroe/images.jpg new file mode 100644 index 0000000..ab915a4 Binary files /dev/null and b/5-flexbox/assets/img-super-heroe/images.jpg differ diff --git a/5-flexbox/assets/img-super-heroe/tela-superheroes-marvel.jpg b/5-flexbox/assets/img-super-heroe/tela-superheroes-marvel.jpg new file mode 100644 index 0000000..e62f66a Binary files /dev/null and b/5-flexbox/assets/img-super-heroe/tela-superheroes-marvel.jpg differ diff --git a/5-flexbox/assets/index.html b/5-flexbox/assets/index.html index 3463804..8b442a7 100644 --- a/5-flexbox/assets/index.html +++ b/5-flexbox/assets/index.html @@ -6,15 +6,17 @@ Document +

Super heroes

-
+
-
+ + +

  • Spiderman

    - spiderman + spiderman

    After being bitten by a radioactive spider, he obtained the following superhuman powers, great strength, @@ -39,12 +43,14 @@

    Spiderman

    danger

    +
    -
    • -
    + + +

  • Hulk

    - Hulk + Hulk

    His main power is his ability to increase his strength to practically unlimited levels while increasing @@ -53,23 +59,27 @@

    Hulk

    but he makes up for it with his intelligence).

    +
    -
    • -
    + + +

  • Aquaman

    - Aquaman + Aquaman

    Aquaman's most recognized power is the telepathic ability to communicate with marine life, which can summon at great distances

    +
    -
    • -
    + + +

  • Batman

    - Batman + Batman

    The main features of Batman are summarized in "physical dexterity, deductive abilities and obsession". @@ -78,12 +88,14 @@

    Batman

    have given to the character.

    +
    -
    • -
    + + +

  • Daredevil

    - Daredevil + Daredevil

    Having lost his sight, Daredevil's remaining four senses were augmented by radiation to superhuman levels, in the accident he had as a child. Despite his blindness, he can "see" through a "sixth @@ -91,9 +103,12 @@

    Daredevil

    that serves as a bat-like radar.

    +
    -
    • -
    + + + + \ No newline at end of file diff --git a/5-flexbox/assets/style.css b/5-flexbox/assets/style.css new file mode 100644 index 0000000..6f5198c --- /dev/null +++ b/5-flexbox/assets/style.css @@ -0,0 +1,45 @@ +h1{ + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: black; + font-size: 49px; +} +main{ + background-image: url(img-super-heroe/fondo4.jpg); + background-size: cover; + background-repeat: no-repeat; + width: 100%; + height: 100%; +} + +.content { + display: flex; + flex-direction: row; +} +h2{ + font-size: 39px; + color: #ed8210; +} +.btn{ + display: flex; + flex-direction: row-reverse; +} +.btn button{ + margin: 0 37px; + width: 100px; + border-radius: 30px; + background-color: #e2ea0f; +} +li{ + margin-bottom: 70px; +} + +img{ + width: 239px; + height: 203px +} +p{ + font-size: 30px; + color: #aa8316; +} +