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>
Related
I'm noob and I'm following different tutorial to achieve my goal and the goal is to make animated social icons in the footer and the problem is that the socials icons from FontAwesome are not working.
If i put them in < ul > they are not working but outside i can see them .-
How can i solve this to see them when I put them in < ul > ?
This is the code :
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Contact us</title>
<link rel="stylesheet" type="text/css" href="stilecontact.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/17fe744bb9.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<img src ="logo.jpg">
</header>
</div>
<div class="container">
<div class="contact-box">
<div class="left"></div>
<div class="right">
<h2>Contact Us</h2>
<input type="text" class="field" placeholder="Your Name">
<input type="text" class="field" placeholder="Your Email">
<input type="text" class="field" placeholder="Phone">
<textarea placeholder="Message" class="field"></textarea>
<button class="btn">Send</button>
</div>
</div>
</div>
</body>
<footer>
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</footer>
</html>
This is CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
body{
height: 100vh;
width: 100%;
}
.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 100px;
}
.container:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url("team.jpg") no-repeat center;
background-size: cover;
filter: blur(50px);
z-index: -1;
}
.contact-box{
max-width: 850px;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
}
.left{
background: url("team.jpg") no-repeat center;
background-size: cover;
height: 100%;
}
.right{
padding: 25px 40px;
}
h2{
position: relative;
padding: 0 0 10px;
margin-bottom: 10px;
}
h2:after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 4px;
width: 50px;
border-radius: 2px;
background-color: #2ecc71;
}
.field{
width: 100%;
border: 2px solid rgba(0, 0, 0, 0);
outline: none;
background-color: rgba(230, 230, 230, 0.6);
padding: 0.5rem 1rem;
font-size: 1.1rem;
margin-bottom: 22px;
transition: .3s;
}
.field:hover{
background-color: rgba(0, 0, 0, 0.1);
}
textarea{
min-height: 150px;
}
.btn{
width: 100%;
padding: 0.5rem 1rem;
background-color: #2ecc71;
color: #fff;
font-size: 1.1rem;
border: none;
outline: none;
cursor: pointer;
transition: .3s;
}
.btn:hover{
background-color: #27ae60;
}
.field:focus{
border: 2px solid rgba(30,85,250,0.47);
background-color: #fff;
}
#media screen and (max-width: 880px){
.contact-box{
grid-template-columns: 1fr;
}
.left{
height: 200px;
}
}
footer {
margin: o;
padding: o;
box-sizing: border-box;
}
body footer {
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
ul
{
position: relative;
display: flex;
color: #fff;
}
ul li
{
position: relative;
list-style: none;
margin: 0 20px;
cursor: pointer;
}
ul li a
{
text-decoration: none;
}
ul li a .fa
{
font-size: 6em;
color: #222;
}
ul li ::before
{
font-family: fontAwesome;
position: absolute;
top: 0;
left: 0;
font-size: 6em;
height: 0;
overflow: hidden;
transition: 0.5s ease-in-out;
}
ul li:nth-child(1)::before
{
content: '\f099';
color: #1da1f2;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(2)::before
{
content: '\f09a';
color: #07476f;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(3)::before
{
content: '\f16d';
color: #f24f1d;
border-bottom: 4px solid #f2391d;
}
Icons were there, but they were not visible. So for your reference, I have given red color.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
body{
height: 100vh;
width: 100%;
}
.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 100px;
}
.container::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url("team.jpg") no-repeat center;
background-size: cover;
filter: blur(50px);
z-index: -1;
}
.contact-box{
max-width: 850px;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 19px 5px rgba(0, 0, 0, 0.19);
}
.left{
background: url("team.jpg") no-repeat center;
background-size: cover;
height: 100%;
}
.right{
padding: 25px 40px;
}
h2{
position: relative;
padding: 0 0 10px;
margin-bottom: 10px;
}
h2::after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 4px;
width: 50px;
border-radius: 2px;
background-color: #2ecc71;
}
.field{
width: 100%;
border: 2px solid rgba(0, 0, 0, 0);
outline: none;
background-color: rgba(230, 230, 230, 0.6);
padding: 0.5rem 1rem;
font-size: 1.1rem;
margin-bottom: 22px;
transition: 0.3s;
}
.field:hover{
background-color: rgba(0, 0, 0, 0.1);
}
textarea{
min-height: 150px;
}
.btn{
width: 100%;
padding: 0.5rem 1rem;
background-color: #2ecc71;
color: #fff;
font-size: 1.1rem;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.btn:hover{
background-color: #27ae60;
}
.field:focus{
border: 2px solid rgba(30, 85, 250, 0.47);
background-color: #fff;
}
#media screen and (max-width: 880px){
.contact-box{
grid-template-columns: 1fr;
}
.left{
height: 200px;
}
}
footer {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body footer {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
ul
{
position: relative;
display: flex;
color: #fff;
}
ul li
{
position: relative;
list-style: none;
margin: 0 20px;
cursor: pointer;
}
ul li a
{
text-decoration: none;
}
ul li a .fa
{
font-size: 6em;
color: #222;
}
ul li::before
{
font-family: sans-serif;
position: absolute;
top: 0;
left: 0;
font-size: 6em;
height: 0;
overflow: hidden;
transition: 0.5s ease-in-out;
}
ul li:nth-child(1)::before
{
content: '\f099';
color: #1da1f2;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(2)::before
{
content: '\f09a';
color: #07476f;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(3)::before
{
content: '\f16d';
color: #f24f1d;
border-bottom: 4px solid #f2391d;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact us</title>
<link rel="stylesheet" type="text/css" href="stilecontact.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/17fe744bb9.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<img src="logo.jpg">
</header>
</div>
<div class="container">
<div class="contact-box">
<div class="left"></div>
<div class="right">
<h2>Contact Us</h2>
<input type="text" class="field" placeholder="Your Name">
<input type="text" class="field" placeholder="Your Email">
<input type="text" class="field" placeholder="Phone">
<textarea placeholder="Message" class="field"></textarea>
<button class="btn">Send</button>
</div>
</div>
</div>
</body>
<footer>
<!-- <ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul> -->
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<div style="color:red">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
</div>
</footer>
</html>
found the solution !
HTML
<!DOCTYPE html>
<html>
<head>
<title>Contact us</title>
<link rel="stylesheet" type="text/css" href="stilecontact.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<img src="logo.jpg">
</header>
</div>
<div class="container">
<div class="contact-box">
<div class="left"></div>
<div class="right">
<h2>Contact Us</h2>
<input type="text" class="field" placeholder="Your Name">
<input type="text" class="field" placeholder="Your Email">
<input type="text" class="field" placeholder="Phone">
<textarea placeholder="Message" class="field"></textarea>
<button class="btn">Send</button>
</div>
</div>
</div>
</body>
<footer>
<ul>
<li><i class="fa fa-twitter" aria-hidden="true"> </i> </li>
<li><i class="fa fa-instagram" aria-hidden="true"> </i> </li>
<li><i class="fa fa-facebook" aria-hidden="true"> </i> </li>
</ul>
</div>
</footer>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000000;
}
ul{
position: relative;
display: flex;
}
ul li{
position: relative;
list-style: none;
margin: 0 20px;
cursor: pointer;
}
ul li a{
text-decoration: none;}
ul li a .fa{
font-size: 6em;
color: #222;
}
ul li a .fa:hover{
opacity: 0;
transition: opacity 0.2s ease-in;
}
ul li:before{
position: absolute;
font-family: FontAwesome;
top: -10px;
left: 0;
font-size: 6em;
width: 100%;
height: 0;
overflow: hidden;
transition: .3s ease-in-out;
}
ul li:nth-child(1)::before{
content: '\f099';
color: #1da1f2;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(2)::before{
content: '\f232';
color: #25d366;
border-bottom: 4px solid #25d366;
}
ul li:nth-child(3)::before{
content: '\f16a';
color: #ff0000;
border-bottom: 4px solid #ff0000;
}
ul li:hover:before{
height: 110%;
}
This is my first time writing in html and css, so sorry if it's confusing and dumb.
I'm trying to make that sticks to the bottom and covers the length of the page, the problem is that i tried everything i could, from padding to width:100% other thant searching online, what can i do?
I'm using angular and i have installed bootstrap, please don't hesitate to ask any question or to ask me to explain myself (i'm not a native speaker), have a nice day and thank you!
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
body {
width: 100%;
height: 100%;
line-height: 1;
font-family: 'Poppins', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 2270px;
margin: 0 auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
background-color: #24262b;
padding: 20px 0;
}
.footer-col {
width: 25%;
padding: 0;
}
.footer-col h4 {
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
.siteFooterBar {
position: fixed;
bottom: 0;
padding-top: 10px;
width: 100%;
box-shadow: 0px 0px 25px rgb(207, 207, 207);
height: 78px;
color: #9B9B9B;
background: #F3F3F3;
}
.content {
display: block;
padding: 10px;
margin: 0px auto;
text-align: center;
font: 25px Georgia, "Times New Roman", Times, serif;
font-size: 14px;
width: 300px;
display: flex;
}
.foot {
display: inline;
line-height: 70px;
}
.content img {
height: 150px;
width: 150px;
float: left;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease-in-out;
transition: 0.6s;
}
.content img:hover {
filter: invert(400%);
filter: brightness(4);
-webkit-filter: grayscale(-100);
-webkit-transform: scale(1.10);
}
/*responsive*/
#media(max-width: 100%) {
.footer-col {
width: 100%;
margin-bottom: 0px;
}
}
#media(max-width: 100%) {
.footer-col {
width: 100%;
}
}
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<div class="content">
<a href="#">
<img src="https://i.imgur.com/1yvwx9I.png">
</a>
</div>
</div>
<div class="footer-col">
<h4>Azienda</h4>
<ul>
<li>Chi Siamo</li>
<li>Contattaci</li>
<li>Placeholder</li>
<li>PlaceHolder</li>
</ul>
</div>
<div class="footer-col">
<h4>Aiuto</h4>
<ul>
<li>FAQ</li>
<li>Consegne</li>
<li>Reso</li>
<li>Informatica privacy</li>
</ul>
</div>
<div class="footer-col">
<h4>Seguici su</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</footer>
The standard way to align a footer at the bottom of a webpage is just by setting it to position: relative;. However, this entails that there is more content that is equal to or greater than the viewport height. Hence, aligning the footer after the content and at the bottom.
If you don't have content, use position: absolute; on footer. Then you can set bottom: 0px; to get it at the bottom. Then set left and right to 0 to get it the full width. See below.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
body {
width: 100%;
height: 100%;
line-height: 1;
font-family: 'Poppins', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 2270px;
margin: 0 auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
/* new */
footer {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
}
/* end new */
.footer {
background-color: #24262b;
padding: 20px 0;
}
.footer-col {
width: 25%;
padding: 0;
}
.footer-col h4 {
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
.siteFooterBar {
position: fixed;
bottom: 0;
padding-top: 10px;
width: 100%;
box-shadow: 0px 0px 25px rgb(207, 207, 207);
height: 78px;
color: #9B9B9B;
background: #F3F3F3;
}
.content {
display: block;
padding: 10px;
margin: 0px auto;
text-align: center;
font: 25px Georgia, "Times New Roman", Times, serif;
font-size: 14px;
width: 300px;
display: flex;
}
.foot {
display: inline;
line-height: 70px;
}
.content img {
height: 150px;
width: 150px;
float: left;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease-in-out;
transition: 0.6s;
}
.content img:hover {
filter: invert(400%);
filter: brightness(4);
-webkit-filter: grayscale(-100);
-webkit-transform: scale(1.10);
}
/*responsive*/
#media(max-width: 100%) {
.footer-col {
width: 100%;
margin-bottom: 0px;
}
}
#media(max-width: 100%) {
.footer-col {
width: 100%;
}
}
<main>
fooo
</main>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<div class="content">
<a href="#">
<img src="https://i.imgur.com/1yvwx9I.png">
</a>
</div>
</div>
<div class="footer-col">
<h4>Azienda</h4>
<ul>
<li>Chi Siamo</li>
<li>Contattaci</li>
<li>Placeholder</li>
<li>PlaceHolder</li>
</ul>
</div>
<div class="footer-col">
<h4>Aiuto</h4>
<ul>
<li>FAQ</li>
<li>Consegne</li>
<li>Reso</li>
<li>Informatica privacy</li>
</ul>
</div>
<div class="footer-col">
<h4>Seguici su</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</footer>
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 have been trying for a few days to get my tooltips to show up without any progress. They can appear in the sidebar with this block selector .sidebar ul li .tooltip {} when opacity is 1, if you want to see what they should look like.
I tried adding z-index to the .sidebar ul li a:hover .tooltip {} selector, along with opacity:1, but that doesn't work.
I also tried changing the 'hover' to apply to the 'li' instead of the 'a' tag but that doesn't change anything. and also tried adding it to both (.sidebar ul li:hover a:hover .tooltip {}) but doesn't work either.
Is this a problem with opacities, or with selectors? I feel like I've tried everything.
When I select the tooltip element in the browser dev tools and force into hover state, you can see the tooltip is there in the right spot, but just behind everything or invisible.
Any help would be appreciated thank you.
.sidebar ul li a:hover {
background-color: #ae85f1;
}
.sidebar ul li a:hover .tooltip {
transition: all 0.5s ease;
top: 50%;
opacity: 1;
display: block;
z-index:500;
}
.sidebar ul li .tooltip {
position: absolute;
color: #343434;
left: 130px;
top: 0;
transform: translate(-50%, -50%);
border-radius: 6px;
height: 35px;
width: 122px;
background: #fff;
line-height: 35px;
text-align: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: 0s;
pointer-events: none;
opacity: 1;
}
.sidebar.active ul li .tooltip {
display: none;
}
https://jsfiddle.net/ramid320/ho148uyx/11/
There are few issues in CSS, You need to update below changes in your code.
Change 1:
Remove overflow: hidden; from ul CSS on line No: 32
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Change 2:
Add display: none; on sidebar ul li a .tooltip CSS on line No: 123
.sidebar ul li a .tooltip {
position: absolute;
color: #343434;
display: none;
left: 130px;
top: 0;
transform: translate(-50%, -50%);
border-radius: 6px;
height: 35px;
width: 122px;
background: #fff;
line-height: 35px;
text-align: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: 0s;
pointer-events: none;
}
Change 3:
Add !important on sidebar.active ul li .tooltip CSS on line No: 141
.sidebar.active ul li .tooltip {
display: none !important;
}
All changes also updated on below code snippet, I hope it'll help you out. Thank You
let btn = document.querySelector("#btn");
let sidebar = document.querySelector(".sidebar");
btn.onclick= function(){
sidebar.classList.toggle("active");
}
#import url('https://fonts.googleapis.com/css2?family=Cabin&family=Poppins:wght#300;400;500;600;700&display=swap');
/*font-family: 'Poppins', sans-serif;
//font-family: 'Cabin', sans-serif;*/
--root {
--dark1: #1c1c1c;
--dark2: #daddd8;
--dark3: #ecebe4;
--dark4: #eef0f2;
--dark5: #fafaff;
--og1: #eee2ff;
--og2: #faeaff;
--og3: rgba(228, 53, 145, 0.7);
--og4: #ffd5d5;
}
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: left;
width: 25%;
}
li a {
display: block;
text-align: center;
padding: 8px 0px;
text-decoration: none;
color: #e4d9ff;
}
/*--------------------------------------------------------------sidebar styles */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: #1c1c1c;
color: #e4d9ff;
padding: 6px 14px;
transition: all 0.5s ease;
z-index: 10;
}
.sidebar.active {
width: 240px;
}
.sidebar .logo_details .logo {
height: 50px;
width: 60%;
display: flex;
align-items: center;
color: #fafaff;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_details .logo {
opacity: 1;
pointer-events: none;
}
.logo_details .logo_name {
font-size: 18px;
color: #e4d9ff;
font-weight: 400;
}
.sidebar #btn {
color: #fff;
position: absolute;
left: 50%;
top: 6px;
font-size: 18px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 85%;
}
.sidebar ul{
margin-top: 20px;
}
.sidebar ul li{
position: relative;
list-style: none;
height: 56px;
width: 100%;
line-height: 30px;
}
.sidebar ul li a .tooltip {
position: absolute;
color: #343434;
display: none;
left: 130px;
top: 0;
transform: translate(-50%, -50%);
border-radius: 6px;
height: 35px;
width: 122px;
background: #fff;
line-height: 35px;
text-align: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: 0s;
pointer-events: none;
}
.sidebar.active ul li .tooltip {
display: none !important;
}
.sidebar ul li a {
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
border-radius: 12px;
transition: all 0.4s ease;
white-space: nowrap;
}
.sidebar ul li i{
height: 40px;
min-width: 50px;
border-radius: 12px;
line-height: 40px;
text-align: center;
}
.sidebar ul li a:hover {
background-color: #ae85f1;
}
.sidebar ul li:hover .tooltip {
transition: all 0.5s ease;
top: 50%;
display: block;
z-index: 500;
}
.sidebar .link_name{
opacity: 0;
pointer-events: none;
}
.sidebar.active .link_name{
opacity: 1;
pointer-events: auto;
}
.sidebar .profile_content {
position: absolute;
color: #fff;
bottom: 0;
left: 0;
width: 100%;
}
.logo_details .logo i {
font-size: 28px;
margin-right: 5px;
left: 50%;
}
.sidebar .profile_content .profile{
position: relative;
padding: 10px 6px;
height: 60px;
}
.profile_content .profile .profile_details{
display: flex;
align-items: center;
}
.profile .profile_details img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 12px;
}
.profile .profile_details .name_job {
margin-left: 10px;
}
.profile .profile_details .name{
font-size: 15px;
font-weight: 400;
}
.profile .profile_details .job{
font-size: 12px;
}
/* --------------------------------------------------page styles */
.container {
margin: 0 auto;
padding: 60px 100px;
position: absolute;
background-color: green;
}
.headerBox h1 {
display: block;
padding-left: -20px;
position: relative;
font: 60px 'Lobster', cursive;
letter-spacing: 0px;
color: #e5383b; /*red web portfolio text*/
}
.headerBox {
height: 300px;
background-color: white;
padding-left: 200px;
}
#footnote {
font-size: 10px;
text-align: center;
color: #343434;
}
/* media queries */
#media screen and (max-width: 539px) {
.container {
padding: 0px 25px;
margin: 0px;
}
}
#media screen and (min-width: 540px) and (max-width: 699px) {
.headerBox h1 {
font: 80px 'Lobster', cursive;
height: 60px;
}
h1:after {
position: absolute; left: 3px; top: 3px;
}
.container {
padding: 0px 30px;
margin: 0px;
}
.headerBox h2 {
font-size: 20px;
display: block;
line-height: 20px;
margin-bottom: 16px;
}
}
#media screen and (min-width: 700px) and (max-width: 875px) {
.headerBox h1 {
font: 100px 'Lobster', cursive;
height: 100px;
}
.container {
padding: 0px 50px;
margin: 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Personal Portfolio</title>
<!--fonts
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto Mono', sans-serif;
font-family: 'Lobster', cursive;
font-family: 'Comfortaa', cursive;
-->.
<link href="https://fonts.googleapis.com/css?family==Lobster" rel="stylesheet">
<!--page css-->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_details">
<div class="logo">
<i class='bx bx-moon'></i>
<span class="logo_name">DRamirez</span>
</div>
<i class="bx bx-menu" id="btn"></i>
</div>
<ul class="nav_links">
<li><a href="#">
<i class='bx bx-home'></i>
<span class="link_name">Home</span>
<span class="tooltip">Home</span></a>
</li>
<li><a href="#">
<i class='bx bx-paperclip'></i>
<span class="link_name">Resume</span>
<span class="tooltip">Resume</span></a>
</li>
<li>
<div class="icon_link" >
<a href="#">
<i class='bx bxl-javascript' ></i>
<span class="link_name">JS Games</span>
<span class="tooltip">JS Games</span></a>
<!--i class='bx bxs-chevron-down' ></i-->
</div>
</li>
<li><a href="#">
<i class='bx bxl-java' ></i>
<span class="link_name">Java Swing GUIs</span>
<span class="tooltip">Java Swing</span></a>
</li>
<li><a href="#">
<i class='bx bx-transfer'></i>
<span class="link_name">API Integration</span>
<span class="tooltip">API Integration</span></a>
</li>
<li><a href="#">
<i class='bx bx-data' ></i>
<span class="link_name">Data Visualization</span>
<span class="tooltip">Data Visualization</span></a>
</li>
<li><a href="#">
<i class='bx bx-landscape'></i>
<span class="link_name">Graphic Design</span>
<span class="tooltip">Graphic Design</span></a>
</li>
<li><a href="#">
<i class='bx bx-mail-send'></i>
<span class="link_name">Contact</span>
<span class="tooltip">Contact</span></a>
</li>
</ul>
<div class="profile_content">
<div class="profile">
<div class="profile_details">
<img src="images/small-mugshot.jpg" alt="profileImage">
<div class="name_job">
<div class="name">Diana Ramirez</div>
<div class="job">Software Engineer</div>
</div>
</div>
</div>
</div>
<!--section class="home-section">
<div class="home-content">
<i class="bx bx-menu"></i>
<span class="text">Drop Down Sidebar</span>
</div>
</section-->
<!--div class="cancel_btn">
<i class="fas fa-times"></i>
</div>
<div class="media_icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="menu_btn">
<i class="fas fa-bars"></i>
</div-->
</div>
testingtestingtestingtestingtestingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtestingtestingtesting
testingtestingtestingtesting
testingtesting
testingtestingtestingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtestingtestingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
<!--div class="container">
<header>
<div class="headerBox">
<h1>Web Portfolio</h1>
<h2>web portfolio test</h2>
<h3>web portfolio test</h3>
</div>
</header>
</div>
<footer>
<div class="footer-text">
<p id="footnote">Content copyright 2022</p>
</div>
</footer-->
<script src="js/script.js"></script>
</body>
</html>
I've made a lot of progress on my site, but the problem is that my burger menu doesn't show up, does anyone have an idea what's causing this please?
I tried different things, debugging and so on but I can't make it appear again -_-
So if anyone knows why, and has explanations I'm a taker I'm completely lost I know what to do lol
And then if you have other constructive criticism on my code of course I'm a taker thank you in advance for giving me your time
$('.m-nav-toggle').click(function(e) {
e.preventDefault();
$('.m-right').toggleClass('is-open');
$('m-nav-toggle').toggleClass('is-open');
})
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,900;1,700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap');
.menu {
background: #757de8;
width: 100%;
height: 66px;
line-height: 66px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.m-left {
float: left;
}
.logo {
margin: 0;
padding: 0;
}
.m-right {
float: right;
}
.m-links {
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-weight: 700;
padding: 0;
margin: 0 15px;
font-family: 'Lato', sans-serif;
transition: all 0.3s ease-in-out;
border-bottom: 2px solid transparent;
padding-bottom: 3px;
}
.m-links:hover {
border-color: #fff;
}
.m-links i {
margin-right: 5px;
}
.m-nav-toggle {
width: 40px;
height: 66px;
display: none;
align-items: center;
float: right;
cursor: pointer;
}
span.m-nav-toggle-icon,
span.m-toggle-icon:before,
span.m-toggle-icon:after {
content: "";
display: block;
width: 100%;
height: 3px;
background: #fff;
position: relative;
transition: all 0.3s ease-in-out;
}
span.m-toggle-icon:before {
top: 12px;
}
span.m-toggle-icon:after {
top: -14px;
}
.m-right.is-open {
transform: translateX(0);
}
.m-nav-toggle.is-open span.m-toggle-icon {
background: transparent;
}
.m-nav-toggle.is-open span.m-toggle-icon:before, .m-nav-toggle.is-open span.m-toggle-icon:after {
transform-origin: center;
transform: rotate(45deg);
top: 0;
}
#media only screen and (max-width: 950px) {
.m-right {
position: absolute;
top: 66px;
right: 0;
width: 200px;
height: 100%;
background: #757de8;
transform: translateX(100%);
transition: all 0.3s ease-in-out;
}
.m-links {
display: block;
text-align: center;
padding: 0;
margin: 0 20px;
height: 55px;
}
.m-nav-toggle.is-open span.m-toggle-icon:before {
transform: rotate(-45deg);
}
.m-nav-toggle {
display: flex;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://kit.fontawesome.com/8b1b202200.js" crossorigin="anonymous"></script>
<header role="header">
<nav class="menu" role="navigation">
<div class="inner">
<img class="fit-picture" src="img/logo.svga">
<div class="m-left"></div>
<div class="m-right">
<i class="fas fa-home"></i> Home
<i class="fas fa-book"></i> Documentation
<i class="fas fa-comments"></i> Feedback
<i class="fas fa-handshake"></i> Partners
<i class="fas fa-envelope"></i> Contact
</div>
<div class="m-nav-toggle">
<span class="m-toggle-icon"></span>
</div>
</div>
</nav>
</header>
File : normalize.css :
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
.inner {
width: 80%;
margin: auto;
}
enter code here
The "m-toggle-icon" class needs "width:100%" and it will be shown. This is because its parent has "display: flex".
Working example:
$('.m-nav-toggle').click(function(e) {
e.preventDefault();
$('.m-right').toggleClass('is-open');
$('m-nav-toggle').toggleClass('is-open');
})
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,900;1,700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap');
.menu {
background: #757de8;
width: 100%;
height: 66px;
line-height: 66px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.m-left {
float: left;
}
.logo {
margin: 0;
padding: 0;
}
.m-right {
float: right;
}
.m-links {
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-weight: 700;
padding: 0;
margin: 0 15px;
font-family: 'Lato', sans-serif;
transition: all 0.3s ease-in-out;
border-bottom: 2px solid transparent;
padding-bottom: 3px;
}
.m-links:hover {
border-color: #fff;
}
.m-links i {
margin-right: 5px;
}
.m-nav-toggle {
width: 40px;
height: 66px;
display: none;
align-items: center;
float: right;
cursor: pointer;
}
span.m-nav-toggle-icon,
span.m-toggle-icon:before,
span.m-toggle-icon:after {
content: "";
display: block;
width: 100%;
height: 3px;
background: #fff;
position: relative;
transition: all 0.3s ease-in-out;
}
span.m-toggle-icon:before {
top: 12px;
}
span.m-toggle-icon:after {
top: -14px;
}
.m-right.is-open {
transform: translateX(0);
}
.m-nav-toggle.is-open span.m-toggle-icon {
background: transparent;
}
.m-nav-toggle.is-open span.m-toggle-icon:before, .m-nav-toggle.is-open span.m-toggle-icon:after {
transform-origin: center;
transform: rotate(45deg);
top: 0;
}
#media only screen and (max-width: 950px) {
.m-right {
position: absolute;
top: 66px;
right: 0;
width: 200px;
height: 100%;
background: #757de8;
transform: translateX(100%);
transition: all 0.3s ease-in-out;
}
.m-links {
display: block;
text-align: center;
padding: 0;
margin: 0 20px;
height: 55px;
}
.m-nav-toggle.is-open span.m-toggle-icon:before {
transform: rotate(-45deg);
}
.m-nav-toggle {
display: flex;
}
}
.m-toggle-icon {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://kit.fontawesome.com/8b1b202200.js" crossorigin="anonymous"></script>
<header role="header">
<nav class="menu" role="navigation">
<div class="inner">
<img class="fit-picture" src="img/logo.svga">
<div class="m-left"></div>
<div class="m-right">
<i class="fas fa-home"></i> Home
<i class="fas fa-book"></i> Documentation
<i class="fas fa-comments"></i> Feedback
<i class="fas fa-handshake"></i> Partners
<i class="fas fa-envelope"></i> Contact
</div>
<div class="m-nav-toggle">
<span class="m-toggle-icon"></span>
</div>
</div>
</nav>
</header>