¿Saben cómo puedo hacer para que mi resultado se vea como el de la imagen? en referencia para que la imagen y el texto queden en la misma línea y agregar las líneas de división.
Intente usar el float
y flexbox
para mover y alinear y usé hr
para las líneas de división punteada, también estoy usando variables en SCSS
y anidamiento / nesting.
Adjunto mi código:
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Merriweather|Josefin+Slab|Oswald|Bree+Serif);
$offwhite : #EEE8D6;
$darkblue : #022933;
$title : #0e6dc8;
$color-main: $darkblue;
$color-backgrounds: $offwhite;
$color-headlines: $red;
$font-main: 'Merriweather',
Helvetica,
sans-serif;
$font-highlight: 'Bree Serif',
Helvetica,
sans-serif;
html {
font-size: 62.5%;
}
body {
margin: 0;
padding: 0;
font-size: 1.8rem;
font-family: $font-main;
color: $color-main;
background-color: $color-backgrounds;
}
.container {
width: 80%;
margin: 0 auto;
}
h1 {
font-family: $font-highlight;
color: $color-headlines;
}
#media {
h2 {
color: $title;
}
p {
color: $darkblue;
text-align: justify;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
}
img {}
<body>
<section id="media">
<div class="container">
<h1>Medios</h1>
<ol class="media">
<li class="item">
<a href="#">
<img src="https://assets.codepen.io/3434869/90x90.png" alt="thumbnail">
<h2 class="titulo">Título 1</h2>
<p>Atque suscipit, neque quisquam laboriosam enim officiis, nam nemo cupiditate ipsam eveniet id eaque optio facere! Maxime accusamus repellendus nisi veniam saepe explicabo, voluptatum quod obcaecati, possimus quis expedita? Dignissimos.</p>
</a>
</li>
<li class="item">
<a href="#">
<img src="https://assets.codepen.io/3434869/90x90.png" alt="thumbnail">
<h2 class="titulo">Título 2</h2>
<p>Magnam repellat laudantium, aspernatur fugiat quam deleniti atque in voluptas, aliquam corporis, amet temporibus modi! Exercitationem voluptates quisquam, enim eos autem quidem expedita quod, quasi eum deleniti neque nostrum possimus.</p>
</a>
</li>
<li class="item">
<a href="#">
<img src="https://assets.codepen.io/3434869/90x90.png" alt="thumbnail">
<h2 class="titulo">Título 3</h2>
<p>Ea obcaecati a deleniti autem. Nihil minima, laudantium voluptas quod inventore iure, beatae quis aspernatur culpa qui minus esse harum odit soluta! Quaerat magnam asperiores repellendus voluptas similique est excepturi.</p>
</a>
</li>
</ol>
</div>
</section>
</body>