texto

Abrir en el editor Publica tu código

Recomendado

18 November 2025

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homepage for a portfolio site</title>
    <link rel="stylesheet" href="./الحديث.css"> 
</head>
<body>
    <div class="container">
        <h1 class="spotlight">10 коротких хадисов, наполненные жизненной мудростью</h1>
        <p class="text">Чтение хадисов дает огромное количество преимуществ, таких как общее знание мусульманских основ: вера в Аллаха, Пророков, Последний День и т.д. А также знание общих моральных предписаний Ислама: совершение благодеяний, избегание пороков, совершение молитвы, пост в месяц Рамадан и многое другое.

</p>
        <p class="text">Вот некоторые короткие хадисы, наполненные жизненной мудростью для успеха в обоих мирах.

</p>
        <div class="button-container">
            <a href="./الحديث 2.html" class="button button-white">читать</a> 
            
        </div>
    </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
  color: #e0e0e0;
  overflow: hidden;
}

.container {
  text-align: center;
  max-width: 600px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.spotlight {
  font-size: 2.8em;
  font-weight: bold;
  color: transparent;
  background: linear-gradient(90deg, transparent, #c4c4c4, transparent);
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: spotlightMove 2s ease-in-out infinite alternate;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards,
    spotlightMove 3s ease-in-out infinite alternate;
}

.text {
  font-size: 1.1em;
  line-height: 1.6;
  color: #bfbfbf;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.4s;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.6s;
}

.button {
  padding: 10px 20px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.3s ease;
  text-decoration: none;
}

.button-white {
  background-color: #ffffff;
  color: #000000;
}

.button-blue {
  background-color: #1a73e8;
  color: #ffffff;
}

.button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

@keyframes spotlightMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

texto

Recomendado

Un código del texto

Un código del texto

Texto resplandeciente

HTML

CSS

JS

Recomendado

Un código del texto

Un código del texto

Texto resplandeciente

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS