I've made a diagonal scroll page but when I applied the plugin to make it scroll this way the navbar was not fixed anymore, plus my sections aren't centered, I mean they're displayed vertically instead of diagonally, I don't know how to display them that way, any solutions? My top priority is the navbar, but if I can fix both things in one question, even better. Thanks SO community!
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
body {
background-color: #900c3f;
font-family: Montserrat;
height: 100vh;
color: #F5F5F5;
overflow: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
nav {
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}
.nav-links li a {
display: inline-block;
padding-bottom: 4px;
background-image: linear-gradient(#F5F5F5, #F5F5F5);
background-position: 0 100%;
/*OR bottom left*/
background-size: 0% 5px;
border-radius: 5px;
background-repeat: no-repeat;
transition: background-size 0.3s, background-position 0s 0.3s;
/*change after the size immediately*/
}
.nav-links li a:hover {
background-position: 100% 100%;
/*OR bottom right*/
background-size: 100% 5px;
border-radius: 5px;
}
/*.nav-links li a{
display: inline-block;
}
.nav-links li a:after {
content: '';
width: 0;
height: 5px;
display: block;
background: #F5F5F5;
transition: 300ms;
border-radius: 5px;
} */
.nav-links li a:hover:after {
width: 100%;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}
.nav-links li {
list-style: none;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 17vh;
background-color: #ff5733;
display: flex;
flex-direction: column;
font-size: 80%;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.nav-active {
transform: translateX(0%);
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
section h1 {
font-size: 4rem;
justify-content: center;
align-items: center;
}
section p {
font-size: 1.5rem;
justify-content: center;
align-items: center;
}
/* Section Images */
section#home {
background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
}
section#portfolio {
background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
}
section#submit {
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
}
section#contact {
background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;
}
section#about {
background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
}
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght#900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<!-- <link rel="stylesheet" href="css/styles.css">-->
<body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
<header>
<nav>
<img src="Graphic logo.png" alt="Subworld Productions">
<ul class="nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section id="home">
<h1>HOME PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="portfolio">
<h1>PORTFOLIO PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="submit">
<h1>SUBMIT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h1>CONTACT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="about">
<h1>ABOUT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</header>
<!-- <script src="javascript/app.js"></script>
<script src="skrollr.js"></script>-->
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js">
skrollr.init();
</script>
</body>
There were a few issues with your css. The first is that you had multiple declarations for nav link attributes. I grouped them and adjusted them (more later) I also tidied your css to put your css in order: nav links first then nav links li then nav links li a etc, because css is read in that order. You had display:flex; and position:absolute in one css class - these conflict, and i removed the absolute positioning.
What was really throwing out your ul however, making the links non-viewable, was the translateX - translating your links by 100% was moving your links out of sight. I commented this out. As-is (now) your links display, animate on hover, and scroll-to the appropriate section when clicked. One more note: you had two semi-colons after the urls in your sections. I corrected this both in your posted code and snippet code.
Hope this helps
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
body {
background-color: #900c3f;
font-family: Montserrat;
height: 100vh;
color: #F5F5F5;
overflow: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
nav {
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
/* position: absolute;
right: 0px;*/
height: 10vh;
top: 17vh;
background-color: #ff5733;
flex-direction: row;
font-size: 80%;
align-items: center;
/*transform: translateX(100%);*/
transition: transform 0.5s ease-in;
}
.nav-links li {
list-style: none;
color: #ffffff;
}
.nav-links li a {
display: inline-block;
color: #ffffff;
}
.nav-links li a:after {
content: '';
width: 0;
height: 5px;
display: block;
background: #F5F5F5;
transition: 300ms;
border-radius: 5px;
}
.nav-links li a:hover:after {
width: 100%;
}
.nav-links li {
opacity: 1;
}
.burger {
display: block;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.nav-active {
transform: translateX(0%);
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
section h1 {
font-size: 4rem;
justify-content: center;
align-items: center;
}
section p {
font-size: 1.5rem;
justify-content: center;
align-items: center;
}
/* Section Images */
section#home {
background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
}
section#portfolio {
background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
}
section#submit {
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
}
section#contact {
background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;
}
section#about {
background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
}
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght#900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<!-- <link rel="stylesheet" href="css/styles.css">-->
<body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
<header>
<nav>
<img src="Graphic logo.png" alt="Subworld Productions">
<ul class="nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section id="home">
<h1>HOME PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="portfolio">
<h1>PORTFOLIO PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="submit">
<h1>SUBMIT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h1>CONTACT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="about">
<h1>ABOUT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</header>
<!-- <script src="javascript/app.js"></script>
<script src="skrollr.js"></script>-->
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js">
skrollr.init();
</script>
</body>
Related
I want realise this page
this is my work
the probleme is i can't superimpose the div who contain the text "LUCETTE" under the div who contain the picture
my code html:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.titre span {
text-align: center;
text-transform: uppercase;
font-size: 16rem;
font-weight: bolder;
font-family: 'playfair_displayitalic';
position: absolute;
bottom: 0;
z-index: -1;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied">
<h1 class="titre"> <span>lucette</span> </h1>
</div>
</main>
THANKS .
i'm tryng to superimpose the div who contain the image on top of the div who contain the text "LUCETTE".
but the text "LUCETTE" is on the top of my page .
Try this:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
padding-top: 100px;
height: 100vh;
display: flex;
justify-content: center;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.pied {
font-weight: bolder;
font-family: serif;
position: absolute;
width: 0px;
overflow: visible;
bottom: 35%;
left: 50%;
}
.pied h1 {
position: absolute;
text-align: center;
text-transform: uppercase;
font-size: 16rem;
transform: translate(-50%, 0);
font-family: 'playfair_displayitalic';
top: 0;
left: 50%;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied"><h1>lucette</h1></div>
</main>
Mind the fact that you might need to tweak the bottom attribute of .pied as I did not have that font.
Main issue in your code was that you didn't set position: absolute for the main container of the text. I did some tweaks to ensure that text is also centered etc.
Using absolute position removes items from the normal flow of the page, and can often lead to isolation and z-index mistakes.
I'm attaching a method using a grid layout to superimpose items. Grids are usually easier to debug.
Just to be clear absolute positions can be used, this is just an alternative.
section {
display: grid;
}
.behind {
height: 5rem;
width: 5rem;
background-color: red;
grid-area: 1 / 1;
}
.front {
height: 3rem;
width: 3rem;
background-color: blue;
/* Can also use grid-area */
grid-column: 1;
grid-row: 1;
}
<section>
<div class="behind"></div>
<div class="front"></div>
</section>
enter image description here
Now the result is better but the problem now i want move the bloc center ho contain the picture and the texte in the the middle on the page but i can 't
I'm sure this is relatively simple problem but after some fiddling I'm not finding much luck, will fix one thing then another problem arises. As you can see below (this is on desktop, mobile works perfect) the text boxes are way too big, leaving loads of white space below texts, some images are a good size, some are too big, the top one looks the best. The idea being the image spans across one side then the text box is the same height next to it.
Here is a picture of the mobile for reference
I wont link all the HTML and CSS, just the relevant stuff. Any advice is welcome and appreciated.
<html lang="en" dir="ltr">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;600&family=Poppins:wght#300;400;500;700&display=swap" rel="stylesheet">
<meta charset="utf-8" >
<meta name="description" content="Jordan Squres, mixed martial arts trainer, working out of Oxfordshire">
<meta name="keywords" content="MMA, martial arts, personal trainer, self defence, exercise">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="autor" content="Descisive Development">
<link rel="stylesheet" href="styles.css">
<title>Jordan Squires, Home</title>
</head>
<body >
<nav class="navbar">
Jordan Squires
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li class="navitem"> Home</li>
<li class="navitem"> About</li>
<li class="navitem"> Clients</li>
<li class="navitem"> Blog</li>
<li class="navitem"> Contact</li>
</ul>
</div>
</nav>
<section class="home-hero">
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio1.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container" id="even">
<div class="img-hero">
<img src="images/portfolio2.jpg" alt="">
</div>
<div class="info-hero">
<h1>Shotokan Karate</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio3.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jeet Kune Do</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container"id="even">
<div class="img-hero">
<img src="images/portfolio4.jpg" alt="">
</div>
<div class="info-hero">
<h1>Brazilian Jiu Jitsu</h1>
<h2>Purple Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio5.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
</body>
</html>
and the css
box-sizing: inherit;
margin: 0 auto;
padding: 0;
}
html{
font-size: 10px;
max-width: 1300px;
box-sizing: border-box;
}
body{
background: var(--white);
}
a{
color: var(--main-txt);
text-decoration: none;
}
:root{
--white: #F1FAEE;
--outline-color: #000000;
--bg-color: #1D3557;
--main-txt: #457B9D;
--alt-txt: #A8DADC;
--red: #E63946;
--ff: 'Montserrat', sans-serif;
--ff2: 'Poppins', sans-serif;
--fw-l: 300;
--fw-n: 400;
--fw-m: 600;
--fw-b: 700;
--fs-1: ;
--fs-2: ;
--fs-3: ;
--fs-p: ;
--shadow: 0px 7px 10px 0px rgba(0,0,0,.3);
}
/*global style container*/
.container{
max-width: 1360px;
}
/*Navbar styles*/
.navbar{
box-shadow: 0px 3px 3px -3px rgb(0, 0, 0);
width: 100%;
font-size: 1.8rem;
font-family: var(--ff2);
}
.navbar ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.navbar ul a{
display: block;
padding: 2rem;
text-align: center;
text-transform: uppercase;
font-weight: var(--fw-n)
}
.navbar ul a:hover{
background-color: var(--bg-color);
color: var(--white);
}
.navbar .logo{
float: left;
display: block;
font-size: 2rem;
padding: 1.5rem;
text-decoration: underline;
text-decoration-thickness: 0.2rem;
text-underline-offset: 0.5rem;
}
.navbar .menu{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.navbar .menu-icon{
padding: 2.8rem 2rem;
position: relative;
float: right;
cursor: pointer;
}
.navbar .menu-icon .nav-icon{
background: var(--bg-color);
display: block;
height: .2rem;
width: 1.8rem;
position: relative;
transition: background .2s ease-out;
}
.navbar .menu-icon .nav-icon:before{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: .5rem;
}
.navbar .menu-icon .nav-icon:after{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -.5rem;
}
.navbar .menu-btn{
display: none;
}
.navbar .menu-btn:checked ~ .menu{
max-height: 36rem;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon{
background: transparent;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:before{
transform: rotate(-45deg);
top: 0;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:after{
transform: rotate(45deg);
top: 0;
}
/*Homepage main section*/
.home-hero{
margin: 1rem auto;
}
.flex-container{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
}
.img-hero{
width: 90%;
margin-top: 2rem;
margin-bottom: 2rem;
padding-bottom: -3px;
}
.info-hero{
width: 90%;
font-family: var(--ff);
border: 1px solid var(--outline-color);
padding: 3rem;
background-color: var(--bg-color);
}
/*Image styles*/
.img-hero img{
max-width: 100%;
object-fit: contain;
max-height: 100%;
margin-bottom: -3px;
border: 1px solid var(--outline-color);
}
/*Info styles*/
.info-hero h1{
font-size: 3rem;
color: var(--white);
}
.info-hero h2{
font-size: 2rem;
font-style: italic;
color: var(--red);
}
.info-hero h1 h2{
font-family: var(--ff2);
}
.info-hero p{
font-size: 1.2rem;
text-align: justify;
color: var(--alt-txt);
}
/*Media for Navbar*/
#media (min-width: 760px) {
.navbar{
height: 6.7rem;
}
.navbar li{
float: left;
}
.navbar li a{
padding: 2rem 2.5rem;
}
.navbar .menu{
clear: none;
float: right;
max-height: none;
}
.navbar .menu-icon{
display: none;
}
.navbar .logo{
padding: 2rem;
}
.flex-container{
flex-direction: row;
margin: 2rem auto;
}
.img-hero{
width: 50%;
margin: inherit;
}
.info-hero{
width: 45%;
padding: 2rem;
}
#even{
flex-direction: row-reverse;
}
}
Here is a simple example I just wrote for you, you may adjust it according to your needs.
.flex-container {
display: flex;
margin-bottom: 1rem;
}
.img-hero, .info-hero {
max-width: 50%;
}
.img-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info-hero {
background: violet;
color: white;
}
.info-hero > * {
padding: 0.5rem 1rem;
}
<div class="flex-container">
<div class="img-hero">
<img src="https://picsum.photos/900/700" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="img-hero">
<img src="https://picsum.photos/800/600" alt="">
</div>
</div>
I want to upscale image on hover, but the problem is I can make it overlapse its own container with overflow: hidden only by making img absolute positioned, wherefore all article content 'thinks' that there is no image in container.
article {
background: #e8e8e8;
color: #484848;
overflow: hidden;
padding: 0.5rem;
margin: 2rem auto 0 auto;
width: 60vw;
}
section {
float: left;
margin-right: 0.5rem;
}
p {
margin: 0;
}
img {
transition: 0.2s linear;
object-fit: cover;
width: 128px;
height: 128px;
}
img:hover {
position: absolute;
transform: scale( 1.5 );
}
<article>
<section>
<img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
<img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
How to freeze all article content after img becomes absolute positioned?
Please, no JS solutions.
float:left on p done the work!.
article {
background: #e8e8e8;
color: #484848;
overflow: hidden;
padding: 0.5rem;
margin: 2rem auto 0 auto;
width: 60vw;
}
section {
float: left;
margin-right: 0.5rem;
}
p {
margin: 0;
float:left;
}
img {
transition: 0.2s linear;
object-fit: cover;
width: 128px;
height: 128px;
}
img:hover {
position: absolute;
transform: scale( 1.5 );
}
<article>
<section>
<img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
<img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
As you want p to don't interact with images then before hover text will also don't interact with image and don't change it's own position.
The trick is to put the element you want to animate into a container, and then trigger the animation when you hover the container.
article {
background: #e8e8e8;
color: #484848;
padding: 0.5rem;
margin: 2rem auto 0 auto;
width: 60vw;
}
section {
float: left;
margin-right: 0.5rem;
}
p {
margin: 0;
}
img {
transition: 0.2s linear;
object-fit: cover;
width: 128px;
height: 128px;
}
.image-container {
display: inline-block;
}
.image-container:hover > img {
transform: scale( 1.5 );
}
<article>
<section>
<div class="image-container">
<img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
</div>
<div class="image-container">
<img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
</div>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
A variation of this question has been asked many times, but I cannot seem to find any solution for this particular problem. I have a <div> container element with content that has a variable height depending on the elements inside of it. I want a section of the container to always appear at the bottom of the container div, even when the user scrolls the content, they should always see the section at the bottom of the container. I would prefer not to use position: fixed because that is relative to the browser size, not the div, and when I use position: absolute I can suffessfully get it on the bottom of my container div, but once I start scrolling, it does not act like a "fixed" element, and scrolls with the content.
Is this possible to achieve this with pure CSS?
Here is my current code:
html, body, .container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.header {
background-color: red;
flex: 0 0 auto;
padding: 1em;
}
.content {
flex: 1 1 auto;
overflow-y: auto;
position: relative;
}
.content > p {
margin: 1em;
}
.bottom-section {
background: skyblue;
bottom: 0;
height: 50px;
padding-top: 1em;
position: absolute;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
}
<div class="header">HEADER</div>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
</div>
<div class="footer">FOOTER</div>
Thanks!
The easiest way to accomplish this is to keep the "fixed" element outside the scrolling element, and use positioning based on the container to overlay the fixed element atop the scrolling one.
The only changes here were to move .bottom-section outside of .content, and setting position:relative on .container:
html,
body,
.container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.container {
position: relative
}
.header {
background-color: red;
flex: 0 0 auto;
padding: 1em;
}
.content {
flex: 1 1 auto;
overflow-y: auto;
}
.content>p {
margin: 1em;
}
.bottom-section {
background: skyblue;
bottom: 0;
height: 50px;
padding-top: 1em;
position: absolute;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
}
<div class="header">HEADER</div>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
<div class="footer">FOOTER</div>
This might help, change those two classes as in snippet bellow, comment overflow: hidden in html, body, .container.
.bottom-section {
background: skyblue;
bottom: 0;
height: 50px;
padding-top: 1em;
position: absolute;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
}
html, body, .container {
display: flex;
flex-direction: column;
height: 100%;
/* overflow: hidden;*/
}
.header {
background-color: red;
flex: 0 0 auto;
padding: 1em;
}
.content {
flex: 1 1 auto;
overflow-y: auto;
position: relative;
}
.content > p {
margin: 1em;
}
.bottom-section {
background: skyblue;
bottom: 33px;
height: 50px;
padding-top: 1em;
position: fixed;
z-index: 1;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
bottom: 0;
position: fixed;
width: 100%;
}
<div class="header">HEADER</div>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
</div>
<div class="footer">FOOTER</div>
https://jsfiddle.net/drqjmssy/
From the jsfiddle link, I am trying to have "div class='main_content'" be the same vertical height as the "div class='sidebar'". How does one accomplish that? If you can't load the fiddle or it's awful formatting, here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My project</title>
<style>
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav > ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
</style>
</head>
<body>
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<footer>
© Yazen 2018.
</footer>
</div>
</body>
</html>
Sorry if any of this is confusing./////////////////////////////////////////////////////////////////////////////////
You could wrap the elements in a new tag (I've used section) and add display: flex.
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav>ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
section {
display: flex;
}
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<section>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</section>
<footer>
© Yazen 2018.
</footer>
</div>