Merhaba, yine ben biliyorum ama yardımınız gerekiyor.Laravel projesi geliştiriyorum.Belki konunun laravel ile alakası olmayabilir ama bu forumdaki kişilerin bilgilerine güvendiğim için buradan yardım alıyorum.Lütfen konuyu silmeyin.
Aşağıda tüm açıklamayı yapıcam
Bilgisayardan tüm ayarlamaları yaptım görünüm olarak bir sorunum yok ancak;
-Mobilde görünüm kayıyor,
-Font boğuk bir şekilde bulanık gözüküyor,
Bilgisayarda Görünümü;
Mobil Görünümü;
login.blade.php
@extends('layouts.guest')
@section('content')
<body classs="login">
<section class="login">
<div class="box">
<div class="square" style="--i:0;"></div>
<div class="square" style="--i:1;"></div>
<div class="square" style="--i:2;"></div>
<div class="square" style="--i:3;"></div>
<div class="square" style="--i:4;"></div>
<div class="square" style="--i:5;"></div>
<div class="container-login">
<div class="form-login">
<h2 class="login">{{ $site_name }}</h2>
<form method="POST" action="{{ route('login') }}" class="form-login">
{{ csrf_field() }}
<div class="inputBx">
<input id="email" type="email" class="login @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
<span class="login">{{ __('Kullanıcı Adı') }}</span>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
<i class="fas fa-user-circle"></i>
</div>
<div class="inputBx password">
<input id="password" type="password" class="login @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
<a href="#" class="password-control login" onclick="return show_hide_password(this);"> </a>
<i class="fas fa-key"></i>
<span class="login">Şifre</span>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<label class="remember">
<input type="checkbox" class="login form-check-input" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>{{ __('Beni Hatırla') }}
</label>
{!! NoCaptcha::display() !!}
@error('g-recaptcha-response')
<span class="" role="alert">
<strong style="color: red;">Lütfen Robot Olmadığınızı Kanıtlayın.</strong>
</span>
@enderror
<div class="inputBx">
<!-- <button type="submit" name="submit" value="Log in">{{ __('Giriş Yap') }}</button>-->
<input type="submit" value="{{ __('Giriş Yap') }}" class="login">
</div>
</form>
@if (Route::has('password.request'))
<p class="login">Şifreni mi Unuttun?
<a class="login" href="{{ route('password.request') }}">
Sıfırlamak için tıkla!
</a>
</p>
@endif
<p class="login">Henüz bir hesabınız yok mu? <a class="login" href="{{ url('register') }}">Kayıt Ol</a></p>
</div>
</div>
</div>
</section>
<body>
@endsection
login.scss
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@700&display=swap');
body.login {
background: #031323;
overflow: hidden;
margin: 0;
padding: 0;
font-family: 'El Messiri', sans-serif;
}
.fas {
width: 32px;
}
section.login {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.box {
position: relative;
.square {
position: absolute;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 15px;
animation: square 10s linear infinite;
animation-delay: calc(-1s * var(--i));
}
@keyframes square {
0%,100% {
transform: translateY(-20px);
}
50% {
transform: translateY(20px);
}
}
.square:nth-child(1) {
width: 100px;
height: 100px;
top: -15px;
right: -45px;
}
.square:nth-child(2) {
width: 150px;
height: 150px;
top: 105px;
left: -125px;
z-index: 2;
}
.square:nth-child(3) {
width: 60px;
height: 60px;
bottom: 85px;
right: -45px;
z-index: 2;
}
.square:nth-child(4) {
width: 50px;
height: 50px;
bottom: 35px;
left: -95px;
}
.square:nth-child(5) {
width: 50px;
height: 50px;
top: -15px;
left: -25px;
}
.square:nth-child(6) {
width: 85px;
height: 85px;
top: 165px;
right: -155px;
z-index: 2;
}
}
.container-login {
position: relative;
padding: 50px;
width: 370px;
min-height: 380px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border-radius: 10px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
}
.container-login::after {
content: '';
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border-radius: 5px;
pointer-events: none;
background: linear-gradient( to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 2%
);
}
.form-login {
position: relative;
width: 100%;
height: 100%;
h2.login {
color: #fff;
letter-spacing: 2px;
margin-bottom: 30px;
}
.inputBx {
position: relative;
width: 100%;
margin-bottom: 20px;
input.login {
width: 100%;
outline: none;
border: none;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.2);
padding: 8px 10px;
padding-left: 40px;
border-radius: 15px;
color: #fff;
font-size: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.password-control {
position: absolute;
top: 11px;
right: 10px;
display: inline-block;
width: 20px;
height: 20px;
background: url(https://snipp.ru/demo/495/view.svg) 0 0 no-repeat;
transition: 0.5s;
}
.view {
background: url(https://snipp.ru/demo/495/no-view.svg) 0 0 no-repeat;
transition: 0.5s;
}
.fas {
position: absolute;
top: 13px;
left: 13px;
}
.fas-key {
position: absolute;
top: 37px;
left: 13px;
}
input.login[type="submit"] {
background: #fff;
color: #111;
max-width: 100px;
padding: 8px 10px;
box-shadow: none;
letter-spacing: 1px;
cursor: pointer;
transition: 1.5s;
}
input.login[type="submit"]:hover {
background: linear-gradient(115deg,
rgba(0,0,0,0.10),
rgba(255,255,255,0.25));
color: #fff;
transition: .5s;
}
input.login::placeholder {
color: #fff;
}
span.login {
position: absolute;
left: 30px;
padding: 10px;
display: inline-block;
color: #fff;
transition: .5s;
pointer-events: none;
}
input.login:focus ~ span.login,
input.login:valid ~ span.login {
transform: translateX(-30px) translateY(-25px);
font-size: 12px;
}
}
p.login {
color: #fff;
font-size: 15px;
margin-top: 5px;
a.login {
color: #fff;
}
a.login:hover {
background-color: #000;
background-image: linear-gradient(to right, #434343 0%, black 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.remember {
position: relative;
display: inline-block;
color: #fff;
margin-bottom: 10px;
cursor: pointer;
}