The navbar position is not changing when I am clicking the checkbox.
I have tried the other solutions from the similar questions but nothing is working.
I do not understand why it is not working.
do I have to do display: block on the navbar?.
I have watched many tutorials but I just cant get it to implement it here.
--index.html--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css">
<title>Presentation Blog Page</title>
</head>
<body>
<div class="sidebar">
<div class="portfolio-info">
<div class="image">
<img src="/img/venu.jpg" alt="">
</div>
<div class="name">
<p>Venu Gopal Reddy</p>
<p>Programming Enthusiast</p>
</div>
</div>
<div>
<label for="check">☰</label>
<input type="checkbox" id="check">
</div>
<div class="navbar">
<div class="nav-items">
HOME
BLOG
CONTACT
</div>
<div class="social-icons">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</body>
</html>
--style.css--
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
:root {
--primary-text-color: #35383b; /*(53,56,59)*/
--secondary-text-color: #555a5f; /*(85,90,95)*/
--primary-bg-color: #6f8f8e; /*(111,143,142)*/
--secondary-bg-color: #96b2b1; /*(150,178,177)*/
}
html,
body {
font-family: 'Roboto', sans-serif;
color: var(--primary-text-color);
background-color: #e2e2e2;
font-size: 100%;
}
#media(max-width: 768px) {
.sidebar {
width: 100%;
height: 100px;
background-color: var(--primary-bg-color);
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
}
/* Portfolio styling */
.sidebar .portfolio-info {
flex-basis: 50%;
height: 100%;
display: inherit;
justify-content: flex-start;
align-items: center;
}
.sidebar .portfolio-info .image {
width: 5rem;
height: 5rem;
margin-right: 1rem;
}
.sidebar .portfolio-info .image img {
width: 100%;
height: 100%;
border: none;
border-radius: 50%;
}
.sidebar .portfolio-info .name p:first-child {
font-size: 1.5rem;
}
.hamburger label{
display: block;
cursor: pointer;
}
/* Menu styling */
.sidebar .navbar {
position: absolute;
top: 0;
right: -1000px;
display: flex;
flex-direction: column;
flex-basis: 50%;
width: 100%;
height: 300px;
justify-content: space-evenly;
align-items: center;
}
#check:checked ~ .sidebar .navbar {
right: 100px;
}
}
what am I doing wrong here?
You were doing a small mistake in selector
#check:checked ~ .sidebar .navbar
here, I have corrected it, by just a small change in your HTML. ~ does not work the way you were using it, Read it here.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
:root {
--primary-text-color: #35383b; /*(53,56,59)*/
--secondary-text-color: #555a5f; /*(85,90,95)*/
--primary-bg-color: #6f8f8e; /*(111,143,142)*/
--secondary-bg-color: #96b2b1; /*(150,178,177)*/
}
html,
body {
font-family: 'Roboto', sans-serif;
color: var(--primary-text-color);
background-color: #e2e2e2;
font-size: 100%;
}
#media(max-width: 768px) {
.sidebar {
width: 100%;
height: 100px;
background-color: var(--primary-bg-color);
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
}
/* Portfolio styling */
.sidebar .portfolio-info {
flex-basis: 50%;
height: 100%;
display: inherit;
justify-content: flex-start;
align-items: center;
}
.sidebar .portfolio-info .image {
width: 5rem;
height: 5rem;
margin-right: 1rem;
}
.sidebar .portfolio-info .image img {
width: 100%;
height: 100%;
border: none;
border-radius: 50%;
}
.sidebar .portfolio-info .name p:first-child {
font-size: 1.5rem;
}
.hamburger label{
display: block;
cursor: pointer;
}
/* Menu styling */
.sidebar .navbar {
position: absolute;
top: 0;
right: -1000px;
display: flex;
flex-direction: column;
flex-basis: 50%;
width: 100%;
height: 300px;
justify-content: space-evenly;
align-items: center;
transition: all 1s;
}
#check {display: none;}
#check:checked + .navbar {
right: 100px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css">
<title>Presentation Blog Page</title>
</head>
<body>
<div class="sidebar">
<div class="portfolio-info">
<div class="image">
<img src="/img/venu.jpg" alt="">
</div>
<div class="name">
<p>Venu Gopal Reddy</p>
<p>Programming Enthusiast</p>
</div>
</div>
<label for="check">☰</label>
<input type="checkbox" id="check">
<div class="navbar">
<div class="nav-items">
HOME
BLOG
CONTACT
</div>
<div class="social-icons">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</body>
</html>
Related
So I am creating a website for myself and am having a bit of an issue trying to hyperlink. I am aware that I need to wrap the entire text in an anchor element , however, despite doing this and having my contact page ready, I am unable to click on the hyperlink. Attached below is the main HTML code that I have been using and the CSS code as well in order to illustrate what I am doing.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fire Sans', sans-serif;
text-decoration: none;
list-style: none;
color: #FFF;
}
.app{
display: flex;
min-height: 100vh;
}
.sidebar{
flex: 1 1 0;
max-width: 300px;
padding: 2rem 1rem;
background-color: #051427;
}
.sidebar h3{
color: #707793;
font-size: 0.75rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.sidebar .menu{
margin: 0 -1rem;
}
.sidebar .menu .menu-item{
display: block;
padding: 1rem;
color: #FFF;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active{
color #6f6d72;
border-right: 5px solid #6f6d72;
}
.content{
flex: 1 1 0;
padding: 2rem;
}
.content h1{
color: #D8BFD8;
font-size: 2.5rem;
font-family: papyrus;
margin-bottom: 1rem;
}
.content p{
color: #C8C8C8;
font-family: papyrus;
}
.menu-toggle{
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #051427;
cursor: pointer;
}
.hamburger{
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.hamburger > span,
.hamburger > span::before,
.hamburger > span::after{
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #FFF;
transition-duration: .25s;
}
.hamburger > span::before{
content: '';
top:-8px;
}
.hamburger > span:after{
content: '';
top: 8px;
}
.menu-toggle.is-active .hamburger > span{
transform: rotate(45deg);
}
.menu-toggle.is-active .hamburger > span::before{
top: 0;
transform: rotate(0deg);
}
.menu-toggle.is-active .hamburger > span::after{
top: 0;
transform: rotate(90deg);
}
#media (max-width: 1024px){
.sidebar{
max-width: 200px;
}
}
#media (max-width: 768px){
.menu-toggle{
display: block;
}
.content{
padding-top: 8rem;
}
.sidebar{
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear
}
.sidebar.is-active{
left: 0;
}
}
body{
font-family: papyrus;
background-image: url(AstroImg.jpg);
background-size: cover;
background-position: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content= "IE-edge">
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://kit.fontawesome.com/4767153995.js" crossorigin="anonymous"></script>
<title> MAP | Astrophotography </title>
</head>
<body>
<div class="app">
<div class= "menu-toggle">
<div class= "hamburger">
<span></span>
</div>
</div>
<aside class="sidebar">
<h3>Menu</h3>
<nav class= "menu">
<i class="fa-solid fa-house"></i> Home
<i class="fa-solid fa-user"></i> About Me <i class="fa solid fa-gears"></i> My Equipment
<i class="fa-solid fa-star"></i> Image Gallery
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
</nav>
</aside>
<main class="content">
<h1> Mapping Astronomical Points </h1>
<p>Your guide to the sky</p>
</main>
</div>
<script>
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
</script>
</body>
</html>
Below is the example I am struggling to fix. If I remove the class tag, the hyperlink works fine, but then it begins to distort the layout of the website, and if I keep the class tag, then hyperlink does not work at all. What can I do to fix this issue? Any help is appreciated.
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
Remove the nested anchor and add the class to the outer anchor.
<i class="fa-regular fa-address-book"></i>Contact
Change this line:
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
With this:
<i class="fa-regular fa-address-book"></i>Contact
EXPLANATION: You should not have an anchor tag inside an anchor tag.
I'm currently in an online class in web-design, I'm a beginner and I struggle to finish the second "project" which involve rendering a website design in html and css with responsive element without using pre-processors, so we have to go in with only html and hand-coded css.
I've got several problems to solve but maybe solving the first one will help me figuring out the rest.
there is what I have in computer screen-size and then, what I get with smaller screen-sizes.
Here is the expected result in smartphone size :
I've been struggling with the same overlapping problem at two different areas of the project, but, as mentioned before, I'll limit myself to this first example to see if your potential explanations might help me solve the other instance too.
Here is the html, css and media queries used so far but I don't think there is need of it to replicate the problem:
PS: I separate the 'head' from the 'body' for more clarity of read
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booki</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e943e673fe.js" crossorigin="anonymous"></script>
</head>
PS : I use a copy of normalize.css not mentioned in the above head. Also, links to the css mentioned below have been cut out for clarity purpose.
there is the html 'body':
<body>
<div class="recherche">
<section class="filtres">
<h3>Filtres</h3>
<div class="filtres-serie">
<section class="economique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-money-bill-wave fa-lg"></i>
</span>
<p class="filtre-p">Économique</p>
</section>
<section class="familial">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-child-reaching fa-lg"></i>
</span>
<p class="filtre-p">Familial</p>
</section>
<section class="romantique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-heart fa-lg"></i>
</span>
<p class="filtre-p">Romantique</p>
</section>
<section class="animaux">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-dog fa-lg"></i>
</span>
<p class="filtre-p">Animaux autorisés</p>
</section>
</div>
</section>
<section class="recherche-end">
<span >
<i class="fa-solid fa-circle-info fa-xl"></i>
</span>
<p>Plus de 500 logements sont disponibles dans cette ville</p>
</section>
</div>
</body>
Then the style.css related to the above html:
*{
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0px;
width: 100%;
height:100%;
}
/* LIENS - MISE EN FORME*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {color: #0065FC ;}
a:active {
text-decoration: none;
color: black;
}
i {
display: block
}
.filtres {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 35px;
/*margin-bottom:41px;*/
}
.filtres-serie {
position: relative;
display: flex;
flex-direction: row;
width: 845px;
height:50px;
gap: 25px;
}
.filtre-p {
position: relative;
margin-top: 17px;
margin-bottom: 14px;
}
.filtres-serie section {
position: relative;
display: flex;
flex-direction: row;
/*justify-content: space-evenly;*/
align-items:center;
border: solid 3px #F2F2F2;
border-radius: 29px;
font-weight: bold;
font-size: 18px;
right: 25px;
}
.filtres-serie section:hover {
color:cornflowerblue;
border-color:cornflowerblue;
background-color:#F2F2F2 ;
}
.economique {
width: 193px;
height: 50px;
}
.filtres-icon {
position: relative;
left: -10px;
color: #0065FC;
background-color: #DEEBFF;
border-radius: 29px;
}
.familial {
height: 50px;
width: 151px;
;
}
.romantique {
height: 50px;
width:183px;
}
.animaux {
height: 50px;
width: 242px;
}
.recherche-end {
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
height:41px;
margin-left: 9px;
gap:12px;
margin-bottom:41px;
padding-left: 50px;
}
.recherche-end i {
color: #0065FC;
}
and finally the media queries related to that section:
#media screen and (max-width:737px) {
.filtres {
display: flex;
flex-direction: column;
width: 100%;
}
.filtres-serie {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap:0;
}
.recherche-end {
width: 100%;
}
}
Thank you for reading this long post and for any help you will be able to provide me. I've looked up this kind of overlapping problem but couldn't find any clear way to untie my Gordian knot.
I'm of course at your disposition for any further precision or clarification if needed.
Regards,
Elrad
Below is the result I got after few modifications on both your html and CSS files (No page content was modified though), mainly CSS. As for the HTML file, I just added the link to CSS file then removed the <div class="recherche">...</div> tag which was surrounding all the page content.
As you can see, this is slightly different from your expected result in that the boxes around the links are wider. However The result remains unchanged on wide screens.
.
The modifications I made on the CSS file are quite important, so I can't just list them all.
Here are the final codes, both HTML and CSS.
*{
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0px;
width: 100%;
height:100%;
}
/* LIENS - MISE EN FORME*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {color: #0065FC ;}
a:active {
text-decoration: none;
color: black;
}
i {
display: block
}
.filtres {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 35px;
}
.filtres-serie {
display: flex;
flex-direction: row;
width: 845px;
height:50px;
gap: 25px;
}
.filtre-p {
margin-top: 17px;
margin-bottom: 14px;
}
.filtres-serie section {
display: flex;
flex-direction: row;
align-items:center;
border: solid 3px #F2F2F2;
border-radius: 29px;
font-weight: bold;
font-size: 18px;
right: 25px;
}
.filtres-serie section:hover {
color:cornflowerblue;
border-color:cornflowerblue;
background-color:#F2F2F2 ;
}
.economique {
width: 193px;
height: 50px;
}
.filtres-icon {
position: relative;
left: -10px;
color: #0065FC;
background-color: #DEEBFF;
border-radius: 29px;
}
.familial {
height: 50px;
width: 151px;
;
}
.romantique {
height: 50px;
width:183px;
}
.animaux {
height: 50px;
width: 242px;
}
.recherche-end {
display: flex;
flex-direction: row;
width: 500px;
height:41px;
margin-left: 9px;
gap:12px;
margin-bottom:41px;
padding-left: 50px;
}
.recherche-end i {
color: #0065FC;
}
#media screen and (max-width:737px) {
body{
margin-left: 30px;
position: relative;
}
.filtres {
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
}
.filtres-serie {
min-width: 425px;
width: 70%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
gap:12px;
}
.recherche-end {
width: 100%;
margin-top: 160px;
padding-left: 0;
gap: 12px;
}
.romantique, .animaux{
display: flex;
flex-direction: row;
width: 80%;
justify-content: flex-start;
padding-right: 70px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booki</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e943e673fe.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- <div class="recherche"> -->
<section class="filtres">
<h3>Filtres</h3>
<div class="filtres-serie">
<section class="economique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-money-bill-wave fa-lg"></i>
</span>
<p class="filtre-p">Économique</p>
</section>
<section class="familial">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-child-reaching fa-lg"></i>
</span>
<p class="filtre-p">Familial</p>
</section>
<section class="romantique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-heart fa-lg"></i>
</span>
<p class="filtre-p">Romantique</p>
</section>
<section class="animaux">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-dog fa-lg"></i>
</span>
<p class="filtre-p">Animaux autorisés</p>
</section>
</div>
</section>
<section class="recherche-end">
<span >
<i class="fa-solid fa-circle-info fa-xl"></i>
</span>
<p>Plus de 500 logements sont disponibles dans cette ville</p>
</section>
<!-- </div> -->
</body>
</html>
In my social media icons project, I tried hiding my text using opacity 0. When a user will mouse hover on my tag or icons the text will be shown. but my hover transition doesn't work. Please at first try using opacity 1 in my CSS in .icon. enter image description here.Please solve my hovering problem. I can't understand what's the bug
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(235, 219, 222);
font-family: 'Poppins', sans-serif;
}
.wrapper {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
a {
position: relative;
display: block;
width: 57px;
height: 57px;
background-color: #fff;
text-decoration: none;
font-size: 22px;
margin: 10px;
border-radius: 50%;
text-align: center;
line-height: 57px;
color: black;
transition: 0.4s;
}
.icon {
position: relative;
background-color: #fff;
border-radius: 5px;
margin: 5px;
padding: 10px;
transition: 0.4s;;
opacity: 0;
}
.icon_holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icon::before {
content: '';
position: absolute;
display: block;
width: 13px;
height: 13px;
background-color: #fff;
top:83% ;
left:42% ;
transform: rotate(45deg);
transition: 0.4s;
}
.wrapper>.icon_holder:nth-child(1)>a:hover .wrapper>.icon_holder:nth-child(1)>.icon{
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="icon_holder">
<div class="icon">Facebook</div>
<i class="fab fa-facebook-f"></i>
</div>
<div class="icon_holder">
<div class="icon">Twitter</div>
<i class="fab fa-twitter"></i>
</div>
<div class="icon_holder">
<div class="icon">Instagram</div>
<i class="fab fa-instagram"></i>
</div>
<div class="icon_holder">
<div class="icon">Reddit</div>
<i class="fab fa-reddit-alien"></i>
</div>
<div class="icon_holder">
<div class="icon">Youtube</div>
<i class="fab fa-youtube"></i>
</div>
</div>
</body>
</html>
Please help me.
Your hover rule is wrong and won't trigger, replace it with:
.wrapper .icon_holder:hover .icon {
opacity: 1;
}
Working example:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(235, 219, 222);
font-family: 'Poppins', sans-serif;
}
.wrapper {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
a {
position: relative;
display: block;
width: 57px;
height: 57px;
background-color: #fff;
text-decoration: none;
font-size: 22px;
margin: 10px;
border-radius: 50%;
text-align: center;
line-height: 57px;
color: black;
transition: 0.4s;
}
.icon {
position: relative;
background-color: #fff;
border-radius: 5px;
margin: 5px;
padding: 10px;
transition: 0.4s;;
opacity: 0;
}
.icon_holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icon::before {
content: '';
position: absolute;
display: block;
width: 13px;
height: 13px;
background-color: #fff;
top:83% ;
left:42% ;
transform: rotate(45deg);
transition: 0.4s;
}
.wrapper .icon_holder:hover .icon {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="icon_holder">
<div class="icon">Facebook</div>
<i class="fab fa-facebook-f"></i>
</div>
<div class="icon_holder">
<div class="icon">Twitter</div>
<i class="fab fa-twitter"></i>
</div>
<div class="icon_holder">
<div class="icon">Instagram</div>
<i class="fab fa-instagram"></i>
</div>
<div class="icon_holder">
<div class="icon">Reddit</div>
<i class="fab fa-reddit-alien"></i>
</div>
<div class="icon_holder">
<div class="icon">Youtube</div>
<i class="fab fa-youtube"></i>
</div>
</div>
</body>
</html>
you have an error on the CSS :
.icon {
position: relative;
background-color: #fff;
border-radius: 5px;
margin: 5px;
padding: 10px;
**transition: 0.4s;;**
opacity: 0;
}
There is an extra semicolon at the transition line, a small typo error..
I'm trying to recreate FreeCodeCamp's Product Landing Page as a personal project.
For the content below the Get Started button and above the video, I used a grid to try to align them properly. However, I'm having trouble aligning the text (the heads and paragraphs) vertically in their rows. How may I go about doing this? They seem to be sitting at the "bottom" of their rows.
HTML code:
body {
font-family: Lato, sans-serif;
background-color: #ececec;
}
#top {
margin-top: 100px;
}
#top h1 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0;
}
#nav-bar {
position: fixed;
width: 100%;
height: 80px;
background-color: #ececec;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
}
#header-img {
height: 35px;
left: 0;
margin-left: 20px;
}
#top {
text-align: center;
}
#navbar li {
display: inline;
right: 0;
}
#navlinks {
display: flex;
list-style-type: none;
}
#navlinks li {
padding: 5px;
text-align: center;
margin-right: 50px;
}
#submit {
width: 150px;
height: 30px;
margin-top: 15px;
font-weight: 900;
font-size: 1em;
background-color: #f3c807;
border: none;
}
#submit:hover {
background-color: orange;
transition: background-color 1s;
cursor: pointer;
}
#email {
height: 23px;
padding-left: 7px;
width: 275px;
}
i.fa, i.fas {
color: rgb(255, 136, 0);
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px 50px;
grid-column-gap: 50px;
grid-row-gap: 80px;
margin-left: 50px;
align-content: center;
margin-top: 100px;
}
.icon {
text-align: center;
}
.middlecontent h1 {
font-size: 1.5em;
margin-bottom: 0;
}
.middlecontent p {
margin-top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
<link href="./css/landingpagestyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/2b4114baf6.js" crossorigin="anonymous"></script>
<title>Original Trombones</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<!-- Picture logo in header -->
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones">
<ul id="navlinks">
<li>
Features
</li>
<li>
How It Works
</li>
<li>
Pricing
</li>
</ul>
</nav>
</header>
<main>
<div id="top">
<h1>Handcrafted, home-made masterpieces</h1>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address">
<br>
<input type="submit" id="submit" value="GET STARTED">
</form>
</div>
<div id="middle">
<div id="grid">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="middlecontent">
<h1>
Premium Materials
</h1>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="middlecontent">
<h1>
Fast Shipping
</h1>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="middlecontent">
<h1>
Quality Assurance
</h1>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</div>
</main>
</body>
</html>
According to my experience, If we want to align items(vertically or horizontally) in a grid we can use flex property inside that child element. The following example will help to get an idea.
To vertically align:
align-items:{position}
To horizontally align:
justify-content:{position}
body{
color: #ffff;
}
.content{
display: grid;
grid-gap: 10px;
max-width: 960px;
margin: auto;
text-align: center;
font-weight: bold;
font-size: 50px;
font-family: sans-serif;
grid-template-columns: repeat(3,1fr);
grid-auto-rows:200px;
}
.content div{
background: gray;
padding: 30px;
}
.content div:nth-child(even){
background: green;
}
.one{
display:flex;
align-items: start;
justify-content: start;
}
.two{
display:flex;
align-items: center;
justify-content: center;
}
.three{
display:flex;
align-items: end;
justify-content: end;
}
.four{
display:flex;
align-items: start;
justify-content: center;
}
.five{
display:flex;
align-items: end;
justify-content: center;
}
.six{
display:flex;
align-items: start;
justify-content: end;
}
<html>
<body>
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</body>
</html>
What I did was I made the div surrounding the h1 and p tags into a flexbox
.middlecontent {
display: flex;
justify-content: center;
flex-direction: column;
}
And that seemed to work. It was really as simple as that.
body {
font-family: Lato, sans-serif;
background-color: #ececec;
}
h1 {
margin-bottom: 0;
}
p {
margin-top: 0;
}
#top {
margin-top: 100px;
}
#top h1 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0;
}
#nav-bar {
position: fixed;
width: 100%;
height: 80px;
background-color: #ececec;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
}
#header-img {
height: 35px;
left: 0;
margin-left: 20px;
}
#top {
text-align: center;
}
#navbar li {
display: inline;
right: 0;
}
#navlinks {
display: flex;
list-style-type: none;
}
#navlinks li {
padding: 5px;
text-align: center;
margin-right: 50px;
}
#submit {
width: 150px;
height: 30px;
margin-top: 15px;
font-weight: 900;
font-size: 1em;
background-color: #f3c807;
border: none;
}
#submit:hover {
background-color: orange;
transition: background-color 1s;
cursor: pointer;
}
#email {
height: 23px;
padding-left: 7px;
width: 275px;
}
i.fa, i.fas {
color: rgb(255, 136, 0);
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px 50px;
grid-column-gap: 50px;
grid-row-gap: 80px;
margin-left: 50px;
align-content: center;
margin-top: 100px;
}
.icon {
text-align: center;
}
.middlecontent h1 {
font-size: 1.5em;
margin-bottom: 0;
}
.middlecontent p {
margin-top: 0;
}
.middlecontent {
display: flex;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
<link href="./css/landingpagestyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/2b4114baf6.js" crossorigin="anonymous"></script>
<title>Original Trombones</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<!-- Picture logo in header -->
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones">
<ul id="navlinks">
<li>
Features
</li>
<li>
How It Works
</li>
<li>
Pricing
</li>
</ul>
</nav>
</header>
<main>
<div id="top">
<h1>Handcrafted, home-made masterpieces</h1>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address">
<br>
<input type="submit" id="submit" value="GET STARTED">
</form>
</div>
<div id="middle">
<div id="grid">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="middlecontent">
<h1>
Premium Materials
</h1>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="middlecontent">
<h1>
Fast Shipping
</h1>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="middlecontent">
<h1>
Quality Assurance
</h1>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</div>
</main>
</body>
</html>
Here is my CODE:
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/********* global styles *******/
img:not(.nav-logo) {
width: 100%;
display: block;
}
/* header */
.header {
display: flex;
/* flex-direction: column; */
}
/* navbar */
.nav-bar {
position: sticky;
}
.nav-wrap {
min-width: 3rem;
max-height: 100vh;
display: flex;
/* flex-wrap: wrap; */
/* flex-direction: row; */
}
.nav-header {
display: flex;
/* flex-direction: column; */
max-width: 3.4rem;
background: transparent;
padding: 1rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
/* align-content: center; */
}
.nav-toggle {
margin: auto auto;
/* align-self: center; */
/* justify-self: center; */
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.45rem;
cursor: pointer;
transition: var(--mainTransition);
margin-bottom: 10.5rem;
}
.nav-toggle:hover,
.nav-link:hover {
transform: scale(1.2);
}
.nav-links {
margin: auto auto;
height: 22.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-link {
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.35rem;
cursor: pointer;
transition: var(--mainTransition);
}
/* hero */
.hero {
width: 100%;
min-height: 100vh;
background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
url(https://dummyimage.com/821x1082/d415d4/fff) center/cover no-repeat fixed;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- style -->
<!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./styles.css" />
<title>Културата Ще Спаси Света</title>
</head>
<body>
<!-- header -->
<header id="home" class="header">
<!-- navbar -->
<nav class="navbar">
<div class="nav-wrap">
<!-- nav header -->
<div class="nav-header">
<button
type="button"
class="nav-toggle"
id="nav-toggle"
aria-label="nav toggler"
>
<i class="fas fa-bars"></i>
</button>
<div class="nav-links">
<i class="fas fa-volleyball-ball nav-link"></i>
<i class="fas fa-paint-brush nav-link"></i>
<i class="fas fa-music nav-link"></i>
<i class="fas fa-pray nav-link"></i>
<i class="fas fa-globe-americas nav-link"></i>
</div>
<!-- nav links -->
</div>
</div>
</nav>
<!-- hero -->
<div class="hero">
</div>
</header>
<section>More content<section>
</body>
</html>
Here is how it looks now
I want the side navbar to stay fixed while I am scrolling down. And to occupy all the height of the right side.
Any help would be great.
Thank you
I am adding this because StackOverflow would not let me post this without more details which I do not think I need.
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/********* global styles *******/
img:not(.nav-logo) {
width: 100%;
display: block;
}
/* header */
.header {
display: flex;
flex-direction: column;
position:fixed;
left:0;
top:0;
}
/* navbar */
.nav-bar {
position: sticky;
}
.nav-wrap {
min-width: 3rem;
max-height: 100vh;
display: flex;
/* flex-wrap: wrap; */
/* flex-direction: row; */
}
.nav-header {
display: flex;
/* flex-direction: column; */
max-width: 3.4rem;
background: transparent;
padding: 1rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
/* align-content: center; */
}
.nav-toggle {
margin: auto auto;
/* align-self: center; */
/* justify-self: center; */
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.45rem;
cursor: pointer;
transition: var(--mainTransition);
margin-bottom: 10.5rem;
}
.nav-toggle:hover,
.nav-link:hover {
transform: scale(1.2);
}
.nav-links {
margin: auto auto;
height: 22.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-link {
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.35rem;
cursor: pointer;
transition: var(--mainTransition);
}
/* hero */
.hero {
width: 100%;
min-height: 100vh;
background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
url("./imgs/hero.jpeg") center/cover no-repeat fixed;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- style -->
<!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./styles.css" />
<title>Културата Ще Спаси Света</title>
</head>
<body>
<!-- header -->
<header id="home" class="header">
<!-- navbar -->
<nav class="navbar">
<div class="nav-wrap">
<!-- nav header -->
<div class="nav-header">
<button
type="button"
class="nav-toggle"
id="nav-toggle"
aria-label="nav toggler"
>
<i class="fas fa-bars"></i>
</button>
<div class="nav-links">
<i class="fas fa-volleyball-ball nav-link"></i>
<i class="fas fa-paint-brush nav-link"></i>
<i class="fas fa-music nav-link"></i>
<i class="fas fa-pray nav-link"></i>
<i class="fas fa-globe-americas nav-link"></i>
</div>
<!-- nav links -->
</div>
</div>
</nav>
<!-- hero -->
<div class="hero">
</div>
</header>
<section>More content<section>
</body>
</html>
Take the navigation out of HEADER, put it right under the BODY tag, use "position: fixed; height: 100%;" with CSS.