Figma programını indirip .sketch dosyalarını onunla açarsan ya da üstüne sürükleyip bırakırsan windows'ta sorunsuz açabilirsin.

bunun için önce veri lazım, veriler için bir veritabanı lazım, veritabanındakileri listeleyebilmek için bir yazılım dili lazım, kısaca php ve mysql öğrenerek başlayabilirsin nasıl olacağını anlamaya.

Yani bu çok genel bir soru, tasarımın nasılsa ona göre yaparsın. En basit haliyle istersen;

<form action="" method="get" class="search">
    <input type="text" placeholder="Arama yap">
    <button type="submit">Ara</button>
</form>

<style>
    form.search {
        display: flex;
    }
    form.search input {
        height: 40px;
        border: 1px solid #ddd;
        border-radius: 4px 0 0 4px;
        font-size: 16px;
        font-weight: 500;
        box-sizing: border-box;
		padding: 0 15px;
		flex: 1;
		outline: 0;
    }
    form.search button {
        height: 40px;
        padding: 0 30px;
        background: #393a3b;
        color: #fff;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        border: none;
    }
</style>

tabi html/css ile sadece görüntüsünü yaparsın, işlevsellik için bir yazılım dili şart.

var resimler=[]kodunu app.get içine alırsan her istekte array'in sıfırlanır

app.get('/kanallar', (req, res) => {
	var resimler = []
	axios.get("blabla.com/tum-kanallar/").then(kanal => {
		const $ = cheerio.load(kanal.data);
		var kanalResim = $("#DT_Content_Area_AllChannels_Items img").each(function () {
			resimler.push($(this).attr("src"))
		})
		res.json({"kanallar": resimler})
	})
})

öncelikle aramıza hoşgeldin :)
Evet bu işlem .htaccess ile yapılıyor, ancak bilmen gereken bir şey var. Eğer url'in şöyle ise
siteadi.com/kampanya-detay.php?kampanya_id=35
bunu en fazla şöyle bir görünüme sokabilirsin
siteadi.com/kampanya/35
bunu nasıl yaparsın? şöyle;

RewriteEngine On
RewriteRule ^kampanya/([0-9]+)(/?)$ kampanya-detay.php?kampanya_id=$1 [QSA]

Peki bu url'i kampanya başlığı ile göstermek istersek ne yapacağız? Örneğin
siteadi.com/kampanya/kampanya-basligi-bu-olsun
yapacağımız ilk şey, bunu get parametresi olarak göndermek. Yani senin aslında linkin şöyle olmalı
siteadi.com/kampanya-detay.php?kampanya_url=kampanya-basligi-bu-olsun
artık bunu .htaccess ile şöyle yazabiliriz;

RewriteEngine On
RewriteRule ^kampanya/([0-9a-zA-Z-_]+)(/?)$ kampanya-detay.php?kampanya_url=$1& [QSA]

Artık kampanya-detay.php de kontrolünü şöyle yapman gerek;

$url = $_GET['kampanya_url'];
// veritabanından ilgili kampanyayı urle göre çekip göstermek

ve giriş yaparkende
siteadi.com/kampanya/kampanya-basligi-bu-olsun ile giriş yapabilirsin.

giriş ve kayıt için modal olarak bootstrap modallarını kullanabilirsin.
https://getbootstrap.com/docs/4.0/components/modal/

kayıt işlemi bildiğin veritabanına veri yazdırmak, giriş yaptırmak içinde yine $_SESSION superglobal değişkenini kullanıyoruz. Bunlar temel PHP işlevleri, bence bu konuları bilmiyorsan önce temelini araştırman faydalı olur. Form kullanımı ve oturum yönetimi derslerine bakabilirsin.
en basit giriş yapmışsa şunu göster yapmamışsa şunu göster muhabbeti ise şöyledir;

<?php if (isset($_SESSION['login']): ?>
    hoşgeldin, <?=$_SESSION['name']?>
<?php else: ?>
    Lütfen <a href="./login.php">giriş</a> yapın.
<?php endif; ?>

evet yapacağız, önce sitedeki laravel bölümüne makaleleri yazacağım sonra ilgili dersleri hazırlamaya çalışacağım <3

Eğer filter özelliğini kullanırsan div içerisindeki yazılara ve diğer etiketlerede etki eder kullandığınız blur. Bu yüzden siz backdrop-filter özelliğini kullanarak bu işlemi yapacaksınız.

Çalışan bir örnek;

<div class="box">
	<div>ÖRNEK YAZI</div>
</div>
<style>
    .box {
    	width: 200px;
    	height: 200px;
    	background: url(https://picsum.photos/200/200) no-repeat center;
    }
    .box div {
    	width: inherit;
    	height: inherit;
    	display: grid;
    	place-items: center;
    	-webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }
</style>

Ya da bir başka örneği, ::before ya da ::after ile content ekleyerek filter kullanılarak yapılabilir. Buna örnek vermek gerekirse;

<div class="box">
	ÖRNEK YAZI
</div>
<style>
    .box {
	width: 200px;
	height: 200px;
	position: relative;
	z-index: 1;
}
.box::before {
	content: '';
	background: url(https://picsum.photos/200/200) no-repeat center;
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	z-index: -1;
	filter: blur(5px);
}
</style>