پیش‌نمایش زنده
کد HTML
<div class="front_cover">
  <div class="spine"></div>
  <div class="spine-end"></div>
  <div class="main">
    <svg
      fill="#000000"
      version="1.1"
      id="Capa_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="100px"
      height="100px"
      viewBox="0 0 582.908 582.908"
      xml:space="preserve"
    >
      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
      <g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <g>
          <g>
            <path
              d="M566.406,121.351c-2.534,0.885-5.071,1.771-7.609,2.656c-0.853,0.298-2.272,0.559-3.175,0.596 c-2.496,0.098-4.969,0.286-7.319,0.824c-13.101,3.015-26.238,6.087-38.943,10.061c-4.603,1.44-8.927,3.513-13.179,5.708 c-0.8,0.412-2.142,0.975-2.994,1.273c-6.479,2.277-12.383,5.614-17.287,9.776c-0.686,0.583-1.856,1.44-2.636,1.889 c-28.43,16.487-53.231,36.414-77.858,55.941c-0.706,0.559-1.91,1.387-2.677,1.86c-5.219,3.244-9.91,6.969-14.003,11.085 c-0.636,0.641-1.546,1.407-2.02,1.746c-0.277,0.196-0.559,0.408-0.845,0.636c-11.306,8.993-22.807,17.81-34.182,26.63 c-0.714,0.551-1.583,0.861-1.967,0.706c-0.306-0.123-0.53-0.221-0.637-0.372c-1.061-1.526-2.085-3.068-3.112-4.61 c-0.498-0.75-1.38-0.808-1.983-0.139c-1.208,1.334-2.436,2.656-3.452,4.084c-1.803,2.538-3.414,5.169-5.438,8.352 c-0.485,0.759-1.342,0.812-1.913,0.11c-4.578-5.643-8.025-10.792-6.516-17.095c1.726-7.217,0.167-11.681-6.565-15.724 c-0.771-0.465-1.231-1.51-0.982-2.379c6.81-23.839,24.406-44.843,49.282-58.271c2.105-1.138,0.146-3.949-1.975-2.807 c-18.042,9.739-32.478,23.342-41.906,39.115c-0.461,0.775-1.366,1.901-2.036,2.505l-13.271,12.008 c-0.253,0.191-0.502,0.379-0.755,0.567c-0.416,0.314-1.453,0.347-2.317,0.09c-1.032-0.306-2.049-0.575-3.052-0.788 c-0.882-0.188-2.338-0.188-3.22,0c-1.004,0.212-2.02,0.486-3.052,0.792c-0.865,0.253-1.901,0.225-2.317-0.09 c-0.253-0.188-0.502-0.379-0.755-0.567l-13.272-12.007c-0.669-0.604-1.575-1.73-2.036-2.505 c-9.429-15.777-23.864-29.38-41.906-39.115c-2.122-1.146-4.08,1.668-1.975,2.807c24.88,13.427,42.477,34.431,49.282,58.271 c0.249,0.865-0.212,1.914-0.983,2.378c-6.732,4.043-8.291,8.507-6.564,15.725c1.51,6.303-1.938,11.452-6.516,17.095 c-0.567,0.702-1.428,0.648-1.914-0.11c-2.028-3.178-3.64-5.81-5.439-8.352c-1.016-1.428-2.244-2.75-3.452-4.084 c-0.604-0.669-1.485-0.612-1.983,0.139c-1.024,1.542-2.052,3.084-3.113,4.611c-0.106,0.151-0.331,0.249-0.637,0.371 c-0.379,0.155-1.252-0.151-1.966-0.706c-11.375-8.821-22.881-17.638-34.182-26.63c-0.286-0.229-0.567-0.441-0.845-0.637 c-0.478-0.334-1.387-1.105-2.023-1.746c-4.097-4.117-8.785-7.846-14.007-11.085c-0.767-0.477-1.967-1.297-2.672-1.86 c-24.631-19.531-49.433-39.458-77.863-55.945c-0.779-0.453-1.946-1.306-2.636-1.889c-4.904-4.162-10.808-7.503-17.287-9.78 c-0.849-0.298-2.195-0.861-2.995-1.273c-4.251-2.195-8.576-4.268-13.178-5.708c-12.705-3.974-25.843-7.046-38.944-10.061 c-2.35-0.543-4.818-0.727-7.319-0.824c-0.902-0.037-2.326-0.298-3.174-0.596c-2.538-0.885-5.071-1.771-7.609-2.656 c-6.565-2.293-14.333,2.423-16.035,7.564c-1.604,4.847,0.824,8.809,5.051,11.412c0.767,0.474,1.199,1.061,0.914,1.379 c-0.167,0.188-0.343,0.38-0.526,0.571c-4.431,4.737-2.415,10.188,4.305,12.15c1.212,0.355,2.889,1.302,3.003,2.109 c0.126,0.894-1.155,2.044-2.081,2.889c-0.444,0.404-1,0.726-1.587,1.036c-0.795,0.42-1.11,1.416-0.718,2.228 c1.089,2.249,2.024,4.325,3.297,6.243c0.424,0.641,1.069,1.249,1.807,1.758c0.743,0.514,1.885,1.371,2.538,1.991 c0.828,0.783,1.775,1.505,2.823,2.15c2.423,1.485,2.224,2.933,1.351,3.162c-1.098,0.29-2.134,0.563-3.036,0.8 c-0.873,0.229-1.322,1.102-1.008,1.946c1.314,3.517,2.615,7.013,3.917,10.502c0.314,0.844,0.632,1.921,0.755,2.395 c0.073,0.281,0.155,0.563,0.257,0.849c4.146,12.064,11.041,23.125,20.164,32.771c0.62,0.657,1.579,1.75,2.134,2.46 c3.133,4.015,6.271,8.025,9.404,12.04c0.555,0.71,1.044,2.028,1.261,2.901c0.714,2.864,2.782,5.472,6.083,7.079 c1.84,0.894,3.901,1.358,5.978,1.424c0.901,0.029,2.015,0.596,2.513,1.346c1.065,1.62,2.228,3.146,3.798,4.276 c3.289,2.362,7.83,3.607,11.979,5.039c6.626,2.281,13.346,4.378,20.09,6.405c1.726,0.519,3.725,0.804,5.545,0.669 c0.645-0.049,1.285-0.098,1.93-0.143c0.897-0.069,2.321,0.102,3.178,0.379c1.363,0.437,2.726,0.877,4.088,1.314 c0.453,0.147,0.906,0.257,1.367,0.343c0.767,0.139,1.893,0.465,2.501,0.824c0.604,0.363,0.388,0.498-0.498,0.331 c-0.881-0.164-1.763-0.302-2.648-0.4c-13.383-1.489-24.68-1.326-31.906,12.607c-0.612,1.183-1.763,2.428-3.068,3.064 c-3.917,1.913-2.456,3.398,0.449,4.504c3.643,1.388,5.573,3.187,4.304,6.724c-1.02,2.849,0.828,3.501,4.039,4.023 c5.308,0.86,6.422,2.746,3.913,5.609c-0.595,0.678-0.689,1.718-0.122,2.42c1.742,2.138,3.443,4.26,5.218,6.336 c2.163,2.53,3.876,5.622,6.748,7.385c7.756,4.754,15.904,9.095,24.129,13.28c7.907,4.02,16.218,7.491,24.153,11.478 c7.055,3.541,13.819,7.482,20.743,11.203c1.412,0.76,2.913,1.771,4.472,1.914c7.605,0.702,15.333,2.027,22.848,1.497 c14.717-1.036,27.03-6.679,37.059-15.858c1.754-1.607,4.395-2.551,6.675-3.525c0.829-0.355,1.693,0.024,1.951,0.886 c2.48,8.237,4.684,15.52,6.822,22.815c0.179,0.607-0.18,1.317-0.261,1.982c-0.967,8.025-1.106,15.888,4.043,21.408 c0.616,0.66,1.171,1.864,1.143,2.766c-0.082,2.538-0.294,4.288,0.11,5.937c1.208,4.929,2.893,9.771,4.255,14.672 c3.554,12.795,8.641,26.532,16.663,39.327c0.478,0.763,0.159,1.22-0.722,1.028c-0.171-0.037-0.331-0.074-0.49-0.106 c-0.881-0.191-1.391,0.363-1.032,1.188c0.857,1.958,2.183,3.721,3.855,3.986c1.077,0.171,2.264,0.008,3.476-0.311 c0.873-0.232,2.244-0.232,3.113,0c1.208,0.318,2.395,0.481,3.477,0.311c1.673-0.266,2.998-2.028,3.855-3.986 c0.358-0.824-0.151-1.375-1.032-1.188c-0.159,0.032-0.318,0.069-0.49,0.106c-0.881,0.191-1.199-0.266-0.718-1.032 c8.021-12.795,13.109-26.532,16.663-39.327c1.362-4.904,3.048-9.747,4.255-14.672c0.404-1.648,0.192-3.403,0.11-5.937 c-0.028-0.901,0.526-2.105,1.143-2.767c5.148-5.52,5.01-13.382,4.043-21.407c-0.081-0.665-0.437-1.375-0.261-1.983 c2.138-7.295,4.345-14.573,6.821-22.815c0.262-0.864,1.122-1.24,1.95-0.885c2.285,0.975,4.921,1.917,6.675,3.524 c10.029,9.177,22.343,14.819,37.059,15.859c7.516,0.53,15.247-0.796,22.849-1.497c1.559-0.143,3.06-1.155,4.472-1.914 c6.924-3.721,13.688-7.658,20.742-11.203c7.936-3.986,16.247-7.454,24.154-11.478c8.229-4.182,16.373-8.527,24.129-13.28 c2.872-1.759,4.586-4.851,6.748-7.385c1.774-2.076,3.477-4.198,5.219-6.336c0.566-0.698,0.473-1.738-0.123-2.42 c-2.509-2.864-1.396-4.753,3.913-5.609c3.211-0.519,5.06-1.176,4.039-4.023c-1.269-3.537,0.661-5.336,4.305-6.724 c2.909-1.109,4.365-2.591,0.448-4.504c-1.306-0.641-2.456-1.881-3.067-3.064c-7.227-13.938-18.523-14.097-31.906-12.607 c-0.885,0.098-1.767,0.237-2.647,0.4c-0.886,0.164-1.105,0.029-0.498-0.331c0.608-0.363,1.734-0.685,2.501-0.824 c0.457-0.085,0.914-0.195,1.367-0.342c1.362-0.437,2.726-0.877,4.088-1.314c0.856-0.277,2.28-0.445,3.179-0.379 c0.645,0.049,1.289,0.098,1.93,0.143c1.819,0.135,3.818-0.146,5.545-0.669c6.744-2.028,13.468-4.125,20.09-6.406 c4.149-1.428,8.69-2.676,11.979-5.039c1.575-1.13,2.733-2.656,3.799-4.276c0.493-0.755,1.611-1.318,2.513-1.346 c2.073-0.065,4.138-0.531,5.978-1.424c3.301-1.607,5.369-4.214,6.083-7.079c0.217-0.873,0.706-2.187,1.261-2.897 c3.134-4.015,6.271-8.025,9.404-12.04c0.555-0.71,1.518-1.812,2.138-2.464c9.123-9.645,16.019-20.706,20.164-32.771 c0.098-0.286,0.184-0.571,0.257-0.849c0.122-0.473,0.44-1.554,0.755-2.399c1.302-3.488,2.607-6.981,3.921-10.502 c0.313-0.845-0.135-1.713-1.004-1.946c-0.901-0.236-1.938-0.51-3.035-0.795c-0.873-0.229-1.077-1.677,1.346-3.162 c1.049-0.641,1.995-1.367,2.823-2.15c0.653-0.62,1.8-1.477,2.538-1.991c0.738-0.51,1.384-1.118,1.808-1.758 c1.272-1.922,2.207-3.995,3.297-6.243c0.392-0.812,0.081-1.808-0.719-2.228c-0.587-0.31-1.142-0.632-1.587-1.036 c-0.926-0.845-2.207-1.991-2.081-2.889c0.114-0.804,1.791-1.755,3.003-2.109c6.716-1.963,8.735-7.414,4.305-12.15 c-0.18-0.192-0.354-0.384-0.526-0.571c-0.285-0.318,0.146-0.91,0.914-1.379c4.227-2.603,6.654-6.565,5.051-11.412 C580.739,123.778,572.971,119.062,566.406,121.351z"
            ></path>
          </g>
        </g>
      </g>
    </svg>
  </div>
</div>
کد CSS
.front_cover {
  height: 400px;
  width: 300px;
  background: linear-gradient(to right, #bd8a8a);
  display: flex;
  border-radius: 3px;
  box-shadow: 10px 20px 50px rgba(0, 0, 0, 0.5);
}

.spine {
  height: 100%;
  width: 1px;
  border-radius: -3px;
  background-color: rgba(245, 245, 245, 0.144);
  margin-left: 5px;
  box-shadow:
    -3px 0px 2px rgba(0, 0, 0, 0.671),
    1px 0px 4px rgba(255, 255, 255, 0.671);
}

.spine-end {
  height: 100%;
  width: 3px;
  border-radius: -3px;
  background: linear-gradient(to right, #0000003d, #00000005);
  margin-left: 12px;
  box-shadow:
    -3px 0px 6px rgba(0, 0, 0, 0.671),
    6px 0px 6px rgba(255, 255, 255, 0.048);
}

.main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  margin-top: 130px;
}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06