I have a navigation bar that will expand when the mouse is over it. I wish to display heading text once it is expanded (currently shows icons), I have used display: none on the heading tag, which then toggles to display: inline-block when the :hover event is active on the navbar. However, upon expansion of the navbar the text renders in on two lines before positioning itself into one which I want. I want to get rid of this and have the text render in as one line only while the navbar expands. My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script
src="https://kit.fontawesome.com/6cc49d804e.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading">
<h2>Expanded Test</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-fw fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
body {
}
/* Make the width full-size then use javascript to minimise so content fits */
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: width 0.5s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading {
display: none;
}
#sidenav-heading h2 {
margin: 0;
color: white;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
#expand-icon {
transition: transform 0.5s;
}
#sidenav:hover {
width: 280px;
}
#sidenav:hover #expand-icon {
transform: rotate(180deg);
}
#sidenav:hover #sidenav-heading {
display: inline-block;
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: left;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
.fas {
vertical-align: middle;
}
Please check this fiddle for what I mean when the navbar expands:
https://jsfiddle.net/4pk25oLh/
P.S. The effect I want is the same as when you get rid of the space in the heading text (however, I will need the space). Any help would be greatly appreciated.
Instead of using display property, you can create a cool fade animation for that.
First, add white-space: nowrap to the <h2>, so the text will not wrap.
Then, you use properties such as visiblity, opacity, max-width and transition to create the effect.
body {
}
/* Make the width full-size then use javascript to minimise so content fits */
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: width 0.5s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading {
display: inline-block;
}
#sidenav-heading h2 {
margin: 0;
color: white;
white-space: nowrap;
opacity: 0;
max-width: 0;
transition: 0.16s;
visibility: hidden;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
#expand-icon {
transition: transform 0.5s;
}
#sidenav:hover {
width: 280px;
}
#sidenav:hover #expand-icon {
transform: rotate(180deg);
}
#sidenav:hover #sidenav-heading h2 {
opacity: 1;
max-width: 100vw;
visibility: visible;
transition: 0.4s 0.5s;
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: left;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
.fas {
vertical-align: middle;
}
I think white-space: nowrap; might help.
#sidenav-heading h2 {
margin: 0;
color: white;
white-space: nowrap;
}
Please update below CSS selectors in your style file or CSS:
body {
}
/* Make the width full-size then use javascript to minimise so content fits */
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: width 0.5s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
#sidenav-heading {
display: inline-block;
position: absolute;
width: 240px;
left: 20px;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
opacity: 0;
}
#sidenav-heading h2 {
margin: 0;
color: white;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
#expand-icon {
transition: transform 0.5s;
}
#sidenav:hover {
width: 280px;
}
#sidenav:hover #expand-icon {
transform: rotate(180deg);
}
#sidenav:hover #sidenav-heading {
opacity: 1;
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: left;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
.fas {
vertical-align: middle;
}
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script
src="https://kit.fontawesome.com/6cc49d804e.js"
crossorigin="anonymous"
></script>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading">
<h2>Expanded Test</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-fw fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
Related
On hover I would like each icon to have an underline but instead all items are get an underline. I'm not sure how to get it to apply for only the icon that is being hovered.
I want something like this
hovered icon
but instead it looks like this
my hovered image
.top-bar {
display: flex;
align-items: center;
padding: 1.25rem 2rem;
}
.menu-btn {
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
width: 2.5rem;
}
.fa-bars {
font-size: 2.5rem;
}
.logo {
margin-left: 1rem;
}
.logo img {
display: block;
width: 10rem;
height: 1.66rem;
color: #000;
}
.controls {
position: relative;
font-size: 2rem;
margin-left: auto;
margin-right: 3rem;
}
.controls-icon::after {
content: "";
position: absolute;
left: 0;
bottom: -0.5rem;
height: 0.2rem;
width: 100%;
background-color: #000;
transition: all 0.5s;
transform: scaleX(0);
}
.controls-icon:hover::after {
transform: scale(1);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div class="top-bar container">
<div class="menu-btn"><i class="fa-solid fa-bars"></i></div>
<div class="logo"><img src="assets/img/logo.svg" alt="logo" /></div>
<div class="controls">
<i class="fa-solid fa-magnifying-glass controls-icon"></i>
<i class="fa-solid fa-play controls-icon"></i>
<i class="fa-solid fa-user controls-icon"></i>
</div>
</div>
set position of i relative. like this
i{ position:relative; }
.top-bar {
display: flex;
align-items: center;
padding: 1.25rem 2rem;
}
.menu-btn {
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
width: 2.5rem;
}
.fa-bars {
font-size: 2.5rem;
}
.logo {
margin-left: 1rem;
}
.logo img {
display: block;
width: 10rem;
height: 1.66rem;
color: #000;
}
.controls {
position: relative;
font-size: 2rem;
margin-left: auto;
margin-right: 3rem;
}
.controls-icon::after {
content: "";
position: absolute;
left: 0;
bottom: -0.5rem;
height: 0.2rem;
width: 100%;
background-color: #000;
transition: all 0.5s;
transform: scaleX(0);
}
.controls-icon:hover::after {
transform: scale(1);
}
i{
position:relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div class="top-bar container">
<div class="menu-btn"><i class="fa-solid fa-bars"></i></div>
<div class="logo"><img src="assets/img/logo.svg" alt="logo" /></div>
<div class="controls">
<i class="fa-solid fa-magnifying-glass controls-icon"></i>
<i class="fa-solid fa-play controls-icon"></i>
<i class="fa-solid fa-user controls-icon"></i>
</div>
</div>
I have implemented a sidebar and the collapse function (for minimizing the sidebar) works quite okay, but whenever I click on 'collapse' again to maximize the sidebar, the elements inside the sidebar are misaligned during few milliseconds and the logo text appears above the body. Please see the images below
[![enter image description here][1]][1]
[![enter image description here][2]][2]
How could I make it smoother and avoid the misalignments? It should be something linear without any vertical changes.
I've tried so many things but it was impossible for me to make it work.
Edit(2): This code is from Coding Lab, the way he did it is by replacing the class with another class every time you click the hamburger icon, changing it from bx-menu-alt-right to bx-menu or vice versa.
Since you minimize your sidebar basically to width: 0 when it reaches screen width of 786px, you could just make the logo and the whole sidebar content to disappear. Refer to this this JS fiddle, I've added some css style on your media query to not display the logo when your media query is true.
/* Google Font Link */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #11101D;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open{
width: 250px;
}
.sidebar .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
opacity: 1;
}
.sidebar .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
text-align: right;
}
.sidebar i{
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip{
display: none;
}
.sidebar input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #1d1b31;
}
.sidebar.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #1d1b31;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #1d1b31;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #11101d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #11101D;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile{
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #1d1b31;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile{
width: 250px;
}
.sidebar li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job{
font-size: 12px;
}
.sidebar .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #1d1b31;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
}
.home-section{
position: relative;
background: #E4E9F7;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section{
left: 250px;
width: calc(100% - 250px);
}
.home-section .text{
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip{
display: none;
}
}
<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/CodingLabYT-->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!--<title> Responsive Sidebar Menu | CodingLab </title>-->
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-c-plus-plus icon'></i>
<div class="logo_name">CodingLab</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-user' ></i>
<span class="links_name">User</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat' ></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder' ></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt' ></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart' ></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog' ></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<!--<img src="profile.jpg" alt="profileImg">-->
<div class="name_job">
<div class="name">Prem Shahi</div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</div>
<section class="home-section">
<div class="text">Dashboard</div>
</section>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
</body>
</html>
#media (max-width: 768px) {
svg, #sidebarLinks{
display: none;
}
}
Edit: If you want to minimize and expand the sidebar using a toggle-button and leave the icons then you should separate the icons from their title/description and hide ONLY the title/description on clicking the toggle-button. Change sidebar width whenever you click using .style.property. Anyway here is a video tutorial about this same feature.
Beyond a certain width your icons and texts are bound to wrap around or overlap. It's not really a misalignment but default behavior.
What you can do is reduce the font size of your text on minimize/maximize sidebar for a range of width, say from 0px to 150px width, change your text font size to be smaller. You can also use vmin, vmax instead of px or rem for font size. Also, restrict the sidebar minimum width by changing 0 to a specific value in .card class.
Or, you can only display the icons on collapse and hide the text.
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
i {
margin-right: 0.3rem;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.05rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
}
.showcase-img {
width: 960px;
height: 400px;
background-color: blue; /* For testing */
border-radius: 4px;
}
.showcase-img img {
width: 100%;
height: 100%;
opacity: 0.1;
}
.showcase ul {
display: flex;
bottom: 13.73rem;
position: relative;
justify-content: space-between;
}
.showcase ul li {
font-size: 2rem;
float: left;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img src="images/#" alt="">
</div>
<ul>
<li class="left-flash"><i class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
</body>
</html>
// I want the left arrow to stick to the left side of the showcase-img container and the right arrow to the right side... I tried justify-content: space-between; but it didn't work, I can of course add margins but that's annoying and would make the site less responsive, any help is greatly appreciated!
 
it is very useful for your question
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase-img img:hover {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
// When i hover over the showcase-img container the opacity changes but when the mouse goes over the ul which contains 2 li's that are icons the hovering stops and the opacity resets which shouldn't happen, i want the opacity to stay at 0.7 while the mouse is in the showcase-img container, how can i fix this? Thanks!
Rather than applying :hover directly on image like this .showcase-img img:hover img{} apply it directly on parent div it means .showcase:hover img{}. This should be something like this:
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase:hover img {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
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>