discord-widget

discord-widget.markdown

discord-widget

TwoPage'nin Craoxy Project isimli projeye yapmış olduğu bir proje.

A Pen by Kerem on CodePen.

License.

index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<br>
<div class="container">
	<div class="row backgrounds">
		<div class="col-md-6" style="position: relative;">
			<img class="logo lga-1" src="https://media.discordapp.net/attachments/896403503482830858/905153493743071272/c7bc25ab8d1c30fe5bc99b534443c116.png">
			<img class="logo lga-2" src="https://media.discordapp.net/attachments/896403503482830858/905153493743071272/c7bc25ab8d1c30fe5bc99b534443c116.png">
		</div>
		<div class="col-md-6">
			<p class="name">Craoxy | Project</p>
			<p class="desc">Yardımlaşma ve çeşitli kodlar paylaşma platformu.</p>
</div>
<div class="row">
		<div class="col-md-4">
			<div  class="button"><i style="text-shadow: 1px 1px 10px #38f100; color: #38f100;" class="fas fa-users"></i> 177</div>
		</div>
		<div class="col-md-4">
			<div  class="button"><i style="text-shadow: 1px 1px 10px #38f100; color: #38f100;" class="fas fa-hashtag"></i> 177</div>
		</div>
		<div class="col-md-4">
			<div  class="button"><i style="text-shadow: 1px 1px 10px #38f100; color: #38f100;" class="fas fa-circle fa-xs"></i> 177</div>
		</div>
		<div class="col-md-12">
			<div class="joinbtn"><i class="fas fa-sign-in-alt"></i> Sunucuya Katıl</div>
		</div>
	</div>
</div>
<br>
<br>

style.css

.backgrounds {
background-color: #363636;
height: 300px;
width: 35%;
border-radius: 40px;
}

.logo {
border-radius: 20px;
margin-top: 50px;
margin-left: 20px;
}

.lga-1 {
    filter: blur(20px); 
    position: absolute;
    z-index:1 
}

.lga-2 {
    position: absolute;
    z-index:2 
}

.name {
font-family: 'Quicksand' blod;;
font-weight: 900;
color: #ffffff;
font-size: 23px;
margin-left: -45px;
margin-top: 50px;
text-shadow: 1px 1px 20px #fff;
}

.desc {
font-family: 'Quicksand' blod;;
font-weight: 650;
color: #727272;
font-size: 15px;
margin-top: -10px;
margin-left: -80px;
text-align: center;
}

.button {
background-color: #1f1f1f;
box-shadow: 1px 1px 30px #000000;
height: 35px;
width: 85px;
border-radius: 10px;
margin-left: 17px;
margin-top: -40px;
font-family: 'Quicksand' blod;;
font-weight: 650;
color: #727272;
line-height: 30px;
text-align: center;
}

.joinbtn {
background-color: #4752C4;
box-shadow: 1px 1px 30px #0c0c0c;
border-radius: 5px;
height: 35px;
line-height: 30px;
width: 300px;
margin-top: -20px;
position: relative;
margin: auto;
text-align: center;
font-family: 'Quicksand' blod;;
font-weight: 900;
color: #fff;
}