I'm creating a website. On default, I want to have an fontawesome icon on the div, but when user hover to this div or key focus I want to hide the icon and show text "Home", "Offert" etc.
.page-nav-menu {
height: 45px;
width: 100%;
margin: auto;
text-align: center;
}
.nav-menu-option {
height: 100%;
width: 120px;
text-align: center;
background: black;
color: white;
font-size: 22px;
padding: 5px;
padding-top: 20px !important;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
transition: 0.5 background;
margin: auto;
margin-right: 10px !important;
}
.nav-menu-option:focus,
.nav-menu-option:hover {
outline: none;
background: #1b63f4c8;
transition: 0.5 background;
cursor: pointer;
outline: none;
}
.page-nav-menu a {
color: #1b63f4c8;
border-bottom: none;
}
.page-nav-menu a:focus,
.page-nav-menu a:hover {
outline: none;
border-bottom: none;
}
#nav-option-1 {
width: 100px;
margin-left: 350px;
}
#nav-option-1::before {
content: '';
}
#nav-option-1::after,
#nav-option-1:hover {
content: Home;
}
#nav-option-2 {
width: 130px;
}
a {
color: #1a1a1a;
text-decoration: none;
border-bottom: 3px solid black;
border-radius: 1px;
}
a:focus,
a:hover {
border-bottom: 3px solid #1b63f4;
border-radius: 1px;
}
<div class="page-nav-menu flex">
<a href="/">
<div class="nav-menu-option" id="nav-option-1"><i class="fa-solid fa-house-chimney"></i></div>
</a>
<a href="offer">
<div class="nav-menu-option"><i class="fa-solid fa-laptop-code"></i></div>
</a>
<a href="realisations">
<div class="nav-menu-option" id="nav-option-2"><i class="fa-solid fa-globe"></i></div>
</a>
<a href="about-me">
<div class="nav-menu-option">fa-solid fa-user</div>
</a>
<a href="contact">
<div class="nav-menu-option"><i class="fa-solid fa-envelope"></i></div>
</a>
</div>
What can I do?
Kind Regards
I'm a new programer so I'm not sure if I can help you but this is my result
result:
const iconElement = document.querySelector('.fa-globe'); /*icon element*/
const nav_menu_option = document.getElementById('nav-option-2')/*nav option element */
nav_menu_option.addEventListener('mouseenter', () => {
iconElement.style.display = 'none';
nav_menu_option.innerHTML = 'realisations' ;
})
nav_menu_option.addEventListener('mouseleave', () => {
iconElement.style.display = 'block'/*or whatever you want*/;
nav_menu_option.innerHTML = '<i class="fa-solid fa-globe"></i>';
})
<html>
<body>
<a href="realisations">
<div class="nav-menu-option" id="nav-option-2"><i class="fa-solid fa-globe"></i></div>
</a>
</body>
<script src="https://kit.fontawesome.com/8367bf7b85.js" crossorigin="anonymous"></script>
</html>
I really really hope I helped you.
You can put icon in a div and put display:none; property inside nav-menu-option:hover
.page-nav-menu {
height: 45px;
width: 100%;
margin: auto;
text-align: center;
}
.nav-menu-option .text {
display: none;
}
.nav-menu-option {
height: 100%;
width: 120px;
text-align: center;
background: black;
color: white;
font-size: 22px;
padding: 5px;
padding-top: 20px !important;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
transition: 0.5 background;
margin: auto;
margin-right: 10px !important;
}
.nav-menu-option:focus,
.nav-menu-option:hover {
outline: none;
background: #1b63f4c8;
transition: 0.5 background;
cursor: pointer;
outline: none;
}
.page-nav-menu a {
color: #1b63f4c8;
border-bottom: none;
}
.page-nav-menu a:focus,
.page-nav-menu a:hover {
outline: none;
border-bottom: none;
}
#nav-option-1 {
width: 100px;
margin-left: 350px;
}
#nav-option-1::before {
content: '';
}
#nav-option-1::after,
#nav-option-1:hover {
content: Home;
}
#nav-option-2 {
width: 130px;
}
a {
color: #1a1a1a;
text-decoration: none;
border-bottom: 3px solid black;
border-radius: 1px;
}
a:focus,
a:hover {
border-bottom: 3px solid #1b63f4;
border-radius: 1px;
}
.nav-menu-option:hover .icon {
display: none;
}
.nav-menu-option:hover .text {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
<div class="page-nav-menu flex">
<a href="/">
<div class="nav-menu-option"><div class="icon"><i class="fa-solid fa-house-chimney"></i></div><div class="text">Home</div></div>
</a>
<a href="offer">
<div class="nav-menu-option"><div class="icon"><i class="fa-solid fa-laptop-code"></i></div><div class="text">Offer</div></div>
</a>
<a href="realisations">
<div class="nav-menu-option"><div class="icon"><i class="fa-solid fa-globe"></i></div><div class="text">Realisation</div></div>
</a>
<a href="about-me">
<div class="nav-menu-option"><div class="icon">
<i class="fa-solid fa-user"></i>
</div><div class="text">About me</div></div>
</a>
<a href="contact">
<div class="nav-menu-option"><div class="icon"><i class="fa-solid fa-envelope"></i></div><div class="text">Contact</div></div>
</a>
</div>
if you want it with fade effect you can use this :)
PS: optimized your code and removed unnecessary ones
body {
margin: 0;
padding: 0;
}
.page-nav-menu {
text-align: center;
}
.page-nav-menu a {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav-menu-option {
position: relative;
display: inline-block;
margin: 0 5px 5px;
padding: 20px 5px;
width: 120px;
font-size: 1.5em;
border-radius: 0 0 40px 40px;
background: black;
color: white;
transition: all 0.5s ease;
}
.nav-menu-option:focus,
.nav-menu-option:hover {
background: #1b63f4c8;
cursor: pointer;
}
.nav-menu-option>* {
transition: visibility 0.5s, opacity 0.3s linear;
}
.nav-menu-option>.title {
font-family: 'Courier New', Courier, monospace;
position: absolute;
left: 0;
right: 0;
opacity: 0;
bottom: 30%;
text-transform: uppercase;
visibility: hidden;
}
.nav-menu-option:hover .title,
.nav-menu-option:focus .title {
visibility: visible;
opacity: 1;
}
.nav-menu-option:hover .icon,
.nav-menu-option:focus .icon {
opacity: 0;
visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<div class="page-nav-menu flex">
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-house-chimney icon"></i>
<span class="title">Home</span>
</div>
</a>
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-laptop-code icon"></i>
<span class="title">Laptop</span>
</div>
</a>
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-globe icon"></i>
<span class="title">Global</span>
</div>
</a>
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-user icon"></i>
<span class="title">User</span>
</div>
</a>
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-envelope icon"></i>
<span class="title">Mail</span>
</div>
</a>
</div>
Try the following it should work using display none and display block on each child element
CSS
<style>
.page-nav-menu {
height: 45px;
width: 100%;
margin: auto;
text-align: center;
}
.nav-menu-option {
height: 100%;
width: 120px;
text-align: center;
background: black;
color: white;
font-size: 22px;
padding: 5px;
padding-top: 20px !important;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
transition: 0.5 background;
margin: auto;
margin-right: 10px !important;
}
.nav-menu-option:focus,
.nav-menu-option:hover {
outline: none;
background: #1b63f4c8;
transition: 0.5 background;
cursor: pointer;
outline: none;
}
.page-nav-menu a {
color: #1b63f4c8;
border-bottom: none;
}
.page-nav-menu a:focus,
.page-nav-menu a:hover {
outline: none;
border-bottom: none;
}
#nav-option-1 {
width: 100px;
margin-left: 350px;
}
#nav-option-1::before {
content: "";
}
#nav-option-1::after,
#nav-option-1:hover {
content: Home;
}
#nav-option-2 {
width: 130px;
}
a {
color: #1a1a1a;
text-decoration: none;
border-bottom: 3px solid black;
border-radius: 1px;
}
a:focus,
a:hover {
border-bottom: 3px solid #1b63f4;
border-radius: 1px;
}
.nav-menu-option:hover i {
display: none;
}
.nav-menu-option:hover span {
display: block;
}
.nav-menu-option span {
display: none;
}
</style>
Html
<div class="page-nav-menu flex">
<a href="/">
<div class="nav-menu-option" id="nav-option-1">
<i class="fa-solid fa-house-chimney"></i><span>home</span>
</div>
</a>
<a href="offer">
<div class="nav-menu-option">
<i class="fa-solid fa-laptop-code"></i><span>gallery</span>
</div>
</a>
<a href="realisations">
<div class="nav-menu-option" id="nav-option-2">
<i class="fa-solid fa-globe"></i><span>etc</span>
</div>
</a>
<a href="about-me">
<div class="nav-menu-option">
<i class="fa-solid fa-user"></i><span>test</span>
</div>
</a>
<a href="contact">
<div class="nav-menu-option">
<i class="fa-solid fa-envelope"></i><span>test</span>
</div>
</a>
</div>
Related
I tried to put the elements of social networks together and when I hover the mouse over each element it grows to a size of 200 pixels. I wrote all the code, but when the mouse is placed on the element, the element does not grow properly and looks like an ellipse. Is there anyone who can help me with this?
<style>
:root {
--color-orange: #ff6600;
--color-green: #22d122;
--color-cyan: #33ffff;
--color-magenta: #f33192;
--color-white: #ffffff;
--color-blue: #166fd4;
--color-magenta-dark:#831a4e;
--color-gray:#d6d6d6;
--color-red:#ff0000;
--color-graydark:#333;
--color-blue-dark:#103d68;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, auto);
place-content: center;
width: 100%;
height: 100vh;
background-color: var(--color-gray);
}
.button {
display: inline-block;
background-color: var(--color-white);
width: 60px;
height: 60px;
overflow: hidden;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.button:hover {
width: 200px;
}
.button .icon {
display: inline-block;
text-align: center;
font-size: 20px;
border-radius: 50%;
height: 60px;
width: 60px;
line-height: 60px;
transition: all 0.3s ease-out;
}
.button:hover .icon i {
color: var(--color-white);
}
.button:nth-child(1):hover .icon {
background-color: var(--color-blue-dark);
}
.button:nth-child(2):hover .icon {
background-color: var(--color-blue);
}
.button:nth-child(3):hover .icon {
background-color: var(--color-magenta);
}
.button:nth-child(4):hover .icon {
background-color: var(--color-red);
}
.button span {
font-size: 20px;
font-weight: bold;
margin-left: 10px;
}
.button:nth-child(1) span {
color: var(--color-blue-dark);
}
.button:nth-child(2) span {
color: var(--color-blue);
}
.button:nth-child(3) span {
color: var(--color-magenta);
}
.button:nth-child(4) span {
color: var(--color-red);
}
</style>
<div class="wrapper">
<div class="button">
<div class="icon">
<i class="fab fa-facebook-f"></i>
</div>
<span>Facebook</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-twitter"></i>
</div>
<span>Twitter</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-instagram"></i>
</div>
<span>Instagram</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<span>Youtube</span>
</div>
</div>
Change the value of your border-radius on .button:hover
:root {
--color-orange: #ff6600;
--color-green: #22d122;
--color-cyan: #33ffff;
--color-magenta: #f33192;
--color-white: #ffffff;
--color-blue: #166fd4;
--color-magenta-dark: #831a4e;
--color-gray: #d6d6d6;
--color-red: #ff0000;
--color-graydark: #333;
--color-blue-dark: #103d68;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, auto);
place-content: center;
width: 100%;
height: 100vh;
background-color: var(--color-gray);
}
.button {
display: inline-block;
background-color: var(--color-white);
width: 60px;
height: 60px;
overflow: hidden;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-out;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.button:hover {
width: 200px;
border-radius: 50px;
}
.button .icon {
display: inline-block;
text-align: center;
font-size: 20px;
border-radius: 50%;
height: 60px;
width: 60px;
line-height: 60px;
transition: all 0.3s ease-out;
}
.button:hover .icon i {
color: var(--color-white);
}
.button:nth-child(1):hover .icon {
background-color: var(--color-blue-dark);
}
.button:nth-child(2):hover .icon {
background-color: var(--color-blue);
}
.button:nth-child(3):hover .icon {
background-color: var(--color-magenta);
}
.button:nth-child(4):hover .icon {
background-color: var(--color-red);
}
.button span {
font-size: 20px;
font-weight: bold;
margin-left: 10px;
}
.button:nth-child(1) span {
color: var(--color-blue-dark);
}
.button:nth-child(2) span {
color: var(--color-blue);
}
.button:nth-child(3) span {
color: var(--color-magenta);
}
.button:nth-child(4) span {
color: var(--color-red);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
<div class="wrapper">
<div class="button">
<div class="icon">
<i class="fab fa-facebook-f"></i>
</div>
<span>Facebook</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-twitter"></i>
</div>
<span>Twitter</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-instagram"></i>
</div>
<span>Instagram</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<span>Youtube</span>
</div>
</div>
You also need to change height on hover.
.button:hover {
width: 200px;
height: 200px;
border-radius: 50px;
}
But I recommend you to use transform: scale(2) if you aiming for performance.
when you hover the button its height increases and the width
.button:hover{
transform:scale(1.015deg)
}
I'm using this tutorial, and beside some id/class name, I did exactly the same as the tutorial, but i still can't make the checked work.
I didn't get through the entire tutorial.
I tested both codes (code I tested with : here), but it looks like the problem isn't coming from the checkbox.
Here's the HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>Test Sidebar</title>
</head>
<body>
<input type="checkbox" id="check">
<header>
<label for="check">
<i class="fas fa-bars" id="sidebarBtn"></i>
</label>
<div class="leftArea">
<h3>Side <span>Bar</span></h3>
</div>
<div class="rightArea">
Logout
</div>
<div class="sidebar">
<center>
<img src="pic.jpg" class="profileImage" alt="">
<h4>Amanda</h4>
</center>
<i class="fas fa-desktop"></i><span>Dashboard</span>
<i class="fas fa-cogs"></i><span>Components</span>
<i class="fas fa-table"></i><span>Tables</span>
<i class="fas fa-th"></i><span>Forms</span>
<i class="fas fa-info-circle"></i><span>About</span>
<i class="fas fa-sliders-h"></i><span>Settings</span>
</div>
</header>
</body>
</html>
Here's the CSS :
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
}
header {
position: fixed;
background: #22242A;
padding: 20px;
width: 100%;
height: 30px;
}
.leftArea h3 {
color: #fff;
margin: 0;
text-transform: uppercase;
font-size: 22px;
font-weight: 900;
}
.leftArea span {
color: #1DC4E7;
}
.logoutBtn {
padding: 5px;
background: #19B3D3;
text-decoration: none;
float: right;
margin-top: -30px;
margin-right: 40px;
border-radius: 2px;
font-size: 15px;
font-weight: 600;
color: #fff;
transition: 0.5s;
transition-property: background;
}
.logoutBtn:hover {
background: #0D9DBB;
}
.sidebar {
background: #2F323A;
margin-top: 22px;
/* margin-top: 70px - n'as pas l'air de fonctionner */
padding-top: 30px;
position: fixed;
left: 0;
width: 250px;
height: 100%
}
.sidebar .profileImage {
width: 100px;
height: 100px;
border-radius: 100px;
margin-bottom: 10px;
}
.sidebar h4 {
color: #ccc;
margin-top: 0;
margin-bottom: 20px;
}
.sidebar a {
color: #fff;
display: block;
width: 100%;
line-height: 60px;
text-decoration: none;
padding-left: 40px;
box-sizing: border-box;
transition: 0.5s;
transition-property: background;
}
.sidebar a:hover {
background: #19B3D3;
}
.sidebar i {
padding-right: 10px;
}
label #sidebarBtn {
z-index: 1;
color: #fff;
position: fixed;
cursor: pointer;
left: 300px;
font-size: 20px;
margin: 5px 0;
transition: 0.5s;
transition-property: color;
}
label #sidebarBtn:hover {
color: #19B3D3;
}
#check:checked ~ .sidebar {
left: -190px;
}
Place an <input type="checkbox" id="check"> inside your head tag, but above the line <label for="check">.
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
}
header {
position: fixed;
background: #22242A;
padding: 20px;
width: 100%;
height: 30px;
}
.leftArea h3 {
color: #fff;
margin: 0;
text-transform: uppercase;
font-size: 22px;
font-weight: 900;
}
.leftArea span {
color: #1DC4E7;
}
.logoutBtn {
padding: 5px;
background: #19B3D3;
text-decoration: none;
float: right;
margin-top: -30px;
margin-right: 40px;
border-radius: 2px;
font-size: 15px;
font-weight: 600;
color: #fff;
transition: 0.5s;
transition-property: background;
}
.logoutBtn:hover {
background: #0D9DBB;
}
.sidebar {
background: #2F323A;
margin-top: 22px;
/* margin-top: 70px - n'as pas l'air de fonctionner */
padding-top: 30px;
position: fixed;
left: 0;
width: 250px;
height: 100%
}
.sidebar .profileImage {
width: 100px;
height: 100px;
border-radius: 100px;
margin-bottom: 10px;
}
.sidebar h4 {
color: #ccc;
margin-top: 0;
margin-bottom: 20px;
}
.sidebar a {
color: #fff;
display: block;
width: 100%;
line-height: 60px;
text-decoration: none;
padding-left: 40px;
box-sizing: border-box;
transition: 0.5s;
transition-property: background;
}
.sidebar a:hover {
background: #19B3D3;
}
.sidebar i {
padding-right: 10px;
}
label #sidebarBtn {
z-index: 1;
color: #fff;
position: fixed;
cursor: pointer;
left: 300px;
font-size: 20px;
margin: 5px 0;
transition: 0.5s;
transition-property: color;
}
label #sidebarBtn:hover {
color: #19B3D3;
}
#check:checked ~ .sidebar {
left: -190px;
}
<body>
<header>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="sidebarBtn"></i>
</label>
<div class="leftArea">
<h3>Side <span>Bar</span></h3>
</div>
<div class="rightArea">
Logout
</div>
<div class="sidebar">
<center>
<img src="pic.jpg" class="profileImage" alt="">
<h4>Amanda</h4>
</center>
<i class="fas fa-desktop"></i><span>Dashboard</span>
<i class="fas fa-cogs"></i><span>Components</span>
<i class="fas fa-table"></i><span>Tables</span>
<i class="fas fa-th"></i><span>Forms</span>
<i class="fas fa-info-circle"></i><span>About</span>
<i class="fas fa-sliders-h"></i><span>Settings</span>
</div>
</header>
</body>
Ok, i just understood where i messed up. The tag should close after the rightArea class.
<header>
<label for="check">
<i class="fas fa-bars" id="sidebarBtn"></i>
</label>
<div class="leftArea">
<h3>Side <span>Bar</span></h3>
</div>
<div class="rightArea">
Logout
</div>
</header>
This way, i can have my input BEFORE my header, and it would works. I think it's because now, the sidebar isn't in the header anymore. That was pretty dumb on my part, sorry, and thank you for helping me out there.
I am currently trying to implement a tooltip feature when a user hovers over a sidebar navigation item. It is currently being rendered in the DOM but I can not get it to display no matter what I change in the styles. I have attempted adding a z-index, changing the display and position attributes but to no success. Any CSS experts out there know what would be causing this? Link to the codepen here.
HTML:
<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>
<div class="sidebar">
<a href="#">
<i class="fas fa-home"></i>
<span class="tooltip">Home</span>
</a>
<a href="#">
<i class="fas fa-chess-queen"></i>
<span class="tooltip">Crown</span>
</a>
<a href="#">
<i class="fas fa-history"></i>
<span class="tooltip">History</span>
</a>
<a href="#">
<i class="fas fa-paper-plane"></i>
<span class="tooltip">Send</span>
</a>
<div class="sidebar-bottom">
<a href="#">
<i class="fas fa-comment-dots"></i>
<span class="tooltip">Send feedback</span>
</a>
<a href="#">
<i class="fas fa-user-circle preferences"></i>
<span class="tooltip">Preferences</span>
</a>
</div>
</div>
<div id="main">
hello
</div>
SCSS:
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #7b68ee;
transition: 0.5s;
overflow-x: hidden;
padding-top: 20px;
white-space: nowrap;
a {
position: relative;
left: 17.5%;
text-decoration: none;
text-align: center;
font-size: 25px;
border-radius: 90px;
width: 20%;
color: #ffffff;
display: block;
margin-bottom: 10px;
height: 50px;
width: 50px;
&:hover {
background: #ffffff1a;
transition: 0.3s;
}
.fa, .far, .fas {
line-height: 50px;
}
.tooltip {
display: inline-block;
position: absolute;
background-color: black;
padding: 8px 15px;
border-radius: 3px;
margin-top: -26px;
left: 90px;
opacity: 0;
visibility: hidden;
font-size: 13px;
letter-spacing: .5px;
&:before {
content: '';
display: block;
position: absolute;
left: -4px;
top: 10px;
transform: rotate(45deg);
width: 10px;
height: 10px;
background-color: inherit;
}
}
&:hover {
background-color: green;
.tooltip {
visibility: visible;
opacity: 1;
}
}
&.active {
background-color: pink;
i {
color: purple;
}
}
}
.sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0;
}
}
I made adjustments to your code in order to make it work. On :hover, the span which has a default display: none, will be displayed via display: block. You were referring to the anchor direclty, but you should consider the span that's inside the anchor (a) element.
.tooltip {
font-size: 10px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 0;
transform: translate(-50%, -50%);
left: 50%;
display: none;
padding: 2px 4px;
}
a:hover .tooltip {
display: block;
}
See this snippet for the solution to your problem.
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
top: 0;
left: 0;
background-color: #7b68ee;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar a {
position: relative;
left: 17.5%;
text-decoration: none;
text-align: center;
font-size: 25px;
border-radius: 90px;
width: 20%;
color: #ffffff;
display: block;
margin-bottom: 10px;
height: 50px;
width: 50px;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 4rem;
}
.fa,
.far,
.fas {
line-height: 50px !important;
}
.tooltip {
font-size: 10px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 0;
transform: translate(-50%, -50%);
left: 50%;
display: none;
padding: 2px 4px;
}
a:hover .tooltip {
display: block;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>
<div class="sidebar">
<a href="#">
<i class="fas fa-home"></i>
<span class="tooltip">Home</span>
</a>
<a href="#">
<i class="fas fa-chess-queen"></i>
<span class="tooltip">Crown</span>
</a>
<a href="#">
<i class="fas fa-history"></i>
<span class="tooltip">History</span>
</a>
<a href="#">
<i class="fas fa-paper-plane"></i>
<span class="tooltip">Send</span>
</a>
<div class="sidebar-bottom">
<a href="#">
<i class="fas fa-comment-dots"></i>
<span class="tooltip">Send feedback</span>
</a>
<a href="#">
<i class="fas fa-user-circle preferences"></i>
<span class="tooltip">Preferences</span>
</a>
</div>
</div>
<div id="main">
hello
</div>
Remove
overflow-x:hidden from .sidebar class and make some changes in .sidebar a .tooltip { top:10px; left:70px;} and add some style for #main { padding-left:75px; width:100%;}
CSS
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #7b68ee;
transition: 0.5s;
padding-top: 20px;
white-space: nowrap;
}
.sidebar a {
position: relative;
left: 17.5%;
text-decoration: none;
text-align: center;
font-size: 25px;
border-radius: 90px;
width: 20%;
color: #fff;
display: block;
margin-bottom: 10px;
height: 50px;
width: 50px;
}
.sidebar a:hover {
background: #fff 1a;
transition: 0.3s;
}
.sidebar a .fa, .sidebar a .far, .sidebar a .fas {
line-height: 50px;
}
.sidebar a .tooltip {
display: inline-block;
position: absolute;
background-color: black;
padding: 8px 15px;
border-radius: 3px;
top: 10px;
left: 70px;
opacity: 0;
visibility: hidden;
font-size: 13px;
letter-spacing: 0.5px;
}
.sidebar a .tooltip:before {
content: '';
display: block;
position: absolute;
left: -4px;
top: 10px;
transform: rotate(45deg);
width: 10px;
height: 10px;
background-color: inherit;
}
.sidebar a:hover {
background-color: green;
}
.sidebar a:hover .tooltip {
visibility: visible;
opacity: 1;
}
.sidebar a.active {
background-color: pink;
}
.sidebar a.active i {
color: purple;
}
.sidebar .sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0;
}
#main {
padding-left: 75px;
width:100%;
}
<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>
<div class="sidebar">
<a href="#">
<i class="fas fa-home"></i>
<span class="tooltip">Home</span>
</a>
<a href="#">
<i class="fas fa-chess-queen"></i>
<span class="tooltip">Crown</span>
</a>
<a href="#">
<i class="fas fa-history"></i>
<span class="tooltip">History</span>
</a>
<a href="#">
<i class="fas fa-paper-plane"></i>
<span class="tooltip">Send</span>
</a>
<div class="sidebar-bottom">
<a href="#">
<i class="fas fa-comment-dots"></i>
<span class="tooltip">Send feedback</span>
</a>
<a href="#">
<i class="fas fa-user-circle preferences"></i>
<span class="tooltip">Preferences</span>
</a>
</div>
</div>
<div id="main">
hello
</div>
Editing and adding code to snippet .This is the full code extraced from the below two links.
body {
font-family: 'Alegreya Sans', sans-serif;
overflow-x: hidden;
background: gray;
color: white;
}
#content {
padding: 15px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}
.slide a {
color: #000;
font-size: 36px;
}
.nav .close {
position: absolute;
top: 8px;
right: 22px;
margin-left: 50px;
font-size: 30px;
color: #ccc;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #282828;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a.item {
display: flex;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.nav .last {
border-bottom: 1px solid #ccc;
}
.nav a.item:hover {
color: #fff;
background-color: #cf0000;
transition: 0.4s;
}
.nav .icon {
padding-right: 10px;
font-size: 35px;
}
.nav ul {
display: flex;
position: absolute;
width: 100%;
margin-top: 50px;
}
.nav ul li {
list-style: none;
}
.nav ul li a.inline {
font-size: 26px;
color: #ccc;
padding: 6px 5px 3px;
}
.nav ul li a.inline:hover {
color: #cf0000;
}
.content p{
font-size: 18px;
text-align: center;
margin-left: 310px;
}
.footer-home{
position: fixed;
left: 0;
bottom: 0;
width:100%;
height: auto;
background-color:#282828;
color: white;
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<link rel="stylesheet" href="style.css">
<script>
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
</script>
</head>
<body>
<div id="content">
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<img src="#" alt="" width="150" height="100">
<i class="fas fa-home icon"></i>Home
<i class="fas fa-desktop icon"></i>Dashboards
<i class="fas fa-map-marker icon"></i>Engagements
<i class="fab fa-wpforms icon"></i>Contact
<ul>
Can't get dropdown to work.
Tried several ways to make dropdown active.
html - http://textsnip.com/nau26f
css - http://textsnip.com/dyk75z
Trying to make dropdown active when hovering over dashboards. Any help would be greatly appreciated.
Here's my solution
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
body {
font-family: 'Alegreya Sans', sans-serif;
overflow-x: hidden;
background: gray;
color: white;
}
#content {
padding: 15px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}
.slide a {
color: #000;
font-size: 36px;
}
.nav .close {
position: absolute;
top: 8px;
right: 22px;
margin-left: 50px;
font-size: 30px;
color: #ccc;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #282828;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a.item {
display: flex;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.nav .last {
border-bottom: 1px solid #ccc;
}
.nav a.item:hover {
color: #fff;
background-color: #cf0000;
transition: 0.4s;
}
.nav .icon {
padding-right: 10px;
font-size: 35px;
}
.nav ul {
display: flex;
position: absolute;
width: 100%;
margin-top: 50px;
}
.nav ul li {
list-style: none;
}
.nav ul li a.inline {
font-size: 26px;
color: #ccc;
padding: 6px 5px 3px;
}
.nav ul li a.inline:hover {
color: #cf0000;
}
.content p{
font-size: 18px;
text-align: center;
margin-left: 310px;
}
.footer-home{
position: fixed;
left: 0;
bottom: 0;
width:100%;
height: auto;
background-color:#282828;
color: white;
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.dropbtn {
display: flex;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
}
.dropdown-content a {
display: flex;
width: 100%;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.dropdown-content a:hover {background-color: #cf0000;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #cf0000;}
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<div id="content">
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<img src="#" alt="" width="150" height="100">
<i class="fas fa-home icon"></i>Home
<div class="dropdown">
<a class="dropbtn">
<i class="fas fa-desktop icon"></i>
Dashboards
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a href="maps.html" class="item">
<i class="fas fa-map-marker icon"></i>
Engagements
</a>
<a href="contact.html" class="item last">
<i class="fab fa-wpforms icon"></i>
Contact
</a>
</div>
</div>
I am trying to create some icons that overlay the border like this:
However when i try to do this i end up with:
Is there a way i can fix this? Dont worry about the icon color i changed it to black so that it is visible.Is there a way i can achieve this using HTML and CSS.
Here is my work:
https://codepen.io/anon/pen/YLdPjM
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
.red {
color: red;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
background-image: url("1.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
}
.back .caption:after{
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1,0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl{
font-family:'Lato', Arial, sans-serif;
font-weight:300;
bottom:40px;
left:40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px,0,0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0,0,0);
}
dl dt{
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight:700;
}
dl dd{
margin-left: 80px;
text-align:left;
}
dl dd:before,
dl dd:after{
display: table;
content: " ";
}
dl dd:after{
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0,0,0);
}
figure a{
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container{
left: 50%;
margin-left:-225px;
}
}
body {
background-color: #0F211E;
}
.recipe-card {
border-top: 15px solid lightblue;
border-bottom: 50px solid red;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news" >
<header>
<div class="nav">
<ul>
<li class="two"> <span>About</span></li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B " >Web Developer</h5>
<h1>Age: <font color="#8B8B8B">13</font></h1>
<h1>Email: <font color="#8B8B8B">fxgfnxngfx#gmail.com</font></h1>
<h1>Phone: <font color="#8B8B8B">0093836372</font></h1>
</div>
</div>
</aside>
<i class="fab fa-twitter fa-3x" style="color: black;"></i>
<i class="fab fa-instagram fa-3x" style="color: black;"></i>
<i class="fab fa-dribbble fa-3x" style="color: black;"></i>
<i class="fab fa-facebook-f fa-3x" style="color: black;"></i>
<i class="fab fa-snapchat-ghost fa-3x" style="color: black;"></i>
<i class="fab fa-google-plus-g fa-3x" style="color: black;"></i>
<i class="fab fa-youtube fa-3x" style="color: black;"></i>
<i class="fab fa-pinterest-p fa-3x" style="color: black;"></i>
</div>
</div><!-- .hero-content -->
</section>
</div>
</html>
Why are you using a border for this? Just have the icons inside a div and set the background colour of the div to red. See snippet below.
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
.red {
color: red;
}
.icon-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
background-color: #FC5558;
padding: 5px;
}
.icon-bar i {
color: #fff;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
background-image: url("1.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0, 1);
}
.back .caption:after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1, 0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl {
font-family: 'Lato', Arial, sans-serif;
font-weight: 300;
bottom: 40px;
left: 40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px, 0, 0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0, 0, 0);
}
dl dt {
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight: 700;
}
dl dd {
margin-left: 80px;
text-align: left;
}
dl dd:before,
dl dd:after {
display: table;
content: " ";
}
dl dd:after {
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0, 0, 0);
}
figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container {
left: 50%;
margin-left: -225px;
}
}
body {
background-color: #0F211E;
}
.recipe-card {
border-top: 15px solid lightblue;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news">
<header>
<div class="nav">
<ul>
<li class="two">
<span>About</span>
</li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B ">Web Developer</h5>
<h1>Age:
<font color="#8B8B8B">13</font>
</h1>
<h1>Email:
<font color="#8B8B8B">fxgfnxngfx#gmail.com</font>
</h1>
<h1>Phone:
<font color="#8B8B8B">0093836372</font>
</h1>
</div>
</div>
</aside>
<div class="icon-bar">
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-instagram fa-3x"></i>
<i class="fab fa-dribbble fa-3x"></i>
<i class="fab fa-facebook-f fa-3x"></i>
<i class="fab fa-snapchat-ghost fa-3x"></i>
<i class="fab fa-google-plus-g fa-3x"></i>
<i class="fab fa-youtube fa-3x"></i>
<i class="fab fa-pinterest-p fa-3x"></i>
</div>
</div>
</div>
<!-- .hero-content -->
</section>
</div>
</html>
You can wrap all icons in a DIV (class icon_row in my snippet below), apply position: absolute to that DIV and appy position: relative to the recipe-card DIV to define it as the position anchor for the icon DIV (and optionally use position settings like bottom, left etc. to fine-tune the position):
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
.red {
color: red;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
background-image: url("1.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0, 1);
}
.back .caption:after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1, 0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl {
font-family: 'Lato', Arial, sans-serif;
font-weight: 300;
bottom: 40px;
left: 40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px, 0, 0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0, 0, 0);
}
dl dt {
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight: 700;
}
dl dd {
margin-left: 80px;
text-align: left;
}
dl dd:before,
dl dd:after {
display: table;
content: " ";
}
dl dd:after {
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0, 0, 0);
}
figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container {
left: 50%;
margin-left: -225px;
}
}
body {
background-color: #0F211E;
}
.recipe-card {
border-top: 15px solid lightblue;
border-bottom: 50px solid red;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: relative;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
.icon_row {
position: absolute;
left: 30px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news">
<header>
<div class="nav">
<ul>
<li class="two">
<span>About</span>
</li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B ">Web Developer</h5>
<h1>Age:
<font color="#8B8B8B">13</font>
</h1>
<h1>Email:
<font color="#8B8B8B">fxgfnxngfx#gmail.com</font>
</h1>
<h1>Phone:
<font color="#8B8B8B">0093836372</font>
</h1>
</div>
</div>
</aside>
<div class="icon_row">
<i class="fab fa-twitter fa-3x" style="color: black;"></i>
<i class="fab fa-instagram fa-3x" style="color: black;"></i>
<i class="fab fa-dribbble fa-3x" style="color: black;"></i>
<i class="fab fa-facebook-f fa-3x" style="color: black;"></i>
<i class="fab fa-snapchat-ghost fa-3x" style="color: black;"></i>
<i class="fab fa-google-plus-g fa-3x" style="color: black;"></i>
<i class="fab fa-youtube fa-3x" style="color: black;"></i>
<i class="fab fa-pinterest-p fa-3x" style="color: black;"></i>
</div>
</div>
</div>
<!-- .hero-content -->
</section>
</div>
</html>
Try wrapping icons in a div with position:fixed and bottom: 0
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
.red {
color: red;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
background-image: url("1.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
}
.back .caption:after{
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1,0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl{
font-family:'Lato', Arial, sans-serif;
font-weight:300;
bottom:40px;
left:40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px,0,0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0,0,0);
}
dl dt{
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight:700;
}
dl dd{
margin-left: 80px;
text-align:left;
}
dl dd:before,
dl dd:after{
display: table;
content: " ";
}
dl dd:after{
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0,0,0);
}
figure a{
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container{
left: 50%;
margin-left:-225px;
}
}
body {
background-color: #0F211E;
}
.recipe-card {
border-top: 15px solid lightblue;
border-bottom: 50px solid red;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news" >
<header>
<div class="nav">
<ul>
<li class="two"> <span>About</span></li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B " >Web Developer</h5>
<h1>Age: <font color="#8B8B8B">13</font></h1>
<h1>Email: <font color="#8B8B8B">fxgfnxngfx#gmail.com</font></h1>
<h1>Phone: <font color="#8B8B8B">0093836372</font></h1>
</div>
</div>
</aside>
<div style="position: fixed; bottom:0;">
<i class="fab fa-twitter fa-3x" style="color: black;"></i>
<i class="fab fa-instagram fa-3x" style="color: black;"></i>
<i class="fab fa-dribbble fa-3x" style="color: black;"></i>
<i class="fab fa-facebook-f fa-3x" style="color: black;"></i>
<i class="fab fa-snapchat-ghost fa-3x" style="color: black;"></i>
<i class="fab fa-google-plus-g fa-3x" style="color: black;"></i>
<i class="fab fa-youtube fa-3x" style="color: black;"></i>
<i class="fab fa-pinterest-p fa-3x" style="color: black;"></i>
</div>
</div>
</div><!-- .hero-content -->
</section>
</div>
</html>
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
background-color: #0F211E;
}
.red {
color: red;
}
.icon-div{
background-color: red;
justify-content: space-evenly;
display: flex;
padding: 4px;
}
.icon-div i{
color: #fff;;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0, 1);
}
.back .caption:after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1, 0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl {
font-family: 'Lato', Arial, sans-serif;
font-weight: 300;
bottom: 40px;
left: 40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px, 0, 0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0, 0, 0);
}
dl dt {
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight: 700;
}
dl dd {
margin-left: 80px;
text-align: left;
}
dl dd:before,
dl dd:after {
display: table;
content: " ";
}
dl dd:after {
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0, 0, 0);
}
figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container {
left: 50%;
margin-left: -225px;
}
}
.recipe-card {
border-top: 15px solid lightblue;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news">
<header>
<div class="nav">
<ul>
<li class="two">
<span>About</span>
</li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B ">Web Developer</h5>
<h1>Age:
<font color="#8B8B8B">13</font>
</h1>
<h1>Email:
<font color="#8B8B8B">fxgfnxngfx#gmail.com</font>
</h1>
<h1>Phone:
<font color="#8B8B8B">0093836372</font>
</h1>
</div>
</div>
</aside>
<div class="icon-div">
<i class="fab fa-twitter fa-3x" ></i>
<i class="fab fa-instagram fa-3x" ></i>
<i class="fab fa-dribbble fa-3x" ></i>
<i class="fab fa-facebook-f fa-3x"></i>
<i class="fab fa-snapchat-ghost fa-3x" ></i>
<i class="fab fa-google-plus-g fa-3x" ></i>
<i class="fab fa-youtube fa-3x" ></i>
<i class="fab fa-pinterest-p fa-3x" ></i>
</div>
</div>
</div>
<!-- .hero-content -->
</section>
</div>
</html>