TruePower2020 commited on
Commit
537729e
·
verified ·
1 Parent(s): 61ebd28

измени дизайн кнопок соц сетей под видео на красно белый

Browse files
Files changed (2) hide show
  1. index.html +8 -8
  2. style.css +13 -0
index.html CHANGED
@@ -49,26 +49,26 @@ playsinline
49
  preload="auto"
50
  ></video>
51
  </div>
52
- <div class="mt-4 flex justify-center gap-4 bg-accent p-2 rounded-lg">
53
- <a href="https://instagram.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
54
  <i data-feather="instagram"></i>
55
  </a>
56
- <a href="https://facebook.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
57
  <i data-feather="facebook"></i>
58
  </a>
59
- <a href="https://youtube.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
60
  <i data-feather="youtube"></i>
61
  </a>
62
- <a href="https://soundcloud.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
63
  <i data-feather="music"></i>
64
  </a>
65
- <a href="https://twitch.tv/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
66
  <i data-feather="twitch"></i>
67
  </a>
68
- <a href="https://bandcamp.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
69
  <i data-feather="cloud"></i>
70
  </a>
71
- <a href="https://vk.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
72
  <i data-feather="radio"></i>
73
  </a>
74
  </div>
 
49
  preload="auto"
50
  ></video>
51
  </div>
52
+ <div class="mt-4 flex justify-center gap-4 p-2">
53
+ <a href="https://instagram.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
54
  <i data-feather="instagram"></i>
55
  </a>
56
+ <a href="https://facebook.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
57
  <i data-feather="facebook"></i>
58
  </a>
59
+ <a href="https://youtube.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
60
  <i data-feather="youtube"></i>
61
  </a>
62
+ <a href="https://soundcloud.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
63
  <i data-feather="music"></i>
64
  </a>
65
+ <a href="https://twitch.tv/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
66
  <i data-feather="twitch"></i>
67
  </a>
68
+ <a href="https://bandcamp.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
69
  <i data-feather="cloud"></i>
70
  </a>
71
+ <a href="https://vk.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
72
  <i data-feather="radio"></i>
73
  </a>
74
  </div>
style.css CHANGED
@@ -45,6 +45,19 @@ article h3 {
45
  .grid.md\:grid-cols-2 {
46
  align-items: start;
47
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  /* Custom scrollbar */
49
  ::-webkit-scrollbar {
50
  width: 8px;
 
45
  .grid.md\:grid-cols-2 {
46
  align-items: start;
47
  }
48
+ .social-icon {
49
+ display: inline-flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ width: 40px;
53
+ height: 40px;
54
+ transition: transform 0.3s ease;
55
+ }
56
+
57
+ .social-icon:hover {
58
+ transform: scale(1.1);
59
+ }
60
+
61
  /* Custom scrollbar */
62
  ::-webkit-scrollbar {
63
  width: 8px;