I am trying to put a logo image in the top left were SYLK is. It keeps going to the center of the page. I need the image to go where sylk is on the page. I tried just adding the img into it but it goes right to the center. Any help is much appreciated. The logo is going to act as a home button.
HTML
<!doctype html>
<html>
<head>
<title>SYLC</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
sylk
<ul>
<li>Home</li>
<li>Merch</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
<section>
<img src="img/stars.png" id="stars">
<img src="img/moon.png" id="moon">
<img src="img/mountains_behind.png" id="mountains_behind">
<h2 id="text">Sweti Yeti</h2>
Mint Now
<img src="img/mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>A Collection of 9,999 Yetis</h2>
<p>A Colorful, Engaging and Inovating Community. The Sweti Yeti's, a community focused club.
</p>
<h2>Yeti Trip</h2>
<div class="container">
<div class="timeline">
<ul>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 4</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="accordion">
<div class="image-box">
<img src="imG/yeti.png" alt="Accordion Image">
</div>
<div class="accordion-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is the total supply?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>A total of 9999 unique Sweti Yeti's will be created.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How Whitelist?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Participate in our Discord Community is a supportive and consistent way.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Wen mint/presale?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Pre-pre Jan 22nd, Pre Feb 12, Full Feb 14</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What is SWETI?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Share With Everyone To Inspire. Our goal is to make it easier for guys like us, who have big visions but little support in execution. Also relates to kid charity shtuff.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">IMX or whatever chain stuff</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>bleh</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> How to bother you?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Insert contact info</p>
<span class="line"></span>
</li>
</ul>
</div>
</div>
</div class="sec">
<script type="text/javascript">
let moon = document.getElementById('moon');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function() {
var value = window.scrollY;
moon.style.top = -value * -1.05 + 'px';
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top =-value * -0.5 + 'px';
header.style.top =-value * -0.5 + 'px';
mountains_front.style.top =-value * 0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e)=>{
let clickedLi;
if(e.target.classList.contains("question-arrow")){
clickedLi = e.target.parentElement;
}else{
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer");
});
}
</script>
CSS
#import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: linear-gradient(#2b1055, #7597de);
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
background: #fff;
color: #2b1055;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
h2#text {
position: absolute;
color: #fff;
right: -350px;
white-space: nowrap;
font-size: 7.5vw;
transform: translateY(0px);
}
#btn {
text-decoration: none;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
transform: translateY(100px);
font-size: 1.5em;
z-index: 9;
}
.sec {
position: relative;
min-height: 500px;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 3.5em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.sec p {
font-size: 1.2em;
color: #fff;
}
::selection {
background: #7d2ae8;
color: #fff;
}
.accordion {
display: flex;
max-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 25px;
padding: 45px 90px 45px 60px;
margin: 0 auto;
}
.accordion .image-box {
height: 360px;
width: 300px;
}
.accordion .image-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.accordion .accordion-text {
width: 60%;
}
.accordion .accordion-text .title {
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
display: none;
}
.accordion .accordion-text li {
list-style: none;
cursor: pointer;
}
.accordion-text li .question-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-text li .question-arrow .question {
font-size: 18px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li .line {
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
width: 92%;
font-size: 15px;
font-weight: 500;
color: #595959;
display: none;
}
.accordion-text li.showAnswer p {
display: block;
}
#media (max-width: 994px) {
body {
padding: 40px 20px;
}
.accordion {
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.accordion .image-box {
height: 360px;
width: 220px;
}
.accordion .accordion-text {
width: 63%;
}
}
#media (max-width: 820px) {
.accordion {
flex-direction: column;
}
.accordion .image-box {
height: 360px;
width: 300px;
background: #ffffff;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.accordion .accordion-text {
width: 100%;
margin-top: 30px;
}
}
#media (max-width: 538px) {
.accordion {
padding: 25px;
}
.accordion-text li p {
width: 98%;
}
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Montserrat";
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0;
background-color: #1c0522;
}
.timeline {
width: 80%;
height: auto;
max-width: 800px;
margin: 0 auto;
position: relative;
}
.timeline ul {
list-style: none;
}
.timeline ul li {
padding: 20px;
background-color: #655ee1;
color: white;
border-radius: 10px;
margin-bottom: 20px;
}
.timeline ul li:last-child {
margin-bottom: 0;
}
.timeline-content h1 {
font-weight: 500;
font-size: 25px;
line-height: 30px;
margin-bottom: 10px;
}
.timeline-content p {
font-size: 16px;
line-height: 30px;
font-weight: 300;
}
.timeline-content .date {
font-size: 12px;
font-weight: 300;
margin-bottom: 10px;
letter-spacing: 2px;
}
#media only screen and (min-width: 768px) {
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: gray;
}
.timeline ul li {
width: 50%;
position: relative;
margin-bottom: 50px;
}
.timeline ul li:nth-child(odd) {
float: left;
clear: right;
transform: translateX(-30px);
border-radius: 20px 0px 20px 20px;
}
.timeline ul li:nth-child(even) {
float: right;
clear: left;
transform: translateX(30px);
border-radius: 0px 20px 20px 20px;
}
.timeline ul li::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: gray;
top: 0px;
}
.timeline ul li:nth-child(odd)::before {
transform: translate(50%, -50%);
right: -30px;
}
.timeline ul li:nth-child(even)::before {
transform: translate(-50%, -50%);
left: -30px;
}
.timeline-content .date {
position: absolute;
top: -30px;
}
.timeline ul li:hover::before {
background-color: aqua;
}
}
Thanks in advance for any and all help.
Try adding to the header .logoclass
float:left;
margin-top:0;
I copied your code and added a small image I had that is only about 75x39 pixels respectively and it shows even with your menu and about 2" in on my monitor. It's not dead left on my laptop monitor but it should be in the ball park. I add a a bigger image 246x205 and it looks okay.
One thing I noticed when I copied your html and css down, I can't see your entire page. You man need some other modifications. The Mint Now is centered.
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
float:left;
margin-top:0;
position:fixed;
}
Note: I also added a position-fixed at the bottom. This will scroll your logo with the page. If you don't want to do that with your page, just remove the position tag.
If your logo still goes to the center, you may have something else conflicting with the positioning. I just used these two files you posted here.
<header>
<img src="sam.jpg">
Related
My website is bigger than I wanted it. It created a scroll bar on the bottom to scroll left and right but I want it only as big as my screen, something went wrong while doing CSS.
* body {
margin: 0;
padding: 0;
font-family: Arial;
}
nav {
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.6);
border-bottom: 1px solid #fff;
margin: 0;
padding: 10px 90px;
top: 0;
left: 0;
box-sizing: border-box;
position: fixed;
}
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 80px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a:hover {
background: rgba(0, 0, 0, 0.7);
border-radius: 6px;
/* pri hoveri spraví z ostrého rámčeka okolo položky menu oblý */
}
section {
width: 100%;
height: 100vh;
background: url(background.jpg);
background-size: cover;
background-position: center;
}
.container {
width: 100%;
height: 100vh;
padding: 0 8%;
}
.container h1 {
text-align: center;
padding-top: 10%;
margin-bottom: 60px;
font-weight: 800;
position: relative;
}
.container h1::after {
content: '';
background: #303ef7;
width: 100px;
height: 5px;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* zoradí jednotlivé services vedla seba*/
grid-gap: 30px;
}
.service {
text-align: center;
padding: 25px 10px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
background: transparent;
transition: transform 0.5s, background 0.5s;
}
.service i {
font-size: 40px;
margin-bottom: 10px;
color: #303ef7;
}
.service h2 {
font-weight: 600;
margin-bottom: 8px;
}
.service:hover {
background: #303ef7;
color: #fff;
transform: scale(1.05);
}
.service:hover i {
color: #fff;
}
<html>
<head>
<title>WEBTERAZ Prvy Pokus</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/227b5da2e1.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">Webteraz.sk</div>
<ul>
<li>O nás</li>
<li>Portfólio</li>
<li>Kontakt</li>
</ul>
</nav>
<section></section>
<div class="container">
<h1>Our Services</h1>
<div class="row">
<div class="service">
<i class="fa-solid fa-code"></i>
<!--Ikona </> z font awesome -->
<h2>Web Design</h2>
<p> Lorem ipsum WEB DESIGN sit amet, consectetur adipisciring.</p>
</div>
<div class="service">
<i class="fa-solid fa-palette"></i>
<!--Ikona palety z font awesome -->
<h2>Logo pre firmu</h2>
<p> Lorem ipsum LOGO sit amet, consectetur adipisciring.</p>
</div>
<div class="service">
<i class="fa-solid fa-screwdriver-wrench"></i>
<!--Ikona kluča a šrobovaku z font awesome -->
<h2>Údržba vašej stránky</h2>
<p> Lorem ipsum ÚDRŽBA sit amet, consectetur adipisciring.</p>
</div>
</div>
</div>
</body>
<!--Video koniec na 3:34-->
</html>
Your issue here is that the container is 100% + 8% padding each side, so 116% of total screen width. That creates a scrollbar on the X axis.
To overcome this you've got two solutions:
add box-sizing: border-box to the .container. Read more about box-sizing here.
calculate the total width of the .container to be 100% - 16%, because padding takes 16%. You could use width: calc(100% - 16%) to do that.
I prefer the box-sizing solution myself. It's actually not a bad idea to put that into the * selector so it matches every element you create.
I'm having problems trying to make the bottom of my div to look like this.
I tried using border radius to get the curved result at the bottom right but I don't know how can I create this straight line at an angle.
Here's my current code.
<div>The code is in the link</div>
Check out this code and use the transform property Perspective
transform: perspective(value);
The mention thing is an illustration used as the background image. It would be a good practice if you try it so check out my Codepen Work for source code.
.innerlayer{
width: 650px;
height: 400px;
background-color: #00bcd4;
margin: auto;
transform: perspective(1000px) rotatey(18deg);
border-bottom-right-radius: 35%;
}
.outerlayer{
position: relative;
padding: 0px;
}
.tophidden{
width: auto;
height: 80px;
background-color: #fff;
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
}
<div class="outerlayer">
<div class="tophidden">
<div class="innerlayer"></div>
</div>
</div>
Watch it in full screen view
I suggest you to use :before pseudo element, and skew it.
Here you can find your modified code
body {
margin: 0;
}
.navbar {
// make sure wrapper of pseudo has position: relative
position: relative;
&:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(72deg, rgba(100,36,220,1) 0%, rgba(118,107,254,1) 100%);
// set border radius size
border-bottom-right-radius: 10rem;
// set skew angle
transform: skewY(-2deg);
transform-origin: left bottom;
}
.container {
display: flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
max-width: 1270px;
width: 100%;
padding: 1.125rem 1.5rem 1.125rem 1.5rem;
}
.logo {
color: white;
margin-right: 3em;
text-transform: lowercase;
font-size: 42px;
align-items: center;
font-weight:700;
}
nav {
display: flex;
margin-top: 1em;
}
.primary-nav {
display: flex;
align-items: center;
}
.nava {
font-size: 20px;
font-weight: 400;
}
a {
color: white;
margin-right: 1em;
}
.second-nav {
display: flex;
align-items: center;
}
.contact-nav {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: #5008d9;
background:white;
border-radius: 360px;
padding: 0.9rem 2rem 0.9rem 2rem;
}
.cda {
display: flex;
justify-content: space-between;
padding-top: 5em;
padding-bottom: 5em;
}
.cta-left {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
margin-top: 5em;
padding-bottom: 15em;
}
h2 {
color: white;
font-size: 70px;
font-weight: 600;
line-height: 1.0;
}
p {
color: white;
}
.cta-right {
width: 50%;
}
img {
width: 100%;
}
.cta-p {
margin-top: 2em;
}
.learn-more {
margin-top: 3em;
}
.learn {
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
color: black;
background:#00dadc;
border-radius: 360px;
padding: 0.9rem 4rem 0.9rem 4rem;
}
}
<header>
<div class="navbar">
<div class="container">
<nav>
<ul class="primary-nav">
<a class="logo" href="#">Agency</a>
<li><a class="nava" href="#">Home</a></li>
<li><a class="nava" href="#">About Us</a></li>
<li><a class="nava" href="#">Our Services</a></li>
<li><a class="nava" href="#">Support</a></li>
</ul>
</nav>
<nav>
<ul class="second-nav">
<li><a class="contact-nav" href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="cda">
<div class="cta-left">
<h2>Creative <br> Design Agency</h2>
<p class="cta-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Etiam vel dolor id nulla gravida blandit.</p>
<div class="learn-more">
<a class="learn" href="#">Learn More</a>
</div>
</div>
<div class="cta-right">
<img src="images/doge.jpeg" alt="">
</div>
</div>
</div>
</div>
</header>
I'm making a project with a big image at the top of the page, followed by a sticky nav.
The info following the nav keeps trespassing!
I have been trying all sorts of things, making the other sections after it have a lower or negative z-index numbers, as well as trying to set the opacity to 99 for the following modules because I read that opacity changes the stacking order.
/*Navigation*/
navigation {
display: block;
box-shadow: 0px 10px 22px #326559;
}
.z {
position: relative;
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 500;
}
nav {
display: block;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
align-items: center;
}
nav img {
max-width: 9vw;
}
/*Annonce*/
.annonce {
position: relative;
z-index: -1;
opacity: .99;
}
.annonce p {
margin-top: 50px;
margin-bottom: 50px;
padding: 10px;
}
.annonce img {
padding-bottom: 50px;
}
/*Location Gallery*/
hr {
background-color: #326557;
height: 3px;
margin-bottom: 75px;
}
location-card {
display: block;
border: 2px solid #326557;
margin-bottom: 50px;
background-color: #e5fbe2;
padding: 20px;
position: relative;
z-index: -1;
}
<navigation class="z">
<inner-column>
<nav>
<a href="#" class="icon">
<img src="images/bla.png">
</a>
Sign in
</nav>
</inner-column>
</navigation>
<main>
<section class="annonce">
<inner-column>
<p>Bla bla bla!</p>
</inner-column>
<picture>
<img src="images/image1.jpg">
</picture>
</section>
<?php include('locationCards.php'); ?>
Working on my sticky
I'm going to include my html for the nav.
And a little bit of what comes after that.
I'm including some CSS for both the nav and what comes after, in case another more skilled person can see what my issue is.
Thanks so much
I have already created a site like that, You can search it on google using keywords. "Sticky Navbar".
and I'm going to share my code with you too.
window.onscroll = function () { myFunction() };
var header = document.getElementById("header");
function myFunction() {
if (window.pageYOffset >= 30) {
header.classList.add("sticky")
} else {
header.classList.remove("sticky");
}
}
body{
margin:0;
}
header{
position: fixed;
width: 100%;
padding: 5px 20px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.75s;
}
header .logo{
color: rgb(255, 255, 255);
font-weight: 700;
font-size: 30px;
text-decoration: none;
}
header .nav{
position: relative;
display: flex;
}
header .nav li{
list-style: none;
margin-left: 50px;
height:100%;
}
header .nav li a{
text-decoration: none;
color: #fff;
font-weight: 300;
font-size: 20px;
}
header.sticky{
background: rgba(255,255,255,0.85);
padding-top:0px;
padding-bottom:0px;
box-shadow: 0 5px 20px rgba(0,0,0,0,0.5);
height:3.75rem;
}
header.sticky .logo{
color: rgb(0, 0, 0);
}
header.sticky ul{
height:100%;
}
header.sticky ul li{
height:100%;
display:flex;
align-items: center;
}
header.sticky ul li a{
color:rgb(204, 34, 34);
}
header.sticky .nav li:hover{
border-bottom: 5px solid #ff0157;
}
p{
font-weight: 300;
color: #111;
}
.ban{
position: relative;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg,rgba(255,255,255,0.1),rgba(0,0,0,0.35)),url('https://winteriscoming.net/files/2021/01/thor-4-marvel-chris-hemsworth.jpg');
background-repeat: no-repeat;
background-size:cover;
background-position:left;
}
.ban .box{
max-width: 1000px;
text-align: center;
}
.ban .box h3{
font-size: 5rem;
color: #fff;
}
.ban .box p{
font-size: 1rem;
color: #fff;
}
<header id="header">
Avenger
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Expert</li>
<li>contact</li>
</ul>
</header>
<section class="ban" id="ban">
<div class="box">
<h3>Always Choose Good</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sit nemo blanditiis tenetur, autem enim
similique dolor saepe earum consequuntur.</p>
Our Menu
</div>
</section>
I think this will help you more!
I set the top navigation bar as being sticky on top, but it's acting weird in some places.
Here's the fiddle link https://jsfiddle.net/benjaminana77/pugek2f8/30/ and I reproduced code below.
I'm having problems in three places
In the hero image section, top nav background is incorrectly being transparent. I set the background color as white, not transparent.
The top nav bar incorrectly shows BEHIND a slider, not above the slider.
When you hover over an item in the grid layout, the item shows above the top nav bar.
normal state:
when you hover over an image:
Many thanks in advance!
HTML:
<div class="boxA">
<div class="box1">
<div class="site">
<img src="img/logo.png">
</div>
</div>
<div class="box2">
<nav class="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
</div>
</div>
<div class="body-part">
<section class="conA">
<div id="container">
<div id="heroText">
<p>Lorem ipsum 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 exercit</p>
<div id="text"></div>
</div>
<div id="images"></div>
</div>
</section>
<ul class="slider" style="padding:0px !important;">
<li><img src="img/sample.png">
<div class="caption1">caption 1</div>
</li>
<li> <img src="img/Group 3.png">
<div class="caption2"></div>
<div class="caption3">caption 2</div>
<div class="caption5">caption 3</div>
<div class="caption4">caption 4</div>
</li>
</ul>
<section id="conD">
<div class="container">
<div class="grid menu-content" id="menu1-content">
<article>
<a href="#">
<div class="photo" style="background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG);"></div>
<div class="text">
<h3>Title </h3>
<p>Lorem ipsum dolor </p>
</div>
</a>
</article>
<article>
<a href="#">
<div class="photo" style="background-image: url(img/sample.jpg);"></div>
<div class="text">
<h3>Headingg</h3>
<p>Lorem ipsum dolor </p>
</div>
</a>
</article>
<article>
<a href="#">
<div class="photo" style="background-image: url(img/sample.jpg);"></div>
<div class="text">
<h3>Headingg</h3>
<p>Lorem ipsum dolor </p>
</div>
</a>
</article>
</div>
</div>
</section>
CSS:
.boxA:after {
content:"";
display: block;
clear: both;
}
.boxA {
height: 90px;
position: fixed;
border-bottom: 1px solid #E0DCDC;
top: 0;
width: 100%;
background-color: white;
max-width: 1440px;
}
.boxA img {
position: absolute;
top: 50%;
left: 3%;
transform: translate(0, -50%);
}
.box2 ul {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 10px;
}
.box1 {
float: left;
width: auto;
}
.box2 {
float: right;
width: auto;
}
.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}
.box2 li a {
display: block;
padding: 0px 50px;
color: inherit;
text-decoration: none;
font-size: 12px;
}
.box2 li a:hover {
text-decoration: underline;
}
.box2 ul:after {
content: "";
display: block;
clear: both;
}
.box2 li {
float: left;
width: auto;
font-family: 'Gotham';
letter-spacing: 2.5px;
}
.box1 img {
position: absolute;
width: 20%;
height: auto;
}
#top-logo {
margin-top: 40px;
}
#top-logo img {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
height: auto;
}
body {
font-family: gotham;
margin: 0px !important;
color: #827F88;
letter-spacing: 0.4px;
line-height: 1.9;
}
.conA {
height: 100vh;
display: flex;
position: relative;
}
.conA #container {
margin: 0;
display: flex;
align-items: flex-start;
position: absolute;
top: 50%;
left: 10%;
transform: translate(0%, -50%);
}
#heroText {
font-size: 37px;
color: #56525E;
line-height: 1 !important;
}
.conA #heroText {
height: 400px;
padding-top: 100px;
}
#conD ul {
margin: 0 0 30px -30px;
padding: 0;
list-style: none;
}
#conD li {
padding: 35px;
display: block;
text-decoration: none;
font-size: 15.5px;
letter-spacing: 2px;
color: inherit;
}
#conD li {
float: left;
width: auto;
}
#conD ul:after {
content:"";
display: block;
clear: both;
}
#conD .menu {
margin-bottom: 20px
}
.grid {
display: grid;
justify-content: start;
margin-top: -20px;
}
.grid .photo {
width: 100%;
background-size: contain;
background-position: center;
}
.grid .photo:after {
content: "";
display: block;
padding-bottom: 100%;
}
.grid a {
display: block;
text-decoration: none;
color: inherit;
}
.grid a:hover {
opacity: 0.8;
}
JQUERY:
$(document).ready(function(){
$('.slider').bxSlider({
auto: true,
pause: 3000,
mode: 'fade',
speed: 1200,
pager: false
});
});
(function ($) {
$(document).ready(function(){
// hide .navbar first
$(".boxA").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we start fadeIn
if ($(this).scrollTop() > 50) {
$('.boxA').fadeIn();
$('#top-logo').fadeOut();
} else {
$('.boxA').fadeOut();
$('#top-logo').fadeIn();
}
});
});
});
}(jQuery));
Add z-index:2 on .boxA
.boxA {
height: 90px;
position: fixed;
border-bottom: 1px solid #E0DCDC;
top: 0;
width: 100%;
background-color: white;
max-width: 1440px;
z-index: 2;
}
.body-part{
position: relative;
z-index: 1;
}
https://jsfiddle.net/lalji1051/24rm0yvt/
updated link - https://jsfiddle.net/lalji1051/24rm0yvt/3/
So I have my header with a background image set and I want to create a div underneath it so I can write text there, but when I create the new div, the text I write inside of it appears on top of the already created header. I think it is due to the background image I have set. This is one of my first projects made all by my own so if you guys could help me it will be really appreciated.
These are the HTML and CSS files:
body {
margin: 0;
padding: 0;
background-color:#f4f4f4;
float: left;
}
header{
overflow: hidden;
margin: auto;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
}
.wtf {
padding-right: 50px;
position: relative;
bottom: 3px;
}
#logo {
float: left;
color: white;
font-family: 'Concert One', cursive;
padding-left: 20px;
}
p.highlight {
margin: 0;
position: relative;
bottom: 7px;
}
ul {
float:right;
}
li {
display: inline;
padding: 0 10px 0 10px;
}
a {
text-decoration: none;
color: white;
font-size: 21px;
margin: 0 0 3px 0;
font-family: 'Montserrat', sans-serif;
}
li a:hover {
background-color: #ddd;
color: black;
}
.image {
background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg');
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
position: absolute;
font-family: 'Montserrat', sans-serif;
background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg')
}
.main p,h1,h3 {
text-align: center;
position: relative;
}
.main h1 {
top: 100px;
font-size: 50px;
}
.main h3 {
top: 120px;
}
.main p {
top: 90px;
font-size: 20px;
}
.development {
position: relative;
}
.development p {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Упражнение</title>
<link rel="stylesheet"
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity="sha384-+0VIRx+yz1WBc
</head>
<body>
<header>
<div class="image">
<nav>
<div id="logo">
<h1><p class="highlight">ATANAS DEVELOPING</p></h1>
</div>
<div class="wtf">
<ul>
<li class="current">
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Team
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="main">
<p>Can you build the website of my dreams?</p>
<h1>YUP, WE CAN DO THAT.</h1>
<h3>Learn More</h3>
</div>
</div>
</header>
<br>
<div class="development">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin.</p>
</div>
</body>
</html>
You positioned your .main absolutely:
.main {
position: absolute;
}
With this styling you take .main out of the normal document flow and it is positioned in the top left corner. The other elements stay in regular flow and are right above it. Just get rid of this positioning and you are good to go.
body {
margin: 0;
padding: 0;
background-color:#f4f4f4;
float: left;
}
header{
overflow: hidden;
margin: auto;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
}
.wtf {
padding-right: 50px;
position: relative;
bottom: 3px;
}
#logo {
float: left;
color: white;
font-family: 'Concert One', cursive;
padding-left: 20px;
}
p.highlight {
margin: 0;
position: relative;
bottom: 7px;
}
ul {
float:right;
}
li {
display: inline;
padding: 0 10px 0 10px;
}
a {
text-decoration: none;
color: white;
font-size: 21px;
margin: 0 0 3px 0;
font-family: 'Montserrat', sans-serif;
}
li a:hover {
background-color: #ddd;
color: black;
}
.image {
background-image: url('https://picsum.photos/200/300?image=15');
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
/* position: absolute; <-- do not position this absolutely */
font-family: 'Montserrat', sans-serif;
background-image: url('https://picsum.photos/1920/1080?image=10')
}
.main p,h1,h3 {
text-align: center;
position: relative;
}
.main h1 {
top: 100px;
font-size: 50px;
}
.main h3 {
top: 120px;
}
.main p {
top: 90px;
font-size: 20px;
}
.development {
position: relative;
}
.development p {
color: red;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" >
<div class="image">
<nav>
<div id="logo">
<h1><p class="highlight">ATANAS DEVELOPING</p></h1>
</div>
<div class="wtf">
<ul>
<li class="current">
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Team
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="main">
<p>Can you build the website of my dreams?</p>
<h1>YUP, WE CAN DO THAT.</h1>
<h3>Learn More</h3>
</div>
</div>
<div class="development">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin.</p>
</div>
Your .main css class has an absolute position. Disabling that fixes the issue
Remove some position property from your css.
.development {
// remove
//position: relative;
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
// remove
// position: absolute;
font-family: 'Montserrat', sans-serif;
background-image: url(nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg);
}
Changing to above would work but your body is floated towards left so remove that too.
body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
// remove
// float: left;
}