• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Login page Using Bootstrap and JavaScript

New Here ,
Jan 29, 2018 Jan 29, 2018

Copy link to clipboard

Copied

Greetings. I am creating a Business Department website for my school and I have created a login page. I am having trouble with several things. Firstly, how could I center the image in the form of a circle at the top of the login area? Secondly, how could I put the login area at the center of the page? Thirdly, how could I make this apply to the mobile version of the website? Fourthly, how could i insert JavaScript to this so that the login would work? P.S. I am very new to HTML, CSS, Bootstrap, and JavaScript (I have been only learning for a couple of months). It would be greatly appreciated if you could explain your code simplistically.

login.png

login2.png

Here is my code (forgive me if there is irrelevant code in this):

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Business Department</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>

  .navbar {

  margin-bottom: 0;

  border-radius: 0;

  /* background-color; he put it purple make it stay gray or change to dark gray */

  color: #474747; /* text color */

  padding: 1% 0;

  font-size: 1.2em;  /* This increases text font */

  border: 0; /* the black thing */

  }

  .navbar-brand {

  float: left;

  min-height: 55px;

  padding: 0 15px 5px;

  }

  .navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {

color: #FFF;

background-color: #222222; /* for the black thing in home */ /* #232323 try to change later on if it does not match with anything else */

}

.navbar-inverse .navbar-nav li a {

  color: #D5D5D5; /* text color?? */

  }

  .carousel-caption { /* this moves the text in the sliders up */

  top: 50%;

  transform: translateY(-50%);

  text-transform: uppercase;

  }

  .btn { /* get started button */

  font-size: 18px;

  color: #FFF;

  padding: 12px 22px;

  background: #000000;

  border: 2px solid #FFF;

  }

  .container {

   margin-top: 30px;

   margin-bottom: 26px;

  }

  #icon {

  max-width: 200px; /* to change the size of 3 images */

  margin: 1% auto;

  margin-top: 30px;

  margin-bottom: 26px;

  }

 

  footer { /* to design footer (no text) */

  width: 100%;

  background-color: #222222;

  padding: 5%;

  color: #FFF; /* text color */

  }

 

  .fa {

padding: 15px; /* social media pics size */

font-size: 25px;

color: #FFF;

  }

  .fa:hover {

  color: #D5D5D5;

  text-decoration: none;

  }

 

  @media (max-width: 900px) {

.fa {

font-size: 20px;

padding: 10px;

}

  }

 

  @media (max-width: 600px) {  /* this is to not show the getting started buttons and header on mobile */

  .carousel-caption {

display: none;

}

#icon {

max-width: 150px;

}

h2 { /* h4 size in mobile */

font-size: 1.7em;

}

  }

 

  .container1 {    margin: 4% auto;

}

<!-- login page -->

body{

margin: 0;

padding: 0;

background: url(img/Tower2.jpg);

background-size: cover;

background-position:center;

font-family: sans-serif;

}

.login-box{

width: 320px;

height: 420px;

background: rgba(0, 0, 0, 0.5);

color: #fff;

top: 50%;

left:50%;

position:absolute;

transform: translate(-50%, -50%);

box-sizing: border-box;

padding: 70px 30px;

}

.avatar{

width: 100px;

height: 100px;

border-radius: 50%;

position: absolute;

top: -50px;

left: calc(50% - 50 px);

}

h1{

margin: 0;

padding: 0 0 20px;

text-align: center;

font-size: 22px;

}

.login-box p{

margin: 0;

padding: 0;

font-weight: bold;

}

.login-box input{

width: 100%;

margin-bottom: 20px;

}

.login-box input[type="text"], input[type="password"]

{

border: none;

border-bottom: 1 px solid #fff;

background: transparent;

outline: none;

height: 40px;

color: #fff;

font-size: 16px;

}

.login-box input[type="submit"]

{

border: none;

outline: none;

height: 40px;

background: #1c8adb;

color: #fff;

font-size: 18px;

border-radius: 20px;

}

.login-box input[type="submit"]:hover

{

cursor: pointer;

background: #39dc79;

color: #000;

}

.login-box a{

text-decoration: none;

font-size: 14px;

color: #fff;

}

.login-box a:hover

{

color: #39dc79;

}

  </style>

</head>

<body>

<nav class="navbar navbar-inverse">

    <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <!-- for mobile burgr nav -->

                <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

<!--change to business logo -->  <a class="navbar-brand" href="indexReference.html"><img src="img/w3newbie.png"></a>

            </div>

            <div class="collapse navbar-collapse" id="myNavbar">

            <ul class="nav navbar-nav navbar-right">

<!--#for a ink -->    <li class="active"><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

                    <li><a href="courses.html">Courses</a></li>

                    <li><a href="deca.html">DECA</a></li>

                    <li><a href="schoolstore.html">School Store</a></li>

                    <li><a href="resources.html">Resources</a></li>

                    <li><a href="contacts.html">Contacts</a></li>

                </ul>

         </div>

     </nav>

 

<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- For sliders -->

<ol class="carousel-indicators"> <!-- circles in sliders -->

<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <!-- first slide to activate -->

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

</ol>

    <div class="carousel-inner" role="listbox">

    <div class="item active">

    <img src="img/Tower.png" style="width:1826px;height:570px;"> <!-- image for first slider-->

    <div class="carousel-caption">

    <h1>impact the future</h1> <!-- header text for first slider-->

    <br> <!-- line break -->

    <button type="button" class="btn btn-default">Learn More</button> <!-- button text -->

</div>

</div> <!-- End Active -->

    <div class="item">

    <img src="img/deca12.jpg" style="width:1826px;height:570px;"> <!-- Next (2nd) image in slider -->

                <div class="carousel-caption">

    <h1>Aspiring to becoming a successful entrepreneur?</h1> <!-- header text for first slider-->

    <br> <!-- line break -->

    <button type="button" class="btn btn-default">Find Out How</button> <!-- button text -->

</div>

    </div>

            <div class="item">

    <img src="img/resources.jpeg" style="width:1826px;height:570px;"> <!-- 3rd image in slider -->

                <div class="carousel-caption">

    <h1>having trouble with your business assignment?</h1> <!-- header text for first slider-->

    <br> <!-- line break -->

    <button type="button" class="btn btn-default">Get Help</button> <!-- button text -->

</div>

    </div>

    </div>

        <!-- Start Slider Controls -->

        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <!--button to move slides-->

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><!-- image for sliders (the arrows) -->

        <span class="sr-only">Previous</span>

        </a> <!-- this is for left side -->

        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <!--button to move slides-->

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><!-- image for sliders (the arrows) -->

        <span class="sr-only">Next</span>

        </a> <!-- this is for right side-->

     </div> <!-- End of slider -->

    

    

<!-- test login -->

<div class="login-box">

<img src="img/Tower2.jpg" class="avatar">

<h1>Impact the Future</h1>

    <form>

        <p>Username</p>

        <input type="text" name="username" placeholder="Enter Username">

        <p>Password</p>

        <input type="password" name="password" placeholder="Enter Password">

        <input type="submit" name="submit" value="Login">

        <a href="#">Forget Password</a>

        </form>

</div>

     <!-- footer -->

     <footer class="container-fluid text-center">

      <div class="row">

        <div class="col-sm-4">

            <h3>Contact Us</h3>

                <br> <!-- line break -->

                <h4>Our Address and contact info here.</h4>

            </div>

            <!-- For social media pics -->

            <div class="col-sm-4">

            <h3>Connect</h3>

                <a href="#" class="fa fa-facebook"></a>

                <a href="#" class="fa fa-twitter"></a>

                <a href="#" class="fa fa-google"></a>

                <a href="#" class="fa fa-instagram"></a>

                <a href="#" class="fa fa-youtube"></a>

                <h3>©2018 CSS Studios</h3>

            </div>

            <div class="col-sm-4">

            <img src="img/bunny.png" class="icon">

            </div>

        </div>

     </footer>

    

</body>

</html>

Views

8.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 31, 2018 Jan 31, 2018

Do not place a login form over a Carousel slider.  It will create problems.  Use a background image on the BODY.

REVISED HTML & CSS CODE:

<!doctype html>

<html lang="en">

<head>

<title>Business Department</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

...

Votes

Translate

Translate
LEGEND ,
Jan 29, 2018 Jan 29, 2018

Copy link to clipboard

Copied

I will leave your bootstrap specific questions for someone who uses bootstrap to answer.

Your question about creating the javascript log-in though is a little more complicated, because if you wish javascript code to be used for a secure section of your site, then you will have to have a javascript based server-side set-up.

Most users who use Dreamweaver use a php/mysql server side and database set-up, (check with your server admin or provider for what you have available). If you have angular.js or node.js on your server then you can use javascript for a secure section of your site, but Dreamweaver would not be the best program to use for this, (you could still use bootstrap for your framework) as it has very little support for javascript on the server and is missing all the essential de-bug tools you would require.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 29, 2018 Jan 29, 2018

Copy link to clipboard

Copied

Making a basic log-in form is the easy part.  

Creating a secure backend system is much more advanced.   Ask your IT dept or web hosting provider which server-side scripts and databases you can use.

Basic form on mobile.

Desktop:

Bootstrap Code:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Log-in Form</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body {

background: url(https://placeimg.com/1200/500/tech) no-repeat center center fixed;

background-size: cover;

}

.center-block { float: none; }

form {

margin-top: 25%;

padding: 2%;

background: rgba(0,0,0,0.7);

color: #FFF;

}

</style>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-sm-6 center-block">

<form>

<h3><img class="img-circle" src="https://placeimg.com/75/75/tech" alt="logo"> Log-In</h3>

<div class="form-group">

<label for="Email">Email address</label>

<input type="email" class="form-control" id="Email" placeholder="your@domain.com">

</div>

<div class="form-group">

<label for="Password">Password:</label>

<input type="password" class="form-control" id="Password" placeholder="8 characters">

</div>

<button type="submit" class="center-block btn btn-lg btn-primary">Log-in</button>

</form>

</div>

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 29, 2018 Jan 29, 2018

Copy link to clipboard

Copied

Im going to gate-crash your code a bit Nancy because I feel like gate-crashing tonight!!! and position that image circle and the login panel in the center of the window.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Log-in Form</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body {

background: url(https://placeimg.com/1200/500/tech) no-repeat center center fixed;

background-size: cover;

}

.center-block { float: none; }

.login {

display: flex;

justify-content: center;

align-items: center;

position: relative;

height: 100vh;

}

.login .img-circle {

display: block;

width: 150px;

margin: -80px auto 0 auto;

}

.login h3 {

margin-top: 20px;

}

.login form {

padding: 3%;

background: rgba(0,0,0,0.7);

color: #FFF;

max-width: 500px;

width: 50%;

}

@media screen and (max-width: 768px) {

.login form {

width: 70%

}

}

@media screen and (max-width: 480px) {

.login form {

width: 90%;

}

}

</style>

</head>

<body>

<div class="login">

<form>

<img class="img-circle" src="https://placeimg.com/100/100/tech" alt="logo">

<h3> Log-In</h3>

<div class="form-group">

<label for="Email">Email address</label>

<input type="email" class="form-control" id="Email" placeholder="your@domain.com">

</div>

<div class="form-group">

<label for="Password">Password:</label>

<input type="password" class="form-control" id="Password" placeholder="8 characters">

</div>

<button type="submit" class="center-block btn btn-lg btn-primary">Log-in</button>

</form>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 29, 2018 Jan 29, 2018

Copy link to clipboard

Copied

If I wanted to use Flexbox, I think I would use Bootstrap 4 instead of 3.7.  But what you have is acceptable.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 29, 2018 Jan 29, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

If I wanted to use Flexbox, I think I would use Bootstrap 4 instead of 3.7.  But what you have is acceptable.

Nancy

Yeah I'd get rid of the Bootstrap stuff normally

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 30, 2018 Jan 30, 2018

Copy link to clipboard

Copied

Hello, I tried your code. It's a cool design but when I try to view it in mobile, the login area moves without staying in it's original spot. For example, when I minimize the screen, it goes on top of the footer or navigation bar. http://prntscr.com/i7z0pr  http://prntscr.com/i7z0uj

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 31, 2018 Jan 31, 2018

Copy link to clipboard

Copied

LATEST

guest48289919  wrote

Hello, I tried your code. It's a cool design but when I try to view it in mobile, the login area moves without staying in it's original spot. For example, when I minimize the screen, it goes on top of the footer or navigation bar. http://prntscr.com/i7z0pr  http://prntscr.com/i7z0uj

Then you aint using the code I provided you're using some crap you produced, probably based on what I provided

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 30, 2018 Jan 30, 2018

Copy link to clipboard

Copied

Hello, I tried your code. How can I put the login spot in the center of the page (in between the navigation and footer) with the background image behind it?

top.png

I want to put the login area on top of this image.

bottom.pngcenter.png

Here is the code:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Business Department</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>

  .navbar {

  margin-bottom: 0;

  border-radius: 0;

  /* background-color; he put it purple make it stay gray or change to dark gray */

  color: #474747; /* text color */

  padding: 1% 0;

  font-size: 1.2em;  /* This increases text font */

  border: 0; /* the black thing */

  }

  .navbar-brand {

  float: left;

  min-height: 55px;

  padding: 0 15px 5px;

  }

  .navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {

color: #FFF;

background-color: #222222; /* for the black thing in home */ /* #232323 try to change later on if it does not match with anything else */

}

.navbar-inverse .navbar-nav li a {

  color: #D5D5D5; /* text color?? */

  }

  .carousel-caption { /* this moves the text in the sliders up */

  top: 50%;

  transform: translateY(-50%);

  text-transform: uppercase;

  }

  .btn { /* get started button */

  font-size: 18px;

  color: #FFF;

  padding: 12px 22px;

  background: #000000;

  border: 2px solid #FFF;

  }

  .container {

   margin-top: 30px;

   margin-bottom: 26px;

  }

  #icon {

  max-width: 200px; /* to change the size of 3 images */

  margin: 1% auto;

  margin-top: 30px;

  margin-bottom: 26px;

  }

 

  footer { /* to design footer (no text) */

  width: 100%;

  background-color: #222222;

  padding: 5%;

  color: #FFF; /* text color */

  }

 

  .fa {

padding: 15px; /* social media pics size */

font-size: 25px;

color: #FFF;

  }

  .fa:hover {

  color: #D5D5D5;

  text-decoration: none;

  }

 

  @media (max-width: 900px) {

.fa {

font-size: 20px;

padding: 10px;

}

  }

 

  @media (max-width: 600px) {  /* this is to not show the getting started buttons and header on mobile */

  .carousel-caption {

display: none;

}

#icon {

max-width: 150px;

}

h2 { /* h4 size in mobile */

font-size: 1.7em;

}

  }

 

  .container1 {    margin: 4% auto;

}

<!-- login page -->

body {

background: url(https://placeimg.com/1200/500/tech) no-repeat center center fixed;

background-size: cover;

}

.center-block { float: none; }

form {

margin-top: 25%;

padding: 2%;

background: rgba(0,0,0,0.7);

color: #FFF;

}

  </style>

</head>

<body>

<nav class="navbar navbar-inverse">

    <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <!-- for mobile burgr nav -->

                <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

<!--change to business logo -->  <a class="navbar-brand" href="indexReference.html"><img src="img/w3newbie.png"></a>

            </div>

            <div class="collapse navbar-collapse" id="myNavbar">

            <ul class="nav navbar-nav navbar-right">

<!--#for a ink -->    <li class="active"><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

                    <li><a href="courses.html">Courses</a></li>

                    <li><a href="deca.html">DECA</a></li>

                    <li><a href="schoolstore.html">School Store</a></li>

                    <li><a href="resources.html">Resources</a></li>

                    <li><a href="contacts.html">Contacts</a></li>

                </ul>

         </div>

     </nav>

 

<!-- div below is for sliders -->

     <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- For sliders -->

    <div class="carousel-inner" role="listbox">

    <div class="item active">

    <img src="img/Tower2.jpg"> <!-- image for first slider-->

    <div class="carousel-caption">

  

  

</div>

</div> <!-- End Active -->

    </div>

    </div>

    

    

<!-- test login -->

<div class="container">

<div class="row">

<div class="col-sm-6 center-block">

<form>

<h3><img class="img-circle" src="https://placeimg.com/75/75/tech" alt="logo"> Log-In</h3>

<div class="form-group">

<label for="Email">Email address</label>

<input type="email" class="form-control" id="Email" placeholder="your@domain.com">

</div>

<div class="form-group">

<label for="Password">Password:</label>

<input type="password" class="form-control" id="Password" placeholder="8 characters">

</div>

<button type="submit" class="center-block btn btn-lg btn-primary">Log-in</button>

</form>

</div>

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

     <!-- footer -->

     <footer class="container-fluid text-center">

      <div class="row">

        <div class="col-sm-4">

            <h3>Contact Us</h3>

                <br> <!-- line break -->

                <h4>Our Address and contact info here.</h4>

            </div>

            <!-- For social media pics -->

            <div class="col-sm-4">

            <h3>Connect</h3>

                <a href="#" class="fa fa-facebook"></a>

                <a href="#" class="fa fa-twitter"></a>

                <a href="#" class="fa fa-google"></a>

                <a href="#" class="fa fa-instagram"></a>

                <a href="#" class="fa fa-youtube"></a>

                <h3>©2018 CSS Studios</h3>

            </div>

            <div class="col-sm-4">

            <img src="img/bunny.png" class="icon">

            </div>

        </div>

     </footer>

    

</body>

</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 31, 2018 Jan 31, 2018

Copy link to clipboard

Copied

Do not place a login form over a Carousel slider.  It will create problems.  Use a background image on the BODY.

REVISED HTML & CSS CODE:

<!doctype html>

<html lang="en">

<head>

<title>Business Department</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

.navbar {

    margin-bottom: 0;

    border-radius: 0;

    /* background-color; he put it purple make it stay gray or change to dark gray */

    color: #474747; /* text color */

    padding: 1% 0;

    font-size: 1.2em;  /* This increases text font */

    border: 0; /* the black thing */

}

.navbar-brand {

    float: left;

    min-height: 55px;

    padding: 0 15px 5px;

}

.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {

    color: #FFF;

    background-color: #222222; /* for the black thing in home */ /* #232323 try to change later on if it does not match with anything else */

}

.navbar-inverse .navbar-nav li a { color: #D5D5D5; /* text color?? */ }

.btn { /* LOGIN button */

    font-size: 18px;

    color: #FFF;

    padding: 12px 22px;

    background: #000000;

    border: 2px solid #FFF;

}

#icon {

    max-width: 200px; /* to change the size of 3 images */

    margin: 1% auto;

    margin-top: 30px;

    margin-bottom: 26px;

}

footer {

    width: 100%;

    background-color: #222;

    padding: 5%;

    color: #FFF;

}

.fa {

    padding: 15px; /* social media pics size */

    font-size: 25px;

    color: #FFF;

}

.fa:hover {

    color: #D5D5D5;

    text-decoration: none;

}

@media (max-width: 900px) {

.fa {

    font-size: 20px;

    padding: 10px;

}

}

@media (max-width: 600px) {  /* this is to not show the getting started buttons and header on mobile */

#icon { max-width: 150px; }

h2 { /* h4 size in mobile */ font-size: 1.7em; }

}

body {

    height: 100%;

    /**FULL SCREEN BACKGROUND IMAGE**/

    background: url(https://placeimg.com/1200/500/tech) no-repeat center center fixed;

    background-size: cover;

}

.center-block { float: none; }

form {

    margin: 15% auto 15% auto;

    padding: 5%;

    background: rgba(0,0,0,0.7);

    color: #FFF;

}

</style>

</head>

<body>

<!--TOP NAVIGATION-->

<nav class="navbar navbar-inverse">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

<!--BRAND-->

<a class="navbar-brand" href="indexReference.html"><img src="img/w3newbie.png"></a> </div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li class="active"><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="courses.html">Courses</a></li>

<li><a href="deca.html">DECA</a></li>

<li><a href="schoolstore.html">School Store</a></li>

<li><a href="resources.html">Resources</a></li>

<li><a href="contacts.html">Contacts</a></li>

</ul>

</div>

</div>

</nav>

<!--LOGIN FORM-->

<div class="container">

<div class="row">

<div class="col-sm-6 center-block">

<form action="YOUR_LOGIN_SCRIPT.php">

<h3 class="text-center"><img class="img-circle" src="https://placeimg.com/75/75/tech" alt="logo"> Log-In</h3>

<div class="form-group">

<label for="Email">Email address</label>

<input type="email" class="form-control" id="Email" placeholder="you@domain.com">

</div>

<div class="form-group">

<label for="Password">Password:</label>

<input type="password" class="form-control" id="Password" placeholder="8 characters">

</div>

<button type="submit" class="center-block btn btn-lg btn-primary">Log-in</button>

</form>

</div>

</div>

</div>

<!--FOOTER-->

<footer class="container-fluid text-center">

<div class="row">

<div class="col-sm-4">

<h3>Contact Us</h3>

<address>

Our Address and contact info here.

</address>

</div>

<!-- SOCIAL ICONS -->

<div class="col-sm-4">

<h3>Connect</h3>

<a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a> <a href="#" class="fa fa-google"></a> <a href="#" class="fa fa-instagram"></a> <a href="#" class="fa fa-youtube"></a>

<h3>©2018 CSS Studios</h3>

</div>

<div class="col-sm-4"> <img src="img/bunny.png" class="icon"> </div>

</div>

</footer>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Keep in mind this is only a form.  It does not do anything until you create a PHP script to make it work.

<form action="YOUR_LOGIN_SCRIPT.php">

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 29, 2018 Jan 29, 2018

Copy link to clipboard

Copied

How many user IDs and passwords will you need? 

If the same user ID and password is used by everyone, you can simply password protect the site folder on your server with C-Panel or Plesk. 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 29, 2018 Jan 29, 2018

Copy link to clipboard

Copied

Hello, sorry for the late response but I will need 3 usernames and passwords. They will just be used to access a web page where they can download any web page and edit its code.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2018 Jan 30, 2018

Copy link to clipboard

Copied

Use .htaccess and .htpasswd as per https://davidwalsh.name/password-protect-directory-using-htaccess

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines