Add files via upload

iamdevmonster · Apr 16, 2023 · 57170ca · 57170ca
1 parent 0c43659
commit 57170ca
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 33 deletions.
diff --git a/fit.jpg b/fit.jpg
diff --git a/images.png b/images.png
diff --git a/index.html b/index.html
@@ -4,43 +4,126 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>css box modeling</title>
+    <title>fitness website</title>
+</head>
+<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
     <style>
-       .container{
-        background-color: blueviolet;
-        border:5px solid rgb(60, 255, 0);
-       /* padding-left: 9px;
-        padding-bottom: 9px;
-        padding-top: 9px;
-       padding-right: 9px;*/
-       /*padding=to right bottom left*/
-      /* padding: 9px 9px 9px;*/
-       /*padding or margin:y(top/bottom) x(left/right)*/
-       padding: 9px 9px;
-      /* margin-left: 9px;
-       margin-bottom: 10px;
-       margin-top: 10px;
-       margin-right: 10px;*/
-       margin:10px 10px 10px 9px;
-       border-radius: 23px;
-       width:233px;
-       margin: 20px auto;
-       box-sizing: border-box;
-       }
+      body{
+        margin:0px;
+        padding:0px;
+        background-image: url(p2.jpg);
+         height: 2000px;
+         background-size: 1500px 1500px;
+         background-repeat: no-repeat;
+         color:white;
+         font-family: 'Oswald', sans-serif;
+
+      }
+      .left{
+             display:inline-block;
+            border:3px solid rgb(44, 42, 42);
+            position:absolute;
+              left:30px;
+            top:5px;
+      }
+      .left img{
+        width: 100px;
+      }
+      .right{
+        display:inline-block;
+        border:3px solid rgb(44, 56, 160);
+        position:absolute;
+        right:45px;
+        top:5px;
+
+      }
+      .mid{
+
+        display:block;
+        width: 33%;
+        margin: 12px auto;
+        border:3px solid rgb(81, 82, 72);
+        border-radius: 10px;
+        background-color: black; 
+      }
+     .nav{
+              display:inline-block;  
+
+     }
+      .nav li{
+                display:inline-block;
+                font-size: 15px;
+      }
+     .nav li a{
+        color: aliceblue;
+        text-decoration: none;
+        padding:10px;
+     }
+     .nav li a:hover, .nav li a.active{
+        text-decoration: underline;
+        color:grey;
+     }
+     .btn{
+        margin:0px 7px;
+        background-color: black;
+        color:azure;
+        padding:3px 4px;
+        border:2px solid grey;
+        border-radius: 23px;
+        font-size: 16px;
+        cursor:pointer;
+        font-family: 'Oswald', sans-serif;
+
+     }
+     .btn:hover{
+        background-color: grey;
+     }
+     .container{
+        border:2px solid rgb(241, 223, 223);
+        margin:108px 82px;
+        padding:83px 76px;
+        width:33%;
+        border-radius: 45px;
+     }
     </style>
-</head>
+
+
+
 <body>
+    <header class="header">
+        <div class="left">
+         <img src="images.png" alt="">
+         <div class="fitness">
+
+         </div>
+        </div>
+        <div class="mid">
+
+            <ul class="nav">
+                <li><a href="" >Home</a></li>
+                <li><a href="" >About us</a></li>
+                <li><a href="" >Fitness streak</a></li>
+                <li><a href="" >Fitness excercises</a></li>
+            </ul>
+
+        </div>
+        <div class="right">
+        <button class="btn">Call us now</button>
+        <button class="btn">email us</button>
+        </div>
+    </header> 
     <div class="container">
-        <h3>This is first heading</h3>
-        <p id="first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta exercitationem sapiente nemo magnam explicabo optio earum inventore eum dolor quod numquam, architecto, tenetur quis eos sit iusto aut expedita laudantium.</p>
-    </div>
-    <div class="container">
-        <h3>This is second heading</h3>
-        <p id="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta exercitationem sapiente nemo magnam explicabo optio earum inventore eum dolor quod numquam, architecto, tenetur quis eos sit iusto aut expedita laudantium.</p>
-    </div>
-    <div class="container">
-        <h3>This is third heading</h3>
-        <p id="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta exercitationem sapiente nemo magnam explicabo optio earum inventore eum dolor quod numquam, architecto, tenetur quis eos sit iusto aut expedita laudantium.</p>
+        <h1>TO JOIN BEST GYM</h1>
+        <form action="no action.php">
+            <div class="formgroup">
+                <input type="text" name="" placeholder="enter yur name">
+                <input type="email" name="" placeholder="enter yur email">
+                <input type="text" name="" placeholder="enter yur name">
+                <input type="text" name="" placeholder="enter yur name">
+                <input type="text" name="" placeholder="enter yur name">
+            </div>
+        </form>
+
     </div>
 </body>
 </html>
diff --git a/mark.jpg b/mark.jpg
diff --git a/p2.jpg b/p2.jpg
diff --git a/style.css b/style.css