Commit

eylulozatman · Nov 24, 2023 · 1c83d38 · 1c83d38
1 parent 66ab74e
commit 1c83d38
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 98 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,8 @@
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
-
+
+
     <div class="menuTab">
         <ul class="menuTabList">
             <li class="menutab-item" data-title="Home">Home</li>
@@ -17,6 +18,7 @@
             <li class="menutab-item" data-title="Contact">Contact</li>
         </ul>
     </div>
+
     <div class="container"> 
        <div class="contentBox">
             <div class="formBox">

diff --git 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,98 +20,110 @@ 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{
   color: rgb(92, 42, 88);
 }
 
 
-.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 */
+  }
 }