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..
Related
As you see I can't minimize more the width in viewing mode, but I can do it in Inspecting mode. Why?
Here is the code of my website:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<meta name="description" content="N"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css" type="text/css"/>
<meta name="robots" content="all"/>
</head>
<body>
<section id="contact">
<div class="social">
<i class="fa fa-facebook-f"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-behance"></i>
</div>
<div class="contact-box">
<div class="c-heading">
<h1>Get In Touch</h1>
<p>Call Or Email Us Regarding Question Or Issues</p>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1701.5252574812218!2d74.31603229143637!3d31.46779655679461!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391906abd2d8f2db%3A0x2d4bd93a1eb25b41!2sArfa%20Technologies!5e0!3m2!1sen!2s!4v1596774150754!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</section>
</body>
</html>
body{
margin:0px;
padding: 0px;
background-color: #FFFFFF;
}
a{
text-decoration: none;
}
.social a{
padding: 20px;
color:#7b7c7c;
font-size:1.1rem;
}
#contact{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
}
.social{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.social a:hover{
color:#000000;
transition: all ease 0.3s;
}
.contact-box{
background-color:#434445;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 30px;
box-shadow: 2px 0px 30px rgba(0,0,0,0.1);
}
.c-heading h1{
font-family: Roboto;
color: #e7eef3;
font-size: 2.5rem;
font-weight: lighter;
margin: 0px;
padding: 0px;
}
.c-heading p{
font-family: Roboto;
color:#cecece;
font-size: 0.8rem;
font-weight: lighter;
margin: 0px;
padding: 0px;
text-align: center;
}
.map{
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
}
#media(max-width:1100px){
.map{
display: none;
}
}
#media(max-width:450px){
.social{
display: none;
}
.contact-box{
width: 100%;
height: 100vh;
box-sizing: border-box;
}
#contact{
position: static;
transform: translate(0,0);
width:100%;
height: 100vh;
box-sizing: border-box;
}
.c-heading h1{
font-size: 2.2rem;
text-align: center;
}
}
Viewing mode
Inspecting mode
I tried something with the #media and max-width it is not working too.
Why can't I change the width of my website while I'm normally viewing it, but I can do it while I am inspecting it?
I viewed the code and I can't see the problem.
Your Code is actually Fine, its the minimum Browser size for chrome(which i tested on) and other browsers, I cant see why you would make it that small, but here is the minimum size i can get with inspect element
https://ibb.co/sCQQnV9
Its not your code, but the browser
hope it helps
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 am too weak in designing, so practicing some css
But i am stucked on backface-visibility:hidden; but don't know why its not working, its working on an class but not in another class while i have coded the attribute with both classes at a time
can anyone explain this ?
here is my codes
body{
background: #292929;
align-items: center;
display: flex;
justify-content: center;
font-family: arial;
height: 100vh;
}
.cardBox{
perspective: 500px;
margin: 15px;
}
.card{
position: relative;
width: 150px;
height: 150px;
background: #fff;
transform-style: preserve-3d;
transition: .5s ease;
box-shadow: 0 30px 30px rgba(0, 0, 0, .5);
}
.facebook{
background: #3b5998;
}
.twitter{
background: #00aced;
}
.googleplus{
background: #dd4b39;
}
.card-front,
.card-back{
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
color: #fff;
backface-visibility: hidden;
justify-content: center;
align-items: center;
display: flex;
}
.card-front{
font-size: 40px;
}
.card-back{
font-size: 30px;
}
.cardBox:hover .card{
transform: rotateY(180deg);
}
.card-back{
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d card flip animation - css tutorial - Pure Css Social Media Buttons</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="cardBox">
<div class="card facebook">
<div class="card-front">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
<div class="card-back">Facebook</div>
</div>
</div>
<div class="cardBox">
<div class="card twitter">
<div class="card-front">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
<div class="card-back">Twitter</div>
</div>
</div>
<div class="cardBox">
<div class="card googleplus">
<div class="card-front">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</div>
<div class="card-back">Google+</div>
</div>
</div>
</body>
</html>
if anyone can find the bug please indicate it.
body {
background: #292929;
align-items: center;
display: flex;
justify-content: center;
font-family: arial;
height: 100vh;
}
.cardBox {
perspective: 500px;
margin: 15px;
}
.card {
position: relative;
width: 150px;
height: 150px;
background: #fff;
transform-style: preserve-3d;
transition: 0.5s ease;
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
}
.facebook {
background: #3b5998;
}
.twitter {
background: #00aced;
}
.googleplus {
background: #dd4b39;
}
.card-front,
.card-back {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
color: #fff;
backface-visibility: hidden;
justify-content: center;
align-items: center;
display: flex;
}
.card-front {
font-size: 40px;
transform: rotateY(0deg);
}
.card-back {
font-size: 30px;
transform: rotateY(-180deg);
}
.cardBox:hover .card {
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
3d card flip animation - css tutorial - Pure Css Social Media
Buttons
</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<div class="cardBox">
<div class="card facebook">
<div class="card-front">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
<div class="card-back">Facebook</div>
</div>
</div>
<div class="cardBox">
<div class="card twitter">
<div class="card-front">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
<div class="card-back">Twitter</div>
</div>
</div>
<div class="cardBox">
<div class="card googleplus">
<div class="card-front">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</div>
<div class="card-back">Google+</div>
</div>
</div>
</body>
</html>
Sorry I don't know how to use stack overflow properly yet and I think I'm pretty bad at explaining, but you should rotate the card-front and card-back (when it is not hovered)(front should be 0deg, back should be -180deg )
I'm having a little problem with my Navbar icons. I'm trying to put my Instagram and YouTube icons, but they don't show up. When I click the link, I go to youtube/instagram page, but they are not displaying in the navbar.
body {
font-family: monospace;
}
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
nav {
height: 80px;
background: #313840;
}
nav img {
width: 150px;
position: absolute;
top: 5px;
left: 0;
margin-left: 35px;
}
.social-media-icons {
height: 10px;
font-size: 30px;
margin-bottom: 0px;
margin-left: 200px;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #313840;
color: #fff;
height: 40px;
}
.fa-instagram {
background: #313840;
color: white;
margin-top: 30px;
height: 40px;
margin-right: 30px;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="header.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="social-media-icons">
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="mmt-white.png">
<ul>
<li> Home</li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<li2>Acessar</li>
</ul>
</nav>
</body>
</html>
This is because the social media icons are part of the Font Awesome Brands font family.
Change the mark up from fas to fab
<div class="social-media-icons">
</div>
body {
font-family: monospace;
}
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
nav {
height: 80px;
background: #313840;
}
nav img {
width: 150px;
position: absolute;
top: 5px;
left: 0;
margin-left: 35px;
}
.social-media-icons {
height: 10px;
font-size: 30px;
margin-bottom: 0px;
margin-left: 200px;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #313840;
color: #fff;
height: 40px;
}
.fa-instagram {
background: #313840;
color: white;
margin-top: 30px;
height: 40px;
margin-right: 30px;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="header.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="social-media-icons">
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="mmt-white.png">
<ul>
<li> Home</li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<li2>Acessar</li>
</ul>
</nav>
</body>
</html>
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>