diff --git a/style.css b/style.css
index 7b562ac..326288e 100644
--- a/style.css
+++ b/style.css
@@ -6,16 +6,8 @@ body {
overflow-x: hidden;
overflow-y: hidden;
}
- select{
- margin-left: 2%;
- width: max-content;
- height: 6%;
- font-size: large;
-}
-input{
- margin-left: 2%;
- width: 30%;
-}
+
+
li{
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
border-bottom: 1px solid darkmagenta;
@@ -28,33 +20,47 @@ span{
font-weight: 200;
}
-.menuTab
-{
+.container {
+ display: flex;
+ min-height: 100vh;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ background: url('images/bgfoto.jpg') center/cover fixed;
+ padding-top: 12vh;
+}
+
+.menuTab {
position: fixed;
width: 100%;
height: 12vh;
background-color: rgb(4, 1, 15);
+ justify-content: space-around;
+ align-items: center;
+
}
-.menuTabList{
+
+.menuTabList {
overflow: hidden;
width: 100%;
- height: 100%;
- position: relative;
+ position: fixed;
list-style: none;
display: flex;
- text-align: left;
+ margin: 0;
+ padding: 0;
+
}
-.menutab-item{
-
+.menutab-item {
color: plum;
margin: 2%;
- width: max-content;
- height: max-content;
font-size: 30px;
cursor: pointer;
+ flex: 1;
+ text-align: center;
+ white-space: nowrap;
}
.menutab-item:hover{
@@ -62,64 +68,62 @@ span{
}
-.container {
+.contentBox {
+ position: relative;
+ width: 90%;
+ height: 80%;
+ min-height: 65vh;
+ background: transparent;
+ border: 0.1vw solid rgba(255, 255, 255, 0.5);
+ border-radius: 30px;
+ backdrop-filter: blur(14px);
display: flex;
justify-content: center;
align-items: center;
- min-height: 100vh;
- width: 100%;
- background: url('images/bgfoto.jpg') center/cover fixed;
- padding-top: 12vh;
+ flex-direction: column;
+ margin: 0 auto;
+ max-width: 600px;
}
-
-.contentBox{
-position: relative;
-max-width: 65%;
-width: 90%;
-height: 60%;
-min-height: 65vh;
-background: transparent;
-border: 0.1vw solid rgba(255,255,255,0.5);
-border-radius: 30px;
-backdrop-filter: blur(7px);
-display: flex;
-justify-content: center;
-align-items: center;
-flex-direction: column;
-}
-
-.formBox{
-
-width: 100%;
-height: 100%;
-display: flex;
-justify-content: center;
-align-items: center;
-flex-direction: column;
-
+.formBox {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
}
-.inputBox{
-
+.inputBox {
overflow: hidden;
position: relative;
- margin-left: 30%;
- margin-top: 2.5%;
- width: 70%;
+ margin: 2.5% auto;
+ text-align: center;
+ white-space: nowrap;
+ width: 90%;
+ max-width: 300px;
color: plum;
+
}
+#fname, #lname {
+
+ flex: 1;
+ margin-right: 2%;
+ width: 30%;
+
+}
#radioOpt{
-
+ justify-content: center;
display: flex;
}
.radiobtn{
width: min-content;
}
#registerButton {
- width: fit-content;
+
+ width: 70%;
padding: 10px 10px;
background-color: plum;
color: white;
@@ -134,52 +138,33 @@ flex-direction: column;
}
+@media screen and (max-width: 768px) {
+ .menuTab {
+ height: 8vh;
+ }
-@media (max-width: 800px) {
+ .menutab-item {
+ font-size: 20px;
+ }
-span{
- width: min-content;
-}
-.menuTab{
- width: 100%;
- margin: 0;
}
-.contentBox{
- width: 70%;
- justify-content: center;
- align-items: center;
-}
-.menuTabList{
- justify-content: center;
- align-items: center;
- width: 100%;
- padding: 0;
- margin: 0;
-}
-.menutab-item{
- width: 80%;
- margin: 0%;
- padding: 0%;
- font-size: 90%;
-}
+@media screen and (max-width: 768px) {
-.formBox {
- width: 120%;
- margin: 0;
- justify-content: center;
- align-items: center;
-}
-.inputBox {
-
- margin-left: 0;
- padding: 0%;
- width: 75%;
- max-width: 70%;
- font-size: 70%;
-}
+ .contentBox {
+ margin-bottom: 100px;
+ flex-direction: row;
+ height: 90%;
+ max-width: unset;
+ }
+ .inputBox {
+ width: 80%;
+ max-width: 90%;
+ margin-bottom: 10px;
+ margin: 2.5% auto; /* Mobil cihazlarda yeniden ayarla */
+ }
}