Собираем страницу портфолио

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<style>
  :root { --pico-border-radius: 0.75rem; }
  article img { width: 100%; }
</style>
 
<header class="container">
  <nav>
    <ul><li><strong>Анна Петрова</strong></li></ul>
    <ul>
      <li><a href="#projects">Проекты</a></li>
      <li><a href="#blog">Блог</a></li>
      <li><a href="#contact" role="button">Связаться</a></li>
    </ul>
  </nav>
</header>
 
<main class="container">
  <section>
    <hgroup>
      <h1>Делаю быстрые и понятные сайты</h1>
      <p>Вёрстка, небольшие сайты и заметки о CSS.</p>
    </hgroup>
    <a href="#projects" role="button">Смотреть работы</a>
    <a href="#blog" role="button" class="secondary outline">Читать блог</a>
  </section>
 
  <section id="projects">
    <h2>Проекты</h2>
    <div class="grid">
      <article>
        <img src="/media/photo-400x250.jpg" alt="Сайт кофейни">
        <h4>Сайт кофейни</h4>
        <p>Меню, карта и бронь столика.</p>
      </article>
      <article>
        <img src="/media/photo-400x250.jpg" alt="Портфолио фотографа">
        <h4>Портфолио фотографа</h4>
        <p>Галерея с фильтрами по жанрам.</p>
      </article>
    </div>
  </section>
 
  <section id="blog">
    <h2>Блог</h2>
    <article>
      <header><strong>Сетка без медиазапросов</strong> · 12 марта</header>
      <p>Как auto-fit и minmax подбирают число колонок.</p>
      <footer><a href="#">Читать дальше</a></footer>
    </article>
  </section>
 
  <section>
    <h2>Вопросы</h2>
    <details name="faq">
      <summary>Сколько стоит лендинг?</summary>
      <p>От 600 $ в зависимости от числа блоков.</p>
    </details>
    <details name="faq">
      <summary>Сколько длится работа?</summary>
      <p>Обычно две недели.</p>
    </details>
  </section>
 
  <section id="contact">
    <h2>Связаться</h2>
    <form>
      <fieldset role="group">
        <input type="email" name="email" placeholder="Ваш email" aria-label="Email" required>
        <input type="submit" value="Написать">
      </fieldset>
    </form>
  </section>
</main>
 
<footer class="container">
  <small>© 2025 Анна Петрова · <a href="#" class="secondary">Наверх</a></small>
</footer>