Spaces:
Running
Running
Commit
•
ecaf665
1
Parent(s):
adcff61
Update index.html
Browse files- index.html +78 -1
index.html
CHANGED
|
@@ -76,6 +76,54 @@
|
|
| 76 |
margin: 0 auto;
|
| 77 |
}
|
| 78 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 79 |
</style>
|
| 80 |
</head>
|
| 81 |
<body>
|
|
@@ -96,7 +144,7 @@
|
|
| 96 |
<div class="collapse navbar-collapse ml-auto" id="navbarNavAltMarkup">
|
| 97 |
<div class="navbar-nav ml-auto">
|
| 98 |
<a class="nav-link active text-white" href="#">Home <span class="sr-only">(current)</span></a>
|
| 99 |
-
<a class="nav-link text-white" href="#">LogIn</a>
|
| 100 |
<a class="nav-link text-white" href="#">SignUp</a>
|
| 101 |
<a class="nav-link text-white" href="#">PlayList</a>
|
| 102 |
<a class="nav-link text-white" href="#">About</a>
|
|
@@ -106,6 +154,35 @@
|
|
| 106 |
</div>
|
| 107 |
</nav>
|
| 108 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 109 |
<div>
|
| 110 |
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
| 111 |
<ol class="carousel-indicators">
|
|
|
|
| 76 |
margin: 0 auto;
|
| 77 |
}
|
| 78 |
}
|
| 79 |
+
.container1 {
|
| 80 |
+
height: 340px;
|
| 81 |
+
width: 300px;
|
| 82 |
+
margin: 0 auto;
|
| 83 |
+
font-family: Arial, sans-serif;
|
| 84 |
+
padding: 20px;
|
| 85 |
+
background-image: url('https://dm0qx8t0i9gc9.cloudfront.net/watermarks/image/rDtN98Qoishumwih/colorful-musical-notes-wave-background_zkTcaoOd_SB_PM.jpg');
|
| 86 |
+
background-size: cover;
|
| 87 |
+
border: 1px solid #cccccc;
|
| 88 |
+
border-radius: 5px;
|
| 89 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
| 90 |
+
}
|
| 91 |
+
|
| 92 |
+
h2 {
|
| 93 |
+
text-align: center;
|
| 94 |
+
font-size: 35px;
|
| 95 |
+
}
|
| 96 |
+
|
| 97 |
+
input[type="text"],
|
| 98 |
+
input[type="password"] {
|
| 99 |
+
width: 100%;
|
| 100 |
+
padding: 10px;
|
| 101 |
+
margin-bottom: 15px;
|
| 102 |
+
border: 1px solid #cccccc;
|
| 103 |
+
border-radius: 3px;
|
| 104 |
+
box-sizing: border-box;
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
input[type="submit"] {
|
| 108 |
+
width: 100%;
|
| 109 |
+
padding: 10px;
|
| 110 |
+
background-color: #4CAF50;
|
| 111 |
+
color: white;
|
| 112 |
+
border: none;
|
| 113 |
+
border-radius: 3px;
|
| 114 |
+
cursor: pointer;
|
| 115 |
+
}
|
| 116 |
+
|
| 117 |
+
input[type="submit"]:hover {
|
| 118 |
+
background-color: #45a049;
|
| 119 |
+
}
|
| 120 |
+
.card1{
|
| 121 |
+
margin-top: 90px;
|
| 122 |
+
}
|
| 123 |
+
.message {
|
| 124 |
+
text-align: center;
|
| 125 |
+
color: red;
|
| 126 |
+
}
|
| 127 |
</style>
|
| 128 |
</head>
|
| 129 |
<body>
|
|
|
|
| 144 |
<div class="collapse navbar-collapse ml-auto" id="navbarNavAltMarkup">
|
| 145 |
<div class="navbar-nav ml-auto">
|
| 146 |
<a class="nav-link active text-white" href="#">Home <span class="sr-only">(current)</span></a>
|
| 147 |
+
<a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal" href="#">LogIn</a>
|
| 148 |
<a class="nav-link text-white" href="#">SignUp</a>
|
| 149 |
<a class="nav-link text-white" href="#">PlayList</a>
|
| 150 |
<a class="nav-link text-white" href="#">About</a>
|
|
|
|
| 154 |
</div>
|
| 155 |
</nav>
|
| 156 |
</div>
|
| 157 |
+
|
| 158 |
+
<!-- Modal -->
|
| 159 |
+
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
| 160 |
+
<div class="modal-dialog">
|
| 161 |
+
<div class="modal-content">
|
| 162 |
+
<div class="modal-header">
|
| 163 |
+
<h5 class="modal-title" id="exampleModalLabel">Login Here</h5>
|
| 164 |
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
| 165 |
+
<span aria-hidden="true">×</span>
|
| 166 |
+
</button>
|
| 167 |
+
</div>
|
| 168 |
+
<div class="modal-body">
|
| 169 |
+
<div class="container1">
|
| 170 |
+
<h2>Login</h2>
|
| 171 |
+
<form action="" method="POST" onsubmit="return validateLogin();" name="loginForm">
|
| 172 |
+
<div class="card1">
|
| 173 |
+
<input type="text" name="username" placeholder="Username" required>
|
| 174 |
+
<input type="password" name="password" placeholder="Password" required>
|
| 175 |
+
<input type="submit" value="Login">
|
| 176 |
+
</div>
|
| 177 |
+
</form>
|
| 178 |
+
</div>
|
| 179 |
+
</div>
|
| 180 |
+
<div class="modal-footer">
|
| 181 |
+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
</div>
|
| 186 |
<div>
|
| 187 |
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
| 188 |
<ol class="carousel-indicators">
|