estoy teniendo un problema que no logro entender el por que sucede,
La cuestion es la siguiente: Hice una estructura HTML, la cual es la siguiente:
<section class="flex">
<article class="left">
<h1 class="left-title">
10,000+ of our users love our products.
</h1>
<h2 class="left-subtitle">
We only provide great products combined with excellent customer service.
See what our satisfied customers are saying about our services.
</h2>
</div>
</article>
<article class="right">
<div class="right-card">
<div class="stars"></div>
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<span class="right-card-text">Rated 5 Stars in Reviews</span>
</div>
<div class="right-card">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<span class="right-card-text">Rated 5 Stars in Report Guru</span>
</div>
<div class="right-card">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<span class="right-card-text">Rated 5 Stars in BestTech</span>
</div>
</article>
<article class="bottom">
<div class="bottom-card">
<h2 class="bottom-card-name"> Colton Smith</h2>
<h3 class="bottom-card-verify">Verified Buyer</h3>
<p class="bottom-card-text">
"We needed the same printed design as the one we had ordered a week prior.
Not only did they find the original order, but we also received it in time.
Excellent!"
</p>
<div class="bottom-card">
<h2 class="bottom-card-name">Irene Roberts</h2>
<h3 class="bottom-card-verify">Verified Buyer</h3>
<p class="bottom-card-text">
"Customer service is always excellent and very quick turn around. Completely
delighted with the simplicity of the purchase and the speed of delivery."
</p>
<div class="bottom-card">
<h2 class="bottom-card-name">Anne Wallace</h2>
<h3 class="bottom-card-verify">Verified Buyer</h3>
<p class="bottom-card-text">
"Put an order with this company and can only praise them for the very high
standard. Will definitely use them again and recommend them to everyone!"
</p>
</div>
</article>
Codigo SASS:
:root{
--very-dark-magenta: hsl(300, 43%, 22%);
--soft-pink: hsl(333, 80%, 67%);
--dark-grayish-magenta: hsl(303, 10%, 53%);
--light-grayish-magenta: hsl(300, 24%, 96%);
--white: hsl(0, 0%, 100%);
}
body{
font-family: 'Kumbh Sans', sans-serif;
background-color: var(--white);
background-image:url('../images/bg-pattern-top-desktop.svg');
background-repeat: no-repeat;
background-position:right 50vw bottom 70vh;
overflow: hidden;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.flex{
display: flex;
height: 100vh;
width: 100vw;
padding: 5%;
}
.left{
width: 27vw;
&-title{
font-size:3.8rem;
font-family: 'Spartan', sans-serif;
color:var(--very-dark-magenta)
}
&-subtitle{
font-size: 1.1rem;
font-family: 'Spartan', sans-serif;
color:var(--dark-grayish-magenta)
}
}
.right{
width: 450px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: space-between;
&-card{
padding-top: 15px;
border-radius: 10px;
width: 400px;
background-color: hsl(300, 24%, 96%);
height: 50px;
text-align: center;
justify-content: center;
&-text{
margin-left: 70px;
}
&:nth-child(2){
margin-left: 50px;
}
&:nth-child(3){
margin-left: 100px;
}
& img {
width: 15px;
flex-direction: inherit;
}
}
}
Esto es lo que tengo que hacer:
Y, al darle a la clase .flex
el valor de:
display:flex;
Todo se me posiciono de forma lateral, de esta forma:
(Como la herramienta de recortes de windows me dejo de funcionar, y al sacar pantallazo se ve todo mal, preferi subirlo a github, pueden verlo haciendo click aca
Lo que yo necesito realizar es que, la parte de las estrellas quede en el lado derecho de la pagina, y, la parte que esta dentro del div "bottom", quede del lado de abajo de la pagina, pero no entiendo porque flexbox me lo posiciona asi.