Mixing
Css positioning, positioning issues
0
I am trying to positioning the name of the website to the top left of the page .I have the name of the page in foodies.com and in css i used the position:relative; top:10%; left :10%; but its displaying at near the middle of the page. Does anyone have any solutions. i am really struggling with positioning
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.name{
position: absolute;
top: 10%;
left: 0%;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
text-align: center;
font-weight: lighter;
font-family: "montserrat";
}
h2{
text-align: center;
}
h3{
text-align: center;
font-family: "montserrat";
}
.ab-2p{
font-family:"montserrat";
font-size: 22px;
margin: 10px 10px;
}
ul {
display: flex;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
ul li {
list-style-type: none;
}
ul li a {
width: 80px;
height: 80px;
margin: 0 50px;
text-align: center;
font-size: 35px;
line-height: 80px;
display: block;
border: 3px solid orange;
border-radius: 50%;
color: orange;
position: relative;
overflow: hidden;
}
ul li a .fab{
position: relative;
color: orange;
transition: .5s;
}
ul li a:hover .fab {
transform: rotateY(360deg);
}
.color {
color:orange;
}<!DOCTYPE html>
<head>
<title>Foodies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<section class="intro">
<div class="inner">
<h1 class="name">Foodies<span class="blue">.com</span></h1>
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center"><span class="color">Our Mission</span></h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<h3 class="ab-content"><span class="color">About</span></h3>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".6s">
<p class="ab-2p">Cooking is all about people. Food is maybe the only universal thing that really has the power to bring everyone together. No matter what culture, everywhere around the world, people get together to eat.Cooking is like snow skiing: If you don't fall at least 10 times, then you're not skiing hard enough.The fast-food industry is in very good company with the lead industry and the tobacco industry in how it tries to mislead the public, and how aggressively it goes after anybody who criticizes its business practices.The problem is when that fun stuff becomes the habit. And I think that's what's happened in our culture. Fast food has become the everyday meal.</p>
<h3 class="ab-content"><span class="color">Soical Media</span></h3>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</section>
</body>
</html>javascript html css
asked Nov 21 '18 at 17:08
Ross LintonRoss Linton
123
add a comment |
0
I am trying to positioning the name of the website to the top left of the page .I have the name of the page in foodies.com and in css i used the position:relative; top:10%; left :10%; but its displaying at near the middle of the page. Does anyone have any solutions. i am really struggling with positioning
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.name{
position: absolute;
top: 10%;
left: 0%;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
text-align: center;
font-weight: lighter;
font-family: "montserrat";
}
h2{
text-align: center;
}
h3{
text-align: center;
font-family: "montserrat";
}
.ab-2p{
font-family:"montserrat";
font-size: 22px;
margin: 10px 10px;
}
ul {
display: flex;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
ul li {
list-style-type: none;
}
ul li a {
width: 80px;
height: 80px;
margin: 0 50px;
text-align: center;
font-size: 35px;
line-height: 80px;
display: block;
border: 3px solid orange;
border-radius: 50%;
color: orange;
position: relative;
overflow: hidden;
}
ul li a .fab{
position: relative;
color: orange;
transition: .5s;
}
ul li a:hover .fab {
transform: rotateY(360deg);
}
.color {
color:orange;
}<!DOCTYPE html>
<head>
<title>Foodies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<section class="intro">
<div class="inner">
<h1 class="name">Foodies<span class="blue">.com</span></h1>
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center"><span class="color">Our Mission</span></h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<h3 class="ab-content"><span class="color">About</span></h3>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".6s">
<p class="ab-2p">Cooking is all about people. Food is maybe the only universal thing that really has the power to bring everyone together. No matter what culture, everywhere around the world, people get together to eat.Cooking is like snow skiing: If you don't fall at least 10 times, then you're not skiing hard enough.The fast-food industry is in very good company with the lead industry and the tobacco industry in how it tries to mislead the public, and how aggressively it goes after anybody who criticizes its business practices.The problem is when that fun stuff becomes the habit. And I think that's what's happened in our culture. Fast food has become the everyday meal.</p>
<h3 class="ab-content"><span class="color">Soical Media</span></h3>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</section>
</body>
</html>javascript html css
asked Nov 21 '18 at 17:08
Ross LintonRoss Linton
123
1
seems to be working fine in the snippet, please create a Minimal, Complete, and Verifiable example demonstrating your actual problem - emphasis on minimal
– Pete
Nov 21 '18 at 17:11
I would useposition:absoluteif you know you always want it in a certain location asrelativestill reserves space in the normal flow of the document for where the element originally was.
– Scott Marcus
Nov 21 '18 at 17:14
add a comment |
0
0
0
I am trying to positioning the name of the website to the top left of the page .I have the name of the page in foodies.com and in css i used the position:relative; top:10%; left :10%; but its displaying at near the middle of the page. Does anyone have any solutions. i am really struggling with positioning
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.name{
position: absolute;
top: 10%;
left: 0%;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
text-align: center;
font-weight: lighter;
font-family: "montserrat";
}
h2{
text-align: center;
}
h3{
text-align: center;
font-family: "montserrat";
}
.ab-2p{
font-family:"montserrat";
font-size: 22px;
margin: 10px 10px;
}
ul {
display: flex;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
ul li {
list-style-type: none;
}
ul li a {
width: 80px;
height: 80px;
margin: 0 50px;
text-align: center;
font-size: 35px;
line-height: 80px;
display: block;
border: 3px solid orange;
border-radius: 50%;
color: orange;
position: relative;
overflow: hidden;
}
ul li a .fab{
position: relative;
color: orange;
transition: .5s;
}
ul li a:hover .fab {
transform: rotateY(360deg);
}
.color {
color:orange;
}<!DOCTYPE html>
<head>
<title>Foodies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<section class="intro">
<div class="inner">
<h1 class="name">Foodies<span class="blue">.com</span></h1>
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center"><span class="color">Our Mission</span></h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<h3 class="ab-content"><span class="color">About</span></h3>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".6s">
<p class="ab-2p">Cooking is all about people. Food is maybe the only universal thing that really has the power to bring everyone together. No matter what culture, everywhere around the world, people get together to eat.Cooking is like snow skiing: If you don't fall at least 10 times, then you're not skiing hard enough.The fast-food industry is in very good company with the lead industry and the tobacco industry in how it tries to mislead the public, and how aggressively it goes after anybody who criticizes its business practices.The problem is when that fun stuff becomes the habit. And I think that's what's happened in our culture. Fast food has become the everyday meal.</p>
<h3 class="ab-content"><span class="color">Soical Media</span></h3>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</section>
</body>
</html>javascript html css
asked Nov 21 '18 at 17:08
Ross LintonRoss Linton
123
I am trying to positioning the name of the website to the top left of the page .I have the name of the page in foodies.com and in css i used the position:relative; top:10%; left :10%; but its displaying at near the middle of the page. Does anyone have any solutions. i am really struggling with positioning
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.name{
position: absolute;
top: 10%;
left: 0%;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
text-align: center;
font-weight: lighter;
font-family: "montserrat";
}
h2{
text-align: center;
}
h3{
text-align: center;
font-family: "montserrat";
}
.ab-2p{
font-family:"montserrat";
font-size: 22px;
margin: 10px 10px;
}
ul {
display: flex;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
ul li {
list-style-type: none;
}
ul li a {
width: 80px;
height: 80px;
margin: 0 50px;
text-align: center;
font-size: 35px;
line-height: 80px;
display: block;
border: 3px solid orange;
border-radius: 50%;
color: orange;
position: relative;
overflow: hidden;
}
ul li a .fab{
position: relative;
color: orange;
transition: .5s;
}
ul li a:hover .fab {
transform: rotateY(360deg);
}
.color {
color:orange;
}<!DOCTYPE html>
<head>
<title>Foodies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<section class="intro">
<div class="inner">
<h1 class="name">Foodies<span class="blue">.com</span></h1>
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center"><span class="color">Our Mission</span></h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<h3 class="ab-content"><span class="color">About</span></h3>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".6s">
<p class="ab-2p">Cooking is all about people. Food is maybe the only universal thing that really has the power to bring everyone together. No matter what culture, everywhere around the world, people get together to eat.Cooking is like snow skiing: If you don't fall at least 10 times, then you're not skiing hard enough.The fast-food industry is in very good company with the lead industry and the tobacco industry in how it tries to mislead the public, and how aggressively it goes after anybody who criticizes its business practices.The problem is when that fun stuff becomes the habit. And I think that's what's happened in our culture. Fast food has become the everyday meal.</p>
<h3 class="ab-content"><span class="color">Soical Media</span></h3>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</section>
</body>
</html>html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.name{
position: absolute;
top: 10%;
left: 0%;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
text-align: center;
font-weight: lighter;
font-family: "montserrat";
}
h2{
text-align: center;
}
h3{
text-align: center;
font-family: "montserrat";
}
.ab-2p{
font-family:"montserrat";
font-size: 22px;
margin: 10px 10px;
}
ul {
display: flex;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
ul li {
list-style-type: none;
}
ul li a {
width: 80px;
height: 80px;
margin: 0 50px;
text-align: center;
font-size: 35px;
line-height: 80px;
display: block;
border: 3px solid orange;
border-radius: 50%;
color: orange;
position: relative;
overflow: hidden;
}
ul li a .fab{
position: relative;
color: orange;
transition: .5s;
}
ul li a:hover .fab {
transform: rotateY(360deg);
}
.color {
color:orange;
}<!DOCTYPE html>
<head>
<title>Foodies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<section class="intro">
<div class="inner">
<h1 class="name">Foodies<span class="blue">.com</span></h1>
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center"><span class="color">Our Mission</span></h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<h3 class="ab-content"><span class="color">About</span></h3>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".6s">
<p class="ab-2p">Cooking is all about people. Food is maybe the only universal thing that really has the power to bring everyone together. No matter what culture, everywhere around the world, people get together to eat.Cooking is like snow skiing: If you don't fall at least 10 times, then you're not skiing hard enough.The fast-food industry is in very good company with the lead industry and the tobacco industry in how it tries to mislead the public, and how aggressively it goes after anybody who criticizes its business practices.The problem is when that fun stuff becomes the habit. And I think that's what's happened in our culture. Fast food has become the everyday meal.</p>
<h3 class="ab-content"><span class="color">Soical Media</span></h3>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</section>
</body>
</html>html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.name{
position: absolute;
top: 10%;
left: 0%;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
text-align: center;
font-weight: lighter;
font-family: "montserrat";
}
h2{
text-align: center;
}
h3{
text-align: center;
font-family: "montserrat";
}
.ab-2p{
font-family:"montserrat";
font-size: 22px;
margin: 10px 10px;
}
ul {
display: flex;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
ul li {
list-style-type: none;
}
ul li a {
width: 80px;
height: 80px;
margin: 0 50px;
text-align: center;
font-size: 35px;
line-height: 80px;
display: block;
border: 3px solid orange;
border-radius: 50%;
color: orange;
position: relative;
overflow: hidden;
}
ul li a .fab{
position: relative;
color: orange;
transition: .5s;
}
ul li a:hover .fab {
transform: rotateY(360deg);
}
.color {
color:orange;
}<!DOCTYPE html>
<head>
<title>Foodies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<section class="intro">
<div class="inner">
<h1 class="name">Foodies<span class="blue">.com</span></h1>
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center"><span class="color">Our Mission</span></h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<h3 class="ab-content"><span class="color">About</span></h3>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".6s">
<p class="ab-2p">Cooking is all about people. Food is maybe the only universal thing that really has the power to bring everyone together. No matter what culture, everywhere around the world, people get together to eat.Cooking is like snow skiing: If you don't fall at least 10 times, then you're not skiing hard enough.The fast-food industry is in very good company with the lead industry and the tobacco industry in how it tries to mislead the public, and how aggressively it goes after anybody who criticizes its business practices.The problem is when that fun stuff becomes the habit. And I think that's what's happened in our culture. Fast food has become the everyday meal.</p>
<h3 class="ab-content"><span class="color">Soical Media</span></h3>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</section>
</body>
</html>javascript html css
javascript html css
asked Nov 21 '18 at 17:08
Ross LintonRoss Linton
123
asked Nov 21 '18 at 17:08
Ross LintonRoss Linton
123
asked Nov 21 '18 at 17:08
Ross LintonRoss Linton
123
asked Nov 21 '18 at 17:08
Ross LintonRoss Linton
123
asked Nov 21 '18 at 17:08
Ross LintonRoss Linton
123
123
1
seems to be working fine in the snippet, please create a Minimal, Complete, and Verifiable example demonstrating your actual problem - emphasis on minimal
– Pete
Nov 21 '18 at 17:11
I would useposition:absoluteif you know you always want it in a certain location asrelativestill reserves space in the normal flow of the document for where the element originally was.
– Scott Marcus
Nov 21 '18 at 17:14
add a comment |
1
seems to be working fine in the snippet, please create a Minimal, Complete, and Verifiable example demonstrating your actual problem - emphasis on minimal
– Pete
Nov 21 '18 at 17:11
I would useposition:absoluteif you know you always want it in a certain location asrelativestill reserves space in the normal flow of the document for where the element originally was.
– Scott Marcus
Nov 21 '18 at 17:14
1
1
seems to be working fine in the snippet, please create a Minimal, Complete, and Verifiable example demonstrating your actual problem - emphasis on minimal
– Pete
Nov 21 '18 at 17:11
seems to be working fine in the snippet, please create a Minimal, Complete, and Verifiable example demonstrating your actual problem - emphasis on minimal
– Pete
Nov 21 '18 at 17:11
I would use
position:absolute if you know you always want it in a certain location as relative still reserves space in the normal flow of the document for where the element originally was.– Scott Marcus
Nov 21 '18 at 17:14
I would use
position:absolute if you know you always want it in a certain location as relative still reserves space in the normal flow of the document for where the element originally was.– Scott Marcus
Nov 21 '18 at 17:14
add a comment |
1 Answer
1
active
oldest
votes
0
I would revise the inner container that contains both the name and the content
Make the container not align things in the middle
.intro .inner {
vertical-align: initial;
}
Use margin to push the header and content into correct position
.name {
margin-bottom: 5em;
margin-left: 5%;
margin-top: 5%;
}
Hopefully that is closer to your desired layout.
answered Nov 21 '18 at 17:22
jeanpaulxiaojeanpaulxiao
1635
1
Thanks . your suggestions worked . can where you learnt stuff like that
– Ross Linton
Nov 21 '18 at 17:40
No secrets, just experience. Do a lot of web design and you'll get the hang of it
– jeanpaulxiao
Nov 21 '18 at 17:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53417262%2fcss-positioning-positioning-issues%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I would revise the inner container that contains both the name and the content
Make the container not align things in the middle
.intro .inner {
vertical-align: initial;
}
Use margin to push the header and content into correct position
.name {
margin-bottom: 5em;
margin-left: 5%;
margin-top: 5%;
}
Hopefully that is closer to your desired layout.
answered Nov 21 '18 at 17:22
jeanpaulxiaojeanpaulxiao
1635
1
Thanks . your suggestions worked . can where you learnt stuff like that
– Ross Linton
Nov 21 '18 at 17:40
No secrets, just experience. Do a lot of web design and you'll get the hang of it
– jeanpaulxiao
Nov 21 '18 at 17:43
add a comment |
0
I would revise the inner container that contains both the name and the content
Make the container not align things in the middle
.intro .inner {
vertical-align: initial;
}
Use margin to push the header and content into correct position
.name {
margin-bottom: 5em;
margin-left: 5%;
margin-top: 5%;
}
Hopefully that is closer to your desired layout.
answered Nov 21 '18 at 17:22
jeanpaulxiaojeanpaulxiao
1635
1
Thanks . your suggestions worked . can where you learnt stuff like that
– Ross Linton
Nov 21 '18 at 17:40
No secrets, just experience. Do a lot of web design and you'll get the hang of it
– jeanpaulxiao
Nov 21 '18 at 17:43
add a comment |
0
0
0
I would revise the inner container that contains both the name and the content
Make the container not align things in the middle
.intro .inner {
vertical-align: initial;
}
Use margin to push the header and content into correct position
.name {
margin-bottom: 5em;
margin-left: 5%;
margin-top: 5%;
}
Hopefully that is closer to your desired layout.
answered Nov 21 '18 at 17:22
jeanpaulxiaojeanpaulxiao
1635
I would revise the inner container that contains both the name and the content
Make the container not align things in the middle
.intro .inner {
vertical-align: initial;
}
Use margin to push the header and content into correct position
.name {
margin-bottom: 5em;
margin-left: 5%;
margin-top: 5%;
}
Hopefully that is closer to your desired layout.
answered Nov 21 '18 at 17:22
jeanpaulxiaojeanpaulxiao
1635
answered Nov 21 '18 at 17:22
jeanpaulxiaojeanpaulxiao
1635
answered Nov 21 '18 at 17:22
jeanpaulxiaojeanpaulxiao
1635
answered Nov 21 '18 at 17:22
jeanpaulxiaojeanpaulxiao
1635
1635
1
Thanks . your suggestions worked . can where you learnt stuff like that
– Ross Linton
Nov 21 '18 at 17:40
No secrets, just experience. Do a lot of web design and you'll get the hang of it
– jeanpaulxiao
Nov 21 '18 at 17:43
add a comment |
1
Thanks . your suggestions worked . can where you learnt stuff like that
– Ross Linton
Nov 21 '18 at 17:40
No secrets, just experience. Do a lot of web design and you'll get the hang of it
– jeanpaulxiao
Nov 21 '18 at 17:43
1
1
Thanks . your suggestions worked . can where you learnt stuff like that
– Ross Linton
Nov 21 '18 at 17:40
Thanks . your suggestions worked . can where you learnt stuff like that
– Ross Linton
Nov 21 '18 at 17:40
No secrets, just experience. Do a lot of web design and you'll get the hang of it
– jeanpaulxiao
Nov 21 '18 at 17:43
No secrets, just experience. Do a lot of web design and you'll get the hang of it
– jeanpaulxiao
Nov 21 '18 at 17:43
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53417262%2fcss-positioning-positioning-issues%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
seems to be working fine in the snippet, please create a Minimal, Complete, and Verifiable example demonstrating your actual problem - emphasis on minimal
– Pete
Nov 21 '18 at 17:11
I would use
position:absoluteif you know you always want it in a certain location asrelativestill reserves space in the normal flow of the document for where the element originally was.– Scott Marcus
Nov 21 '18 at 17:14