Привязать текст к верхней части блока div

Question

Не могу привязать текст к верхней части блока, все время он привязывается к нижней части, margin-bottom не помогает...

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}


.content {
    display: flex;
    height: 100%;
    background: linear-gradient(145.59deg, #29FF8C -19.48%, #3AC1A8 22.2%, #7000FF 133.44%, #7ECAE2 137.8%);
}

.nav_block {
    width: 20%;
    height: 100%;
}

.main_block {
    width: 80%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.nav_block .logo_block {
    width: 150px;
    height: 80px;
    background: red;
    
    margin-top: 40px;
    
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    
    background: rgba(255, 255, 255, 0.7);
}

.nav_block .logo_block .logo {
    margin-top: 10px;
    margin-left: 35px;
}
._{
    height: 100px;
}
.text-block {
    
    width: 235px;
    height: 50px;
    
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    
    margin-bottom: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: none;
    
    color: white;
    
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 25px;
    
    transition: 0.6s;
}

.text-block:hover,
.text-block:active {
    background: rgba(255, 255, 255, 0.7);
    color: #757575;
}

.__ {
    height: 200px;
}

.exit_block {
    height: 45px;
    width: 170px;
    margin-left: auto;
    margin-right: auto;
    
    background: rgba(255, 255, 255, 0.7);
    border-radius: 40px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    line-height: 25px;
    transition: 0.6s;
    
}
p {
    background: linear-gradient(145.47deg, #7000FF -72.76%, #7ECAE2 109.41%, #29FF8C 197.56%, #29FF8C 491.38%);


  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.exit_block:active,
.exit_block:hover {
    background: white;
}



li {
    display: inline-block;
}

.main_text {
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 25px;
}

.text {
    margin-top: 130px;
    margin-left: 70px;
}

.crate_div_blur {
    height: 45px;
    width: 180px;
    
    background: linear-gradient(103.49deg, rgba(112, 0, 255, 0.7) -46.28%, rgba(41, 255, 140, 0.7) 150.28%);
    filter: blur(10px);
    border-radius: 20px;
}
.create_div {
    height: 45px;
    width: 180px;
    
    background: linear-gradient(103.49deg, rgba(112, 0, 255, 0.7) -46.28%, rgba(41, 255, 140, 0.7) 150.28%);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    color: white;
    
    
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 21px;
    line-height: 25px;
    
    box-shadow: 1px 1px 10px #469ABA;
    
}
.crate_btn {
    margin-left: 480px;
    
}


.second_text {
    height: 30px;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 21px;
    line-height: 25px;
    
    margin-top: 60px;
    margin-left: 60px;
    
    color: #000;
}

.slider {
    width: 90%;
    height: 290px;
    margin-top: 80px;
    margin-left: 60px;
    
    overflow-x: scroll;
    white-space: nowrap;
}

.r_block {
    display: inline-block;
    width: 530px;
    height: 290px;
    background: black;
    
    border-radius: 20px;
    
    background: linear-gradient(107.61deg, #29FF8C -23.42%, #3AC1A8 13.31%, #7000FF 111.36%, #7ECAE2 115.21%);
    margin-right: 60px;
}

.img_div {
    display: block;
    height: 290px;
    width: 220px;
    
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.img {
    
    object-fit: cover;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.texts-block {
    display: block;
    height: 290px;
    width: 310px;
    margin-bottom: 50px;
    
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.title {
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 25px;
    color: white;
    display: block;
    margin-bottom: 30px;
    margin-top: 15px;
    
}

.info {
    width: 100%;
    height: 100%;
    margin-left: 20px;
}

.other-text {
    display: block;
    font-family: Oswald;
    font-style: normal;
    font-weight: lighter;
    font-size: 20px;
    line-height: 25px;
    color: white;
    margin-top: 10px; 
}

.other-text-author {
    display: block;
    font-family: Oswald;
    font-style: normal;
    font-weight: lighter;
    font-size: 15px;
    line-height: 25px;
    color: white;
    margin-top: 40px;
}

.go_to_btn {
    font-family: Oswald;
    font-style: normal;
    font-weight: lighter;
    font-size: 15px;
    line-height: 28px;
    margin-right: 15px;
    margin-top: 14px;
    
    color: #fff;
    background: #29FF8C;
    width: 110px;
    height: 30px;
    border-style: none;
    border-color: none;
    text-decoration: none;
    
    background: linear-gradient(145.59deg, #29FF8C -19.48%, #3AC1A8 22.2%, #7000FF 133.44%, #7ECAE2 137.8%);
    border-radius: 11px;
    
    transition: 0.4s;
}

.go_to_btn:hover,
.go_to_btn:active {
    background:  #23C66E;
    box-shadow: 2px 2px 2px 2px rgba(41, 255, 140, 0.4);
}

<!DOCTYPE html>
<html>
 <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="profile.css">
  <title>HTML5</title>
 </head>
    
    
 <body>
    <div class="content">
        
        <div class="nav_block">
            
            <div class = "logo_block"><img src = "images/logo.png" width="60" class = "logo"></div>
            <div class = "_"></div>
            <div class = "text-block">Ваши рецепты</div>
            <div class = "text-block">Добавить рецепт</div>
            <div class = "text-block">Избранные</div>
            <div class = "__"></div>
            <div class = "exit_block"><p>Выход</p></div>
        </div>
        
        <div class="main_block">
            <div class = "text">
                <li><span class = "main_text">Добро пожаловать!</span></li>
                <li><span class = "main_text"> Иван Иванов</span></li>
                <li>
                    <div class = "crate_btn">
                        <div class = "create_div">
                            Создать
                        </div>
                    </div>
                </li>
            </div>
            
            <div class = "second_text">Ваши рецепты</div>
            
            <div class = "slider">
                <div class = "r_block">
                    <li><div class = "img_div"><img src = "test_food.jpeg" width="220px", height="290px" class = "img"></div></li>
                    <li><div class = "texts-block">
                        <div class = 'info'>
                    
                        <h4 class = "title">Жареная курица</h4>
                            <span class = "other-text">40 min</span><br>                       
                        <span class = "other-text">4 ingridienta</span>
                   
                        <a href="#">
                            <div class = "card_btns">
                            <button class = "go_to_btn">Смотреть</button>
                            </div>
                        </a>
                        <span class = "other-text-author">Jonh Robbinson</span>
                    </div>
                        </div>
                    </li>
                    
                </div>
                <div class = "r_block">
                    <li><div class = "img_div"><img src = "test_food.jpeg" width="220px", height="290px" class = "img"></div></li>
                    <li><div class = "texts-block">
                        <div class = 'info'>
                    
                        <h4 class = "title">Жареная курица</h4>
                            <span class = "other-text">40 min</span><br>                       
                        <span class = "other-text">4 ingridienta</span>
                   
                        <a href="#">
                            <div class = "card_btns">
                            <button class = "go_to_btn">Смотреть</button>
                            </div>
                        </a>
                        <span class = "other-text-author">Jonh Robbinson</span>
                    </div>
                        </div>
                    </li>
                    
                </div>
                <div class = "r_block">
                    <li><div class = "img_div"><img src = "test_food.jpeg" width="220px", height="290px" class = "img"></div></li>
                    <li><div class = "texts-block">
                        <div class = 'info'>
                    
                        <h4 class = "title">Жареная курица</h4>
                            <span class = "other-text">40 min</span><br>                       
                        <span class = "other-text">4 ingridienta</span>
                   
                        <a href="#">
                            <div class = "card_btns">
                            <button class = "go_to_btn">Смотреть</button>
                            </div>
                        </a>
                        <span class = "other-text-author">Jonh Robbinson</span>
                    </div>
                        </div>
                    </li>
                    
                </div>
                <div class = "r_block">
                    <li><div class = "img_div"><img src = "test_food.jpeg" width="220px", height="290px" class = "img"></div></li>
                    <li><div class = "texts-block">
                        <div class = 'info'>
                    
                        <h4 class = "title">Жареная курица</h4>
                            <span class = "other-text">40 min</span><br>                       
                        <span class = "other-text">4 ingridienta</span>
                   
                        <a href="#">
                            <div class = "card_btns">
                            <button class = "go_to_btn">Смотреть</button>
                            </div>
                        </a>
                        <span class = "other-text-author">Jonh Robbinson</span>
                    </div>
                        </div>
                    </li>
                    
                </div>
                <div class = "r_block">
                    <li><div class = "img_div"><img src = "test_food.jpeg" width="220px", height="290px" class = "img"></div></li>
                    <li><div class = "texts-block">
                        <div class = 'info'>
                    
                        <h4 class = "title">Жареная курица</h4>
                            <span class = "other-text">40 min</span><br>                       
                        <span class = "other-text">4 ingridienta</span>
                   
                        <a href="#">
                            <div class = "card_btns">
                            <button class = "go_to_btn">Смотреть</button>
                            </div>
                        </a>
                        <span class = "other-text-author">Jonh Robbinson</span>
                    </div>
                        </div>
                    </li>
                    
                </div>
                
            </div>
        </div>
    </div>
 </body>
    
    
</html>

Answer 1

Вы уж извините, но в пикселях верстать не надо, и вообще у вас куча лишних стилей, классов и элементов.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

:root {
  --color: #ffffff;
  --color-accent: #778ed5;
  --bg-color: rgb(255, 255, 255, 0.7);
  --bg-gradient: linear-gradient(145.59deg, #29FF8C -19.48%, #3AC1A8 22.2%, #7000FF 133.44%, #7ECAE2 137.8%);
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.8rem;
}

h4 {
  font-size: 1.6rem;
}

.content {
  display: flex;
  min-width: 800px;
  min-height: 100%;
  height: auto;
  background: var(--bg-gradient);
}

.nav_block {
  width: max-content;
  padding: 1rem 2rem 2rem 0;
}

.main_block {
  flex-grow: 1;
  background: var(--bg-color);
  border-radius: 2rem 0 0 2rem;
  padding: 2em;
  overflow: hidden;
}

.nav {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  list-style-type: none;
}

.nav>*:last-child {
  margin-top: auto;
}

.nav>* {
  font-size: 2rem;
  color: var(--color);
  padding: 0.6rem 1rem 0.6rem 2rem;
  margin: 2rem 0;
  border-radius: 0 2rem 2rem 0;
  transition: all .8s ease;
}

.logo,
.nav>*:hover,
.nav>*:focus {
  background-color: var(--bg-color);
  color: var(--color-accent);
  box-shadow: 0 0 14px 2px rgb(0, 0, 0, 0.2);
}

.intro {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.intro button,
.recipe-card-details button {
  font-size: 1.6rem;
  padding: 0.5em 1em;
  border-radius: 1em;
  background: var(--bg-gradient);
  color: var(--color);
  box-shadow: 1px 1px 10px #469ABA;
}

.recipe-card-details button {
  font-size: 1rem;
}

.recipe-card {
  display: flex;
  padding: 0.5em 1em;
  border-radius: 1em;
  color: var(--color);
  background: var(--bg-gradient);
}

.recipe-card>* {
  flex: 1;
}

.recipe-card-details p {
  margin-top: 0.4em;
  margin-bottom: 0.8em;
}

.recipes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 35%;
  gap: 1rem;
  padding: 1em 0;
  overflow-x: auto;
}

<div class="content">
  <div class="nav_block">
    <ul class="nav">
      <li class="logo"><img src="" alt="logo"></li>
      <li>My recipes</li>
      <li>Add recipe</li>
      <li>Favorites</li>
      <li>Exit</li>
    </ul>
  </div>
  <div class="main_block">
    <div class="intro">
      <h2>Welcome, John Dou!</h2>
      <button>Create</button>
    </div>
    <div>
      <h3>Your recipes</h3>
    </div>
    <div>
      <ul class="recipes">
        <li class="recipe-card">
          <img src="" alt="image">
          <div class="recipe-card-details">
            <h4>Fry chicken</h4>
            <p>40 min</p>
            <p>4 ingredients</p>
            <button>Details</button>
            <p>Jonh Robbinson</p>
          </div>
        </li>
        <li class="recipe-card">
          <img src="" alt="image">
          <div class="recipe-card-details">
            <h4>Fry chicken</h4>
            <p>40 min</p>
            <p>4 ingredients</p>
            <button>Details</button>
            <p>Jonh Robbinson</p>
          </div>
        </li>
        <li class="recipe-card">
          <img src="" alt="image">
          <div class="recipe-card-details">
            <h4>Fry chicken</h4>
            <p>40 min</p>
            <p>4 ingredients</p>
            <button>Details</button>
            <p>Jonh Robbinson</p>
          </div>
        </li>
        <li class="recipe-card">
          <img src="" alt="image">
          <div class="recipe-card-details">
            <h4>Fry chicken</h4>
            <p>40 min</p>
            <p>4 ingredients</p>
            <button>Details</button>
            <p>Jonh Robbinson</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Привязать текст к верхней части блока div

Ответы (1 шт):