I have a problem: I want to align an interactive text which is already in the left of a slider. So, I just want to align a login form in the right of that interactive text.
I have inform all the codes as well as an image of the output right now and the image inside the slider:
The image inside the slider:
The output of the code right now:
Desired outcome:
This is the CSS + HTML code of the text :
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/graduation1.png);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
<div class="wrapper">
<div class="typing-demo">
Hello!
<br> Welcome to the website- </br>
</div>
</div>
<style>
.wrapper {
height: 50vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 22ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid;
font-family: monospace;
font-size: 2.3em;
color: #FFFFFF
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
</style>
**this is the CSS + HTML code of the form :**
<html>
<div class="container"></div>
<div class="form">
<div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/hat.svg"/></div>
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="Email"/>
<input type="password" placeholder="Password"/>
<button>login</button>
<p class="message">Are you a Business/Society? Register here</p>
</form>
</div>
</html>
<style>
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 300px;
margin: right;
padding: 60px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
}
.form .thumbnail {
background: #ffd700;
width: 150px;
height: 150px;
margin: 0 auto 30px;
padding: 50px 30px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
box-sizing: border-box;
}
.form .thumbnail img {
display: block;
width: 100%;
}
.form input {
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
outline: 0;
background: #ffd700;
width: 100%;
border: 0;
padding: 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
color: #FFFFFF;
font-size: 14px;
transition: all 0.3 ease;
cursor: pointer;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #ffd700;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #ffd700;
}
/* END Form */
</style>
I think I found a solution to your problem. The main thing you where missing is display: inline-block; This allows DIVs to be next to each other.
.flexslider {
display: inline-block;
width: 100%;
}
.row {
float: left;
}
.container {
float: right;
}
Related
This is my html file
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
width: 1000px;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
My question is how can I align the box div align center(horizontally) responsively(dynamically) and how to make this webpage responsive when I checked this page's responsiveness it's not showing responsiveness.
Try this code:
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
width:100%;
margin:0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
What I have done is that I have changed the
.box {
width: 1000px;
}
to
.box {
max-width: 1000px;
width:100%;
margin:0 auto;
}
You can also use display: flexbox; and justify-content: center; in the div box to get almost the same result
Here is the code that I think will work if you want to use flexbox:
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
display: flexbox;
justify-content: center;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
NOTE I have used max-widht: 1000px; in my first method, you can change that as per need.
Change this
.box{
max-width: 1000px;
width:100%;
margin:0 auto;
}
use this but the condition is your parent div has 100% width(window width).
or another way to use flex
form{
width: 200px;
margin: auto;
}
<body>
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here">
<button type="button">Search</button>
</form>
</div>
</body>
You can follow the below code. I try to give some explanation where I changed and why I did it
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 0px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
/*if you want to take result as a responsive then you need to add width as % not fixt size */
width: 100%;
text-align: center;
margin: 0 auto;
}
/*This div for form responsive */
.search-form{
width: 90%;
text-align: center;
margin: 0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 70%; /* I change here for px to % base one your requerment */
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
float: left; /* I change here for div assign as a left */
}
button {
position: relative;
border-radius: 0 25px 25px 0;
width: 30%; /* I change here for px to % base one your requerment */
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
float: left; /* I change here for div assign as a left */
}
<h1>This is my page title...</h1>
<div class="box">
<div class="search-form">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
</div>
display: block fix needs these two blocks to be inserted in the css
.box {
max-width: 1000px;
margin: 0 auto;
}
form {
width: max-content;
margin: 0 auto;
}
Working Fiddle
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
margin: 0 auto;
}
form {
width: max-content;
margin: 0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
If you are good to go with flexbox implementation, you could wrap your .box in flex and have a justify-content: center; to have an horizontal alignment.
Add the below update in your css for flexbox
.box {
display: flex;
justify-content: center;
}
Working flexbox fiddle
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
display: flex;
justify-content: center;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
Please note I have made use of max-width: 1000px; for .box in both examples. This is to make sure that the ui wont fail in the SO fiddle. You can update that as your requirement.
I'm trying to add and modify some animated CSS that I found to a 'subscription form' that I originally created. The problem is that the animation I found does not fit within the confines of my form (i.e., it's too big). I've tried to change the font size of the animation, but that seems to make things worse. I'm not even certain that my html is 100% correct. At best, I am a beginner. You'll find my code below:
<!DOCTYPE html>
<html>
<head>
<style>
/*Original CSS for animated text I found*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #343F4F;
}
.wrapper{
display: flex;
}
.wrapper .static-txt{
color: #000;
font-size: 60px;
font-weight: 400;
}
.wrapper .dynamic-txts{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic-txts li{
list-style: none;
color: #FC6D6D;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
#keyframes slide {
100%{
top: -360px;
}
}
.dynamic-txts li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-txts li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #343F4F;
border-left: 2px solid #FC6D6D;
animation: typing 3s steps(10) infinite;
}
#keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
/*Original CSS for my form*/
form {
border: 5px solid #000;
padding: 3px;
text-align: center;
border-left-width: 10px;
border-right-width: 10px;
width: 500px;
background-color: #efefef;
height: 200px;
}
input[type=submit] {
display: inline;
padding: 10px 30px;
font-weight: 300;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
font-size: 15px;
}
input[type=submit] {
background-color: #ff0000;
color: #fff;
border: 1px solid #000;
font-weight: bold;
}
input[type=submit]:hover,
input[type=submit]:active {
background-color: #ff5e5e;
}
.directions {
font-weight: bold;
}
input[type=text] {
width: 200px;
}
</style>
</head>
<body>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" `onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/BKkas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">`
<div class="wrapper">
<div class="static-txt">Subscribe</div>
<ul class="dynamic-txts">
<li><span>Enter Your Email</span></li>
<li><span>To get the most recent news</span></li>
<li><span>delivered right to your inbox.</span></li>
<li><span>SIGN-UP NOW!</span></li>
</ul>
</div>
<p><input type="text" name="email"/></p><br/>
<input type="hidden" value="blogspot/BKkas" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
</form>
</body>
</html>
Here is the text fit into the box.
<!DOCTYPE html>
<html>
<head>
<style>
/*Original CSS for animated text I found*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
background: #343F4F;
}
.wrapper{
display: flex;
}
.wrapper .static-txt{
color: #000;
font-size: 20px;
margin-left:40px;
line-height: 90px;
font-weight: 400;
}
.wrapper .dynamic-txts{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic-txts li{
list-style: none;
color: #FC6D6D;
font-size: 20px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
#keyframes slide {
100%{
top: -360px;
}
}
.dynamic-txts li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-txts li span::after{
content: "";
position: absolute;
left: 0;
top: 0px;
height: 100%;
width: 100%;
background: #343F4F;
border-left: 2px solid #FC6D6D;
animation: typing 3s steps(10) infinite;
}
#keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
/*Original CSS for my form*/
form {
border: 5px solid #000;
padding: 3px;
text-align: center;
border-left-width: 10px;
border-right-width: 10px;
width: 500px;
background-color: #efefef;
height: 200px;
}
input[type=submit] {
display: inline;
padding: 10px 30px;
font-weight: 300;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
font-size: 15px;
}
input[type=submit] {
background-color: #ff0000;
color: #fff;
border: 1px solid #000;
font-weight: bold;
}
input[type=submit]:hover,
input[type=submit]:active {
background-color: #ff5e5e;
}
.directions {
font-weight: bold;
}
input[type=text] {
width: 200px;
}
</style>
</head>
<body>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" `onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/BKkas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class="wrapper">
<div class="static-txt">Subscribe</div>
<ul class="dynamic-txts">
<li><span>Enter Your Email</span></li>
<li><span>To get the most recent news</span></li>
<li><span>delivered right to your inbox.</span></li>
<li><span>SIGN-UP NOW!</span></li>
</ul>
</div>
<p><input type="text" name="email"/></p><br/>
<input type="hidden" value="blogspot/BKkas" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
</form>
</body>
</html>
I have the image formated how I want, I just can't get it to float to the top so it looks nice next to the form I made. I have tried making a div and having that float up to no avail. Help?
header {
background-color: #030303;
color: #ffffff;
height: 60px;
text-align: left;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo {
float: right;
height: 50px;
}
header h1 {
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox {
float: left;
height: 750px;
width: 15%;
float: left;
background-color: #bd0202;
text-align: center;
}
#homecontent {
height: 750px;
width: 84.3%;
float: left;
background-color: #030303;
color: white;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
border-radius: 10px;
}
nav li {
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
/*nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}*/
nav ul {
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer {
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1 {
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html {
background-color: #030303;
}
button {
background-color: #030303;
border: none;
color: white;
font-size: 20px;
height: 27px;
}
button:hover {
background-color: white;
color: #030303;
border-radius: 5px;
transition: 0.5s;
}
main {
border: white solid;
border-radius: 10px;
order-radius: 10px;
}
#wrapper {
padding: 20px;
}
#schedulebox {
border-right: white solid;
}
#dragonpic {
width: 1556.5px;
height: auto;
}
#homecontent2 {
border: solid white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#homecontent h2,
#homecontent h3 {
padding-left: 10px;
}
#resourcescontent {
color: white;
padding-left: 10px;
}
a img:visited {
border: black;
}
a img:hover {
border: white solid;
border-width: thin;
transition: 0.3s;
}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
border: none;
color: white;
text-decoration: none;
height: 20px;
padding: 5px;
font-size: 20px;
}
a.button:hover {
background-color: white;
color: #030303;
transition: 0.3s;
border-radius: 5px;
}
#beyondlogo {
margin-left: auto;
margin-right: auto;
width: 50%;
display: block;
border-radius: 10px;
}
#resourcescontent p,
#resourcescontent h2 {
text-align: center;
}
form {
color: white;
}
label {
float: left;
display: block;
text-align: right;
width: 120px;
padding-right: 1em;
}
input,
textarea {
display: block;
margin-bottom: 20px;
}
#joiningcontent h2 {
color: white;
padding-left: 20px;
width: 20%;
text-align: center;
}
#joiningpic {
margin-left: auto;
margin-bottom: auto;
width: 50%;
display: block;
border-radius: 10px;
}
#joiningcontent {}
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav>
<ul>
<li>Home</li>
<li>Resources</li>
<li>Join Us!</li>
</ul>
</nav>
<div id="joiningcontent">
<h2>If you wish to join, provide us with some information so we can contact you!</h2>
<form>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="FName" required>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LName" required>
<label for="emailboi">Email:</label>
<input type="email" id="emailboi" name="Email" required>
<label for="GuestOrMember">Are you signing up as a Guest?</label>
<input id="GuestOrMember" type="checkbox">
<button type="submit" value="submit">Submit</button>
</form>
<img src="assets/signuppic.png" id="joiningpic">
</div>
</main>
</div>
I'm still a little lost on what to do and I'm fairly new to web development so I appologize for any ameteur mistakes made.
For both the img and the form you need to:
float: left;
display: inline;
This is due to the form being a block level element so you need to float both left and set them to be inline, rather than block. If you put img before form then it will be on the left of the form, put it after the form and it will be on the right of the form.
Be aware that if the image and form do not fit within the width of the browser window then they will wrap and one will be below the other, whichever way round you have them.
https://jsfiddle.net/bryanwadd/o1da8buw/
For correct working float, the floated element should be the first. Just move img as a first element in parent, like this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav><ul><li>Home</li> <li>Resources</li> <li>Join Us!</li></ul></nav>
<div id="joiningcontent">
<img src="assets/signuppic.png" id="joiningpic">
<h2>If you wish to join, provide us with some information so we can contact you!</h2>
<form>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="FName" required>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LName" required>
<label for="emailboi">Email:</label>
<input type="email" id="emailboi" name="Email" required>
<label for="GuestOrMember">Are you signing up as a Guest?</label>
<input id="GuestOrMember" type="checkbox">
<button type="submit" value="submit">Submit</button>
</form>
</div>
</main>
</div>
</body>
</html>
UPDATED2
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: left;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: #bd0202;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: #030303;
color: white;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
border-radius: 10px;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
/*nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}*/
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
button{
background-color: #030303;
border: none;
color: white;
font-size: 20px;
height: 27px;
}
button:hover{
background-color: white;
color: #030303;
border-radius: 5px;
transition: 0.5s;
}
main{
border: white solid;
border-radius: 10px;
order-radius: 10px;
}
#wrapper{
padding: 20px;
}
#schedulebox{
border-right: white solid;
}
#dragonpic{
width: 1556.5px;
height: auto;
}
#homecontent2{
border: solid white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#homecontent h2, #homecontent h3{
padding-left: 10px;
}
#resourcescontent{
color: white;
padding-left: 10px;
}
a img:visited{
border: black;
}
a img:hover{
border: white solid;
border-width: thin;
transition: 0.3s;
}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
border: none;
color: white;
text-decoration: none;
height: 20px;
padding: 5px;
font-size: 20px;
}
a.button:hover{
background-color: white;
color: #030303;
transition: 0.3s;
border-radius: 5px;
}
#beyondlogo{
margin-left: auto;
margin-right: auto;
width: 50%;
display: block;
border-radius: 10px;
}
#resourcescontent p, #resourcescontent h2{
text-align: center;
}
form{
color: white;
display: inline-block;
vertical-align: top;
max-width: 40%;
box-sizing: border-box;
}
label{
float: left;
display: block;
text-align: right;
width: 120px;
padding-right: 1em;
}
input, textarea{
display: block;
margin-bottom: 20px;
}
#joiningcontent h2{
color: white;
padding-left: 20px;
width: 20%;
text-align: center;
}
#joiningpic{
margin-left: auto;
margin-bottom: auto;
width: 50%;
border-radius: 10px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
#joiningcontent{
}
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav><ul><li>Home</li> <li>Resources</li> <li>Join Us!</li></ul></nav>
<div id="joiningcontent">
<h2>If you wish to join, provide us with some information so we can contact you!</h2>
<form>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="FName" required>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LName" required>
<label for="emailboi">Email:</label>
<input type="email" id="emailboi" name="Email" required>
<label for="GuestOrMember">Are you signing up as a Guest?</label>
<input id="GuestOrMember" type="checkbox">
<button type="submit" value="submit">Submit</button>
</form>
<img src="assets/signuppic.png" id="joiningpic">
</div>
</main>
</div>
Good day, somehow my check box and the text that needs to be beside it do not align in the same row. I have the code on JS Fiddle.
https://jsfiddle.net/6ejwdg9v/
The checkbox code is:
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
the classes form-group and checkbox are not touched with custom css code which is why I wonder how are they affected.
EDIT: I added the code in the "duplicate of another question" it did not do anything I still need help
changed class for .checkbox added
vertical-align: middle;
width: 20px;
also added
input[type=checkbox] {
width: 20px;
}
#font-face {
font-family: 'brandon_reg';
src: url('../fonts/brandon-grotesque-light.otf');
}
#font-face {
font-family: 'brandon_med';
src: url('../fonts/brandon-grotesque-medium.otf');
}
#font-face {
font-family: 'brandon_black';
src: url('../fonts/brandon-grotesque-black.otf');
}
html {
font-size: 100%;
}
body {
margin: 0 auto;
display: block;
/*REGISTER BACKGROUND*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/*REGISTER BACKGROUND*/
}
.regular_bg {
font-family: 'brandon_reg';
}
.med_bg {
font-family: 'brandon_med';
}
.sml_padding {
margin: -10;
padding: -10;
}
.thick_bg {
font-family: 'brandon_black';
}
.thick_bg2 {
font-size: 35px;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
#-webkit-keyframes animat_show{
0%{opacity:0}
100%{opacity:1}
}
.btn-group-sm>.btn, .btn-sm {
float: none;
}
.navbar-toggle {
display: inline-block;
float: none;
}
.full_width {
height: auto;
width:100%;
}
.ul_login {
color: #00a6a6;
}
.ul_reg {
color: #f08300;
}
.justify_text {
transform: translateT(-50);
text-align: justify;
padding: 2%;
display: flex;
justify-content: center;
align-items: center;
}
/*
.row_center {
display: flex;
}
.row_center>* {
flex: 1;
}
*/
.center-block {
margin-left:auto;
margin-right:auto;
display:block;
}
.icon_text_padding {
padding-bottom: 20px;
align-items: center;
margin: 0 auto;
}
.fab {
padding: 20px;
font-size: 50px;
color: #FFF;
}
.fab:hover {
color: #c9c9c9;
text-decoration: none;
}
/*IMPORTANT CSS FOR HEADER*/
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
.list1 {
float: left;
font-size: 200%;
}
.list2 {
float: right;
font-size: 200%;
}
.list2 li a:hover {
color: #fff;
}
/*
.lines {
position: relative;
padding: 10px 0;
}
.lines:before {
content: '';
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
top: 0;
left: 0;
width: 32%;
height: 1px;
background: #cfcfcf;
}
.lines:after {
content: '';
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
bottom: 0;
left: 0;
width: 32%;
height: 1px;
background: #cfcfcf;
}
.lines_med:before {
width: 24%;
}
.lines_med:after {
width: 24%;
}
.lines_med2:before {
width: 27%;
}
.lines_med2:after {
width: 27%;
}
.lines_long:before {
width: 38%;
}
.lines_long:after {
width: 38%;
}
*/
nav .logo {
float: left;
}
nav .logo img {
height: 80px;
transition: 5s;
}
nav ul {
float: left;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
line-height: 80px;
color: #262626;
padding: 5px 20px;
text-decoration: none;
transition: .5s;
}
nav ul li a:hover {
color: #fff;
background: #00a6a6;
text-decoration: none;
}
footer {
width: 100%;
background-color: #00a6a6;
padding: 3%;
color: #FFF;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
filter:none !important;
}
.container-fluid {
max-width: 1200px;
}
footer .container-fluid {
max-width: 100%;
}
.footer_links a h4 {
color: #fff;
}
.footer_links a:hover {
color: #fff;
text-decoration: underline;
}
.faq a:hover {
text-decoration: none !important;
}
.info_container {
max-width: 1920px;
width: 100%;
margin: 0 auto;
}
.info_box h2 {
text-align: center;
}
.info_header {
padding-top: 4%;
padding-bottom: 4%;
}
.bottom_padding {
padding-bottom: 4%;
}
.info_font {
font-size: 18px;
}
.mv_font {
font-size: 20px;
text-align: left;
}
.contact_font {
font-size: 20px;
text-align: center;
}
.center_font {
margin: 0 auto;
text-align: center;
}
#icon {
max-width: 90%;
}
#media (max-width: 600px){
#icon {
max-width: 150px;
}
h4 {
font-size: 1.7em;
}
}
/*CONTACT PAGE*/
.text_field_design {
padding: 50px 0 80px;
text-align: center;
}
.text_field_design p {
padding-bottom: 80px;
color: #737373;
}
.text_field_design h2 {
color: #4c4c4c;
margin: 20px 0 20px;
}
.text_field_design .input-group {
margin-bottom: 25px;
}
.input-group-addon {
padding: -50px !important;
font-size: 20px;
}
.text_field_design .form-control {
border-radius: 0 !important;
}
.text_field_design span {
border-radius: 0 !important;
}
.text_field_design .btn {
border-radius: 0;
width: 100%;
font-size: 15px;
background-color: #f08300;
color: #fff;
}
.text_field_design .btn:hover {
background-color: #f3a64c;
color: #fff !important;
}
.box_shadow {
box-shadow: 10px 10px 5px grey;
}
.curved_img {
border-radius: 10px;
}
/*REGISTER*/
.reg_box {
width: 90%;
padding: 70px 70px 10px;
background: #fff;
top: 50%;
left: 50%;
margin: 0 auto;
opacity: 0.9;
border-radius: 30px;
}
.reg_box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.reg_box input {
width: 100%;
margin-bottom: 20px;
}
.reg_box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #000;
background: transparent;
outline: none;
height: 40px;
}
.reg_box input[class="reg_signup"] {
font-family: 'brandon_med';
border: none;
outline: none;
height: 40px;
background: #f08300;
color: #fff;
font-size: 18px;
margin-top: 20px;
}
.reg_box input[class="reg_fb"] {
font-family: 'brandon_med';
border: none;
outline: none;
height: 40px;
background: #3b579d;
color: #fff;
font-size: 18px;
}
.reg_box input[class="reg_google"] {
font-family: 'brandon_med';
border: none;
outline: none;
height: 40px;
background: #2eaa52;
color: #fff;
font-size: 18px;
}
.checkbox {
float: left !important;
display: block;
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
vertical-align:middle;
}
/*
.register_form {
text-align: center;
margin: 100px 400px;
}
.registration {
width: 100%;
background-color: #fff;
opacity: 0.9;
padding: 50px 0px;
}
.align_left_reg {
text-align: left;
font-size: 18px;
}
#text_field {
width: 250px;
border-radius: 5px;
padding: 5px;
}
#phone {
width: 250px;
padding: 5px;
border-radius: 5px;
outline: 0px;
}
#rd {
font-family: 'brandon_med';
}
.button_container {
max-width: 60%;
}
.ref_button {
width: 100px;
height: 40px;
font-size: 18px;
background-color: #f08300;
color: #fff;
}
.fb_button {
width: 200px;
height: 40px;
font-size: 18px;
background-color: #3b579d;
color: #fff;
}
.fb_button:hover {
background-color: #3662d0;
}
.ref_button:hover {
background-color: #f3a64c;
color: #fff !important;
}
element.style {
color: white;
}
REGISTER*/
input[type=checkbox] {
width: 20px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My White Card</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body style="background-color:#000;" class="regular_bg">
<br><br>
<div class="reg_box">
<div class="row">
<div class="col-md-6">
<input type="submit" value="Sign Up With Facebook" class="reg_fb"></i>
</div>
<div class="col-md-6">
<input type="submit" value="Sign Up With Google" class="reg_google"></i>
</div>
</div>
<br>
<form>
<div class="row">
<div class="col-md-6 col-sm-12">
<p>First Name</p>
<input type="text" placeholder="First Name">
<p>Email</p>
<input type="text" placeholder="Email">
<p>Password</p>
<input type="password" placeholder="Password">
</div>
<div class="col-md-6 col-sm-12">
<p>Last Name</p>
<input type="text" placeholder="Last Name">
<p>Number</p>
<input type="text" placeholder="Number">
<p>Retype Password</p>
<input type="password" placeholder="Retype Password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
<input type="submit" value="Sign Up" class="reg_signup">
</div>
</form>
</div>
</body>
</html>
Turning the label into a flexbox will give you vertical alignment.
.checkbox label {
display: flex;
align-items: center; /* Vertical alignment */
}
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
First of all i dont know if its permited more than one question in one topic, however i didnt find anything talking about that.
I have been developing a website, but im a bit new to this and my site has some things that need to be worked out, i will be listing the issues bellow and hopefully someone will help me.
1- Slideshow
How i can put the circles (bullet navigation) of the slideshow inside the slideshow ?
Images are not fully the size as the screen, i can see the current slide and a bit of the next slide, what do i do ?
2- Last 2 pages, Mobile & Contacts
If i change
.mobile {
min-width: 1100px;
}
to:
.mobile {
min-width: 1300px;
}
The mobile div will not make text stay on top of the image but the contacts page will not be as responsive as before, just try by yourself.
Thats it, it may simple, but i cant figure it out, i hope theres no problem with this topic, if so tell me.
See it live: http://optential.co.nf/
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: 100%;
position: absolute;
}
.controls {
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.mobile {
min-width: 1300px;
}
.mobile .bar {
background-size: cover;
width: 100%;
background: #F4F4F4;
color: #595B61;
min-width: 700px;
display: flex;
justify-content: space-around;
text-align: center;
}
.mobile .bar img {
width: 100%;
background-size: cover;
display: block;
margin: 0 auto;
}
.mobile .content {
background: radial-gradient(ellipse at 55% 50%, #F9F9F9 40%,#B6B5BD 120%);
position: relative;
}
.mobile .content .mobimg {
padding: 3em;
margin-left:10%;
}
.mobile .content .mob {
position: absolute;
top: 0;
left: 60%;
}
.mobile .content h1 {
color: #D6D6D4;
font-size: 120px;
margin-bottom: 0;
}
.mobile .content p {
margin-left: 15px;
width: 410px;
color: #929584;
font-size: 12px;
margin-bottom: 18px
}
.mobile .content .sep {
height: 15px;
border-bottom: 1px solid #C24147;
text-align: center;
}
.mobile .content .sep img {
padding: 0 8px;
background: #F9F9F9;
}
.mobile .content h2 {
margin-left: 15px;
color: #929584;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.mobile .content .buttons {
display: flex;
justify-content: space-around;
width: 400px;
margin-left: 20px;
}
.mobile .content .button {
display: block;
background: #010101;
color: #F8F8F8;
text-decoration: none;
width: 160px;
height: 50px;
border-radius: 6px;
position: relative;
}
.mobile .content .button:hover {
background: #222;
}
.mobile .content .button.apple img {
margin: 10px 0 0 10px;
}
.mobile .content .button.apple span {
font-size: 11px;
font-weight: 400;
position: absolute;
top: 4px; left: 42px;
}
.mobile .content .button.apple h3 {
font-size: 22px;
font-weight: 600;
position: absolute;
top: 14px; left: 42px;
margin: 0;
}
.mobile .content .button.google img {
margin: 18px 0 0 8px;
}
.mobile .content .button.google span {
font-size: 10px;
font-weight: 600;
position: absolute;
top: 4px; left: 40px;
text-transform: uppercase;
}
.mobile .content .button.google h3 {
font-size: 20px;
font-weight: 300;
position: absolute;
top: 16px; left: 38px;
margin: 0;
}
.mobile .content .button.google h3 b {
font-size: 22px;
font-weight: 400;
font-family: 'Cardo', serif;
margin: 0;
margin-right: 4px
}
.contact {
min-width: 1100px;
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="mobile">
<div class="bar">
<img src="img/barra2.png">
</div>
<div class="content">
<img class="mobimg" src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/mob.png">
<div class="mob">
<h1>Mobile</h1>
<p>Optential combines the best of responsive software with native IOS and Android apps to provide the best experience and optimal results!</p>
<p>On laptops, desktops, tablets and phones, always get the best experience on the most intuitive project management set of tools in the world!</p>
<p class="sep">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/a1.png">
</p>
<h2>Get the app!</h2>
<div class="buttons">
<a class="button apple" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/apple.png">
<span>Download on the</span>
<h3>App Store</h3>
</a>
<a class="button google" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/google.png">
<span>Get it on</span>
<h3><b>Google</b>play</h3>
</a>
</div>
</div>
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" id="contactos_form" action="form/contactengine.php" onsubmit="return submit_form(this);">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
<script>
function submit_form(form){
formulario=$("#contactos_form");
$.ajax({url: formulario.attr("action"), method:formulario.attr("method"), data:formulario.serialize(), success: function(result){
alert(result);
}});
return false;
}
</script>
</body>
</html>
The css of the slideshow is "slider" and "controls".
Hope someone can help.
To answer questions 1
I will be answering the others shortly. To move the button controls first we need to give them a div, however as the controls are being dynamically generated so we have to edit the code which creates them, to do this we go into slider.js and add class="button move" to the
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div class="buttonmove">');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
Now we have something that we can edit, the most easiest way to move them is to use position:relative and give them a -100 top value like so.
.buttonmove {
position: relative;
top: -250px;
}
Question 2
Unfortantly I don't see the issue with your question as changing it 1300px works better as the layer don't overlap, please let me know in more detail;
A- the problem
B- what the result should be like
I hope this helped!
EDIT
Here is the jQuery function;
$(document).ready(function() {
var sliderImgH = $(".sliderimages:first").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
$(window).resize(function() {
var sliderImgH = $(".sliderimages").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
I also added this CSS;
.buttonmove {
position: relative;
}
#slider {
position: absolute;
}
*NOTE**
Adjust your function order so it goes or it won't work on load,
<script src="js/slider.js"></script>
Then the function I just made
<script src="js/fixedbar.js"></script>
EDIT(sorry forgot to add...)
I forgot to tell you to to add a class called sliderimages to your first or all of the images in your slider.
<div id="slider">
<div class="images">
<div class="controls">
<img class="sliderimages" src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>