I want the div with class name user to be at the top of the page, rather than underneath the card div where it currently is.
I changed the display: to absolute and inline-block and that did not work either.
.card {
opacity: 0.8;
}
.card:hover{
opacity: 1;
}
.card {
height: 450px;
width: 320px;
box-shadow: 1px 1px 20px grey;
word-wrap: break-word;
background-color: #564f4c;
border-radius: 10px;
margin: 12px;
text-align: center;
display: inline-block;
}
img {
width: 100%;
height: 270px;
border-radius: 10px;
}
.info .name {
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
margin-top: 9px;
font-size: 35px;
color: white;
}
.answer, .reject {
text-align: center;
width: 47%;
height: 40px;
color: white;
line-height: 40px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
border-style: none;
}
.answer:hover, .reject:hover, .profile:hover {
box-shadow: 1px 2px 3px grey;
cursor: pointer;
}
.answer {
background-color: #3add0d;
display: inline-block;
}
.reject {
display: inline-block;
background-color: #ff2b2b;
}
.phone {
text-align: center;
width: 100%;
margin-top: 15px;
height: 40px;
display: inline-block;
}
.profile {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #dd520d;
color: white;
/*position: relative;*/
margin-top: 10px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
}
.user {
height: 100px;
width: 100px;
background-color: blueviolet;
display: inline-block;
}
<!DOCTYPE html>
<head>
<title>Card</title>
</head>
<body>
<div class="card">
<img src="http://video.blastingnews.com/p/4/2017/02/10/en_gomez090217.jpg" alt="Selena Gomez">
<div class="info">
<div class="name">Selena Gomez</div>
<div class="phone">
<div class="answer">Answer</div>
<div class="reject">Reject</div>
</div>
</div>
<div class="profile">View Profile</div>
</div>
<div class="user">it should be at the top not here</div>
</body>
</html>
After setting up your code in jsFiddle now I see what you want.
Add float: left to .card and .user
Add a wrapper around the entire bit you have and add this class to it:
.clearfix::after {
content: "";
clear: both;
display: table;
}
So with those floats added to your CSS classes your HTML should look like this
<div class="clearfix">
<div class="card">
<img src="http://video.blastingnews.com/p/4/2017/02/10/en_gomez090217.jpg" alt="Selena Gomez">
<div class="info">
<div class="name">Selena Gomez</div>
<div class="phone">
<div class="answer">Answer</div>
<div class="reject">Reject</div>
</div>
</div>
<div class="profile">View Profile</div>
</div>
<div class="user">it should be at the top not here</div>
</div>
<div>
<p>
I'm a new div
</p>
</div>
Anything inside the clearfix div will float, anything outside of it will work as a normal div.
See Fiddle: https://jsfiddle.net/323x9oxm/
Firstly move the <div class="user"> above the <div class="card"> in the HTML, and then remove the display: inline-block; from the .card CSS.
See updated code below:
.card {
opacity: 0.8;
}
.card:hover {
opacity: 1;
}
.card {
height: 450px;
width: 320px;
box-shadow: 1px 1px 20px grey;
word-wrap: break-word;
background-color: #564f4c;
border-radius: 10px;
margin: 12px;
text-align: center;
}
img {
width: 100%;
height: 270px;
border-radius: 10px;
}
.info .name {
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
margin-top: 9px;
font-size: 35px;
color: white;
}
.answer,
.reject {
text-align: center;
width: 47%;
height: 40px;
color: white;
line-height: 40px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
border-style: none;
}
.answer:hover,
.reject:hover,
.profile:hover {
box-shadow: 1px 2px 3px grey;
cursor: pointer;
}
.answer {
background-color: #3add0d;
display: inline-block;
}
.reject {
display: inline-block;
background-color: #ff2b2b;
}
.phone {
text-align: center;
width: 100%;
margin-top: 15px;
height: 40px;
display: inline-block;
}
.profile {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #dd520d;
color: white;
/* position: relative;*/
margin-top: 10px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
}
.user {
height: 100px;
width: 100px;
background-color: blueviolet;
display: inline-block;
}
<body>
<div class="user">Look, I'm at the top now.</div>
<div class="card">
<img src="http://video.blastingnews.com/p/4/2017/02/10/en_gomez090217.jpg" alt="Selena Gomez">
<div class="info">
<div class="name">Selena Gomez</div>
<div class="phone">
<div class="answer">Answer</div>
<div class="reject">Reject</div>
</div>
</div>
<div class="profile">View Profile</div>
</div>
</body>
Let me know if you need any other help.
Related
I have a navigation menu that's fixed in the left inside a div.
I want to be able to put a logo right next to it, centered, but to the right of the menu.
I'm not able to realise what I have to do in the code in order to get it
I tried using a div inside the div, but that does not do it
* {
background-color: black
}
* {
padding: 0;
margin: 0;
}
.navigation {
z-index: 1;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 20px;
font-weight: bold;
border-style: dashed;
border-color: green;
border-radius: 20px;
height: 80px;
width: 750px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
border-style: dotted;
margin-left: 24px;
margin-top: 11px;
}
li a:hover {
background-color: red;
}
.parrafo {
font-size: 40px;
padding: 75px;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-left: 22px;
padding-left: 150px;
border-top: dotted 5px red;
border-bottom: dotted 5px yellowgreen;
display: flex;
flex-direction: row;
font-family: sans-serif;
font-weight: bold;
color: white;
}
.queonda {
font-family: sans-serif;
font-weight: bold;
color: white;
font-size: 50px;
margin-left: 85px;
}
.test {
margin-left: 200px;
margin-top: 270px;
}
.test2 {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 750px;
}
.portrait {
overflow: hidden;
display: inline-block;
}
.portrait img {
transition: transform 0.5s linear;
background-image: cover;
}
.portrait:hover img {
transform: scale(1.1);
}
.cat {
height: 1250px;
width: 1900px;
}
.algo {
height: 100vh;
width: 100vw;
}
.active {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.ptm {
font-size: 70px;
color: white;
position: right;
margin-right: 500px;
display: inline;
}
<div class="navigation active">
<ul>
<li>Tour</li>
<li>Listen to Music</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="portrait algo"><img src="https://i.ibb.co/dLrSmP7/1111.jpg" alt=""></div>
<div class="parrafo">
<img src="https://muzikercdn.com/uploads/products/4207/420772/09821a89.jpg" alt="Ciudad con Transito">
<P class="test">MUSIC<br>MAINSTREAM SELLOUT</P>
</div>
<div class="test2">
<P class="queonda">VIDEOS</P><br><br>
<video width="1280" controls autoplay="off">
<source src="./img/prueba2.mp4" type="video/mp4">
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Terms & Conditions</h4>
</div>
<div class="footer-col">
<h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
</div>
</div>
<div class="footer-col">
<div class="social-links">
<h3>
</h3>
</div>
</div>
</div>
</footer>
I would really appreciate your help with this
If you want it in the menu but next to it, you should just add the logo as a list item. Then you can give it a class (I called it logo) to reposition it.
See below:
* {
background-color: black
}
* {
padding: 0;
margin: 0;
}
.navigation {
z-index: 1;
}
.logo {
padding: 6px;
border: 0;
margin-left: 4em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 20px;
font-weight: bold;
border-style: dashed;
border-color: green;
border-radius: 20px;
height: 80px;
width: 750px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
border-style: dotted;
margin-left: 24px;
margin-top: 11px;
}
li a:hover {
background-color: red;
}
.parrafo {
font-size: 40px;
padding: 75px;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-left: 22px;
padding-left: 150px;
border-top: dotted 5px red;
border-bottom: dotted 5px yellowgreen;
display: flex;
flex-direction: row;
font-family: sans-serif;
font-weight: bold;
color: white;
}
.queonda {
font-family: sans-serif;
font-weight: bold;
color: white;
font-size: 50px;
margin-left: 85px;
}
.test {
margin-left: 200px;
margin-top: 270px;
}
.test2 {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 750px;
}
.portrait {
overflow: hidden;
display: inline-block;
}
.portrait img {
transition: transform 0.5s linear;
background-image: cover;
}
.portrait:hover img {
transform: scale(1.1);
}
.cat {
height: 1250px;
width: 1900px;
}
.algo {
height: 100vh;
width: 100vw;
}
.active {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.ptm {
font-size: 70px;
color: white;
position: right;
margin-right: 500px;
display: inline;
}
<div class="navigation active">
<ul>
<li>Tour</li>
<li>Listen to Music</li>
<li>Contact</li>
<li>About</li>
<li>
<a class="logo"><img src="https://dummyimage.com/40/#41404/fff"></a>
</li>
</ul>
</div>
<div class="portrait algo"><img src="https://i.ibb.co/dLrSmP7/1111.jpg" alt=""></div>
<div class="parrafo">
<img src="https://muzikercdn.com/uploads/products/4207/420772/09821a89.jpg" alt="Ciudad con Transito">
<P class="test">MUSIC<br>MAINSTREAM SELLOUT</P>
</div>
<div class="test2">
<P class="queonda">VIDEOS</P><br><br>
<video width="1280" controls autoplay="off">
<source src="./img/prueba2.mp4" type="video/mp4"></video>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Terms & Conditions</h4>
</div>
<div class="footer-col">
<h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
</div>
</div>
<div class="footer-col">
<div class="social-links">
<h3>
</h3>
</div>
</div>
</div>
</div>
</footer>
Side note: forgot to close </video> and the .container div which was making your HTML invalid.
I want this line to be placed in the middle under the title, but it doesn't work when I try text-align.
body {
background-color: #000;
color: #FFF;
font-family: 'Noto Sans KR', sans-serif;
}
.title{
position: relative;
top: 70px;
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
}
.title::after {
display: block;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
}
enter image description here
I'm sorry in advance because it's not the time for me to click on the recommendation yet. Thank you for all your answers.
Will this do?
body {
background-color: #000;
}
section {
position:relative;
}
.title{
color: #fff;
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
border-bottom-width: 50%;
}
.title::after {
position:absolute;
display: block;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
left: 25%;
}
<body>
<section>
<div class="title">What I Play</title>
</section>
</body>
text-align: center aligns the inline content of that element, not the element itself.
you probably want to use margin: 0 auto; for .title::after.
I found a solution to your issue. you have to change small changes in your CSS and also you have to add some css in .title-box class.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background-color: #000;
color: #FFF;
font-family: 'Noto Sans KR', sans-serif;
}
.title-box{
text-align:center;
}
.title{
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
display: inline-flex;
flex-direction: column;
}
.title::after {
display: flex;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 title-box">
<h1 class="title">What I Play</h1>
</div>
</div>
</div>
</body>
</html>
I have a question about background-image in CSS. I want to design a box of which all parts are displayed as background image except for 1 link and button. I need 3 of such box in one line. I've attached an example picture. I can't figure out the problem and need guidance
body {
background: #F2F2F2;
padding: 0px;
}
#price {
text-align: center;
align-items: center;
background-image: url(https://carevisa.at/wp-content/uploads/2020/09/2.jpg);
background-repeat: no-repeat;
background-position: center;
}
#price::after{
content: "";
display: table;
clear: both;
}
.plan {
display: flex;
margin: 10px 2%;
font-family: 'Lato', Arial, sans-serif;
width: 477px;
height: 832px;
}
.btn {
position: absolute;
padding: 1em;
padding-bottom: 2em;
text-align: center;
}
.btn a {
background: red;
padding: 10px 30px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
}
.IMGbox{
width: 477px;
height: 832px;
}
.Readmore{
position: absolute;
text-align: center;
width: 100px;
}
<div id="price">
<!--price tab-->
<div class="plan">
More details
<div class="btn">
Online application
</div>
</div>
</div>
try this instead,
Use absolute positioning to plan class. That is,
.plan {
position:absolute;
bottom:0;
left:0;
right:0;
}
And give width and height to price id instead of plan class.
#price {
position:relative;
width: 477px;
height: 832px;
display: inline-block;
}
Codepen Demo
body {
background: #F2F2F2;
padding: 0px;
}
#price {
position:relative;
background-image: url(https://carevisa.at/wp-content/uploads/2020/09/2.jpg);
background-repeat: no-repeat;
background-position: center;
width: 477px;
height: 832px;
display: inline-block;
}
#price::after{
content: "";
display: table;
clear: both;
}
.plan {
position:absolute;
bottom:0;
left:0;
right:0;
margin: 10px 2%;
font-family: 'Lato', Arial, sans-serif;
}
.btn {
padding: 1em;
padding-bottom: 2em;
text-align: center;
}
.btn a {
background: red;
padding: 10px 30px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
}
.IMGbox{
width: 477px;
height: 832px;
}
.Readmore{
text-align: center;
width: 100%;
display: block;
margin-bottom: 25px;
}
<div id="price">
<!--price tab-->
<div class="plan">
More details
<div class="btn">
Online application
</div>
</div>
</div>
<div id="price">
<!--price tab-->
<div class="plan">
More details
<div class="btn">
Online application
</div>
</div>
</div>
<div id="price">
<!--price tab-->
<div class="plan">
More details
<div class="btn">
Online application
</div>
</div>
</div>
I have problem with styling my html. I have HTML and CSS that looks like this:
HTML:
<div class='page summary'>
<div class='scores distribution-hidden'>
<div class='score-item'>
<div class='score-box'>
50%
</div>
<h2 class='score-name'>
Your Result
</h2>
</div>
</div>
</div>
CSS:
.summary .scores .score-item {
clear: both;
height: 60pt;
margin: 15pt 0 0 0;
padding-left: 10pt;
}
.summary .scores .score-name {
color: blue;
float: left;
line-height: 30pt;
font-size: 30pt;
}
.summary .scores .score-box {
float: right;
background-color: #00A600;
color: white;
line-height: 30pt;
font-size: 20pt;
width: 60pt;
text-align: center;
}
.summary .scores.distribution-hidden .score-box {
width: 160pt;
}
Now I want to add divided div under this score box. It should look like this:
Here is link to jsfiddle: https://jsfiddle.net/k666a9wu/
I was trying to do this but it always looks ugly. How can I do this with css?
Man, you are already doing it right.
* {box-sizing: border-box;}
.summary {
.scores {
.score-item {
clear: both;
height: 60pt;
margin: 15pt 0 0 0;
padding-left: 10pt;
}
.score-name {
margin: 0;
color: blue;
line-height: 30pt;
font-size: 20pt;
overflow: hidden;
width: 215px;
span {
font-size: 10pt;
float: left;
width: 30%;
border: 3px solid;
margin-left: -1px;
padding-left: 3px;
padding-right: 3px;
&:first-child {
width: 70%;
margin-left: 0px;
padding-left: 0;
}
}
}
.score-box {
background-color: #00A600;
color: white;
line-height: 30pt;
font-size: 20pt;
width: 215px;
text-align: center;
}
&.distribution-hidden {
.score-box {
width: 160pt;
}
}
}
}
<div class='page summary'>
<div class='scores distribution-hidden'>
<div class='score-item'>
<div class='score-box'>
50%
</div>
<h2 class='score-name'>
<span>Fall '13</span>
<span>50%</span>
</h2>
</div>
</div>
</div>
Preview
Output: http://jsbin.com/sasawofuda
I want to sharpen my HTML & CSS skills by recreating the Bootstrap homepage in pure HTML & CSS. I am almost finished, but I seem to be having trouble with my footer. Everything else is positioned the way I would like it, but everything on the footer shoots up to the top and middle of my page. Can anyone tell me what I am missing here?
HTML
<header>
<div class="top-bar">
<p>Aww yeah, Bootstrap 4 is coming!</p>
</div>
<nav>
<div class="nav-bar">
<div class="logo">
Bootstrap
</div>
<div class="left-nav">
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Customize</li>
</ul>
</div>
<div class="right-nav">
<ul>
<li>Themes</li>
<li>Expo</li>
<li>Blog</li>
</ul>
</div>
</div>
<nav>
</header>
</div>
<center>
<main>
<section>
<div class="head-component">
<div class="b-logo">
<p>B</p>
</div>
<div class="short-description">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
</div>
<div class="download-button">
<button class="dwn">Download Bootstrap</button>
</div>
<div class="current">
<p>Currently v3.3.5</p>
</div>
</div>
</section>
<section>
<div class="mid-section">
<div class="mid-info">
<h2>Designed for everyone, everywhere.</h2>
<p>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
</div>
<hr class="hz-line" />
<div class="column-left">
<img src="http://getbootstrap.com/assets/img/sass-less.png" />
<h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="column-middle">
<img src="http://getbootstrap.com/assets/img/devices.png" />
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="column-right">
<img src="http://getbootstrap.com/assets/img/components.png" />
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
<div class="clear"></div>
<hr class="hz-line" />
<div class="github">
<p>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
</div>
<div class="github-button">
<button class="view-git">View the Github Project</button>
</div>
<div class="clear"></div>
<div class="spacer"></div>
<div class="clear"></div>
<div class="photo-section">
<hr class="hrln-full" />
<div class="second-mid-info">
<h2>Built with Bootstrap.</h2>
<p>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.</p>
</div>
<hr class="hz-line" />
<div class="photos">
<img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" />
</div>
<hr class="hz-line" />
<div class="expo-button">
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<button class="expo">Explore the Expo</button>
</div>
<hr class="hrln-full" />
</div>
</div>
<div class="clearfooter"></div>
</section>
</main>
<div class="clear"></div>
<footer>
<p>Designed and built with all the love in the world by #mdo and #fat.
<br /> Maintained by the core team with the help of our contributors.
<br /> Code licensed under MIT, documentation under CC BY 3.0.</p>
<ul>
<li>Github</li>
<li>Examples</li>
<li>v2.3.2 docs</li>
<li>About</li>
<li>Expo</li>
<li>Blog</li>
<li>Releases</li>
</ul>
</footer>
</center>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
html, body, #wrap {
height: 100%;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fff;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 22px;
font-weight: 100px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 14px;
}
#container {}
ul {
list-style: none;
}
li {
list-style: none;
display: inline;
padding: 10px;
}
a {
list-style: none;
color: inherit;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
}
main {
padding-bottom: 150px;
display: block;
margin: 0 auto;
}
.top-bar {
margin: 0;
padding: 15px 0;
background-color: #0275D8;
text-align: center;
}
.top-bar p {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
margin: 0;
}
.top-bar:hover {
margin: 0;
padding: 15px 0;
background-color: #0269C2;
text-align: center;
}
.nav-bar {
background-color: #fff;
position: relative;
color: #583F7E;
display: block;
width: 100%;
height: 50px;
}
.logo {
position: absolute;
font-size: 20px;
font-weight: 700;
color: #583F7E;
padding: 15px;
line-height: 0.8em;
margin-left: 100px;
}
.left-nav {
float: left;
font-size: 15px;
font-weight: 500;
text-align: center;
margin-left: 200px;
}
.right-nav {
float: right;
text-align: right;
font-size: 15px;
font-weight: 500;
margin-right: 120px;
}
.left-nav a:hover {
background-color: #f9f9f9;
}
.right-nav a:hover {
background-color: #f9f9f9;
}
.head-component {
background-color: #583F7E;
height: 700px;
display: block;
margin: 0 auto;
}
.b-logo {
margin: 0 auto;
padding-top: 5px;
width: 160px;
height: 300px;
display: block;
}
.b-logo p {
font-size: 130px;
font-weight: 700;
color: #fff;
border: 1px solid #fff;
border-radius: 25px;
text-align: center;
}
.short-description {}
.short-description p {
font-size: 30px;
color: #fff;
font-weight: 300;
width: 850px;
text-align: center;
display: block;
margin: 0 auto;
padding-top: 40px;
}
.download-button {
padding-top: 40px;
}
.dwn {
background: none;
font-size: 20px;
padding: 15px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.dwn:hover {
background: #fff;
font-size: 20px;
padding: 15px;
color: #583F7E;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.current p {
color: #9781A9;
font-size: 14px;
padding-bottom: 75px;
padding-top: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.mid-section {
height: 100%;
background-color: #fff;
display: block;
margin: 0 auto;
}
.mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
text-align: center;
display: block;
margin: 0 auto;
}
.mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
padding-bottom: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.hz-line {
width: 10%;
color: #f3f3f3;
opacity: 0.5;
}
.column-left {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-left img {
width: 100%;
}
.column-left p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-middle {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-middle img {
width: 100%;
}
.column-middle p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-right {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-right img {
width: 100%;
}
.column-right p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.clear {
clear: both;
}
.github {
padding-top: 15px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
text-align: center;
}
.github p {
font-weight: 400;
font-size: 18px;
color: #555;
padding-bottom: 20px;
text-align: center;
}
.view-git {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.view-git:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.hrln-full {
color: #f3f3f3;
opacity: 0.5;
}
.spacer {
height: 60px;
}
.second-mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
display: block;
margin: 0 auto;
text-align: center;
}
.second-mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
text-align: center;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}
.photo-section {
height: 100%;
display: block;
margin: 0 auto;
}
.photos {
padding: 30px;
padding-left: 115px;
}
.photos img {
width: 23%;
}
.expo-button {
padding-top: 15px;
padding-bottom: 120px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
}
.expo-button p {
font-weight: 300;
font-size: 22px;
color: #555;
padding-bottom: 30px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.clearfooter {
height: 130px;
clear: both;
}
footer {
text-align: center;
bottom: 0;
height: 100%;
left: 0;
width: 100%;
display: block;
margin: 0 auto;
}
footer p {
text-align: center;
}
footer ul {
position: relative;
}
footer li {
color: #489FD6;
}
footer li:hover {
color: #23517C;
text-decoration: underline;
}
footer a {}
From what I can tell I believe its because of two main reasons.
You have set fixed heights for elements with content that is height than the fixed height.
.mid-section {
height: 500px;
background-color: #fff;
margin: 0;
}
.photo-section {
height:500px;
}
The footer has position: absolute but isn't contained by a parent with position: relative. If you would like the footer to stick to the bottom use position: fixed instead.
footer {
text-align: center;
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}