Murkrow
Hectopat
Daha fazla
- Cinsiyet
- Erkek
- Meslek
- .Net Developer
Merhaba arkadaşlar bir sayfam var. Tasarımı bitti. Ancak responsive olarak çalışmıyor. İstediğim tek şey 1 adet divin sayfa küçüldüğünde responsive görünüm alması. Frontend için çok acemiyim.
Tasarımına ciddi zaman harcadığım için çöpe gitmesini istemem. Dediğim gibi istediğim tek şey login kısmının responsive olması onun dışında footer arka plan rengi fotoğrafı hiç önemli değil.
Yardımcı olabilecek arkadaşlar varsa sevinirim. Teşekkürler.
[CODE lang="html" title="HTML"]<div id="main">
<div class="container">
<img src="~/assets/images/logo.svg" alt="My Happy SVG" id="fligran" class="center" />
<div class="row h-lg-full" id="mainRow">
<div class="col-md-6">
<div class="row h-200"></div>
<div class="inputGroupDiv">
<p class="loginTitle black description-font-size letter-spacing">@Localizer[SharedResource.Login].Value</p>
<div class="input-group input-group-padding">
<div id="inputLogoDiv">
<img id="inputLogo" src="~/assets/images/Icon-kullanici_adi.png" alt="Alternate Text" class="mt-2" />
</div>
<input type="text" asp-for="UserName" class="form-control shadow p-30 input-login-rounded" aria-label="Large" aria-describedby="inputGroup-sizing-sm" placeholder="@Localizer[SharedResource.Email].Value.ToLower()">
</div>
<div class="input-group input-group-padding">
<div id="inputLogoDiv">
<img id="inputLogo" src="~/assets/images/Icon-sifre.png" alt="Alternate Text" class="mt-2" />
</div>
<input type="password" asp-for="Password" class="form-control shadow p-4 p-30 input-login-rounded" aria-label="Large" aria-describedby="inputGroup-sizing-sm" placeholder="@Localizer[SharedResource.password].Value.ToLower()">
</div>
<div class="input-group input-group-lg input-group-padding">
<button class="btn btn-primary btn-lg btn-block shadow mb-5 btn-login-rounded" id="btnLogin">
<span class="pr-5">@Localizer[SharedResource.Login].Value</span>
<i class="fa fa-sign-in"></i>
</button>
</div>
<div class="input-group input-group-lg input-group-padding">
<a href="@Url.Action("forgotPassword", "Auth")" class="btn btn-primary btn-lg btn-block shadow mb-5 btn-login-rounded" id="btnForgotPassword">
@Localizer[SharedResource.ForgotPassword]
<i class="fa fa-warning"></i>
</a>
</div>
<div>
<div class="col-md-12 text-center mt-2">
<img src="~/assets/images/tr.png" class="languages" style="display: none;" alt="Alternate Text" id="trLanguage" />
<img src="~/assets/images/uk.png" class="languages" style="display: none;" alt="Alternate Text" id="ukLanguage" />
<span id="language">@await Html.PartialAsync("_SelectLanguagePartial")</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row h-350"></div>
<div>
<img src="~/assets/images/logo.svg" alt="My Happy SVG" class="center" />
</div>
<br />
@Html.Raw(Localizer[SharedResource.DownloadDesktopApp, "../../Desktop.zip"])
</div>
</div>
</div>
</div>[/CODE]
[CODE lang="css" title="CSS"] #main {
top: 0px;
left: 0px;
width: 1920px;
height: inherit;
background: var(--unnamed-color-3a3f51) 0% 0% no-repeat padding-box;
background: #3A3F51 0% 0% no-repeat padding-box;
opacity: 1;
}
#main .container {
height: fit-content;
}
#logo {
background: var(--unnamed-color-3a3f51) 0% 0% no-repeat padding-box;
background: #3A3F51 0% 0% no-repeat padding-box;
opacity: 1;
}
#footerDiv {
text-align: center;
color: lightgray;
background-color: #2E3344;
}
#footerCol {
color: red;
}
.dark-blue {
background: #34495e;
color: #fff;
box-shadow: 0 3px 0 #22303d;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/*İnput element group card*/
.inputGroupDiv {
width: 100%;
height: auto;
min-height: 500px;
top: 310px;
left: 784px;
width: 352px;
height: 510px;
background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 20px;
opacity: 1;
margin-left: 114px;
}
.inputGroupDiv .loginTitle {
font-family: 'Mulish', sans-serif;
color: white;
font-style: normal;
font-weight: 400;
font-size:2.2rem;
text-align: center;
padding-top: 22px;
letter-spacing: 12px;
}
.inputGroupDiv .input-group-padding {
padding: 12px;
}
.inputGroupDiv #inputLogoDiv {
background-color: #B4B6BD;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.inputGroupDiv div#top-lang {
text-align: center;
}
.inputGroupDiv #inputLogo {
padding: 7px;
}
.inputGroupDiv #btnLogin {
background: #3A3F51;
color: white;
box-sizing: border-box;
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
outline: none;
position: relative;
top: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
height: 60px;
}
.inputGroupDiv #btnForgotPassword {
color: white;
box-sizing: border-box;
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
padding: 20px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
outline: none;
position: relative;
top: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
height: 60px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.orange {
color: #F59746;
font-size:20px
}
#fligran {
position: absolute;
width: 1851px;
height: 283px;
left: 53px;
top: 363px;
mix-blend-mode: luminosity;
opacity: 0.2;
}
.btn-login-rounded {
border-radius: 15px !important;
}
.input-login-rounded {
border-top-right-radius: 15px !important;
border-bottom-right-radius: 15px !important;
}
.description-font-size{
font-family: 'Mulish', sans-serif;
font-size: 1.80rem;
}
a.orange {
font-size: 1.9rem;
font-family: 'Mulish';
}
.languages {
height: 3rem;
width: 3rem;
}
span#language > div#top-lang {
display:inline-block !important;
}[/CODE]
