<h1>Block Element Modifier - BEM</h1>
<!-- The block - Card -->
<div class="card">
<!--   First element -->
  <div class="card__header">
    <img src="data:image/jpeg;base64,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" class="card__avatar" alt='avatar'/>
    <h2 class="card__title">Mr. Block Element Modifier (BEM)</h2>
    <p class="card__bem-description">Mr BEM is a being used for organizing and structuring CSS and HTML code in a modular, reusable way. At the core of BEM are Blocks, which are standalone components with a descriptive name and a well-defined structure. Blocks can contain Elements and Modifiers, which are optional parts that add extra information about their structure, appearance, or behavior. To work effectively with BEM, it's important to follow its rules and guidelines, such as using a consistent naming convention, keeping Blocks independent and modular, and avoiding unnecessary complexity in the code. By following these guidelines, you can build flexible, maintainable, and scalable components that are easy to reuse and modify.</P>
  </div>
<!--  Card footer -->
 <div class="card__buttons">
   <button class="card__btn card__btn--disabled">Read more</button>
   <button class="card__btn">Learn More</button>
 </div>
</div>
.card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 12px 12px;
  height: max-content;
  border: 1px solid #fff;
  width: 350px;
  box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
}

.card:hover {
  box-shadow: 0 15px 24px 0 rgba(0,0,0,0.4);
}

.card__header {
  width: 100%;
}

.card__avatar {
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

.card__title {
  font-size: 25px;
  font-weight: 900;
  color: #143370;
}

.card__bem-description {
  font-size: 15px;
  font-weight: 300px;
  color: #646663;
}

.card__buttons {
  display: flex;
  justify-content: space-between;
  margin: 10px 50px;
}

.card__btn {
  height: 40px;
  width: 100px;
  font-size: 16px;
  border-radius: 8px;
  outline: none;
  border: transparent;
}

.card__btn--disabled {
  pointer-events: none;
  opacity: 0.5; 
  cursor: not-allowed; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.