johan bautista web pre-work Bcn #42

AlexBHdez · 2019-06-01T09:48:18Z

Acostúmbrate a escribir todas las clases e ids en inglés.

AlexBHdez · 2019-06-01T09:50:25Z

También intenta que las clases sean más atómicas. Es decir, que puedas reutilizarlas para otros elementos. No estoy diciendo que esta en concreto esté mal.

AlexBHdez · 2019-06-01T09:52:27Z

Muy bien estas dos clases a mi parecer. Una que le da un estilo de botón y otra que le da estilo a un botón de información. Estas clases en inglés ya sería paerfecto.

AlexBHdez · 2019-06-01T09:59:21Z

Un tag img es un elemento inline, y un texto (a no ser que esté dentro de un tag span) será un elemento en bloque, por lo que siempre empezará en una nueva linea ocupando el 100% en ancho de su padre. Para cambiar el tipo de elemento de un tag, con css podemos especificarle la propiedad display: con el valor que nos interese (dentro de los disponibles, inline, block, inline-block, none, etc.)

En este caso la imagen (inline) está dentro de un tag div (en bloque) por lo que estás intentando poner dos elementos en bloque uno al lado del otro, y esto no se puede a no ser que cambies su display, ya que un elemento en bloque siempre empezará en una nueva linea.

AlexBHdez · 2019-06-01T10:04:54Z

Dependerá con que tipo de elementos estés trabajando. Un text-align: center centrará su contenido hijo en el caso que padre sea block e hijo inline. Si esto mismo lo hacemos sobre un padre block con un hijo block, no tendrá ning'un efecto.

AlexBHdez · 2019-06-01T10:05:52Z

Como buena práctica, no se suele seleccionar por tag, sólo en algún caso específico.

AlexBHdez · 2019-06-01T10:06:53Z

Los ids se suelen dejar para seleccionar los elementos en javascript. En css se suele seleccionar por clase.

AlexBHdez · 2019-06-01T10:11:24Z

No te preocupes de momento, cuando veamos html y css, no te pasará

AlexBHdez · 2019-06-01T10:09:47Z

cuando pones un background-image, casi siempre será necesario especificarle como se va a comportar esa imagen con la propiedad background-size. Échale un vistazo a esta propiedad que te comento.

AlexBHdez · 2019-06-01T10:10:54Z

Cuando hay solapamiento suele ser porque los margins y/o paddings de elementos inline y en bloque colapsan. Habría que verlo con algo más de detenimiento para ver todas las propiedades que te afectan.

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,8 +5,98 @@ @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>npm</title>
+      <link rel="stylesheet" type="text/css" href="styles.css">
+      <link rel="icon" href="images/npm-logo.ico">
     </head>
     <body>
       <!-- Your code goes here -->
+      <nav>
+        <div class="top-left">
+          <a class = "heart" href="#">♥︎</a>
+          <span class="acronym">Neophobe Plebeian Mumpsimus</span>
+        </div>
+        <ul class="top-links">
+          <li><a href="#">npm Enterprise</a></li>
+          <li><a href="#">Features</a></li>
+          <li><a href="#">pricing</a></li>
+          <li><a href="#">Documentation</a></li>
+          <li><a href="#">Support</a></li>
+        </ul>
+      </nav>
+      <header id="fondo" >
+        <div id="barraSuperior">
+          <a href="#"><img src="images/npm-logo.png" alt="npm-logo" class="logotipo"></a>
+          <input type="text" placeholder="Find your package" class="buscador">
+          <img src="images/buscar.png" alt="Find" class="icono">
+          <a href="#" class="registro">Sign up or login </a>
+          <img src="images/bear-logo.png" alt="npm-logo" class="logotipo bear">
+        </div>
+        <div id="informacion">
+          <h1 class="espacio">Build amazing things</h1>
+          <p>npm is the package manager for javascript and the world's largest </br>
+            software registry. Discover packages of reusable code -- and</br>
+            assemble them in powerful new ways</p>
+          <button class="boton informa">Sign up for npm</button>
+        </div>
+      </header>
+      <div id="colaboracion">
+        <div id="imagenCol">
+              <!-- <img src="images/collaboration.svg" alt="Find">  por que no puedo poner la imagen y el texto al mismo
+                nivel la imagen me da un salto de bloque?? -->
+        </div>
+        <div id="informacion2">
+            <h3 class="espacio">npm Orgs is powerful</br> collaboration - for free</h3>
+            <ul class="seccion1">
+                <li>Encourage code discover and re-use within teams</li>
+                <li>Publish and control access to your own namespace</li>
+                <li>Manage public and private code with the same workflow</li>
+            </ul>
+            <button class="boton colabora">Sign up for Orgs</button></br>
+            <span> or, </span><a class="learn" href="#">Learn more about Orgs</a>
+        </div>
+      </div>
+      <div id="instalacion">
+        <div id="informacion3" >
+        <h3 class="espacio">What is npm?</h3>
+        <p>Use npm to install, share, and distribute code;</br> manage dependencies in your projects; and </br>share & receive feedback with others</p>
+        <button class="boton instala">Install npm</button>
+        </div>
+      </div>
+      <div id="servicios">
+        <div id="informacion4">
+            <h2 class="espacioServicio">What can you make with 475,000 buildingblocks?</h2>
+            <p class="textoServicio">The npm registry hosts almost half a million packages of free,reusable code --the largest software registry in the world</p>
+        </div>
+        <div id="ventajas">
+          <article class="uno">
+              <img src="images/binoculars.svg" alt="Find">
+              <h3 class="espacio">Find</h3>
+              <p>Libraries like <a href="#">JQuery</a>,<a href="#">Bootstrap</a>,</br><a href="#">React</a> and <a href="#">Angular</a>, and </br>
+                components from frameworks </br> such as <a href="#">Ember.</a></p>
+          </article>
+          <article class="dos">
+              <img src="images/mountain-flag.svg" alt="Discover">
+              <h3 class="espacio">Discover</h3>
+              <p>Packages for mobile, loT, front </br> end, back end, robotics... </br> everything you need to start </br>
+                building amazing things.</p>
+          </article>
+          <article class="tres">
+              <img src="images/backpack.svg" alt="Build">
+              <h3 class="espacio">Build</h3>
+              <p>Assemble packages like building </br> blocks to quickly develop </br> awesome new projects</p>
+          </article>
+        </div>
+      </div>
     </body>
