I am beginner and learning css.I have two questions.
I want to display text below icon box but it's coming right side of
each icon. what mistake am i doing?
I am using display flex,alignItem center, justify content in 3
classes(body ,wrapper, item). Looks like i'm repeating code. Can you suggest good practice?
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.item {
width: 80px;
height: 80px;
margin: 2px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
cursor: pointer;
border-radius: 3px;
}
.item:hover {
background-color: #F0F1F7;
transform: scale(1.3);
}
.icon {
padding: 10px;
border-radius: 50%;
background-color: rgb(105, 204, 211);
color: white;
}
.text{
padding-top:10px;
display: inline-flex;
vertical-align: middle;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="item">
<i class="icon material-icons">directions_bike</i>
<small class="text">Bicycle</small>
</div>
<div class="item">
<i class="icon material-icons">backup</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">email</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">airplanemode_active</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">insert_chart</i>
<small></small>
</div>
</div>
</body>
</html>
I would suggest adding flex-direction: column; to your .item class.
.item {
width: 80px;
height: 80px;
margin: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
cursor: pointer;
border-radius: 3px;
}
Here's a codepen: https://codepen.io/josh_minkler/pen/wvvZYeM
CSS tricks has a great guide to flexbox here
Related
I'm sorry as I am aware that this question or similar have been posted
Fully display background image
unable to display the background image to full screen of the browser and make it responsive
And so on... but I am pulling my hair apart.
I'm trying to have the image fit the width size of the browser, but I want it fully displayed. And if I change the size of the browser, I want the image to keep its full size.
I have tried fixing the height of the .banner which gives me exactly what I want (height of image for instance as height : 600px). But then this height is obviously not responsive if I shorten the width.
Set at 100% doesn't worse neither. I tried 100vh as well. I tried background-size:contain; or cover... I'm running out of energy trying to figure this out...
Any ideas?
Thank you
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exoticar</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.min.css">
</head>
<body>
<div class="banner">
<nav>
<div class="img"><img class="logo" src="img/logo.png"></div>
<div class="buttons">
<button> Home </button>
<button> About </button>
<button> Services </button>
<button> Investors </button>
<button> Contact </button>
</div>
</nav>
<div class="centerbanner">
<h1>CREATING THE FUTURE</h1>
<p>Your new experience. Your new friend</p>
<button> Learn More </button>
</div>
</div>
body {
font-family: Arial;
}
nav {
height: 65px;
width: 100%;
background-color: #000;
opacity: .82;
display: flex;
align-items: center;
justify-content: space-evenly;
}
nav button {
text-transform: uppercase;
background-color: #000;
opacity: .82;
color: whitesmoke;
border: none;
}
nav button:hover {
color: red;
}
.buttons {
width: 730px;
display: flex;
justify-content: space-between;
}
.banner {
background-image: url('https://wallpaperfx.com/view_image/ferrari-612-black-1366x768-wallpaper-16089.jpg');
display: flex;
height: 100vh;
width: 100%;
align-items: center;
justify-content: flex-start;
flex-direction: column;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* resize: both; */
/* overflow: scroll; */
}
.centerbanner {
display: flex;
align-self: center;
justify-content: center;
flex-direction: column;
text-align: center;
margin-top: 100px;
/* align-self: flex-start; */
}
.centerbanner * {
color: white;
text-align: center;
}
.centerbanner h1 {
font-size: 60px;
margin-bottom: 0;
}
.centerbanner p {
/*margin-top: 0;*/
font-size: 20px;
}
.centerbanner button {
text-transform: uppercase;
border: none;
background-color: red;
width: fit-content;
align-self: center;
padding: 1em 2em;
}
.centerbanner button:hover {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exoticar</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.min.css">
</head>
<body>
<div class="banner">
<nav>
<div class="img"><img class="logo" src="img/logo.png"></div>
<div class="buttons">
<button> Home </button>
<button> About </button>
<button> Services </button>
<button> Investors </button>
<button> Contact </button>
</div>
</nav>
<div class="centerbanner">
<h1>CREATING THE FUTURE</h1>
<p>Your new experience. Your new friend</p>
<button> Learn More </button>
</div>
</div>
PS : the image I use isn't the exact same, but is a .png image of 1366 x 612 px. This one is close to that.
Thank you!
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>
I'm new to HTML/CSS. I'm trying to space out the items on my nav-link, due to the fact that the "collections" and "spark" seem to be overlapping each other. Is there any way to go about this, and why it is happening? should i accomplish this using Flexbox or grid? I've included the code below.
<!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>My Website</title>
<link rel="stylesheet" href="nav.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=Ubuntu:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<div class="navigation-wrapper">
<div class="left-column">
<img src="Logos/codepen-wordmark-display-inside-
white#10x.png" alt="Logo">
</div>
<div class="center-column">
<div class="links-wrapper">
<div class="nav-link">
Pens
</div>
<div class="nav-link">
Projects
</div>
<div class="nav-link">
Posts
</div>
<div class="nav-link">
Collections
</div>
<div class="nav-link">
<div class="icon">
<i class="fas fa-chevron-down"></i>
Spark
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
------CSS Here------
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
.nav-link a {
color:#cbcbcb;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
font-weight: bold;
transition: 1.0s;
}
The problem lies here :
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
You have given a fixed width to the nav-link class and that's why the content is overlapping. Change the CSS like this:
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4rem; /* add some gap as well */
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
/* width: 70px; */
text-align: center;
}
.head{
display:flex;
}
.navbar{
display:flex;
}
a{
text-decoration:none;
margin-right:2rem;
}
li{
list-style:none;
}
img{
width:10%;
}
<!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>
</head>
<body>
<header class="head">
<div class="logo">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
<nav class="navbar">
<li>Pens</li>
<li>Projects</li>
<li>Posts</li>
<li>Collections</li>
<li>Spark</li>
</nav>
</header>
</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>
I placed an icon cart from Font Awesome in my Navigation Bar. The problem is that this line appears to the left below in the cart icon when I go over with my mouse. I tried a lot of things but I could not find a way to remove this line:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Σκοτεινή Πλευρά</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<nav>
<div class="row justify-content-center">
<div class="Basket">
<a href="#">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span class="Basket_Number">2</span>
</a>
</div>
</div>
</nav>
</body>
</html>
.Basket {
display: inline-block;
text-align: center;
margin-right: 11px;
margin-bottom: -6px;
}
.Basket a {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
margin-top: 100px;
font-size: 30px;
width: 40px;
height: 40px;
color: #332f25;
transition: color 0.3s ease;
text-decoration: none;
}
.Basket_Number {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: -15px;
left: 35px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fe4c50;
font-size: 12px;
color: white;
}
Just add this css in to alter the hover state:
.Basket :hover {
text-decoration: none;
}
Use the :hover selector to get rid of the underline when hovering
.Basket a:hover {
text-decoration: none;
}