پیشنمایش زنده
کد HTML
<div class="card">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" class="App-logo">
<path fill="url(#paint0_linear_87_8208)" d="M22.5941 19.8407L8.8916 27.9998L26.6338 26.7925L28.0003 8.85254L22.5941 19.8407Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint1_linear_87_8208)" d="M26.6631 26.7806L25.1381 16.2261L20.9844 21.7262L26.6631 26.7806Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint2_linear_87_8208)" d="M26.6836 26.7803L15.5117 25.9009L8.95117 27.9769L26.6836 26.7803Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint3_linear_87_8208)" d="M8.96674 27.9796L11.7576 18.811L5.61621 20.1279L8.96674 27.9796Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint4_linear_87_8208)" d="M27.4176 11.8117L20.4706 6.12207L18.5361 12.3936L27.4176 11.8117Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint5_linear_87_8208)" d="M24.1684 4.09336L20.0826 6.35755L17.5049 4.06299L24.1684 4.09336Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint6_linear_87_8208)" d="M4 23.2031L5.7116 20.0729L4.32706 16.3438L4 23.2031Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="white" d="M4.23535 16.2259L5.62838 20.1883L11.6814 18.8265L18.592 12.3862L20.5422 6.17431L17.4714 4L12.2506 5.95931C10.6057 7.49347 7.41387 10.529 7.29879 10.5861C7.18493 10.6444 5.19109 14.4233 4.23535 16.2259Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint7_linear_87_8208)" d="M11.7227 18.7882L18.592 12.3863L18.5951 12.3765L20.9832 21.7566L11.7227 18.7882Z"></path>
<path fill="url(#paint8_linear_87_8208)" d="M9.12619 9.10774C12.6911 5.56325 17.2869 3.46911 19.0506 5.2535C20.8132 7.03789 18.944 11.3744 15.3791 14.9176C11.8141 18.4609 7.27528 20.6705 5.5128 18.8861C3.74911 17.1029 5.56126 12.651 9.12619 9.10774Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint9_linear_87_8208)" d="M8.9668 27.9755L11.7359 18.7778L20.9323 21.7405C17.6072 24.8671 13.909 27.5103 8.9668 27.9755Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint10_linear_87_8208)" d="M18.6035 12.3679L20.9644 21.7454C23.742 18.8167 26.2349 15.6682 27.4558 11.7739L18.6035 12.3679Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint11_linear_87_8208)" d="M27.4317 11.8217C28.3765 8.96229 28.5945 4.86025 24.1392 4.09863L20.4834 6.12354L27.4317 11.8217Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="#9E1209" d="M4 23.162C4.13082 27.8812 7.52617 27.9515 8.97249 27.9929L5.63166 20.1689L4 23.162Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint12_radial_87_8208)" d="M18.6172 12.3826C20.7515 13.6981 25.0531 16.3401 25.1403 16.3887C25.2758 16.4652 26.9948 13.4819 27.3849 11.7959L18.6172 12.3826Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint13_radial_87_8208)" d="M11.7324 18.7778L15.4342 25.9397C17.6231 24.7493 19.3371 23.2989 20.907 21.7453L11.7324 18.7778Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint14_linear_87_8208)" d="M5.61728 20.1783L5.09277 26.4413C6.08243 27.7969 7.44396 27.9147 8.87211 27.8091C7.83885 25.2303 5.77475 20.0739 5.61728 20.1783Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="url(#paint15_linear_87_8208)" d="M20.4619 6.1393L27.8159 7.17422C27.4234 5.50644 26.2181 4.43022 24.1637 4.09375L20.4619 6.1393Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<defs>
<linearGradient gradientUnits="userSpaceOnUse" y2="21.2307" x2="20.0019" y1="30.1825" x1="25.0863" id="paint0_linear_87_8208">
<stop stop-color="#FB7655"></stop>
<stop stop-color="#E42B1E" offset="0.41"></stop>
<stop stop-color="#990000" offset="0.99"></stop>
<stop stop-color="#990000" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="18.2786" x2="21.0723" y1="22.6528" x1="27.6086" id="paint1_linear_87_8208">
<stop stop-color="#871101"></stop>
<stop stop-color="#911209" offset="0.99"></stop>
<stop stop-color="#911209" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="26.0802" x2="15.8517" y1="30.4542" x1="22.3878" id="paint2_linear_87_8208">
<stop stop-color="#871101"></stop>
<stop stop-color="#911209" offset="0.99"></stop>
<stop stop-color="#911209" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="26.0657" x2="9.70472" y1="19.4743" x1="8.68769" id="paint3_linear_87_8208">
<stop stop-color="white"></stop>
<stop stop-color="#E57252" offset="0.23"></stop>
<stop stop-color="#DE3B20" offset="0.46"></stop>
<stop stop-color="#A60003" offset="0.99"></stop>
<stop stop-color="#A60003" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="11.9204" x2="22.9409" y1="7.10002" x1="21.8192" id="paint4_linear_87_8208">
<stop stop-color="white"></stop>
<stop stop-color="#E46342" offset="0.18"></stop>
<stop stop-color="#C82410" offset="0.4"></stop>
<stop stop-color="#A80D00" offset="0.99"></stop>
<stop stop-color="#A80D00" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="3.00175" x2="23.2251" y1="5.40177" x1="18.4117" id="paint5_linear_87_8208">
<stop stop-color="white"></stop>
<stop stop-color="#C81F11" offset="0.54"></stop>
<stop stop-color="#BF0905" offset="0.99"></stop>
<stop stop-color="#BF0905" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="21.7663" x2="4.87073" y1="17.7935" x1="4.47282" id="paint6_linear_87_8208">
<stop stop-color="white"></stop>
<stop stop-color="#DE4024" offset="0.31"></stop>
<stop stop-color="#BF190B" offset="0.99"></stop>
<stop stop-color="#BF190B" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="20.0464" x2="16.02" y1="13.3187" x1="15.6452" id="paint7_linear_87_8208">
<stop stop-color="white"></stop>
<stop stop-color="#E4714E" offset="0.23"></stop>
<stop stop-color="#BE1A0D" offset="0.56"></stop>
<stop stop-color="#A80D00" offset="0.99"></stop>
<stop stop-color="#A80D00" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="3.71053" x2="20.4078" y1="22.8404" x1="1.75216" id="paint8_linear_87_8208">
<stop stop-color="#BD0012"></stop>
<stop stop-color="white" offset="0.07"></stop>
<stop stop-color="white" offset="0.17"></stop>
<stop stop-color="#C82F1C" offset="0.27"></stop>
<stop stop-color="#820C01" offset="0.33"></stop>
<stop stop-color="#A31601" offset="0.46"></stop>
<stop stop-color="#B31301" offset="0.72"></stop>
<stop stop-color="#E82609" offset="0.99"></stop>
<stop stop-color="#E82609" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="23.3957" x2="10.3965" y1="24.7752" x1="16.0015" id="paint9_linear_87_8208">
<stop stop-color="#8C0C01"></stop>
<stop stop-color="#990C00" offset="0.54"></stop>
<stop stop-color="#A80D0E" offset="0.99"></stop>
<stop stop-color="#A80D0E" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="13.5714" x2="20.635" y1="18.0314" x1="25.6251" id="paint10_linear_87_8208">
<stop stop-color="#7E110B"></stop>
<stop stop-color="#9E0C00" offset="0.99"></stop>
<stop stop-color="#9E0C00" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="7.17189" x2="24.9671" y1="9.82314" x1="27.4539" id="paint11_linear_87_8208">
<stop stop-color="#79130D"></stop>
<stop stop-color="#9E120B" offset="0.99"></stop>
<stop stop-color="#9E120B" offset="1"></stop>
</linearGradient>
<radialGradient gradientTransform="translate(21.4229 13.6432) scale(6.09995 6.11692)" gradientUnits="userSpaceOnUse" r="1" cy="0" cx="0" id="paint12_radial_87_8208">
<stop stop-color="#A80D00"></stop>
<stop stop-color="#7E0E08" offset="0.99"></stop>
<stop stop-color="#7E0E08" offset="1"></stop>
</radialGradient>
<radialGradient gradientTransform="translate(12.9755 21.7042) scale(8.10906 8.13164)" gradientUnits="userSpaceOnUse" r="1" cy="0" cx="0" id="paint13_radial_87_8208">
<stop stop-color="#A30C00"></stop>
<stop stop-color="#800E08" offset="0.99"></stop>
<stop stop-color="#800E08" offset="1"></stop>
</radialGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="21.0987" x2="5.19975" y1="27.9701" x1="7.23075" id="paint14_linear_87_8208">
<stop stop-color="#8B2114"></stop>
<stop stop-color="#9E100A" offset="0.43"></stop>
<stop stop-color="#B3100C" offset="0.99"></stop>
<stop stop-color="#B3100C" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="7.18628" x2="27.2663" y1="5.19037" x1="22.7321" id="paint15_linear_87_8208">
<stop stop-color="#B31000"></stop>
<stop stop-color="#910F08" offset="0.44"></stop>
<stop stop-color="#791C12" offset="0.99"></stop>
<stop stop-color="#791C12" offset="1"></stop>
</linearGradient>
</defs>
</svg>
<div class="header">Welcome to Ruby</div>
<button class="App-button">Start learning now</button>
</div>
کد CSS
.card {
background-color: #2e1513;
border: 3px solid #E42B1E;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 700;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 30px 20px;
color: #e23c30;
border-radius: 45px;
}
.App-logo {
pointer-events: none;
margin-top: -10px;
width: 160px;
}
.App-button {
padding: 10px 20px;
background-color: transparent;
color: #E42B1E;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
border: 3px solid #E42B1E;
border-radius: 5em;
margin-top: 20px;
transition: 0.2s;
}
.App-button:hover {
color: #2e1513;
background-color: #E42B1E;
}