basit hmtl yardım

23-08-2023, 05:06:08

https://codepen.io/WebMasterMarket-Net/pen/qBLdaEP
biri şunu düzeltebilir mi? tiktok icon ekledikten sonra üsttekiler bozuldu, çok html bilgim yok yardımcı olursanız sevinirim.

23-08-2023, 05:08:52

#2

Sezar6699

<ul>
<li><a href="https://webmastermarket.net/category/google-services/" target="_self"><i class="fab fa-google"></i> Google</a></li>
<li><a href="https://webmastermarket.net/category/facebook-services/" target="_self"><i class="fab fa-facebook"></i> Facebook</a></li>
<li><a href="https://webmastermarket.net/category/Twitter-services/" target="_self"><i class="fab fa-twitter"></i> Twitter</a></li>
<li><a href="https://webmastermarket.net/category/Twitter-services/" target="_self"><i class="fab fa-instagram"></i> Instagram</a></li>
<li><a href="https://webmastermarket.net/category/YouTube-services/" target="_self"><i class="fab fa-youtube-play"></i> YouTube</a></li>
<li><a href="https://webmastermarket.net/category/TikTok-services/" target="_self"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /><div class="tiktoklogo"><i class="fab fa-tiktok"></i>
</i>TikTok</a></li></div>
</ul>

23-08-2023, 05:11:18

#3

imkyssa

```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<ul>
<li><a href="https://webmastermarket.net/category/google-services/" target="_self"> Google</a></li>
<li><a href="https://webmastermarket.net/category/facebook-services/" target="_self"> Facebook</a></li>
<li><a href="https://webmastermarket.net/category/Twitter-services/" target="_self"> Twitter</a></li>
<li><a href="https://webmastermarket.net/category/Twitter-services/" target="_self"> Instagram</a></li>
<li><a href="https://webmastermarket.net/category/YouTube-services/" target="_self"> YouTube</a></li>
<li><a href="https://webmastermarket.net/category/YouTube-services/" target="_self"> Tiktok</a></li>
</ul>
```

23-08-2023, 09:45:15

#4

mebularts

https://codepen.io/Mehmet-Bulat-the-sans/pen/ExGjZOy

Bu şekilde işinizi görür umarım

HTML Kodları:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="hover">
<a href="https://webmastermarket.net/category/google-services/" target="_self"> <i class="fab fa-google"> Google</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/facebook-services/" target="_self"> <i class="fab fa-facebook"> Facebook</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/Twitter-services/" target="_self"> <i class="fab fa-twitter"> Twitter</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/Twitter-services/" target="_self"> <i class="fab fa-instagram"> Instagram</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/YouTube-services/" target="_self"> <i class="fab fa-youtube"> YouTube</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/YouTube-services/" target="_self"> <i class="fab fa-tiktok"> Tiktok</a></i></div>

CSS Kodları:

a {
  color: black;
  padding: 5px;
  bottom: 5px;
}

.hover {
  --c:linear-gradient(#000 0 0); /* update the color here */
  
  padding-bottom: .15em;
  background: var(--c), var(--c);
  background-size: .3em .1em;
  background-position:50% 100%;
  background-repeat: no-repeat;
  transition: .3s linear, background-size .3s .2s linear;
  margin-bottom: 6px;
}
.hover:hover {
  background-size: 40% .1em;
  background-position: 10% 100%, 90% 100%;
}

body {
  margin:0;
  height:100vh;
  display:grid;
  place-content:center;
}

23-08-2023, 12:09:26

#5

WebMasterMarket

mebularts adlı üyeden alıntı: mesajı görüntüle

https://codepen.io/Mehmet-Bulat-the-sans/pen/ExGjZOy

Bu şekilde işinizi görür umarım

HTML Kodları:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="hover">
<a href="https://webmastermarket.net/category/google-services/" target="_self"> <i class="fab fa-google"> Google</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/facebook-services/" target="_self"> <i class="fab fa-facebook"> Facebook</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/Twitter-services/" target="_self"> <i class="fab fa-twitter"> Twitter</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/Twitter-services/" target="_self"> <i class="fab fa-instagram"> Instagram</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/YouTube-services/" target="_self"> <i class="fab fa-youtube"> YouTube</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/YouTube-services/" target="_self"> <i class="fab fa-tiktok"> Tiktok</a></i></div>

CSS Kodları:

a {
  color: black;
  padding: 5px;
  bottom: 5px;
}

.hover {
  --c:linear-gradient(#000 0 0); /* update the color here */
  
  padding-bottom: .15em;
  background: var(--c), var(--c);
  background-size: .3em .1em;
  background-position:50% 100%;
  background-repeat: no-repeat;
  transition: .3s linear, background-size .3s .2s linear;
  margin-bottom: 6px;
}
.hover:hover {
  background-size: 40% .1em;
  background-position: 10% 100%, 90% 100%;
}

body {
  margin:0;
  height:100vh;
  display:grid;
  place-content:center;
}

Maşallah design bile yapılmış elinize sağlık