Hello, this is my practice for oocss and comments,
Am I complying with the methodology?
What am I missing?
What was wrong?
What should i improve?
Thanks I wait for your answers
HTML:
<div class="container abs-center bdr-dev">
<div class="card">
<div class="row">
<div class="col col-2">
<img src="https://picsum.photos/id/237/200/300" alt="img-profile" class="img-profile" />
</div>
<div class="col col-10">
<blockquote class="reply relative">
<h3 class="profile-name">robert molina</h3>
<p class="paragraph">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente saepe in dolores iste magnam magni ullam vitae aperiam, dicta
corporis molestias ex quo sit! Vel esse cum enim illo eaque?
</p>
</blockquote>
</div>
</div>
</div>
</div>
CSS:
/* || GENERAL STYLES*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 10px; /*rem's base*/
}
body {
box-sizing: border-box;
font-size: 13px;
font-family: "Open Sans", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
margin-bottom: 1em;
}
/*--------------------------------------*/
/* || UTILITIES*/
/*--------------------------------------*/
/*border for test of box model*/
.bdr-dev {
border: 1px solid;
}
.relative {
position: relative;
}
/*vertical and horizontal centered*/
.abs-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container {
width: 50%;
}
/*--------------------------------------*/
/* || LAYOUT*/
/*--------------------------------------*/
.row {
display: flow-root;
}
.col {
float: left;
}
.col-2 {
width: calc((100% / 12) * 2);
}
.col-10 {
width: calc((100% / 12) * 10);
}
/*--------------------------------------*/
/* || CARD REPLY*/
/*--------------------------------------*/
.card {
width: 100%;
padding: 0.5em;
}
.img-profile {
width: 100%;
max-height: 10rem;
object-fit: cover;
}
.reply {
padding: 0 1.5em;
}
/*--------------------------------------*/
/* || TYPOGRAPHY*/
/*--------------------------------------*/
.paragraph:not(:last-child) {
/*If the paragraph is last o only-child, it does not get margin bottom*/
margin-bottom: 1em;
}
Why Nobody help me?
RESULT: