Highlighted

How to create simple form in dreamviewer?

New Here ,
Dec 27, 2019

Copy link to clipboard

Copied

I am using the latest version of Dream viewer on macOS. I want to create a form like this https://bbbootstrap.com/snippets/animated-login-form-95290954 . not able to use colors...

Adobe Community Professional
Correct answer by Nancy_OShea | Adobe Community Professional

Do you have a Bootstrap 4 document?

Did you copy  & paste the HTML and CSS code into your Bootstrap document?

One thing they didn't mention is that you'll need to add Font Awesome Brands library to the <head> of your page for the social icons to work.  But otherwise, it works for me.

 

EDIT:  Added Font Aweseome 4 library for social media icons.

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 4 animated log-in</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(to right, #b92b27, #1565c0)
}
.box {
width: 500px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
background: #191919;
;
text-align: center;
transition: 0.25s;
margin-top: 100px
}
.box input[type="text"], .box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 10px 10px;
width: 250px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500
}
.box input[type="text"]:focus, .box input[type="password"]:focus {
width: 300px;
border-color: #2ecc71
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer
}
.box input[type="submit"]:hover { background: #2ecc71 }
.forgot { text-decoration: underline }
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0
}
ul.social-network li {
display: inline;
margin: 0 5px
}
.social-network a.icoFacebook:hover { background-color: #3B5998 }
.social-network a.icoTwitter:hover { background-color: #33ccff }
.social-network a.icoGoogle:hover { background-color: #BD3518 }
.social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i { color: #fff }
a.socialIcon:hover, .socialHoverClass { color: #44BCDD }
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
border-radius: 50%;
text-align: center;
width: 50px;
height: 50px;
font-size: 20px
}
.social-circle li i {
margin: 0;
line-height: 50px;
text-align: center
}
.social-circle li a:hover i, .triggeredHover {
transform: rotate(360deg);
transition: all 0.2s
}
.social-circle i {
color: #fff;
transition: all 0.8s;
transition: all 0.8s
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<form class="box">
<h1>Login</h1>
<p class="text-muted"> Please enter your login and password!</p>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<a class="forgot text-muted" href="#">Forgot password?</a>
<input type="submit" name="" value="Login" href="#">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

 

 

Topics

Community Information, Feature request

Views

261

Likes

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

How to create simple form in dreamviewer?

New Here ,
Dec 27, 2019

Copy link to clipboard

Copied

I am using the latest version of Dream viewer on macOS. I want to create a form like this https://bbbootstrap.com/snippets/animated-login-form-95290954 . not able to use colors...

Adobe Community Professional
Correct answer by Nancy_OShea | Adobe Community Professional

Do you have a Bootstrap 4 document?

Did you copy  & paste the HTML and CSS code into your Bootstrap document?

One thing they didn't mention is that you'll need to add Font Awesome Brands library to the <head> of your page for the social icons to work.  But otherwise, it works for me.

 

EDIT:  Added Font Aweseome 4 library for social media icons.

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 4 animated log-in</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(to right, #b92b27, #1565c0)
}
.box {
width: 500px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
background: #191919;
;
text-align: center;
transition: 0.25s;
margin-top: 100px
}
.box input[type="text"], .box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 10px 10px;
width: 250px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500
}
.box input[type="text"]:focus, .box input[type="password"]:focus {
width: 300px;
border-color: #2ecc71
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer
}
.box input[type="submit"]:hover { background: #2ecc71 }
.forgot { text-decoration: underline }
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0
}
ul.social-network li {
display: inline;
margin: 0 5px
}
.social-network a.icoFacebook:hover { background-color: #3B5998 }
.social-network a.icoTwitter:hover { background-color: #33ccff }
.social-network a.icoGoogle:hover { background-color: #BD3518 }
.social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i { color: #fff }
a.socialIcon:hover, .socialHoverClass { color: #44BCDD }
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
border-radius: 50%;
text-align: center;
width: 50px;
height: 50px;
font-size: 20px
}
.social-circle li i {
margin: 0;
line-height: 50px;
text-align: center
}
.social-circle li a:hover i, .triggeredHover {
transform: rotate(360deg);
transition: all 0.2s
}
.social-circle i {
color: #fff;
transition: all 0.8s;
transition: all 0.8s
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<form class="box">
<h1>Login</h1>
<p class="text-muted"> Please enter your login and password!</p>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<a class="forgot text-muted" href="#">Forgot password?</a>
<input type="submit" name="" value="Login" href="#">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

 

 

Topics

Community Information, Feature request

Views

262

Likes

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
Adobe Community Professional ,
Dec 27, 2019

Copy link to clipboard

Copied

Do you have a Bootstrap 4 document?

Did you copy  & paste the HTML and CSS code into your Bootstrap document?

One thing they didn't mention is that you'll need to add Font Awesome Brands library to the <head> of your page for the social icons to work.  But otherwise, it works for me.

 

EDIT:  Added Font Aweseome 4 library for social media icons.

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 4 animated log-in</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(to right, #b92b27, #1565c0)
}
.box {
width: 500px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
background: #191919;
;
text-align: center;
transition: 0.25s;
margin-top: 100px
}
.box input[type="text"], .box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 10px 10px;
width: 250px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500
}
.box input[type="text"]:focus, .box input[type="password"]:focus {
width: 300px;
border-color: #2ecc71
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer
}
.box input[type="submit"]:hover { background: #2ecc71 }
.forgot { text-decoration: underline }
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0
}
ul.social-network li {
display: inline;
margin: 0 5px
}
.social-network a.icoFacebook:hover { background-color: #3B5998 }
.social-network a.icoTwitter:hover { background-color: #33ccff }
.social-network a.icoGoogle:hover { background-color: #BD3518 }
.social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i { color: #fff }
a.socialIcon:hover, .socialHoverClass { color: #44BCDD }
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
border-radius: 50%;
text-align: center;
width: 50px;
height: 50px;
font-size: 20px
}
.social-circle li i {
margin: 0;
line-height: 50px;
text-align: center
}
.social-circle li a:hover i, .triggeredHover {
transform: rotate(360deg);
transition: all 0.2s
}
.social-circle i {
color: #fff;
transition: all 0.8s;
transition: all 0.8s
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<form class="box">
<h1>Login</h1>
<p class="text-muted"> Please enter your login and password!</p>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<a class="forgot text-muted" href="#">Forgot password?</a>
<input type="submit" name="" value="Login" href="#">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

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
Reply
Loading...