I'm trying to align my label tag's to center under the text but it won't budge. What should I change?
I honestly have no idea why text-align center is not working. I've searched everywhere but can't seem to find anything that works for me personally. Any help is welcome, thank you in regard. - Sjoerd
Code: {html}
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Guardian - a safe online storage</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<div class="container flex">
<div class="title">
<h1>Guardian</h1>
<p>A service to store your information</p>
</div>
<nav>
<a class="active" href="index.html"> Home </a>
All your information
</nav>
</div>
</header>
<main>
<section class="banner">
<div class="container">
<div class="main-text">
</div>
<img src="img/guardian-logo.jpg" style="display: block; margin-left: auto; margin-right: auto;">
<h2> This is where you will store your information:</h2>
<div class="data">
<form action="forms_script/formsHandler.php" method="POST">
<label for="name">Email:</label>
<input type="text" id="fullName" placeholder="Enter full name" name="fullName">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" id="pswd" placeholder="Enter password" name="pswd">
<label>
</label>
<button type="submit">Opslaan</button>
</form>
</div>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>
**CSS Part**
body{
font-family: Georgia, 'Times New Roman', Times, serif;
}
.title p {
margin-top: 0;
}
.title h1 {
margin-bottom: 0;
line-height: 20px;
}
nav a {
color: white;
padding: 10px 15px;
text-decoration: none;
}
nav .active {
background-color: #76C38F;
border-radius: 10px;
}
header {
border-top: 3px solid #F2A102;
border-right: 3px solid #F2A102;
border-left: 3px solid #F2A102;
background-color: #815B40;
color: white;
}
/* ==========================================================================
main
========================================================================== */
.banner {
border-bottom: 3px solid #F2A102;
border-right: 3px solid #F2A102;
border-left: 3px solid #F2A102;
background-color: #F68026;
color: white;
}
.banner h2 {
text-align: center;
margin: 0;
}
.data {
display: flex;
text-align: center;
line-height: 150%;
font-size: .85em;
}
.data input {
display: block;
}
/* ==========================================================================
Helper classes
========================================================================== */
.container {
width: 70%;
margin: 0 auto;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
{php}
<h1>PHP test website</h1>
<?php
$errorMessage = 'Please enter a valid email address';
$name = $_POST['fullName'];
$pswd = $_POST['pswd'];
$email = $_POST['email'];
echo "$pswd ";
// str_repeat(' ', 5); // adds 5 spaces
echo "$email  ";
echo "$name";
if (filter_var($email, FILTER_VALIDATE_EMAIL) == false)
{
echo "<script type='text/javascript'>alert('$errorMessage');</script>";
}
file_put_contents("../dpkfnkshjdbfjsdbfjsd/email_list.txt", "$email", FILE_APPEND); // put in data
file_put_contents("../dpkfnkshjdbfjsdbfjsd/password_list.txt", "$pswd", FILE_APPEND); // put in data
?>
I'm assuming you want the form (labels & input) centered, in which case you could add margin to your form:
form {
margin: auto;
}
<label> is not a block by default and text-align works only if the tag has <div>'s behavior.
This should be good to start:
label {
display:block;
}
This is because label is an inline element, and is therefore only as big as the text it contains.
The possible is to display your label as a block element like this:
.data label {
display:block;
text-align:center;
}
I had the same question, and this solved my problem.
label {
margin: auto;
}
You should add a simple code to your file that is given below:
<style>
label {
display: block;
text-align: center;
}
</style>
Related
I'm a newbie and still learning how to code. So, any help is much appreciated. This is what I have in an
image of what's done so far.
How do I save the selected radio button's image ID and the image itself to my database in PHPMyAdmin? I tried but couldn't figure it out. I would also want to repeat this process three times since the user must select three pictures(1 per submit). Users also should not be allowed to choose the same picture again. Perhaps if a picture is selected, it won't be displayed again in the second and third rounds. Below is my code.
include_once 'database.php';
// Create Level 2 password
if (isset($_POST['submit'])) {
header("LOCATION: registration_l3.php");
try {
$stmt = $conn->prepare("INSERT INTO tbl_pass_level_2(fld_user_id, fld_image_id, fld_image) VALUES(:uid, :iid, :image)");
$stmt->bindParam(':uid', $uid, PDO::PARAM_STR);
$stmt->bindParam(':iid', $iid, PDO::PARAM_STR);
$stmt->bindParam(':image', $image, PDO::PARAM_STR);
$uid = $_POST['uid'];
$iid = $_POST['iid'];
$image = $_POST['image'];
$stmt->execute();
}
catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
}
// Auto increment for User ID
$num = $conn->query("SELECT MAX(fld_user_id) AS uid FROM tbl_pass_level_2")->fetch()['uid'];
if ($num){
$num = ltrim($num, 'U')+1;
$num = 'U'.str_pad($num,2,"0",STR_PAD_LEFT);
}
else{
$num = 'U'.str_pad(1,2,"0",STR_PAD_LEFT);
}
$pic = array('1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png','15.png','16.png','17.png','18.png','19.png','20.png');
shuffle($pic);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register-Password Level 2</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<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>
body {
background: linear-gradient(to bottom, #ff6699 0%, #ffcc99 100%)fixed;
font: 18px Tahoma, sans-serif;
color: black;
text-align: center;
}
p {font-size: 16px;}
.margin {margin-bottom: 35px;}
.container-fluid {
padding-top: 50px;
padding-bottom: 50px;
}
div {
margin-bottom: 20px;
}
label {
display: inline-block;
width: 100px;
text-align: center;
}
input[type=submit] {
background-color: #ff0066;
border: 2px solid #000000 ;
color: black;
text-decoration: none;
cursor: pointer;
display: inline-block;
width: 120px;
text-align:center;
}
.center {
display: flex;
flex-flow: row wrap;
position: relative;
width: auto;
margin-left: auto;
margin-right: auto;
}
li {
flex: 1 1 16%;
height: auto;
margin: 20px;
margin-right: 40px;
padding: 20px 0;
width: auto;
border: 2px solid #000000 ;
}
.buttonHolder{ text-align: center;}
#footer {
position: relative;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
/* Height of the footer*/
height: 40px;
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<h2 class="margin"> <b>3 LEVEL PASSWORD AUTHENTICATION <br>SECURITY SYSTEM<b></h2>
<h3 class="margin"><b>LEVEL 2 PASSWORD REGISTRATION </b></h3>
<h4 class="margin">CHOOSE 3 OUT OF 10 DISPLAYED IMAGES </h4>
<label>User ID :</label>
<input name="uid" type="text" id="userid" placeholder="User ID" value="<?php echo $num; ?>"readonly>
<?php
if (isset($_SESSION['error'])) {
echo "<p class='text-danger text-center'>{$_SESSION['error']}</p>";
unset($_SESSION['error']);
}
?>
<form method="post">
<ul>
<div class="center">
<?php
for($i=0;$i<10;$i++)
echo "<li style = \"display:inline-block;\"><input type = \"radio\" name = \"iid\"><img src = \"$pic[$i]\" name=\"image\" width=\"50%\" height=\"150\" class=\"center\" ></li>";
?>
</div>
</ul>
<h4 class="margin text-center"> 1 OUT OF 3 </h4>
<div class="buttonHolder">
<input type="hidden" name="matricnum" value="a174559">
<?php { ?>
<input type="submit" name="submit" value="Submit" align="text-center">
<?php } ?>
</div>
</form>
<!-- Footer -->
<footer class="footer text-center" id=footer>
<p>Copyright � S.SASHNEETA 2022</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
my login page is not implementing the css i have used for it my code is designed using mvc and php i tried changing background to pink to see if its working but the css isnt working at all
my code isnt complete so dont worry about missing stuff for the form etc but this is login page code.
<?php
require APPROOT . '/views/includes/head.php';
?>
<div class="navbar">
<?php
require APPROOT . '/views/includes/navigation.php';
?>
</div>
<div class="container-login">
<div class="wrapper-login">
<h2>Sign in</h2>
<form action="<?php echo URLROOT; ?>/users/login" method="POST">
<input type="text" placeholder="Username *" name="username">
<span class="invalidFeedback">
<?php echo $data['usernameError']; ?>
</span>
<input type="password" placeholder="Password *" name="password">
<span class="invalidFeedback">
<?php echo $data['passwordError']; ?>
</span>
<button id="submit" type="submit" value="submit">Submit</button>
<p class="options">Not registered yet? Create an account! </p>
</form>
</div>
</div>
this is my css for the page.
.container-login {
width: 100%;
margin: 0 auto;
position: relative;
top: 20%;
}
.wrapper-login{
width: 80%;
margin: 0 auto;
text-align: center;
}
.wrapper-login input {
width: 200px;
height: 26px;
border: 1px solid #cccccc;
background-color: #f5f5f5;
font-size: 18px;
display: block;
position: relative;
margin: 20px auto;
}
input::placeholder{
color: #a1a1a1;
font-size: 14px;
}
.wrapper-login h2 {
font-size: 40px;
text-transform: uppercase;
}
.btn-submit {
width: 200px;
height: 42px;
border: 1px solid #000000;
background-color: #000000;
color: #ffffff;
font-size: 20px;
margin: 20px 0 0 0;
}
#submit:hover {
border: 1px solid #a1a1a1;
background-color: #a1a1a1;
transition: 0.15s ease-in;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta htttp-equiv="Cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auction System</title>
<link rel="stylesheet" href="http://localhost/mframe/css/style.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700&display=swap" rel="stylesheet">
</head>
I have an issue I have been trying to solve. I have created a "blog" you can call it, and I have the option to make a new post. When I make a new post, a div is added. However, when the div gets added, the previous post is shifted to the right. I have tried all sorts of suggestions, but I can't get it. Here is an image:
What I want is so that the divs are lined up properly. Here is my code:
body {
background-color: #558C89;
/*background-color: #1FDA9A;*/
color: #000305; /*remove if background is not working */
font-size: 87.5%; /*base font size is 14px */
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
margin-left: 21.5%;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active {
}
.body {
}
form {
display: inline;
}
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 5px;
height: 50px;
vertical-align: top;
}
.mainheader img {
width: 100%;
height: auto;
margin: 0% 0%;
}
.mainheader nav {
background-color: #424242;
/*background-color: #008BBA; /* Here for color of navigated buttons*/
height: 65px;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: right;
display: inline;
margin-top: 0px;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
font-weight: bold;
display: inline-block;
padding: 18px 25px;
height: 10px;
/* Come back here to continue to edit buttons */
}
.mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link,
.mainheader nav .active a:visited {
background-color: #638CA6;
opacity: 0.85;
height: 63px;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.newsClass{
position: absolute;
width: 1000px;
background-color: #404040;
border-style: solid;
border-color: black;
border-width: 1px;
text-align: center;
color: #FFF;
margin: -100px 0 0 -150px;
top: 25%;
left: 27%;
z-index: 2;
}
.topcontent {
background-color: #404040;
width: 850px;
position: absolute;
text-align: center;
color: #FFF;
margin-top: 120px;
border-style: solid;
border-color: black;
border-width: 1px;
line-height: 1;
display: inline-block;
left: 21.5%;
}
#box{
border: 1px solid rgb(200, 200, 200);
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
background: rgba(200, 200, 200, 0.1);
border-radius: 4px;
top:50px;
}
h2{
text-align:center;
color:#fff;
}
#footer {
color: #FFF;
}
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
include("blog.php");
$posts = (isset($_GET['id'])) ? get_posts($_GET['id']) : get_posts();
$username = $_SESSION['username'];
?>
<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>Home</title>
<!-- CSS -->
<link href="accountCSS/myaccountStyle.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="indexCSS/bootstrap.min.css">
<link rel="stylesheet" href="indexCSS/font-awesome.min.css">
<link rel="stylesheet" href="indexCSS/form-elements.css">
<link rel="stylesheet" href="indexCSS/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="icon" href="images/favicon.gif">
</head>
<body>
<img src="images/logo.gif" id="logo"/>
<header class="mainheader">
<nav><ul>
<?php
if(isset($_SESSION['user_id'])){
echo '<li>Log out</li>';
}else{
echo '<li>Log in</li>';
}
?>
<li>My Account</li>
<li>Contact</li>
<li>Play</li>
<li>Home</li>
</ul></nav>
</header>
<h2 class="newsClass"> Recent News <?php if(getPermissions($username)) {echo 'New Post'; }?>
</h2>
<?php
foreach($posts as $post) {
?>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h2 class ="title"><?php echo $post['title'];?></h2>
<p> Posted on <?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in <?php echo $post['name']; ?>
<br></br>
<?php
if(getPermissions($username)) {
?>
Edit Post |
Delete Post
<?php
}
?>
</p>
<div class="contents"> <?php echo nl2br($post['contents']); ?></div>
<?php
}
?>
</div>
<div class="form-top-right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-88077370-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
NOTE: I guess the "run snipped" doesn't seem to run php.
It sounds like you are not closing the divs in the correct places.
Make sure your indentation is correct and ensure that every <div> you open inside the foreach is also closed before the foreach is closed.
I like to use foreach(): endforeach; when you have a lot of markup inside a loop like this, as it makes reading the code a lot easier.
<?php foreach ($posts as $post):?>
<div>
<h2 class ="title">
<?php echo $post['title'];?>
</h2>
<p>
Posted on
<?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in
<a href="category.php?id=<?php echo $post['category_id']; ?>", style="color:green">
<?php echo $post['name']; ?>
</a>
<br></br>
<?php if(getPermissions($username)): ?>
Edit Post |
Delete Post
<?php endif; ?>
</p>
<div class="contents">
<?php echo nl2br($post['contents']); ?></div>
<div>
</div>
<?php endforeach;?>
Adding a wrapping div to each post will provide a box around the markup inside. Divs have display:block be default. It is better practice than using <br /> or <p>&nsbp;</p> as it will give you more control when/if you need to style that element.
I'm trying to create sms floader and i have created the two following php files but when ever the user entered his mobile number its redirecting to another external website and please help me on how to get input from user to loop the same code for several times. like if the user they enter his mobilenumber and loop value to 10 times it should send 10 sms to destination number
sms.php
<html>
<head>
<meta charset="utf-8">
<title>TrickzTracking | SMS Floader</title>
<meta name="author" content="Nandan T Rsn" />
<meta name="keyword" content="sms bomber,sms bomber 2016,working sms bomber,trickztracking sms bomber,unlimited sms bomber,anonymous sms bomber" />
<meta name="description" content="Free SMS Bomber | TrickzTracking" />
<meta name="contact" content="TrickzTracking#Gmail.com" />
<meta name="copyright" content="Copyright (c)2015-2016
TrickzTracking. All Rights Reserved." />
<style>
body {
background: #3b5998;
font-family: 'Lato', sans-serif;
color: #FDFCFB;
text-align: center;
}
#id1{
color: #000000;
}
input{
margin: 5px;
}
.input{
margin: 5px;
}
form {
width: 500px;
margin: 17% auto;
margin-top:90px;
}
.header {
font-size: 35px;
text-transform: uppercase;
letter-spacing: 5px;
}
.description {
font-size: 20px;
letter-spacing: 1px;
line-height: 1.3em;
margin: -2px 0 45px;
}
.button {
padding: 10px;
height: 44px;
border: none;
}
#email,#number,#message,#times {
width: 70%;
background: #FDFCFB;
font-family: inherit;
color: #737373;
letter-spacing: 1px;
text-indent: 5%;
border-radius: 5px 0 0 5px;
}
#submit {
width: 31%;
padding: 10px;
height: 46px;
background: #E86C8D;
font-family: inherit;
font-weight: bold;
color: inherit;
letter-spacing: 1px;
border-radius: 0 5px 5px 0;
cursor: pointer;
transition: background .3s ease-in-out;
}
#submit:hover {
background: #d45d7d;
}
input:focus {
outline: none;
outline: 2px solid #E86C8D;
box-shadow: 0 0 2px #E86C8D;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Lato:400,700"rel="stylesheet" type="text/css">
</head>
<body>
<form action="sms_api.php" method="post" name="SMS Floader">
<div class="header">
<p>Bomb your friends</p>
</div>
<div class="description">
<p>Now, you can bomb your Friends number by simply using their numbers in the below form </p>
</div>
<div class="input">
<input type="text" class="button" id="number" name="num" placeholder="XXXXXXXXXX" maxlength="10" value="">
<button type="submit" class="button" onclick="submit">Start</button>
</div>
<div class="">
<h4> Terms And Conditions : </h4>
</div>
<div class="description">
<p id="id1">1. Don't Try To Fload On Unknow Person's. </p>
<p id="id1">2. Send Only Maximum Of 50 SMS On The Go.</p>
<p id="id1">2. Your IP Will Be Logged For Security Purpose.</p>
<p>Powered By: www.TrickzTracking.com</p>
</div>
</form>
</body>
</html>
sms_api.php
<html>
<script type="text/javascript">
function submit(myForm){
document.myForm.submit();
}
</script>
<body onLoad="javascript:submit(myForm)">
<form action="http://www.some-other-website.com/sms/api.php" method="post" name="myForm">
<input type="hidden" name="type" value="0">
<input type="hidden" name="message" value="102310">
<input type="hidden" name="num" value="<?php echo $_POST['num'] ?>">
<input name="hidden" type="submit">
</form>
</body>
</html>
Ps: when ever sms.php send post data to sms_api.php its redirecting it to http://www.some-other-website.com/sms/api.php instead i want that to redirect to sms.php after posting data to http://www.some-other-website.com/sms/api.php
I'm new to php please help me :D
You are using a on load submit function, which will submit the form as soon as the
sms_api is called. The coding format is wrong and so is the concept. You should try making a single form rather than trying to complex the code. Keep it simple.
My partner and I are trying to make a shopping cart site for a school project. We are having trouble with our navbar.
We use the exact same files for styling this specific navbar. (its called universal.css and inherited by each page)
Also, the navbar HTML code is in a PHP file included via script (same script for both).
However, index.php of the products is not vertically aligned with the pull-right statements, though the index.php of the whole website is.
What's the problem?
(The JS file of products and index do not do anything different to the navbar They are essentially the same).
Here is my code, we host at main page https://webdes-nikhilb99.c9users.io/ and products page https://webdes-nikhilb99.c9users.io/products
Mainnav.css
#media (max-width: 1325px) {
.navbar-header {
float: none;
}
.navbar-collapse.collapse.in { display: block!important; }
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
.glyphicon-search{
color:white;
}
#search-btn{
background-color: #337ab7;
}
Universal.css
#import url('productModal.css');
#import url('bottomNav.css');
#import url('mainNav.css');
row-title{
color:#337ab7;
font-weight:bold;
font-size:30pt;
margin-top:60px;
width:100%;
padding-bottom:50px;
}
#content-wrapper{
background-color: black;
width:100%;
opacity: 0.9;
}
#content-wrapper .content p{
color:white;
}
.content{
color:#337ab7;
font-weight:bold;
font-size:20pt;
text-align:center;
}
.content p{
font-size:10pt;
}
#mainNav{
background-color: black;
font-family: Montserrat;
font-weight: 700;
font-size:10pt;
border-bottom: 4px solid #337ab7;
background: rgba(0,0,0,0.9);
}
#img1{
position:absolute;
top:0;
left:0;
width:100%;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
.navbar-custom .navbar-toggle .icon-container .icon-bar {
background-color: #000;
}
.navbar-custom .navbar-toggle .icon-container{
background-color:#000;
}
.navbar-nav .dropdown a{
color:#337ab7;
font-size:18pt;
text-decoration:none;
}
.blacktext{
color:#337ab7;
font-size:18pt;
}
/*Drop down menu*/
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu{
/**Change up the stuff in the dropdown here*/
}
.dropdown{
line-height:95px;
}
.navbar-nav .dropdown .dropdown-toggle{
font-size:30pt;
}
.navbar-nav > li >a{
line-height:65px ;
}
.navitem{
font-size:30pt;
}
.navbar-nav > li >a:focus{
background-color:transparent;
}
#loginWindow .modal-dialog .modal-footer{
text-align: left !important;
}
body{
padding-top: 65px;
}
.icon-bar{
background-color: #fff;
line-height:65px;
font-size:30pt;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one */
display: flex;
align-items: center;
}
body{
background-color: black;
}
/*.btn-success{
background-color: #337ab7;
}
.btn-success:hover{
background-color:blue;
}*/
/*Login and Registration buttons*/
.btn-primary{
background-color:#337ab7;
}
.btn-primary:focus{
background-color:#337ab7;
}
.btn-primary:hover{
background-color:white;
color:#337ab7;
}
.navbar-nav > li >a:hover{
background-color:transparent;
color:white;
}
#logo{
margin-left:10px;
margin-top:10px;
margin-right:20px;
margin-bottom:3px;
}
#nikhil{
color:white;
}
#yadu{
color:white;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 50px;
border-radius:25px;
opacity:0.95;
border: 3px double white;
}
.active a{
color:white !important;
}
.active a:hover{
color:white !important;
}
.active a:focus{
color:white !important;
}
body{
background-image:url("http://www.legionreport.com/wp-content/uploads/2014/04/blakegriffindunk.jpg");
}
#mtt{
color:#337ab7;
}
#bballfam{
height:200px;
width:80%;
}
Products page:
<html>
<head>
<title>Products</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/products.css">
</head>
<body>
<div class="container">
<?php
include('../snips/loginModal.php');
include('../snips/registrationModal.php');
include('../snips/menuMain.php');
?>
<div id='content-wrapper'>
<div class="row">
<div class="col-md-4 info basketball-info">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info football-info">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info soccer-info">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
</div>
<script type="text/javascript">
$("#srch-term").css('width', $(window).width()).css('right','-9%');
$(".bottom-nav").css('display','none');
</script>
<!--<div class="row">
<div id='basketball-info' class="info col-md-12">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='football-info' class="info col-md-12">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='soccer-info' class="info col-md-12">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div> -->
</div>
</div>
</div>
<?php
include('/home/ubuntu/workspace/snips/bottomNav.php');
?>
<?php
include('/home/ubuntu/workspace/snips/productPageModal.php');
?>
<script src="/js/products.js"></script>
<script type="text/javascript">
// $(".title").click(function(){
// $("#productsPage .modal-title").text($(this).text());
// });
// $(".bottom-nav").css('left','0');
</script>
</body>
</html>
Main Page:
<!DOCTYPE HTML>
<html>
<head>
<title>Baller Sporting Goods</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/index.css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/index.js" type="text/javascript"></script>
<body>
<?php
/*Login page is a Bootstrap modal included on the main page. See snips/loginModal.php*/
include('snips/loginModal.php');
/*Registration page is a Bootstrap modal included on the main page. See snips/registrationModal.php*/
include('snips/registrationModal.php');
include('snips/menuMain.php')
?>
<div class="container" id="wrapper">
<div id='content-wrapper'>
<div class="row">
<h2 class="text-center row-title" id='mtt'>
<img class='center-block' id = "welcome" src="img/welcome.png" width="80%"/>
<br>
<i>Where Ball Really Is Life</i>
<br>
<br>
</h2>
<div class="col-md-9 content center-block">
Online Services
<p>
At Baller Sporting Goods, we offer a variety of services available to many devices.
On our site, you may use our always available quick-search that will locate the exact item
you need in a matter of seconds.
Or, if you like to shop around yourself, you can look over our exhorbitant list of products
on our site by clicking on the <a href='/products/'>Sports</a> icon on the top. We implement
an organized structure of products that sort by sport, company, and type of equipment. Check
it out!
</p>
</div>
<div class="col-md-9 content center-block">
Our Products
<p>
We started in 1991 in the garage of two partners: Nikhil Bharani & Yadunandan Pillai.
Both were high school students tired of studying; so they decided to take the easy way
out and start a business.
They accepted a small loan of one million dollars, which they used on buying the necessities
of a business: products. Eventually, the garage was full of brand new products from medium-scale
companies like ESPN and Dicks Sporting Goods, which they sold for 50 cents on EBay.
</p>
<p>
However, one million dollars is quite a small amount, so they ran out quicker than they planned.
The two collaborators then decided to escape loan sharks by moving to an island outisde US jurisdiction
and starting a shady business.
This business, today, is the most legit one in the world: Baller Sporting Goods.
We sell numerous performance-enhancing drugs and other nutritional supplements along with
imported goods from richer companies like Hong Kong.
We also sell purposefully torn up clothing made by hand.
Our best products are the cubic soccer balls.
</p>
</div>
<br>
</div>
<?php
include('snips/bottomNav.php');
?>
</div>
<!--<script src="/js/libs/slideshow.js"></script>-->
<script src="/js/index.js"></script>
</body>
</html>
Index.css
#import url('universal.css');
#searchbar{
margin-right:auto;
margin-left:auto;
width:50%;
}
#media screen and (min-width: 1200px){
.content{
left:12.5%;
}
}
.content{
padding-bottom: 50px;
}
#media screen and (max-width:800px){
#content-wrapper{
padding-right:40px;
padding-left:40px;
}
}
#wrapper{
width:100%;
height:100%;
}
#searchbar #searchForm{
color:blue;
margin-left: auto;
margin-right:auto;
}
#title h2{
font-family: Montserrat;
font-weight: bold;
color:black;
text-align:center;
margin-top:65px;
}
#searchbar #searchForm input[name='search']{
background-color:#e9e9e9;
}
#slideshoww{
margin-top:70px;
margin-right:auto;
margin-left: auto;
position:absolute;
width:100%;
opacity:0.3;
}
#searchbar #searchForm #bar_img{
font-size:25pt;
}
#welcome{
width:95%;
}
#bar_img{
color:black;
}
#content-wrapper .row-title i{
font-size:20pt;
color:lightGrey;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 100px;
border-radius:25px;
opacity:0.90;
border-right: 3px double white;
border-left: 3px double white;
font-family:Montserrat;
}
.col-md-6{
left:25%;
}
Products.css
#import url('universal.css');
#media screen and (min-width:990px){
.col-md-4{
border-right: 4px solid #337ab7;
}
.col-md-4:last-child{
border:none;
}
}
.col-md-4{
text-align:center;
font-family: Montserrat;
}
.col-md-4 .main-link{
font-size:20pt;
color:white;
font-weight:bold;
}
.info .title{
font-size:20pt;
color:#337ab7;
font-weight:bold;
}
#content-wrapper{
background:rgba(0,0,0,0.9);
}