I am working on a real estate website project. I have already created Photoshop template and uploaded it on Behance. https://www.behance.net/csc103falld848
Right now, I am creating the static version of the real estate store template. I am facing an issue. There is no issue between the columns. Would you please help me to fix the issue and complete my project?
I asked a similar question here. But I didn't find the complete solution, which you can find in my comment in the selected right answer. That's why, I have posted a new question here.
Here is the HTML code:
<html>
<head>
<title>Kanon's Smartphone Store</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/dummy.css" rel="stylesheet">
<!-- FontAwesome icon fonts -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<!-- Custom Theme files -->
<!-- <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />-->
<!-- <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />-->
<link href="css/fasthover.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- Website Logo -->
<link rel="icon" href="assets/img/KS%20Large.jpg">
<!-- Animate.css -->
<link href="assets/css/animate.css" 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>
</head>
<body>
<section id="right-property">
<!-- HEADER
=================================================== -->
<header class="site-header" role="banner">
</header>
<div class="container property-store-container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="proterties-h2-p">
<h3 id="properties-h2">Luxurious Apartments in Malaysia</h3>
<p id="properties-p">Starting from RM 2000</p>
</div>
</div><!-- end col -->
</div><!-- row -->
</div><!-- container -->
</section>
<section id="properties-list" >
<div class="container ">
<div class="property-list-container">
<div class="row">
<div class="col-sm-10">
<div class="col-sm-8">
<div class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div id="column-margin-top" class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div id="column-margin-top" class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div id="column-margin-top" class="col-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<!--
<div id="column-margin-top" class="col-sm-4">
Pages
</div>
<div id="column-margin-top" class="col-sm-8">
<i class="fa fa-forward"></i>
<i class="fa fa-arrow-left"></i>
1 2 3 4 5
<i class="fa fa-arrow-backward"></i>
<i class="fa fa-arrow-right"></i>
</div>
-->
</div>
</div>
<aside class="col-sm-2">
<br>
<div id="rectangle">
<div class="col-sm-4 search-rectangle" id="search-rectangle">
<i id="search" class="fa fa-search"></i>
</div>
<div class="col-sm-8" id="search-here-rectangle">
<input id="search-field" type="text" name="Search Here" value="Search Here" size="20">
</div>
</div>
<br>
<br>
<h3>Categories</h3>
<input type="checkbox" name="categories" value="Duplex">Duplex
<br>
<input type="checkbox" name="categories" value="Duplex">Apartments
<br>
<input type="checkbox" name="categories" value="Duplex">Townhouses
<br>
<input type="checkbox" name="categories" value="Duplex">Detached Houses
<br>
More...
<h3>Room</h3>
<input type="checkbox" name="room" value="1">1
<br>
<input type="checkbox" name="room" value="2">2
<br>
<input type="checkbox" name="room" value="3">3
<br>
<input type="checkbox" name="room" value="4">4+
<br>
<h3>Bath</h3>
<input type="checkbox" name="room" value="1">1
<br>
<input type="checkbox" name="room" value="2">2
<br>
<input type="checkbox" name="room" value="3">3
<br>
<input type="checkbox" name="room" value="4">4+
<br>
<h3>Price</h3>
<input type="checkbox" name="room" value="1">RM 500 - RM 1000
<br>
<input type="checkbox" name="room" value="2">RM 1000 - RM 1500
<br>
<input type="checkbox" name="room" value="3">RM 1500 - RM 2000
<br>
<input type="checkbox" name="room" value="4">RM 2000 - RM 2500
<br>
<h3>Purpose</h3>
<input type="checkbox" name="room" value="1">Purchase
<br>
<input type="checkbox" name="room" value="2">Rent
</aside>
</div>
</div>
</div>
</section>
<!-- FOOTER
=================================================== -->
<section id="footer-real-estate">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">MENU</h4>
<h4 id="visit-our-store-heading">BLOG / CONTACTS / AGENTS</h4>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">CONTACT</h4>
<h4 id="visit-our-store-heading">148, KUALA LUMPUR</h4>
<h4 id="visit-our-store-heading">MALAYSIA</h4>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">SOCIAL</h4>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-linkedin"></i>
<h5 class="copy">© Md. Ehsanul Haque Kanan</h5>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Here is the CSS code:
.property-store-container {
height: auto;
width: 100%;
}
#proterties-h2-p {
margin-bottom: 400px;
}
#properties-image {
height: 25%;
}
#properties-list {
background-color: #c0c0c0;
}
.property-list-container {
padding-top: 20px;
}
#font-awesome-icons-store-first {
float: left;
}
#font-awesome-icons-store {
float: left;
margin-left: 20px;
}
#icon-store {
margin: 2px 0 0 0;
}
#icon-value {
float: left;
margin-left: 2px;
}
.button-call {
background-color: #464646;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin-top: 2px;
}
.button-email {
background-color: #170b0b;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin-top: 2px;
margin-left: 4px;
}
#column-margin-top {
margin-top: 20px;
margin-bottom: 20px;
}
/* #properties-list {
margin-bottom: 30px;
} */
.property-store-container {
height: auto;
width: 100%;
}
/*-- //footer --*/
#footer-real-estate {
background-color: #464646;
height: 15%;
}
#visit-our-store-heading,
#contact-a-specialist-heading {
color: #f5f5f5;
}
Here is the CodePen.io link:
https://codepen.io/kanan292/pen/RBxboO
For some reason, the codes on CodePen.io is not generating web page as this one:
https://drive.google.com/open?id=1U_l3ls4e7uxdJntDGL8dtts3zE3wHIjD
I am really passionate about coding. I really need your help to complete this project. Then I will be able to move on backend development either with WordPress or Django or ASP.NET Core.
Looking forward to getting a great solution from you.
Change your <img id="properties-image src="..."/> to <img class="properties-image src="..."/> you shouldn't have more than one ID of an element on a page then add this to your css
img.properties-image{
display:block;
width:80%;
margin:0 auto;
}
Every where you have <div id="property-content></div> should be changed to <div class="property-content></div>
Also change all col-sm-4 to col-md-4
The problem should be on your nested columns, bootstrap organize the space in 12 sections so you should use that 12 sections this way
<Div class="row">
<Div class="col-4">
<Div/>
<Div class="col-4">
<Div/>
<Div class="col-4">
<Div/>
<Div/>
This way you got the three columns well distribuited, but you have columns inside columns, thats not the idea
Related
Need help aligning those sections:
/*=============== SKILLS ===============*/
.skills__content{
row-gap: 3.5rem;
}
.skills__title{
font-size: var(--h3-font-size);
text-align: center;
margin-bottom: 1.5rem;
}
.skills__box{
display: flex;
justify-content: center;
column-gap: 3rem
}
.skills__group {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: flex-start;
row-gap: 1rem;
}
.skills__data{
display: flex;
column-gap: .5rem;
}
.skills__data i{
font-size: 1rem;
color: var(--first-color);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: 500;
line-height: .5rem;
}
.skills__level{
font-size: var(--smaller-font-size);
}
<!-- skills -->
<div class="skills__content grid" data-content id="skills">
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Frontend
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">HTML</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">JavaScript</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Bootstrap</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">CSS</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Mobile
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Swift</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Storyboard</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">SwiftUI</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Kotlin</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Extras
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Inglês</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">MySQL</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Python</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Design Thinking</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So far it looks like this, I've tried everything but it seems like its dependent on the text length from the skills_data and skills_name. whenever i change it i change the formatting on the website, so it looks terrible. I've spend a lot of time trying to make it 2 columns of 2 names, and when i could do it this second bug happened.
edited the class ".skills__group", added "width: 55%;" to standardize the width of the items and edited the ".skills__box" class, added "margin-left: 20%;" and edited "justify-content: left;"
/*=============== SKILLS ===============*/
.skills__content{
row-gap: 3.5rem;
}
.skills__title{
font-size: var(--h3-font-size);
text-align: center;
margin-bottom: 1.5rem;
}
.skills__box{
display: flex;
justify-content: left;
column-gap: 3rem;
margin-left: 20%;
}
.skills__group {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: flex-start;
row-gap: 1rem;
width: 55%;
}
.skills__data{
display: flex;
column-gap: .5rem;
}
.skills__data i{
font-size: 1rem;
color: var(--first-color);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: 500;
line-height: .5rem;
}
.skills__level{
font-size: var(--smaller-font-size);
}
<!-- skills -->
<div class="skills__content grid" data-content id="skills">
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Frontend
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">HTML</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">JavaScript</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Bootstrap</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">CSS</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Mobile
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Swift</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Storyboard</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">SwiftUI</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Kotlin</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Extras
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Inglês</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">MySQL</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Python</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Design Thinking</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You got it right. The misalignment is caused by the unequal length of the text in the "skills_data" and "skills_name" sections.
Have you tried using a table with 2 columns to display bot sections? Set the width of the first column to a fixed value and let the remaining column fill the space.
<style>
table {
width: 100%;
}
.skill-name {
width: 120px;
padding-right: 20px;
text-align: right;
font-weight: bold;
}
.skill-data {
padding-left: 20px;
}
</style>
<table>
<tr>
<td class="skill-name">Skill 1</td>
<td class="skill-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar orci vel nulla lobortis, ut gravida dui aliquet.</td>
</tr>
<tr>
<td class="skill-name">Skill 2</td>
<td class="skill-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar orci vel nulla lobortis, ut gravida dui aliquet. Mauris malesuada ex in sapien semper, vel auctor lorem ultrices.</td>
</tr>
<tr>
<td class="skill-name">Skill 3</td>
<td class="skill-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
That's just an example and you can adjust te width of the skill name column and the padding values to suit your needs.
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
"When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath."
And thats exactly whats happening when somebody opens this page on a larger screen. I found solutions online on how to fix this, but I do not know where to apply what.
I tried these and a few more without success. They must be working, I just didn't know how to apply them.
https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
https://matthewjamestaylor.com/bottom-footer
https://codepen.io/cbracco/pen/zekgx
<html lang="en">
<head>
<title>About Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap" id="home-section">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center position-relative">
<div class="col-3 ">
<div class="site-logo">
<a href="index.php" class="font-weight-bold">
<img src="images/logo.png" alt="Image" class="img-fluid">
</a>
</div>
</div>
<div class="col-9 text-right">
<span class="d-inline-block d-lg-none"><span class="icon-menu h3 text-white"></span></span>
<nav class="site-navigation text-right ml-auto d-none d-lg-block" role="navigation">
<ul class="site-menu main-menu js-clone-nav ml-auto ">
<li>Home</li>
<div class="dropdown">
<p id="ddm" class="dropbtn">Types of Violence ▾</p>
<div class="dropdown-content">
<a id="f" href="fizicko.php">Physical </a>
<a id="s" href="seksualno.php">Sexual </a>
<a id="p" href="psiholosko.php">Psychological </a>
<a id="d" href="digitalno.php">Digital </a>
</div>
</div>
<li>Simulation</li>
<li><span style="color:rgba(255, 215, 0,0.9);">About Project</span></li>
<li><?php include_once 'jezici.php'; ?></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
</div>
<div class="row" style="padding: 50px;">
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">About project</h2>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<p>The project is intended primarily for high school and elementary school students, but it can also be useful for the elderly. It consists of two main parts, informative and interactive.</p>
<p>The informative section aims to present to the site visitors what are the most common forms of violence in schools and how they can be prevented.</p>
<p>The interactive part is based on a simulation of a conversation between a user and another person, with the conversation having a different outcome relative to the answers.</p>
<hr><p>The goal of this project is to raise awareness of the severity of peer violence, how much concequences it can cause if no one responds, and general education about peer violence.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
<p class="text-center w-responsive mx-auto mb-5">Have a question? Contact us directly via email, and we will respond as soon as possible.</p>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="kontakt.php" method="POST">
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message" >Message</label>
</div>
</div>
</div>
</form>
<div class="text-center text-md-left">
<a style="float: right;" class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
</div>
<div class="status"></div>
</div>
</div>
</div>
</div>
<footer style="width: 100%; text-align: center; background-color: #002366;">
<div style="display: inline-block; margin-left: 5px; margin-right: 15px;">
<b><p class="ftprijavimup" style="color:rgba(255, 215, 0,0.9); margin-top: 5px;">Report<br>violence</p></b>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS violence in schools<br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">0800 200201</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;" >SOS CENTER FOR YOUTH<br>(18-22h) <span style="color:rgba(255, 215, 0,0.9);">3192 782</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS INTERNET VIOLENCE <br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">198 33</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS WOMEN'S CENTER<br>(10-20h) <span style="color:rgba(255, 215, 0,0.9);">2645 328</span></p>
</div>
</footer>
</body>
</html>
Try this.
Looks like your are using bootstrap
https://getbootstrap.com/docs/4.0/examples/sticky-footer/
https://startbootstrap.com/snippets/sticky-footer-flexbox/
First of all, wrap everything in the .site-wrap div as I did below. Add the classes d-flex flex-column to your body element and then add this CSS to that
html,body{
height: 100%
}
.site-wrap{
flex-grow:1;
}
Working Snippet here
html,body{
height: 100%
}
.site-wrap{
flex-grow:1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">
<head>
<title>About Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css">
</head>
<body data-spy="scroll" class="site-mobile-menu d-flex flex-column" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap" id="home-section">
<div class="site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center position-relative">
<div class="col-3 ">
<div class="site-logo">
<a href="index.php" class="font-weight-bold">
<img src="images/logo.png" alt="Image" class="img-fluid">
</a>
</div>
</div>
<div class="col-9 text-right">
<span class="d-inline-block d-lg-none"><span class="icon-menu h3 text-white"></span>
</span>
<nav class="site-navigation text-right ml-auto d-none d-lg-block" role="navigation">
<ul class="site-menu main-menu js-clone-nav ml-auto ">
<li>Home</li>
<div class="dropdown">
<p id="ddm" class="dropbtn">Types of Violence ▾</p>
<div class="dropdown-content">
<a id="f" href="fizicko.php">Physical </a>
<a id="s" href="seksualno.php">Sexual </a>
<a id="p" href="psiholosko.php">Psychological </a>
<a id="d" href="digitalno.php">Digital </a>
</div>
</div>
<li>Simulation</li>
<li><span style="color:rgba(255, 215, 0,0.9);">About Project</span></li>
<li>
<?php include_once 'jezici.php'; ?>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="row" style="padding: 50px;">
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">About project</h2>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<p>The project is intended primarily for high school and elementary school students, but it can also be useful for the elderly. It consists of two main parts, informative and interactive.</p>
<p>The informative section aims to present to the site visitors what are the most common forms of violence in schools and how they can be prevented.</p>
<p>The interactive part is based on a simulation of a conversation between a user and another person, with the conversation having a different outcome relative to the answers.</p>
<hr>
<p>The goal of this project is to raise awareness of the severity of peer violence, how much concequences it can cause if no one responds, and general education about peer violence.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
<p class="text-center w-responsive mx-auto mb-5">Have a question? Contact us directly via email, and we will respond as soon as possible.</p>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="kontakt.php" method="POST">
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
</form>
<div class="text-center text-md-left">
<a style="float: right;" class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
</div>
<div class="status"></div>
</div>
</div>
</div>
</div>
</div>
<footer style="width: 100%; text-align: center; background-color: #002366;" clas="footer">
<div style="display: inline-block; margin-left: 5px; margin-right: 15px;">
<b><p class="ftprijavimup" style="color:rgba(255, 215, 0,0.9); margin-top: 5px;">Report<br>violence</p></b>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS violence in schools<br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">0800 200201</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" styhttps://stackoverflow.com/questions/60209899/footer-rising-up-because-of-not-sufficient-content#le="margin-top: 5px;">SOS CENTER FOR YOUTH<br>(18-22h) <span style="color:rgba(255, 215, 0,0.9);">3192 782</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS INTERNET VIOLENCE <br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">198 33</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS WOMEN'S CENTER<br>(10-20h) <span style="color:rgba(255, 215, 0,0.9);">2645 328</span></p>
</div>
</footer>
</body>
</html>
Did you tried with this:
footer {
position: absolute;
bottom: 0;
width: 100%;
}
I'm a beginner on this side of web development and I don't understand a thing, more precisely on the alignment side.
In my project I have the features area and when I add it, it adds me further, and I want it down, under that search bar and the picture.
https://i.imgur.com/TUy9GIZ.png
Here is my code:
<body>
<div class="wrapper">
<div class="sidebar">
<h2>Baza de date</h2>
<ul>
<li><i class="fas fa-home"></i>Acasa</li>
<li><i class="fas fa-user"></i>Cautare</li>
<li><i class="fas fa-address-card"></i>Adaugare</li>
<li><i class="fas fa-hospital-alt"></i>Centre</li>
</ul>
</div>
<div class="main_content">
<form>
<div class="inner-form">
<div class="input-field first-wrap">
<div class="input-select">
<select data-trigger="" name="choices-single-defaul">
<option placeholder="">Grupe de sange</option>
<option>0</option>
<option>A</option>
<option>B</option>
<option>AB</option>
</select>
</div>
</div>
<div class="input-field second-wrap">
<input id="search" type="text" placeholder="Cantitatea de sange" />
</div>
<div class="input-field third-wrap">
<button class="btn-search" type="button">Search</button>
</div>
</div>
</form>
</div>
<div class="container py-5 my-5 z-depth-1">
<section class="p-md-3 mx-md-5 text-lg-left">
<h2 class="font-weight-bold text-center mb-5 pb-3">Features</h2>
<div class="row text-center d-flex justify-content-center">
<div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
<i class="fas fa-map-marker-alt fa-3x indigo-text mb-4"></i>
<h4 class="font-weight-bold mb-4">Feature 1</h4>
<p class="text-muted px-2 mb-lg-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</section>
</div>
</div>
<script src="js/extention/choices.js"></script>
<script>
const choices = new Choices('[data-trigger]',
{
searchEnabled: false,
itemSelectText: '',
});
</script>
</body>
Thank you very much! :D
You must add the image in the html and then apply those properties float:left; width:100%; to the layer that wrap the searcher and the image.
If you apply as background the image in the CSS you can't do that.
I would like there to be some space between the two.
Here is a picture of the footer in question on imgur.
I tried to add margin right to the detail-box but it just shifts the HTML form below it. Can anyone help? Thanks in advance.
<footer class="page-footer red">
<div class="container">
<div class="row">
<div id="detail-box" class="col-md-6">
<h5 class="font-weight-bold adres"><i class="fas fa-map-marker-alt"></i>Adres</h5>
<p>Kıbrısonline Lefkoşa Merkez Ofisi, Bedreddin Demirel Cad. Arabacıoğlu APT. no:121 Yenişehir - Lefkoşa - P.K. 500 Mersin 10 TURKEY</p>
<h5 class="font-weight-bold merkez"><i class="fas fa-phone-volume"></i>Cagri Merkezi</h5>
<p>+90 (392) 444 0 433</p>
<h5 class="font-weight-bold email"><i class="fas fa-envelope-square"></i>Email</h5>
<p>hizmet#kibrisonline.com</p>
<h5 class="font-weight-bold email"><i class="fas fa-envelope"></i>Email</h5>
<p>kurumsal#kibrisonline.com</p>
<h5 class="font-weight-bold">Bizi Takip Edin:</h5>
<span><i class="icons icon-social-instagram footer-icon"></i></span>
<span><i class="icons icon-social-facebook footer-icon"></i></span>
<span><i class="icons icon-social-twitter footer-icon"></i></span>
<span><i class="icons icon-social-linkedin footer-icon"></i></span>
</div>
<div class="col-md-6">
<form action="" class="row">
<div class="col-md-6 py-1">
<input type="text" class="form-control" name="Ad" placeholder="Adiniz*">
</div>
<div class="col-md-6 py-1">
<input type="text" class="form-control" name="Soyad" placeholder="Soyadiniz*">
</div>
<div class="col-md-6 py-1">
<input type="email" class="form-control" name="E-posta" placeholder="E-posta*">
</div>
<div class="col-md-6 py-1">
<input type="tel" class="form-control" name="Telefon" placeholder="Telefon*">
</div>
<div class="col-md-12 py-1">
<textarea class="form-control" name="Mesaj" placeholder="Mesajiniz*"></textarea>
</div>
</form>
<button id="gonder" type="button" class="btn btn-outline-danger"><i class="far fa-paper-plane"></i>Gonder</button>
</div>
</div>
<hr class="border-white" />
<div class="row align-items-center">
<div class="col-4">
<img src="/assets/img/kol-logoldpi2.svg" class="img-fluid" />
</div>
<div class="col">
<div class="copyright">
<p>© 2018 Copyright Text Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p>Made with <span style="color: #e25555;">♥</span> by a man from The United Kingdom of Great Britain and Northern Ireland.</p>
</div>
</div>
</div>
</div>
Here's a solution using flexbox:
https://codepen.io/anon/pen/QXgyWQ
<div class="container">
<div class="row">
<div class="col-md-5">
<div style="background: blue;">
left
</div>
</div>
<div class="col-md-6 ml-auto">
<div style="background: red;">
left
</div>
</div>
</div>
</div>
You can wrap that section inside a div and set a max-width.
Something like this:
<div id="detail-box" class="col-md-6">
<div class="detail-box-wrapper" style="max-width: 300px;">
<!-- rest of your codes -->
</div>
</div>
You can set the width to 100% on small screen sizes.
div#detail-box {
max-width: calc(50% - 30px) !important;
margin-right: 30px;
}
You can add this css for make margin right you can increase the value i'e 30px as per your need in both the property
example {max-width: calc(50% - 50px) !Important;}
{margin-right:30px;}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm building a one page website. You can view the website here.
The problem is, if you for example click "Om FantasyLab" in the top navigation, the "Referanser" link gets activated. IT shouldn't be like this, but for some reason it gets activated.
Also how can I make the one page scrolling stop where the background starts? Currently it stops at the h1 tags
Here is the full HTML code:
<body data-spy="scroll" data-offset="0" data-target="#myScrollspy" style="margin-top: 0">
<header id="hjem">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="myScrollspy">
<div class="container-fluid" style=" border-bottom: 1px solid #101b49;" >
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="Hjem" href="#hjem" title="FantasyLab">
<img src="images/fantasylab-logo.svg" style="width: 160px; margin-top: 5px;">
</a>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-left">
<li>Om FantasyLab</li>
<li>Referanser</li>
<li>Lansering</li>
<li>Kontakt</li>
</ul>
<div class="social pull-right" style="margin: 25px 140px 0 0">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-google-plus fa-2x"></i>
<i class="fa fa-youtube fa-2x"></i>
</div>
Bli kunde
</div> <!-- navbar-collapse -->
</div> <!-- container -->
</nav>
</header> <!-- header -->
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/banner.jpg" alt="" class="img-responsive">
<div class="carousel-caption">
<div class="container-fluid">
<h1 style="text-shadow: 0 0 10px #0089ea;">Vi er<br><strong>under utvikling.</strong></h1>
<p style="text-shadow: 0 0 10px #0089ea;">Lorem ipsum dolor sit amet consectetur loremsit amet consectetur lorem.</p>
<p style="text-shadow: 0 0 10px #0089ea;">Lorem ipsum dolor sit amet consectetur loremsit.</p>
<a class="btn btn-default" href="#" role="button">Om FantasyLab</a>
</div> <!-- container-fluid -->
</div> <!--carousel-caption -->
</div> <!--item active -->
</div> <!-- carousel-inner -->
<a href="#om-fantasylab">
<div class="numberCircle center-block">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</a>
</div> <!-- myCarousel -->
<div class="om-fantasylab container-fluid" id="om-fantasylab">
<div class="row">
<h1 class="text-uppercase">Lorem ipsum<br><span style="color: #e0349a;"><strong>dolor sit amet cons.</strong></span></h1>
<div class="col-md-3">
<h2 class="text-uppercase" style="color: #e0349a;">Hvem vi er</h2>
<p>Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for tekst. Ny tekst kommer snart. Lorem Ipsum har vært bransjens standard for tekst. </p>
</div> <!-- col-md-3 -->
<div class="col-md-3" >
<h2 class="text-uppercase" style="color: #e0349a;">Hva vi gjør</h2>
<p>Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for tekst. Ny tekst kommer snart. Lorem Ipsum har vært bransjens standard for tekst. </p>
</div> <!-- col-md-3 -->
<div class="col-md-3">
<h2 class="text-uppercase" style="color: #e0349a;">Hvordan vi jobber</h2>
<p>Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for tekst. Ny tekst kommer snart. Lorem Ipsum har vært bransjens standard for tekst. </p>
</div> <!-- col-md-3 -->
<div class="col-md-3">
<h2 class="text-uppercase" style="color: #e0349a;">hvorfor vi gjør det</h2>
<p>Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for tekst. Ny tekst kommer snart. Lorem Ipsum har vært bransjens standard for tekst. </p>
</div> <!-- col-md-3 -->
</div> <!-- row -->
</div> <!-- om-fantasylab -->
<div class="referanser container-fluid" id="referanser">
<div class="row">
<h1 class="text-uppercase text-center" style="margin: 80px 0; text-transform: none; color:#3c4761">Våre fornøyde <span style="color: #3c4761;"><strong>klienter.</strong></span></h1>
<div class="referanser-content col-md-6 col-sm-6">
<a href="http://www.comcare.no" target="_blank" alt="ComCare Solutions">
<img src="images/referanser-bilde.jpg">
<div class="content-referanser">
<blockquote>
<h2 class="text-uppercase" style="color: #3c4761;">ComCare Solutions AS</h2>
<p><i>"Takk FantasyLab for et kjempe fint samarbeid. Dere har vært kreative, lyttende og virkelig sett meg under hele prosessen. Dere så mine behov og skapte en hjemmeside som har alle de tingene jeg ønsker. Er meget fornøyd å gir dere de beste anbefalinger videre."</i></p>
<footer>Aina Kise, Dagligleder - <cite title="Source Title">ComCare Solutions AS </cite></footer>
</blockquote>
</div> <!-- content-referanser -->
</a>
</div> <!-- col-md-6 -->
<div class="col-md-6 col-sm-6">
<a href="http://www.topphelse.net" target="_blank" alt="Topp Helse">
<img src="images/topp-helse.jpg">
<div class="content-referanser">
<blockquote>
<h2 class="text-uppercase" style="color: #3c4761;">Topp Helse</h2>
<p><i>"Takk FantasyLab for et kjempe fint samarbeid. Dere har vært kreative, lyttende og virkelig sett meg under hele prosessen. Dere så mine behov og skapte en hjemmeside som har alle de tingene jeg ønsker. Er meget fornøyd å gir dere de beste anbefalinger videre."</i></p>
<footer>Nicolinn Dixon, Dagligleder - <cite title="Source Title">Topp Helse</cite></footer>
</blockquote>
</div> <!-- content-referanser -->
</a>
</div> <!-- col-md-6 -->
</div> <!-- row -->
<div class="row" style="margin: 160px 0 40px 0; padding: 0 80px;">
<h3 class="pull-left" style="margin-top: 30px; font-weight: 400;">Ønsker du å <span style="color: #6c56bf; font-weight:700;">bestille en webløsning?</span> Vi ser frem til en hyggelig prat!</h3>
<a class="kontakt-knapp btn pull-right" href="#kontakt" role="button">Kontakt oss</a>
<a class="bestill-knapp btn pull-right" href="#" role="button">Bestill webløsning</a>
</div>
</div> <!-- referanser -->
<div class="lansering container-fluid" id="lansering">
<div class="row" style=" margin: 0 60px;">
<img class="center-block" src="images/lansering.png" style="width: 200px; margin-top: 50px;">
<div class="col-md-8 col-md-offset-2" >
<h1 class="text-uppercase text-center" style="color: #fff;">Vi lanserer <span style="color:#00b4a2;"><strong>snart.</strong></span></h1>
<p class="text-center" style="font-size: 18px; color:#fff;">Vi er rett rundt hjørnet! I mellomtiden, meld deg på vår nyhetsbrev for informasjon rundt lansering, kampanjer og nyheter innenfor informasjonsteknologi verdenen.</p>
<div id="mc_embed_signup">
<form action="//fantasylab.us10.list-manage.com/subscribe/post?u=d1f6a8e82535d2fcc14bfa66f&id=36a4ce5a35" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Din e-postadresse" required>
<div class="clear"><input type="submit" value="Meld deg på nyhetsbrev" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
</div> <!-- mc_embed_signup -->
</div> <!-- col-md-6 -->
<img class="light" src="images/light.png">
</div> <!-- row -->
</div> <!-- lansering -->
<div class="kontakt container-fluid" id="kontakt">
<div class="row" style=" margin: 0 60px;">
<h1 class="text-uppercase text-center" style="color: #fff;">Ta kontakt <span style="color:#0089ea;"><strong>med oss</strong></span></h1>
<p class="text-center" style="font-size: 18px; color:#fff;">Våre utviklere ser frem til å høre om dine behov.</p>
<div class="col-md-8 col-md-offset-2">
<div class="well well-sm">
<form class="form-horizontal" action="index.php" method="post">
<fieldset>
<!-- Name input-->
<div class="form-group">
<div class="col-md-12">
<input id="cname" name="cname" type="text" placeholder="Firmanavn" class="form-control">
</div>
</div>
<!-- Name input-->
<div class="form-group">
<div class="col-md-12">
<input id="name" name="name" type="text" placeholder="Kontaktperson" class="form-control">
</div>
</div>
<!-- Email input-->
<div class="form-group">
<div class="col-md-12">
<input id="email" name="email" type="text" placeholder="Din e-postadresse" class="form-control">
</div>
</div>
<div class="form-group" id="budsjett">
<div class="radio">
<label class="col-md-2 control-label" for="budsjett">Ditt budsjett</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
kr 5.000 - 15.000
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
kr 15.000 - 50.000
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
kr 50.000 +
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
N/A
</label>
</div>
</div>
<!-- Message body -->
<div class="form-group">
<div class="col-md-12">
<textarea class="form-control" id="message" name="message" placeholder="Vennligst skriv inn melding..." rows="5"></textarea>
</div>
</div>
<!-- Form actions -->
<div class="form-group">
<div class="col-md-12 text-right">
<button type="submit" class="kontakt-send btn btn-primary btn-lg">Send melding</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<img class="light" src="images/light.png">
</div> <!-- row -->
</div> <!-- kontakt -->
<footer>
<div class="footer container-fluid">
<div class="text-center">
<div class="col-md-12">
<ul class="list-inline text-center">
<li>Hjem</li>
<li>Om FantasyLab</li>
<li>Referanser</li>
<li>Lansering</li>
<li>Kontakt</li>
<li>Bli kunde</li>
</ul>
<div class="social center-block">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-google-plus fa-2x"></i>
<i class="fa fa-youtube fa-2x"></i>
</div>
<p class="text-center" style="margin-top: 10px;">Copyright © 2015 FantasyLab DA. NO 914 798 493.<span style="color:#5a68a2;"> Utviklet med <i alt="kjærlighet" class="fa fa-heart" style="color:#e17cb7;"></i> i Oslo, Norge.</span></p>
</div> <!-- col-md-12 -->
<!--<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/113341766920062371221" data-rel="publisher"></div>
-->
</div> <!-- text-center -->
</div> <!-- footer container -->
</footer> <!-- footer -->
</body> <!-- body -->
Is there any way I can fix this problem?
Thanks in advance!
This web page uses anchors to navigate and not javascript or jquery scroller. Check animatescroll plugin.... Add it to your website and there you go
Give every link of yours id like Om Fantasylab then create your own little jquery script like this:
$(window).load(function() {
$('#button1').click(function(){
$('#om-fantasylab').animatescroll();
});
.. same with rest of your buttons ..
});
Save it in file like buttonHandler.js somewhere and add it to your page after Jquery and animate scroll scripts:
<script src="buttonHandler.js"> </script>