Adding position: fixed; to the navbar breaks margin-left: auto; for the navbar menu icon:
/* Resets */
:root {
--pblack: #1E293B;
--pyellow: #FFE934;
--pwhite: white;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--pblack);
color: var(--pwhite);
font-family: raleway;
}
a {
color: white;
text-decoration: none;
}
/* Resets end */
/* Styling starts */
.logo {
width: 32px;
margin-right: auto;
}
.logo-type {
display: none;
}
.container {
margin: 1rem;
display: flex;
flex-direction: column;
position: relative;
height: 90vh;
}
/* .nav-holder { position: fixed;
} */
.navbar {
position: fixed;
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
.nav-menu {
position: relative;
background: var(--pyellow);
width: 1.5rem;
height: 2px;
margin-left: auto;
}
.nav-menu::before {
content: " ";
position: absolute;
top: -7px;
right: 0;
background: var(--pyellow);
width: .5rem;
height: 2px;
}
.nav-menu::after {
content: " ";
position: absolute;
top: 7px;
right: 0;
background: var(--pyellow);
width: 1rem;
height: 2px;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
text-align: center;
}
.greeting {
font-size: 5rem;
margin-bottom: 0;
}
.hero-name {
font-size: 1.5rem;
}
.hero-anim {
position: relative;
margin: 6rem;
/* border: 2px solid red; */
width: 60%;
/* height: 100px; */
}
.h-love {
position: absolute;
top: 0;
left: 0;
}
.x-anim {
position: absolute;
top: 0;
right: 0;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(45deg);
}
.x-anim::after {
content: "";
display: inline-block;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(90deg);
}
.h-creating {
position: absolute;
top: 20px;
left: 20px;
font-size: 2rem;
margin: 0;
color: var(--pyellow);
}
.h-amazing {
position: absolute;
top: 65px;
left: 45px;
}
.dash-anim {
position: absolute;
top: 75px;
left: 0px;
width: 1.5rem;
height: 2px;
background: var(--pyellow);
}
.h-details {
margin-left: 3rem;
margin-right: 3rem;
margin-top: 10rem;
}
.know-more-btn {
position: relative;
border: 1px solid var(--pyellow);
border-radius: 50px;
padding: .5rem 2.5rem .5rem 1rem;
width: max-content;
display: flex;
align-items: center;
}
.btn-arrow {
position: absolute;
right: 2px;
font-size: 2rem;
}
.sect2 {
background-color: #FFE934;
width: 100%;
height: 100vh;
}
<body>
<div class="nav-holder">
</div>
<div class="container">
<nav class="navbar">
<img src="/img/Mitcho Icon black yellow.png" alt="logo" class="logo"> <span class="logo-type">Mitcho</span>
<div class="nav-menu"></div>
</nav>
<main class="main-con">
<div class="hero">
<h1 class="greeting">Hello!</h1>
<span class="hero-name">
I'm Mitchell Orutu,
</span>
<div class="hero-anim">
<span class="h-love">I Love</span>
<div class="x-anim"></div>
<span class="h-creating">Creating</span>
<div class="dash-anim"></div>
<span class="h-amazing">Amazing Experiences</span>
</div>
<p class="h-details">A multidisciplinary designer and frontend developer. I'm obsessed with creating amazing experiences and have fun while doing it.</p>
<a href="#" class="know-more-btn">
<span class="know-more-text">Know More</span>
<i class='bx bxs-chevron-right-circle btn-arrow' style='color:#ffffff'></i>
</a>
</div>
1 preferred solution
You need only add right:0 and width: 100%; to your .navbar class.
.navbar {
position: fixed;
right:0;
width:100%;
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
/* Resets */
:root {
--pblack: #1E293B;
--pyellow: #FFE934;
--pwhite: white;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--pblack);
color: var(--pwhite);
font-family: raleway;
}
a {
color: white;
text-decoration: none;
}
/* Resets end */
/* Styling starts */
.logo {
width: 32px;
margin-right: auto;
}
.logo-type {
display: none;
}
.container {
margin: 1rem;
display: flex;
flex-direction: column;
position: relative;
height: 90vh;
}
/* .nav-holder { position: fixed;
} */
.navbar {
position: fixed;
right:0;
width:100%;
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
.nav-menu {
position: relative;
background: var(--pyellow);
width: 1.5rem;
height: 2px;
margin-left: auto;
}
.nav-menu::before {
content: " ";
position: absolute;
top: -7px;
right: 0;
background: var(--pyellow);
width: .5rem;
height: 2px;
}
.nav-menu::after {
content: " ";
position: absolute;
top: 7px;
right: 0;
background: var(--pyellow);
width: 1rem;
height: 2px;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
text-align: center;
}
.greeting {
font-size: 5rem;
margin-bottom: 0;
}
.hero-name {
font-size: 1.5rem;
}
.hero-anim {
position: relative;
margin: 6rem;
/* border: 2px solid red; */
width: 60%;
/* height: 100px; */
}
.h-love {
position: absolute;
top: 0;
left: 0;
}
.x-anim {
position: absolute;
top: 0;
right: 0;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(45deg);
}
.x-anim::after {
content: "";
display: inline-block;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(90deg);
}
.h-creating {
position: absolute;
top: 20px;
left: 20px;
font-size: 2rem;
margin: 0;
color: var(--pyellow);
}
.h-amazing {
position: absolute;
top: 65px;
left: 45px;
}
.dash-anim {
position: absolute;
top: 75px;
left: 0px;
width: 1.5rem;
height: 2px;
background: var(--pyellow);
}
.h-details {
margin-left: 3rem;
margin-right: 3rem;
margin-top: 10rem;
}
.know-more-btn {
position: relative;
border: 1px solid var(--pyellow);
border-radius: 50px;
padding: .5rem 2.5rem .5rem 1rem;
width: max-content;
display: flex;
align-items: center;
}
.btn-arrow {
position: absolute;
right: 2px;
font-size: 2rem;
}
.sect2 {
background-color: #FFE934;
width: 100%;
height: 100vh;
}
<body>
<div class="nav-holder">
</div>
<div class="container">
<nav class="navbar">
<img src="/img/Mitcho Icon black yellow.png" alt="logo" class="logo"> <span class="logo-type">Mitcho</span>
<div class="nav-menu"></div>
</nav>
<main class="main-con">
<div class="hero">
<h1 class="greeting">Hello!</h1>
<span class="hero-name">
I'm Mitchell Orutu,
</span>
<div class="hero-anim">
<span class="h-love">I Love</span>
<div class="x-anim"></div>
<span class="h-creating">Creating</span>
<div class="dash-anim"></div>
<span class="h-amazing">Amazing Experiences</span>
</div>
<p class="h-details">A multidisciplinary designer and frontend developer. I'm obsessed with creating amazing experiences and have fun while doing it.</p>
<a href="#" class="know-more-btn">
<span class="know-more-text">Know More</span>
<i class='bx bxs-chevron-right-circle btn-arrow' style='color:#ffffff'></i>
</a>
</div>
2 solution
I wrap the nav tag with a div and assign this div a width and padding. Then i remove the position:fixed from the nav element.
/* Resets */
:root {
--pblack: #1E293B;
--pyellow: #FFE934;
--pwhite: white;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--pblack);
color: var(--pwhite);
font-family: raleway;
}
a {
color: white;
text-decoration: none;
}
/* Resets end */
/* Styling starts */
.logo {
width: 32px;
margin-right: auto;
}
.logo-type {
display: none;
}
.container {
margin: 1rem;
display: flex;
flex-direction: column;
position: relative;
height: 90vh;
}
/* .nav-holder { position: fixed;
} */
.fixed {
position: fixed;
width:100%;
padding:0px 30px 0px 0px;
}
.navbar {
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
.nav-menu {
position: relative;
background: var(--pyellow);
width: 1.5rem;
height: 2px;
margin-left: auto;
}
.nav-menu::before {
content: " ";
position: absolute;
top: -7px;
right: 0;
background: var(--pyellow);
width: .5rem;
height: 2px;
}
.nav-menu::after {
content: " ";
position: absolute;
top: 7px;
right: 0;
background: var(--pyellow);
width: 1rem;
height: 2px;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
text-align: center;
}
.greeting {
font-size: 5rem;
margin-bottom: 0;
}
.hero-name {
font-size: 1.5rem;
}
.hero-anim {
position: relative;
margin: 6rem;
/* border: 2px solid red; */
width: 60%;
/* height: 100px; */
}
.h-love {
position: absolute;
top: 0;
left: 0;
}
.x-anim {
position: absolute;
top: 0;
right: 0;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(45deg);
}
.x-anim::after {
content: "";
display: inline-block;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(90deg);
}
.h-creating {
position: absolute;
top: 20px;
left: 20px;
font-size: 2rem;
margin: 0;
color: var(--pyellow);
}
.h-amazing {
position: absolute;
top: 65px;
left: 45px;
}
.dash-anim {
position: absolute;
top: 75px;
left: 0px;
width: 1.5rem;
height: 2px;
background: var(--pyellow);
}
.h-details {
margin-left: 3rem;
margin-right: 3rem;
margin-top: 10rem;
}
.know-more-btn {
position: relative;
border: 1px solid var(--pyellow);
border-radius: 50px;
padding: .5rem 2.5rem .5rem 1rem;
width: max-content;
display: flex;
align-items: center;
}
.btn-arrow {
position: absolute;
right: 2px;
font-size: 2rem;
}
.sect2 {
background-color: #FFE934;
width: 100%;
height: 100vh;
}
<body>
<div class="nav-holder">
</div>
<div class="container">
<div class="fixed">
<nav class="navbar">
<img src="/img/Mitcho Icon black yellow.png" alt="logo" class="logo"> <span class="logo-type">Mitcho</span>
<div class="nav-menu"></div>
</nav>
</div>
<main class="main-con">
<div class="hero">
<h1 class="greeting">Hello!</h1>
<span class="hero-name">
I'm Mitchell Orutu,
</span>
<div class="hero-anim">
<span class="h-love">I Love</span>
<div class="x-anim"></div>
<span class="h-creating">Creating</span>
<div class="dash-anim"></div>
<span class="h-amazing">Amazing Experiences</span>
</div>
<p class="h-details">A multidisciplinary designer and frontend developer. I'm obsessed with creating amazing experiences and have fun while doing it.</p>
<a href="#" class="know-more-btn">
<span class="know-more-text">Know More</span>
<i class='bx bxs-chevron-right-circle btn-arrow' style='color:#ffffff'></i>
</a>
</div>
Can fix it by slapping on a width: 100%:
/* Resets */
:root {
--pblack: #1E293B;
--pyellow: #FFE934;
--pwhite: white;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--pblack);
color: var(--pwhite);
font-family: raleway;
}
a {
color: white;
text-decoration: none;
}
/* Resets end */
/* Styling starts */
.logo {
width: 32px;
margin-right: auto;
}
.logo-type {
display: none;
}
.container {
margin: 1rem;
display: flex;
flex-direction: column;
position: relative;
height: 90vh;
}
/* .nav-holder { position: fixed;
} */
.navbar {
position: fixed;
width: 100%;
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
.nav-menu {
position: relative;
background: var(--pyellow);
width: 1.5rem;
height: 2px;
margin-left: auto;
}
.nav-menu::before {
content: " ";
position: absolute;
top: -7px;
right: 0;
background: var(--pyellow);
width: .5rem;
height: 2px;
}
.nav-menu::after {
content: " ";
position: absolute;
top: 7px;
right: 0;
background: var(--pyellow);
width: 1rem;
height: 2px;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
text-align: center;
}
.greeting {
font-size: 5rem;
margin-bottom: 0;
}
.hero-name {
font-size: 1.5rem;
}
.hero-anim {
position: relative;
margin: 6rem;
/* border: 2px solid red; */
width: 60%;
/* height: 100px; */
}
.h-love {
position: absolute;
top: 0;
left: 0;
}
.x-anim {
position: absolute;
top: 0;
right: 0;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(45deg);
}
.x-anim::after {
content: "";
display: inline-block;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(90deg);
}
.h-creating {
position: absolute;
top: 20px;
left: 20px;
font-size: 2rem;
margin: 0;
color: var(--pyellow);
}
.h-amazing {
position: absolute;
top: 65px;
left: 45px;
}
.dash-anim {
position: absolute;
top: 75px;
left: 0px;
width: 1.5rem;
height: 2px;
background: var(--pyellow);
}
.h-details {
margin-left: 3rem;
margin-right: 3rem;
margin-top: 10rem;
}
.know-more-btn {
position: relative;
border: 1px solid var(--pyellow);
border-radius: 50px;
padding: .5rem 2.5rem .5rem 1rem;
width: max-content;
display: flex;
align-items: center;
}
.btn-arrow {
position: absolute;
right: 2px;
font-size: 2rem;
}
.sect2 {
background-color: #FFE934;
width: 100%;
height: 100vh;
}
<body>
<div class="nav-holder">
</div>
<div class="container">
<nav class="navbar">
<img src="/img/Mitcho Icon black yellow.png" alt="logo" class="logo"> <span class="logo-type">Mitcho</span>
<div class="nav-menu"></div>
</nav>
<main class="main-con">
<div class="hero">
<h1 class="greeting">Hello!</h1>
<span class="hero-name">
I'm Mitchell Orutu,
</span>
<div class="hero-anim">
<span class="h-love">I Love</span>
<div class="x-anim"></div>
<span class="h-creating">Creating</span>
<div class="dash-anim"></div>
<span class="h-amazing">Amazing Experiences</span>
</div>
<p class="h-details">A multidisciplinary designer and frontend developer. I'm obsessed with creating amazing experiences and have fun while doing it.</p>
<a href="#" class="know-more-btn">
<span class="know-more-text">Know More</span>
<i class='bx bxs-chevron-right-circle btn-arrow' style='color:#ffffff'></i>
</a>
</div>
Related
I am not being able to use the hover class. Maybe it has got to do something with the absolute positioning done for creating the wave. Any help would be appreciated.
#wave {
position: relative;
background-color: #EB4C47;
width: 100%;
height: 200px;
z-index: -1;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
background-color: white;
width: 55%;
height: 200px;
top: 150px;
left: 50%;
z-index: -1;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
background: #EB4C47;
width: 65%;
height: 210px;
top: 55px;
z-index: -1;
}
img {
height: 85px;
width: 80px;
display: inline-block;
}
#nav-bar {
margin-top: -150px;
width: 50%;
height: 80px;
display: flex;
flex-direction: row;
margin-left: 50%;
font-size: 20px;
justify-content: space-around;
align-items: center;
font-family: Courier New;
}
#box {
/*background-color:rgb(104,137,117,0.7);*/
border: 2px black solid;
padding-top: 10px;
border-radius: 2px;
border-color: trparent;
width: 100px;
height: 40px;
text-align: center;
font-weight: bold;
}
#box:hover {
background-color: black;
color: white;
}
#header-container {
display: flex;
flex-direction: row;
padding-top: 22px;
justify-content: flex-start;
width: 40%;
height: 140px;
}
.head-box {
padding: 10px;
background-color: linear-gradient();
width: 100px;
height: 100px;
text-align: center;
font-size: 25px;
font-family: Courier New;
font-weight: bold;
}
#title {
border: 2px black solid;
border-radius: 4px;
width: 140px;
height: 70px;
}
<div id="wave">
<header id=header>
<div id="header-container">
<div id="header-img" class="head-box"><img src="https://previews.123rf.com/images/putracetol/putracetol1808/putracetol180800251/106705685-cloth-logo-icon-design.jpg" alt="cloth-logo"></div>
<div class="head-box" id="title">10X Clothing</div>
</div>
<div id="nav-bar">
<div id="box">Features</div>
<div id="box">Quality</div>
<div id="box">Pricing</div>
</div>
</header>
</div>
You are using the same id for multiple elements, id must be unique. You should change box to class and remove z-index from #wave, you gave it -1 so all the child elements including box will inherit it and box will never get the hover event.
#wave {
position: relative;
background-color: #EB4C47;
width: 100%;
height: 200px;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
background-color: white;
width: 55%;
height: 200px;
top: 150px;
left: 50%;
z-index: -1;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
background: #EB4C47;
width: 65%;
height: 210px;
top: 55px;
z-index: -1;
}
img {
height: 85px;
width: 80px;
display: inline-block;
}
#nav-bar {
margin-top: -150px;
width: 50%;
height: 80px;
display: flex;
flex-direction: row;
margin-left: 50%;
font-size: 20px;
justify-content: space-around;
align-items: center;
font-family: Courier New;
}
.box {
/*background-color:rgb(104,137,117,0.7);*/
border: 2px black solid;
padding-top: 10px;
border-radius: 2px;
border-color: trparent;
width: 100px;
height: 40px;
text-align: center;
font-weight: bold;
}
.box:hover {
background-color: black;
color: white;
}
#header-container {
display: flex;
flex-direction: row;
padding-top: 22px;
justify-content: flex-start;
width: 40%;
height: 140px;
}
.head-box {
padding: 10px;
background-color: linear-gradient();
width: 100px;
height: 100px;
text-align: center;
font-size: 25px;
font-family: Courier New;
font-weight: bold;
}
#title {
border: 2px black solid;
border-radius: 4px;
width: 140px;
height: 70px;
}
<div id="wave">
<header id=header>
<div id="header-container">
<div id="header-img" class="head-box"><img src="https://previews.123rf.com/images/putracetol/putracetol1808/putracetol180800251/106705685-cloth-logo-icon-design.jpg" alt="cloth-logo"></div>
<div class="head-box" id="title">10X Clothing</div>
</div>
<div id="nav-bar">
<div class="box">Features</div>
<div class="box">Quality</div>
<div class="box">Pricing</div>
</div>
</header>
</div>
I try to make a responsive website but I tend to believe because I'm using positiong + right and left it makes me some serious problems. I need to do that without grid.
That's what happens when I make the window a little bit smaller, some of it go left: https://i.imagesup.co/images2/cdf13e4d1939b4041c55ab3b59799762e3d8f32d.png.
And when it gets to the media query it's definitely not responsive. Every change in the window size under 786px seem differently.
https://i.imagesup.co/images2/007f47c1df59bdf745a531d55c9c8965270508aa.png
Only the what inside the first white box + what's inside + what above is really responsive.
CSS
body {
margin: auto 0;
direction: rtl;
background-color:#F0F0F0;
}
.img-center {
display: block;
margin: 0 auto;
}
#img-below {
border: 5px solid white;
border-radius: 100%;
height: 8%;
width: 8%;
position: relative;
bottom: 80px;
}
h1 {
color:#0099ff;
text-align: center;
position: relative;
bottom: 120px;
font-size: 50px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
h2 {
color: gray;
font-size: 30px;
text-align: center;
font-size: 30px;
position: relative;
bottom: 157px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.icons {
height: 50px;
width: 50px;
border: #0099ff 5px solid;
padding: 5px;
border-radius: 100%;;
margin-right: 15px;
}
#DivIcons {
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 170px;
}
p {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 15px;
}
article {
width: 160px;
margin-bottom: 5px;
position: relative;
bottom: 455px;
right: 397px;
}
h3 {
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.square {
border:5px solid #0099ff;
height: 80px;
width: 80px;
margin-left: 20px;
border-radius: 30%;
}
.circle {
border:5px solid #0099ff;
border-radius: 100%;
height: 80px;
width: 80px;
margin-left: 20px;
}
.Pservice {
color: #0099ff;
text-align: center;
position: relative;
top: 12px;
}
#service {
display: flex;
flex-direction: row;
position: relative;
bottom: 1710px;
right: 440px;
}
#position3 {
position: relative;
bottom: 70px;
right: 157px;
}
#form {
position: relative;
bottom: 1830px;
right: 593px;
}
input {
border-radius: 6px;
}
input:nth-child(1)
{
width: 250px;
height: 20px;
margin-left: 10px;
}
input:nth-child(2)
{
width: 250px;
height: 20px;
}
#textarea {
width: 520px;
height: 250px;
margin-bottom: 10px;
}
#submit {
background-color: #0099ff;
color: white;
height: 50px;
width: 120px;
position: relative;
right: 200px;
bottom: 10px;
cursor: pointer;
}
#FirstWhite{
width: 750px;
height: 320px;
background-color: white;
margin: 0 auto;
position: relative;
bottom: 460px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 180px;
height: 650px;
background-color: white;
position: relative;
bottom: 1113px;
right: 385px;
z-index: -1;
}
#ServiceWhite {
width: 555px;
height: 165px;
background-color: white;
z-index: -1;
position: relative;
bottom: 1855px;
right: 580px;
}
#FooterWhite {
width: 555px;
height: 463px;
background-color: white;
z-index: -1;
position: relative;
bottom: 2292px;
right: 580px;
}
#media screen and (max-width:768px)
{
#img-main {
width: 100vw;
height: 150px;
}
#img-below {
width: 30vw;
height: 30vh;
margin-bottom: 10px;
}
h1, h2 {
font-size: 7vw;
position: relative;
bottom: 100px;
margin: 0 auto;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
#flex-mobile1 {
display: flex;
flex-direction: row;
position: relative;
top: 70px;
right: 120px;
margin-top: 10px;
}
#flex-mobile2 {
display: flex;
flex-direction: row;
position: relative;
top: 150px;
left: 133px;
margin-top: 10px;
}
#FirstWhite{
width: 100vw;
height: 500px;
background-color: white;
display: block;
margin: 0 auto;
position: relative;
bottom: 490px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 100vw;
height: 300px;
background-color: white;
position: relative;
right: 0px;
bottom: 588px;
}
article {
position: relative;
right: 0px;
width: 85vw;
margin-right: 10px;
height: 100px;
}
#ServiceWhite
{
position: relative;
bottom: 650px;
right: 0px;
width: 100vw;
}
#service
{
position: relative;
bottom: 500px;
right: -120px;
}
#FooterWhite
{
position: relative;
bottom: 1080px;
right: 0px;
width: 100vw;
}
#form {
position: relative;
right: 0px;
bottom: 620px;
margin-right: 15px;
}
#inside-form {
position: relative;
right: 40px;
}
}
Link to Codepen
Hope this code helps you to build on top it. As of now the media query is set for 600px, you may change it to your desired break point.
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
body {
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: auto;
}
header {
position: relative;
}
.header-img {
width: 100%;
}
.rounded-img {
position: absolute;
height: 140px;
width: 140px;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
left: 50%;
transform: translate(-50%);
bottom: -60px;
}
.rounded-img img {
width: 100%;
height: 100%;
}
h1,
h2 {
font-family: "M PLUS Rounded 1c", sans-serif;
text-align: center;
}
.titles {
background-color: #fff;
padding-bottom: 40px;
}
h1 {
color: #0099ff;
font-size: 5rem;
padding: 60px 20px 0 20px;
}
h2 {
color: #808080;
font-size: 2.4rem;
}
.icons {
display: flex;
justify-content: center;
margin-top: 30px;
}
.icons a {
width: 40px;
height: 40px;
overflow: hidden;
margin: 0 15px;
border: 5px solid #0099ff;
padding: 10px;
border-radius: 50%;
}
.icons a img {
width: 100%;
height: 100%;
}
.content-section {
display: flex;
margin: 20px 0;
}
.article-right,
.article-left {
font-size: 1.6rem;
font-family: "M PLUS Rounded 1c", sans-serif;
}
.article-right {
order: 2;
width: 180px;
margin-left: auto;
text-align: right;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.article-left {
display: flex;
flex-direction: column;
flex: 1;
margin-right: 20px;
}
.article-left div {
text-align: right;
width: 100%;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.article-left .shapes-section {
margin-bottom: 30px;
}
.article-left .form-section {
margin-bottom: 50px;
}
#media screen and (max-width: 600px) {
.icons {
flex-wrap: wrap;
margin-top: 10px;
}
.icons a {
margin-top: 20px;
}
.content-section {
flex-direction: column;
}
.article-right,
.article-left,
.article-left .shapes-section,
.article-left .form-section {
text-align: center;
}
.article-left {
order: 2;
margin-right: 0;
}
.article-right {
margin-right: auto;
margin-bottom: 30px;
width: 100%;
}
}
<div class="container">
<header>
<img class="header-img" src="https://www.westsidemovement.com/wp-content/uploads/2018/03/Lets-Go-Scripture-800x200.jpg" alt="" />
<div class="rounded-img">
<img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frainerzitelmann%2Ffiles%2F2019%2F06%2FE0MG76-e1560965378507-1200x1270.jpg" alt="" />
</div>
</header>
<main>
<section class="titles">
<h1>אלברט איינשטיין</h1>
<h2>פיזיקאי תיאורטי</h2>
<div class="icons">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-logos-6/512/10-waze-512.png" alt="" />
</a>
<a href="#">
<img src="https://thebrightwork.com/wp-content/uploads/2014/04/facebook-icon-blue.png" alt="" />
</a>
<a href="#">
<img src="https://cdn2.iconfinder.com/data/icons/basic-thin-line-color/21/20-512.png" alt="" />
</a>
<a href="#">
<img src="https://www.trzcacak.rs/myfile/full/311-3111799_social-media-computer-icons-logo-blue-area-png.png" alt="" />
</a>
<a href="#">
<img src="https://img.icons8.com/ultraviolet/452/whatsapp.png" alt="" />
</a>
<a href="#">
<img src="https://cdn2.iconfinder.com/data/icons/thin-line-color-1/21/13-512.png" alt="" />
</a>
</div>
</section>
<section class="content-section">
<article class="article-right">
your right content
</article>
<article class="article-left">
<div class="shapes-section">
shapes content here
</div>
<div class="form-section">
form here
</div>
</article>
</section>
</main>
</div>
Ever since I added "position absoulte" to my div ".container" in my code below, my CSS animate code zooms in from the bottom then hiccups and positions itself to the center.
How can I make my animate zoom just zoom in right to the center without this hiccup where it goes down first then a second later it automatically moves to the center?
If I remove the position absolute from the .container div the animate zoom works just fine but it's not centered anymore vertically (just horizontally). The reason I used position absolute and left 0 and right 0 was to center it both ways.
Here is my code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
top: 50%;
left: 0;
right: 0;
position: absolute;
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
background-color: white;
border: 1px solid #007580;
height: 100%;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
D
</div>
<div class="R">
R
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<img height="37px" src="https://svgshare.com/i/5SR.svg">
</div>
<div class="ICONcart">
<img height="39px" src="https://svgshare.com/i/5SE.svg">
</div>
<div class="ICONworldlanguages">
<img height="34px" src="https://svgshare.com/i/5XW.svg">
</div>
<div class="ICONwhatsnew">
<img height="43px" src="https://svgshare.com/i/5aX.svg">
</div>
<header>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
Contact Privacy Terms Copyright About
</div>
</footer>
You are using position:absolute and the parent element is not set with relative so the form is not relative to the scaled container which is creating this issue. You need to set position:relative to the parent container and then adjust the centering:
.box {
...
position:relative; /*Added this*/
}
.container {
...
transform:translate(0,-50%); /*Added this*/
top: 50%;
...
}
Here is the full code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
transform:translate(0,-50%);
top: 50%;
left: 0;
right: 0;
position: absolute;
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
background-color: white;
border: 1px solid #007580;
height: 100%;
position:relative;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
D
</div>
<div class="R">
R
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<img height="37px" src="https://svgshare.com/i/5SR.svg">
</div>
<div class="ICONcart">
<img height="39px" src="https://svgshare.com/i/5SE.svg">
</div>
<div class="ICONworldlanguages">
<img height="34px" src="https://svgshare.com/i/5XW.svg">
</div>
<div class="ICONwhatsnew">
<img height="43px" src="https://svgshare.com/i/5aX.svg">
</div>
<header>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
Contact Privacy Terms Copyright About
</div>
</footer>
By the way it's better to consider another way than positioned element to center. You can do it with flex since you are already using it:
.box {
....
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Then remove everything related to positionning from .container.
Here is the full code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
background-color: white;
border: 1px solid #007580;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
D
</div>
<div class="R">
R
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<img height="37px" src="https://svgshare.com/i/5SR.svg">
</div>
<div class="ICONcart">
<img height="39px" src="https://svgshare.com/i/5SE.svg">
</div>
<div class="ICONworldlanguages">
<img height="34px" src="https://svgshare.com/i/5XW.svg">
</div>
<div class="ICONwhatsnew">
<img height="43px" src="https://svgshare.com/i/5aX.svg">
</div>
<header>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
Contact Privacy Terms Copyright About
</div>
</footer>
There's a few issues. In your .box styling you should add position: relative; this will force .container's absolute positioning to respect its parent, in this case .box's positioning and size. The second is the top: 50%; on .container. In certain scenarios that can seem to center the item but in others it does not. What you can do to center .container within .box is add transform: translate(0, -50%); which offsets top: 50% and centers the element. Same can be done horizontally with left: 50% and transform: translate(-50%, -50%);.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
top: 50%;
left: 0;
right: 0;
position: absolute;
transform: translate(0, -50%);
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
position: relative;
background-color: white;
border: 1px solid #007580;
height: 100%;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
D
</div>
<div class="R">
R
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<img height="37px" src="https://svgshare.com/i/5SR.svg">
</div>
<div class="ICONcart">
<img height="39px" src="https://svgshare.com/i/5SE.svg">
</div>
<div class="ICONworldlanguages">
<img height="34px" src="https://svgshare.com/i/5XW.svg">
</div>
<div class="ICONwhatsnew">
<img height="43px" src="https://svgshare.com/i/5aX.svg">
</div>
<header>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
Contact Privacy Terms Copyright About
</div>
</footer>
Whenever i try to move separator up or down, the element h1 above .separator class starts moving along with the separator. Is there any easy way to get rid of this issue?
Below is my HTML/CSS Code
.banner img {
width: 100%;
height: 100%;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
margin: 0 auto;
width: 50%;
background-color: #15a4fa;
height: 2px;
margin-bottom: 10.4%;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>
Just because you are using .OverLayText to vertically-align:middle;.
.banner img {
width: 100%;
height: 100%;
position: relative;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
vertically-align:middle;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
/*margin: 0 auto;*/
width: 50%;
background-color: #15a4fa;
height: 2px;
/*top: 80%;*/
position: relative;
margin: auto;
text-align: center;
display: block;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>
I want to create this homepage for my site which only accepts add-ons of html/css without retouching any other rule.
Only achieved making the blocks themselves but no clue on how to put images behind the buttons,center everything up and make it responsive...
Any tip?
Homepage intended
page link: www.lluisballbe.smugmug.com
Code used already is here:
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
h1 {
margin: 0;
}
a {
display: inline-block;
}
#business-top {
display: flex;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
background:turquoise;
}
#business-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
#logo-separator {
text-align: center;
}
.separator {
display: block;
position: relative;
padding: 0;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
flex: 0;
border-top: 1px solid #ff7600;
border-bottom: 1px solid #ff7600;
}
#logo {
margin: auto;
max-width: 150px;
display: inline-block;
overflow: hidden;
margin: -75px;
position: absolute;
z-index:1;
}
#photography-bottom {
display: flex;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
background:gray;
}
#photography-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
h1 {
color: #ff7600;
text-align: center;
font-size: 1.4em;
vertical-align: middle;
line-height: 2.2em
}
#business-top,
#photography-bottom {
pointer-events: none;
position: relative;
transition: 1s;
min-height: 200px;
}
#business-top a,
#photography-bottom a {
pointer-events: auto;
}
#business-top:hover,
#photography-bottom:hover {
flex: 3;
}
#business-top a:hover:before,
#photography-bottom a:hover:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div id="business-top">
<a href="www.lluisballbe.smugmug.com">
<div id="business-button">
<h1>BUSINESS</h1>
</div>
</a>
</div>
<div id="logo-separator">
<div class="separator"></div>
<div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>
<div id="photography-bottom">
<a href="www.lluisballbe.smugmug.com">
<div id="photography-button">
<h1>PHOTOGRAPHY</h1>
</div>
</a>
</div>
Images to be used (each should cover 50%, can resize them and change pixel size if needed):
https://dl.dropboxusercontent.com/u/54898895/Public.rar
[Top Image][3]
[Bottom image][4]
I'd do it this way:
Add height: 50vh; to #business-top and #photography-bottom for both outter container.
Give your containers your custom background-images: background-image: url('url to image');
Make sure the images have background-size: cover;
Add your #logo-separator with position:absolute;
and top: calc( 50% - (height_of_sperator)px;