+      <!-- la configuracion imagen y texto al lado lo dispongo por medio de layouts o utilizo la propiedad
+      text-alling y derivados? -->
     </html>

-Original file line number
+Diff line change
@@ -0,0 +1,173 @@
+    *{
+        margin: 0;
+        padding: 0;
+    }
+    body{
+        font-family: 'avenir';
+    }
+    nav {
+        background-color: #C12127;
+        color: rgba(255,255,255,0.8);
+        padding-top: 15px;
+        height: 50px;
+      }
+      nav a {
+        color: rgba(255,255,255,0.8);
+        text-decoration: none;
+      }
+      .top-links {
+        display: inline-block;
+        float: right;
+        padding: 0;
+        margin: 0 20px 0 0;
+      }
+      .top-links li {
+        display: inline-block;
+        margin: 0 10px;
+      }
+      .top-left{
+        display: inline-block;
+    }
+    #fondo{
+        height: 500px;
+        background: url(images/city-scape.svg) no-repeat right;
+        background-color:rgb(32, 101, 136);
+    }
+    #barraSuperior{
+        background-color: green;
+    }
+    .logotipo{
+        float: left;
+        padding: 10px;
+        width: 50px;
+        height: 35px;;
+    }
+    .logotipo.bear{
+        height: 50px;
+    }
+    .buscador{
+        background-color: rgb(31, 82, 111);
+        float: left;
+        margin: 10px 0 0 5px;
+        padding: 0 0 0 10px;
+        width: 70%;
+        height: 35px;
+        border: none;
+        position: relative;
+    }
+    .icono{
+        background-color: rgb(31, 82, 111);
+        float: left;
+        margin: 10px 0 10px 3px;
+        height: 15px;
+        padding: 10px;
+    }
+    .registro{
+        float: left;
+        display: inline-block;
+        text-decoration: none;
+        padding: 20px 10px 0 10px;
+        color:white;
+    }
+    #informacion{
+        float: left;
+        margin: 8% 0 15% 15%;
+        color: white;
+        position: absolute;
+    }
+    .espacio{
+        padding-bottom: 15px;
+    }
+    .boton{
+        margin: 50px 0 50px 0px;
+        padding: 8px 8px 8px 8px;
+        border-radius: 15px;
+        color: white;
+        border: none;
+    }
+    .boton.informa{
+        background-color: rgb(240, 146, 51);
+    }
+    .boton.colabora{
+        background-color: rgb(203, 56, 55);
+        margin: 50px 0 0px 0px;
+    }
+    .boton.instala{
+        background-color: rgb(49, 68, 88);
+    }
+    #colaboracion{
+        height: 500px;
+        background: url(images/collaboration.svg) no-repeat left;
+        background-size: 70% 80%;
+        background-color:rgb(39, 53, 71);
+    }
+    #informacion2{
+        float: right;
+        margin: 8% 0 15% 0;
+        color: white;
+        /*problema con la imagen y el texto que no se mantienen fijos*/
+    }
+    .seccion1{
+        margin-left: 9%;
+    }
+    .learn{
+        text-decoration: none;
+        color: white;
+    }
+    #instalacion{
+        height: 500px;
+        background:url(images/forklift.svg) no-repeat right;
+        background-size: cover;
+    }
+    #informacion3{
+        float: left;
+        margin: 8% 0 15% 15%;
+        color: white;
+        position: absolute;
+    }
+    #servicios{
+        background-color: white;
+        text-align: center;
+        padding: 5% 0 15% 0;
+    }
+    .espacioServicio{
+        color: rgb(83, 88, 98);
+        padding-bottom: 15px;
+    }
+    .textoServicio{
+        color: rgb(135, 145, 156);
+    }
+    #ventajas{
+        background-lor: blue;
+        heig: 500px;
+    }
+    article{
+        background-size: 32%;
+        display: inline-block;
+        padding: 5% 5% 0 5%;
+    }
+    .uno{
+        backgrou-color: #C12127;
+        color: rgb(135, 145, 156);
+    }
+    p a{
+        color:rgb(208, 74, 73);
+        text-decoration: none;
+    }
+    .dos{
+        backgrou-color: green;
+        color: rgb(135, 145, 156);
+    }
+    /*por que el tercer article me queda unos px mas abajo
+    que los demas
+    - tambien la imagen del header se queda pequeña y no se redimension
+    -los textos se solapan con la imagen..
+    */
+    .tres{
+        backgrou-color: yellow;
+        color: rgb(135, 145, 156);
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

johan bautista web pre-work Bcn #42

Uh oh!

Diff view

Diff view

There are no files selected for viewing

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

AlexBHdez Jun 1, 2019

Uh oh!

johan bautista web pre-work Bcn #42

Are you sure you want to change the base?

Uh oh!

johan bautista web pre-work Bcn #42

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!