Info.FAM

by Nikkoin

HTML

<header>
  <div class="overlay">
    <div> <svg class="infofamlogo" width="100%" height="100%" viewBox="0 0 1890 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
        <g transform="matrix(1,0,0,1,-295.276,-295.276)">
          <g transform="matrix(1.01772,0,0,1.01772,-133.202,-227.005)">
            <rect x="421.016" y="515.184" width="62.91" height="56.413" style="fill:rgb(249,226,15);" />
            <rect x="421.016" y="615.141" width="63.41" height="254.828" style="fill:white;" />
            <path d="M554.459,869.969L617.869,869.969L617.869,753.019C617.869,741.024 618.869,729.529 622.369,719.034C631.87,688.547 656.873,667.056 690.877,667.056C723.381,667.056 731.382,688.047 731.382,719.034L731.382,869.969L794.293,869.969L794.293,706.039C794.293,638.599 762.338,609.144 705.879,609.144C654.373,609.144 626.37,640.596 615.372,662.064L614.373,662.064C614.373,662.058 615.372,654.072 615.372,644.589L615.372,615.141L554.459,615.141L554.459,869.969Z" style="fill:white;fill-rule:nonzero;" />
            <path d="M873.821,869.969L937.231,869.969L937.231,669.555L991.708,669.555L991.708,619.139L937.231,619.139L937.231,609.131C937.231,572.102 968.218,567.599 986.21,567.599C993.707,567.599 999.204,568.6 999.204,568.6L999.204,515.184C999.204,514.683 990.708,513.185 977.714,513.185C942.229,513.185 873.821,524.168 873.821,607.63L873.821,619.139L842.335,619.139L842.335,669.555L873.821,669.555L873.821,869.969Z" style="fill:white;fill-rule:nonzero;" />
            <path d="M1015.26,742.555C1015.26,821.052 1077.67,875.966 1155.67,875.966C1233.16,875.966 1295.58,821.052 1295.58,742.555C1295.58,664.557 1233.16,609.144 1155.17,609.144C1077.67,609.144 1015.26,664.557 1015.26,742.555ZM1079.67,742.555C1079.67,695.556 1114.17,663.058 1155.67,663.058C1196.67,663.058 1231.17,695.556...

CSS

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    body {
      font-family: 'Source Sans 3', sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
    }

    header {
      background: url('https://i.postimg.cc/pXBV4crW/Willian-Gregio-fotofam.png');
      text-align: center;
      width: 100%;
      height: auto;
      background-size: cover;
      overflow: hidden;
      height: 100vh;
    }

    header .overlay {
      width: 100%;
      height: 100vh;
      padding: 50px;
      color: #FFF;
      background-image: linear-gradient(135deg, #000000b5 10%, #000000b5 100%);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    header h2 {}

    .infofamlogo {
      max-width: 500px;
      margin: 0 auto;
    }

    .inscrevase {
      color: black;
      background-color: #f9e20f;
      border: none;
      padding: 5px 20px;
      cursor: pointer;
      transition: all 0.3s;
      margin-right: 20px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 5px;
      text-transform: uppercase;
      text-decoration: none;
      width: fit-content;
      margin: 0 auto;
    }

    .inscrevase a {
      text-decoration: none;
      color: #1b3556;
      transition: all 0.3s;

    }

    .inscrevase:hover {
      background-color: transparent;
      box-shadow: inset 0 0 0 2px white;
      color: white;

    }

    @media (max-width: 650px) {
      header h2 {
        margin-top: 10px;
        font-size: clamp(16px, 3.5vw, 30px);
      }

      .grid-item h3 {
        margin-top: 8px;
        font-size: 20px;
      }

    }

    p {
      font-size: small;
      width: fit-content;
      margin: 0 auto;
      padding: 5px 10px;
      margin-top: 10px;
      border-radius: 5px;
    }