I'm creating a navigation system and currently all I have is the titles at the top of the screen, side by side, e.g. home, about us and so on.
I'm unsure how I would create a fixed position for the navigation system at the top of the screen, so when you scroll down etc the options will still be there to click onto at the top of the screen.
Also, how it would be possible to add a background colour just to the navigation system?
Thank you.
Try something like this:
In between the tags in the HTML:
<div id='header'>NAVIGATION LINKS</div>
and in the CSS put:
#header{
padding:10px;
height:20px;
position:fixed;
width:100%;
}
Here's a JSFiddle: http://jsfiddle.net/MGumH/
It would most probably be best to go the HTML5 route, and use SEMANTIC tags.
Something along the lines of the below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<!-- next line points to EXTERNAL Stylesheet -->
<link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>
<body>
<!-- HEADER -->
<header>
<h1>Header in h1</h1>
</header>
<!-- NAVIGATION -->
<nav>
<ul>
<li class="MyMenuItem">Menu Option 1</li>
<li class="MyMenuItem">Menu Option 2</li>
<li class="MyMenuItem">Menu Option 3</li>
</ul>
</nav>
<!-- SECTION(S) -->
<br />
<section>
<article>
<header>
<h3 class="MyArticleHeader">Article #1</h3>
</header>
<section>
<p>This is the first article. This is <mark>highlighted</mark>. This is some body text, lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again.</p>
</section>
</article>
<article>
<header>
<h3 class="MyArticleHeader">Article #2</h3>
</header>
<section>
<p>This is the second article. These articles could be blog posts, etc.</p>
</section>
</article>
</section>
<!-- FOOTER -->
<footer id="MyFooter">Footer - Copyright 2013</footer>
</body>
</html>
There are also other semantic tags too, like Aside for example.
And this is the stylesheet that goes with the above sample
body
{
padding: 12px;
}
h1
{
color: #FFFFFF;
background-color: #FF0000;
text-align: center;
vertical-align: middle;
}
.MyMenuItem
{
margin: 2px;
padding: 2px 8px 2px 8px;
list-style-type: none;
vertical-align: middle;
text-align: center;
float: left;
color: #FFFFFF;
background-color: #FFCC66;
}
.MyMenuItem:hover
{
margin: 2px;
padding: 2px 8px 2px 8px;
list-style-type: none;
vertical-align: middle;
text-align: center;
float: left;
color: #000000;
background-color: #99CCFF;
}
.MyArticleHeader
{
color: #FF0000;
text-decoration: underline;
font-weight: bold;
}
p
{
font-family: Tahoma;
font-size: 12pt;
}
#MyFooter
{
color: #FFFFFF;
background-color: #FF0000;
vertical-align: middle;
text-align: center;
}
Simply copy ans paste the above two samples into separate files one called test.htm and the other called mystylesheet.css (in the same folder)
Ref: for further information http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx
Related
I am making some product cards with an "Add to cart" button. Everything else is aligned centred in the card, but the button is somehow to the far right even tho the code says otherwise. What I mean by this is the button is inside the card's div, so I don't know how if there is something wrong in my code or I'm missing a key style element. I should note my college project is purely website redesign, not development/implementation hence the webpage looks incomplete. I'm trying to get this little blunder outta the way before I add more product cards, filling the page. Also bear in mind I am still new to coding but I'm always learning and improving.
#font-face {
Src: url(customfont/Futuristic.ttf);
Font-family: Future;
}
#font-face {
Src: url(customfont/RobotInvaders.ttf);
Font-family: Robo;
}
h1 {
Font-family: Future;
Color: red;
Text-align: center;
}
h2 {
color: blue;
text-align: left;
Font-family: Robo;
}
.servicesnav nav {
Width: 100%;
Height: 70px;
Overflow: hidden;
Background: none;
}
.servicesnav li {
Display: inline;
Padding-right: 40px;
}
.servicesnav ul {
List-style-type: none;
}
.servicesnav li a:hover {
Background: blue;
}
.card {
max-width: 200px;
Height: 100%;
margin: auto;
text-align: center;
font-family: arial;
}
.card h3 {
Color: red;
}
.price {
color: white;
font-size: 22px;
}
.description {
Color: white;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
Text-align: center;
cursor: pointer;
width: 150px;
font-size: 18px;
}
.card button:hover {
Color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Geek Yourself Out" />
<title>Geek Yourself Out</title>
<link rel="stylesheet" type="text/css" href="GeekYourselfOut.css" />
<link rel="stylesheet" type="text/css" href="Services.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="logo">
<img src="logo.jpg" width="95"/>
</div>
<div class="coolname">
<img src="coolname.jpg" width="105"/>
</div>
<nav>
<ul>
<li class="current-page">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Consultation & Quotes</li>
<li>Contact Us</li>
<li>Client Referrals</li>
<li>Blog</li>
</ul>
</nav>
<h1>Choose one of these categories to start browsing! </h1>
<div class="servicesnav">
<nav>
<ul>
<li>Physical Products</li>
<li>Marketing Materials</li>
<li>Apparel</li>
<li>Photos</li>
</ul>
</nav>
</div>
<h2>Physical Products</h2>
<div class="card">
<img src="ProductService/custom.png" alt="Custom" style="width:100%">
<h3>Custom Product</h3>
<p class="price">$5-$100</p>
<p class="description">Upload your 3D design file(s) and get it printed into a product! No design is too big or small! *Please only upload completed and full-colour 3D design files. We will reject orders of 2D files, unfinished design, or black-and-white.* </p>
<p><button>Add to Cart</button></p>
</div>
<footer>
<div class="bottom-content">
<h3>Geek Yourself Out</h3>
<p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
<div class="socials">
<li><img src="facebook-box-fill.png" alt="Facebook"</li>
<li><img src="instagram-fill.png" alt="Instagram"</li>
</div>
</div>
<div class="bottom-page">
<p>copyright ©2022 Geek Yourself Out. Designed by Kimmy Vo</p>
</div>
</footer>
</body>
</html>
Maybe its issue with any other parent div because when I tried your HTML and CSS on codepen add to cart button is centered.
You can see the codepen I used:- https://codepen.io/GauravSingh96/pen/JjMEeoQ
This is the html used:-
<div class="card">
<img src="ProductService/custom.png" alt="Custom" style="width:100%">
<h3>Custom Product</h3>
<p class="price">$5-$100</p>
<p class="description">Upload your 3D design file(s) and get it printed into a product! No design is too big or small! *Please only upload completed and full-colour 3D design files. We will reject orders of 2D files, unfinished design, or black-and-white.* </p>
<p><button>Add to Cart</button></p>
You will have to recheck all the codes from top.
Hey there i try your code but it shows add to cart button in the center. But still if you face issue try to reset the css by using following code in your style.css file:
* {
padding: 0;
margin: 0;
}
I also attach screenshot of your code with this where your code shows add to cart button in the center.
i have a problem where my footer element is not at the bottom of the page while i browse the page over mobile this my html
<!DOCTYPE html>
<html>
<head>
<title>Ziad Alian</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h4>Ziad Alian</h4>
<img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<hr>
<div>
<p id="hello">Hello World! </p>
<p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
I studied Geomatics but I don't like it cause computer science is my passion.<br/>
I'm a self taught web developer, My goal is to be a fucll stack developer using
HTML5, CSS, JavaScript, React, Python and Django.<br/>
I love programming and everything that has to do with technology, the internet and writing code.
</p>
</div>
<hr>
<div id="contact">
<ul>
<li>GitHub </li>
<li>LinkedIn </li>
<li>Twitter </li>
<li>Instagram </li>
</ul>
</div>
<br>
<footer>© 2020 Ziad Alian</footer>
</body>
</html>
And this is my CSS
this where my footer element been added
footer {
background-color: black;
color: white;
padding: 0.5em;
}
Edit
i added this code
body {
background-color:whitesmoke;
min-height: 100%;
display: flex;
flex-direction: column;
}
h4 {
text-align: center;
font-size: 68px;
font-weight: 80;
color: teal;
}
.imgz {
width: 200px;
border-radius: 50%;
}
#hello {
text-align: center;
font-size: 30px;
color: teal;
}
#aboutme {
font-size: medium;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p {
text-align: justify;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color:white;
padding: 0.5em;
margin: 0;
margin-top: auto;
}
and it's now fixed like it's just go down and up with me while i scroll the page i just want it to stay at the bottom
mywebsite
You have not integrated some properties into the CSS-file.
You have not integrated the block of the element footer into the HTML-file.
New footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
Old footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
}
New footer
<footer> © 2020 Ziad Alian</footer>
These properties fix the object for the view of the user visiting the website, which means that the object is dynamic for the view of the user.
You could also try giving the main section a min-height: 100vh so to push the footer down. See if that helps.
Try using position: fixed to keep your footer pinned to the bottom of the viewport.
When using fixed positioning, you'll also want to be sure you set the left: 0 and width: 100% properties to make the footer the same width as the viewport.
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
bottom:0;
left:0;
width:100%
}
<footer>© 2020 Ziad Alian</footer>
I have developed a website for you with the same structure as your old website, but with only minor changes.
The source code now has a better structure.
Comments have been added to avoid losing track of the source code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>2020 Ziad Alian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<!-- Header start -->
<h1>
<center>2020 Ziad Alian</center>
</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<center>
<img class="imgz" src="zCmakv5P_400x400.jpg"></img>
<p>
<a href="https://LinkToTheWebsite.com">
<li> ABOUT ME</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>PROJECTS</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>CONTACT</li></a></p>
</center>
<hr>
<p>
<center style="font-size: 30px"> HELLO WORLD</style></center>
</p>
<center>
<p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
I love programming and everything that has to do with technology, the internet and writing code.</strong>
</p>
</center>
<hr>
<center>
<p>
<a href="https://LinkToTheWebsite.com">
<li> GitHub</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>LinkedIn</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Twitter</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Instagram</li></a></p>
</center>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<center>
<p><font color="#FFFFFF">© 2020 Ziad Alian</font></p>
</center>
<!-- Footer end -->
</div>
</div>
</body>
</html>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#000000;
}
.imgz {
border-radius: 50%;
}
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
I've been doing HTML and CSS for a few months and as a part of my website I made a joke fake sales website. I am sort of basing it on the Amazon pages, with a picture on the left, a header on the right, and a product description on the right underneath the heading. Now yes I know what you're thinking looking at my code "He hasn't even done anything to his description!", well there's nothing there because I got angry and got rid of my CSS for the description. You can see a class .description for putting CSS and whatever there. I've tried floating it to the right (it doesn't work), floating to the right and then using padding to push it in a certain direction (it doesn't work), E.T.C. If you want the full code I'll put that at the bottom or something. Please show me how I can get my description under the title?
(For this chunk of code I have removed a few bits that were unnecessary)
<!DOCTYPE html>
<html>
<head>
<title>merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.description{
}
</style>
</head>
<body>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
The output of the code
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.description{
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Buy
Sell
About
</div>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500">
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
Use div to order and group your code. Try to think of the elements on your page as different groups in a box, and create a div for every group.
To make the div with the text appear right next to the image, make the image float: left.
` <!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
#img {
float: left;
}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Buy
Sell
About
</div>
<div id="img">
<img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500">
</div>
<div>
<h1>
Hamsterlover606 merchandise for sale
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</div>
</body>
</html>`
So I'm working on an assignment that builds on itself at the end of every chapter in my textbook, and my professor took points off for the header image and the footer not being aligned correctly with the main content of my page, but I can't seem to figure out how to fix this problem.
body {
background-color: #3F2860;
color: #3F2860;
font-family: Verdana, Arial, sans-serif;
}
header {
background-image: url(lilyheader.jpg);
height: 150px;
background-repeat: repeat-y;
position: relative;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
font-weight: bold;
padding: 1em;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
border-style: outset;
border-color: #CCCCCC;
padding: 1em;
margin-bottom: 1em;
}
nav a:link {color: #3f2860;}
nav a:visited {color: #497777;}
nav a:hover {color: #a26100; border: 3px inset #333333;}
nav ul {
list-style-type: none;
padding-left: 0;
}
.studio {
font-style: italic;
}
footer {
background-color: #9BC1C2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
min-width: 1200px;
max-width: 1480px;
}
main {
padding-left: 2em;
padding-right: 2em;
display: block;
margin-left: 170px;
padding-top: 1em;
}
* {
box-sizing: border-box;
}
.floatleft {
float: left;
margin-right: 4em;
}
.clear {
clear: both;
}
header,nav,main,footer {display: block;}
<head>
<meta charset="UTF-8">
<title>Path of Light Yoga Studio</title>
<link rel="stylesheet" type="text/css" href="yoga.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<! [endif]-->
</head>
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<div id='wrapper'>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<img class='floatleft' src='yogadoor2.jpg' alt="Yoga Door">
<h2>Find Your Inner Light</h2>
<p><span class="studio">Path of Light Yoga Studio</span> provides all levels of yoga practce in a tranquil, peaceful envirionment. Whether you are new to yoga or an experienced practitioner, our dedicated instructors can develop a practice to meet your needs. Let your inner light shine at the <span class="studio">Path of Light Yoga Studio</span>.</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class='clear'>
Path of Light Yoga Studio<br>
612 Serenity Way<br>
El Dorado, CA 96162<br><br>
888-555-5555<br><br><br>
</div>
</div>
<footer>
Copyright © 2016 Path of Light Yoga<br>
</footer>
</main>
I think I formatted that correctly (first time using this site).
Alright... So there's a lot of issues with your CSS and you also have invalid HTML. HTML requires a body tag... Which you don't have. Browsers were probably adding this because it's something they do. They take invalid html and guess what the developer was trying to build.
So first of, keep in mind, the base of all html pages is as following:
<html>
<head>
<title>title</title>
</head>
<body>
</body>
</html>
Next up, there was a lot stuff going on with CSS. The biggest thing I saw involved floats. Floats are a way to easily make a mess. They have their uses; but, usually there is a better way now a days.
Now looking at your alignment problem at its roots...
From what I understand, you want your header and footer to be the same width as the main content and be the same distance from the left of the screen.
You setup your main content to use #wrapper div and did aligment with that. This is fine. The problem is how you set stuff up is more directed to a webpage where the header and the footer are glued to top/bottom of the page, and full up the width completely.
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
<footer>
</footer>
</main>
</body>
</html>
Having the alignment of the page set on the wrapper means it can't really be applied to the footer and header that well. It will get really messy. Of course this isn't a problem if you the header and footer just take up all the width at the top and bottom of the page.
What did I do to fix this?
First off, let's clean up your HTML. It would make more sense to break your page into 3 pieces. Header, Main, Footer. Right now your footer is inside your main.
So what I did is this:
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
</main>
<footer>
</footer>
</body>
</html>
Next up, I moved the alignment. So instead of having this rule:
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
}
I have these rules:
header, main, footer {
width: 80%;
margin-right: auto;
margin-left: auto;
}
#wrapper{
background-color: #F5F5F5;
}
By doing this, we the alignment rules is being applied to the 3 elements inside the body tag. I do NOT apply to this the body tag itself; because, we should avoid changing the width of the body.
Finally, you also had some weird padding on the main element:
main {
padding-left: 2em;
padding-right: 2em;
}
I don't know why this is here; but, I moved that to the body.
body {
padding-left: 2em;
padding-right: 2em;
}
By placing it on the body it will affect the header, main and footer.
Those are the changes to fix alignment. In addition to those changes I removed various rules and statements that might have been causing issues or not... I do not believe these will have any impact on your page; but, just in case if they were required for some unknown reason you should take a look at your requirements and ensure everything is still correct.
Here is the JSFiddle
So I've noticed in my website that there if you scroll to the right (not as if there is any content to the right) there is a long vertical white strip. This is only if you scroll that you'll see it. This is only alongside certain div elements. Once I get to the rows, the content just stretches to the extra space to the right rather than have the white space as well. Since the problem isn't consistent, I've included all the HTML and CSS code to see if there may be two problems in two separate locations.
This is the HTML
<!DOCTYPE HTML>
<html>
<head>
<title>ACA Technology</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="MyWebsite.css">
</head>
<body>
<div id="infoHeader" class="header">
<div id="header_container">
<!-- header -->
<header class="header_shadow nav_type_12 sticky_header header_to_shrink clearfix" >
<div style="float: left; margin-left: 20px">
<h2> EAZYnetz </h2>
</div>
<div style="float: right; margin-right: 10px">
<button id="home" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-home"></span> Home</button>
<button id="ourApps" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-phone"></span> Our Services</button>
<button id="contactUs" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Contact Us</button>
</div>
</div><!-- end panel-footer -->
</div>
</div>
<div class="Home">
<div id="bigPicture" class="container" align="center">
<h1>BUILD YOUR EMPIRE.</h1>
<p>Every idea needs a website to express itself. Tell us what you need and how you'll like it. We'll make the layout, animation, and paint the final picture to your future method of advertisement.</p>
</div>
</div>
<div id="OurServices">
<div id="information" class="row">
<h3 align="center"> What's included in any option </h3>
<hr>
<div class="col-sm-4">
<h3>Your preferences</h3>
<p> Every idea needs a website to express itself. Tell us what you need and how you'll like it, then we'll make it perfect.</p>
</div>
<div class="col-sm-4">
<h3>Layout</h3>
<p> Tell us how you want everything formatted and where to place what according to your liking. </p>
</div>
<div class="col-sm-4">
<h3>Content</h3>
<p>What do you want to show your costumers? What do you want them to see? Put whatever you want to express on your webpage, no limits.</p>
</div>
</div>
<div id="servicesInfo" class="row">
<h3 align="center"> Choices to pick from</h3>
<hr>
<div class="col-sm-4">
<h3>Front End </h3>
<p>This consists of content text only.</p>
</div>
<div class="col-sm-4">
<h3> Front End + Design </h3>
<p>This consists of the content text and the design (colors, layout, menu, animation, etc). </p>
</div>
<div class="col-sm-4">
<h3>Whole Package <br> Front End + Design + Databases </h3>
<p> This is the whole package. It consists of the text of the website, design of the website, and the databases(forums, users, etc) in the website. <p>
</div>
<p> Overall price depends on level of complexity and number of pages </p>
</div>
</div>
<div id="ContactUs" class="jumbotron">
<div class="container">
<h3>Contact Us</h3>
<ul style="list-style-type:none">
<li><span class="glyphicon glyphicon-earphone"></span> 647-550-3998</li>
<li><span class="glyphicon glyphicon-envelope"></span> temporary#easynetz.net</li>
</ul>
<p> If you're interested or have any questions or concerns,<br> feel free to contact us. </p>
</div>
</div>
</body>
</html>
This is the CSS
a{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
p{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
}
h1, h2, h3{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 35px;
}
li{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
color: #FFFFFF
}
#infoHeader{
height: 70px;
background-color: #1A1C27;
}
.header button{
position: relative;
top: 50%;
transform: translateY(50%);
}
.header a{
text-decoration: none;
}
.body{
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.Home{
height: 573px;
background-image: url("clouds.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.Home h1,h2,h3{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home p{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home .container h1{
margin-top: 170px;
}
.top button{
background-color: black;
color: black;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
#theName{
color: white;
}
#information{
background-color: #68ABDD;
}
#information h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#information p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#servicesInfo p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo{
background-color: #ff0000;
}
#ContactUs{
height: 635px;
padding:0!important;
margin:0 !important;
background-image: url("http://hdwallpaperspretty.com/wp-content/gallery/beautiful-buildings-wallpapers/Best-top-desktop-3d-buildings-wallpapers-hd-3d-buildings-wallpaper-13.jpg");
background-repeat: no-repeat;
}
#ContactUs{
color: white;
}
#contactHeader{
padding:0;
margin:0;
}
add following class to your CSS
#information, #servicesInfo {
margin: 0;
padding: 0;
}
you can fix that with adding the next css to the html tag on the html file or target the html on the css file:
overflow-x:hidden
The overflow means scrolling when the elements on the page are too big for the page. I didn't check your code to the end in order to see which element is too big for the page but this is a quick way to fix that.
The best option though is to check which element is too big and resize it with css in which way you want to.
One way is
max-width:100%;