Hola compañeros del curso Responsive Design.
Quería realizar este pequeño tutorial para agregar algunas mejoras, o mejor, tratar de realizar el diseño brindado por @thespianartist.
Primero mejoremos uno de los vínculos de nuestra web.
Lo primero que hice fue agregarle una clase, y la llamé border
:
<li><aclass="link border"href="#contacto">Trabajemos juntos</a></li>
Luego en nuestro archivo estilos.css
le agregué un border, un padding y lo centré de esta forma:
.headerolli.border {
height: initial;
border: 1px solid white;
padding: 10px20px;
border-radius: 4px;
margin: 14px0;
}
También tenía que reiniciar el height
, ya que si no el borde se iba hacia los costados y no se iba a dejar modificar.
Este es el resultado:
Luego vamos a agregar el borde a la izquierda en cada sección:
.portfolio, event-list {
border-left: 10px solid #026fff;
}
Y ahora vamos a agregar un círculo al lado de cada h2
para tratar de hacerlo más parecido al diseño, pero en el mediaqueri max-widht: 1024px
. Si ustedes gustan puedes hacerlo también para pantallas grandes.
h2:before {
content: '';
position: absolute;
left: -25px;
top: 20%;
font-size: 10px;
color: #026fff;
width: 20px;
height: 20px;
background-color: #026fff;
border-radius: 50%;
}
En este caso estamos usando la pseudoclase :before
. Con esto lo que estamos haciendo es colocar antes del texto un pequeño círculo y empujandolo hacia la izquierda para que quede pegado al borde:
El de “MÁS SOBRE MI EXPERIENCIA” quedó así por lo que lo tenemos por fuera del event-list
pero a mi me gustó cómo quedó.
Para que se vea mejor en móviles lo que hice fue modificar el tamaño y la posición en el mediaqueri max-widht: 480px
:
h2:before {
width: 15px;
height: 15px;
left: -24px;
}
Ahora, vamos quitarle el borde que tienen nuestras card y agregarles una pequeña sombra:
.project, .event {
box-shadow: 1px1px10px1px lightgray;
}
Aquí quedaría:
Con esto intentamos parecernos más al diseño que nos brindaron y a mi parecer a quedado más bonito nuestro portafolio.
Así quedó mi website:https://juancafelizzola.github.io/portafolio-desarrollo-web/
Le agregué algunas mejoras para la vista en los diferentes dispositivos. Sólo es de jugar y dejarlo como más te guste.
Cualquier duda o aporte puedes dejarlo en comentarios.
Gracias! Sólo hice un pequeño cambio:
< .headera:hover { height: initial; border: 1px solid white; padding: 10px20px; border-radius: 4px; margin: 12px0; } >
Para que en cada link del menú, ponga el border al pasar el ratón.
= )
Gracias por el aporte, tiene un detalle en la linea azul que esta por la parte izquierda, se corta justo en MÁS SOBRE MI EXPERIENCIA