How do I vertically stack and align icons with their respective text, and horizontally align them center? And make it all mobile-responsive?
My attempt
li {
margin: 0 90px;
display: inline;
}
.num {
margin: 0 150px;
display: inline;
}
ul {
list-style: none outside none;
margin: 0;
padding: 50;
text-align: center;
}
ul li i {
text-align: center;
}
<!-- script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<ul>
<li><i class="fas fa-phone">
</i>
</li>
<li><i class="fas fa-map">
</i>
</li>
<li><i class="fas fa-paper-plane">
</i>
</li>
</ul>
<ul class="num">
<li>Call (555)123-4567</li>
<li>Box 564, Disneyland</li>
<li> Email.com </li>
</ul>
I hope this what you are looking for.
ul {
display:flex;
}
ul li i{
padding:10px;
}
ul li {
display:flex;
flex:1;
padding:20px;
flex-direction:column;
text-align:center;
}
#media only screen and (max-width: 600px){
ul {
flex-direction:column;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<ul>
<li>
<i class="fas fa-phone"></i>
Call (555)123-4567
</li>
<li>
<i class="fas fa-map"> </i>
<span>Box 564, Disneyland<span>
</li>
<li>
<i class="fas fa-paper-plane"></i>
Email.com
</li>
</ul>
</body>
</html>
You can use a flexbox wrapper with flex-direction row which switches to column using a media query and you could use flexboxes with flex-direction column for each item.
#flexwrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.flexbox {
width: 120px;
margin: 20px;
display: flex;
align-items: center;
flex-direction: column;
font-family: sans-serif;
font-size: 10px;
}
a {
color: #569;
text-decoration: none;
}
i {
padding: 10px;
border-radius: 100%;
background: #569;
color: white;
}
#media only screen and (max-width: 480px){
#flexwrapper {
flex-direction: column;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="flexwrapper">
<div class="flexbox">
<p><i class="fas fa-phone"></i></p>
<p>Call (555)123-4567</p>
</div>
<div class="flexbox">
<p><i class="fas fa-map"></i></p>
<p>Box 564, Disneyland</p>
</div>
<div class="flexbox">
<p><i class="fas fa-paper-plane"></i></p>
<p> Email.com </p>
</div>
</div>
Related
I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching.
I used undraw to add an image but unfortunately, the image is stuck to the right:
I want to put the image underneath my icons but not sure on how to do to this. Any advice on how to get the SVG image in the centre underneath my icons?
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
*{
color:black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,span{
color:black;
text-align: center;
line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
line-height: 1.5;
font-size: 16px;
}
li{
list-style-type: none;
}
.flex{
display: flex; /* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1{
flex: 1; /* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink{
color: #FF69B4 ;
}
nav{
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list{
display: flex;
}
.nav__link--anchor{
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary{
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover{
background-color: #FF69B4;
}
.personal_logo{
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me{
min-height: 100vh; /* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info{
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column; /* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask{
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0,0,0,1);
margin-bottom: 20px;
}
.about-me__picture{
width: 100%;
transform: scale(1,1.1);
padding-top: 7px;
}
.about-me__info--para{
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title{
margin-bottom: 15px;
}
.about-me__link{
font-size: 20px;
color:#FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container{
flex: 1;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black"
>Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class=
"nav__link--anchor
nav__link--anchor-primary"
>Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row"> <!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
</figure> <!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe š </span> </h1>
<h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that Iām interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links"></div>
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
<figure class="about-me__img--container">
<img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
</figure>
</div>
</section>
</body>
</html>
Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
* {
color: black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
color: black;
text-align: center;
line-height: 1.25;
}
h1 {
font-size: 36px;
}
p {
line-height: 1.5;
font-size: 16px;
}
li {
list-style-type: none;
}
.flex {
display: flex;
/* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1 {
flex: 1;
/* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink {
color: #FF69B4;
}
nav {
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list {
display: flex;
}
.nav__link--anchor {
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary {
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover {
background-color: #FF69B4;
}
.personal_logo {
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me {
min-height: 100vh;
/* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info {
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column;
/* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask {
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
.about-me__picture {
width: 100%;
transform: scale(1, 1.1);
padding-top: 7px;
}
.about-me__info--para {
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title {
margin-bottom: 15px;
}
.about-me__link {
font-size: 20px;
color: #FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class="nav__link--anchor
nav__link--anchor-primary">Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row">
<!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
</figure>
<!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe š </span> </h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
and designing projects on topics that Iām interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links">
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<figure class="about-me__img--container" >
<img src="https://picsum.photos/200" alt="" style="margin: auto">
</figure>
</div>
</section>
</body>
</html>
I'm currently creating a navigation bar that expands and collapses whether the mouse is over or out of the navbar. My issue is that when the navbar is expanded, my icons are aligned to the center but I wish for them to be positioned exactly where they are before the navbar is expanded. I have them aligned to the center because the icons are not the same size and look 'out of place' without it, when the navbar is collapsed.
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
sidenav.style.width = "280px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
//document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
.expand {
transform: rotate(180deg);
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: center;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</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-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
And JSFiddle link:
https://jsfiddle.net/h86zf4d3/
I tried to float my icons to the left as you can see from the commented out JS code, however, for some reason, this gets rid of the block display for the list items.
To make it works, change the #links{text-align:left}
And your issue about the icon's size put the fa-fw class. it will makeall the icons the same size.
Check the snippest below:
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
sidenav.style.width = "280px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
//document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
.expand {
transform: rotate(180deg);
}
#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;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</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>
why not just placing them to left ?
#links li{
text-align:left;
}
I've simpy added float: left to the CSS for #links and it looks fine to me.
They are still center-aligned on the collapsed version, because I haven't removed the line directly above it which says text-align: center;. However, they no longer change position when the menu opens.
See the snippet below:
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
sidenav.style.width = "280px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
};
sidenav.onmouseout = function() {
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
.expand {
transform: rotate(180deg);
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: center;
float: left;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</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-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
Just remove the text-align: center rule on #links element. Also I edited your css to add some :hover rules to avoid using javascript:
#sidenav {
height: 100%;
min-width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav:hover {
width: 280px;
}
#sidenav:hover #expand-icon {
transform: rotate(180deg);
}
#sidenav:hover #sidenav-heading {
display: inline-block;
}
#sidenav #sidenav-heading {
display: none;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
}
#links li {
padding: 18px 20px;
/* <-- Add some padding*/
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading">
<h2>Expanded</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-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
Can someone help me out to figure how to stick my footer to the bottom of my projects page, as it sticks down on other pages but not on this specific projects page, I think it's because it does not have a lot on content in it, I have tries various solutions present on the internet, but none of them have worked yet, so please help me out with this, I really appreciate any help I get.
Here is my html code for my projects page.
html {
position: relative;
min-height: 100%;
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media only screen and (min-width: 1000px) {
header .header-brand {
margin: 31px 0;
text-align: center;
line-height: 38px;
padding: 0 20px 0 40px;
float: left;
}
}
.social-footer {
margin-top: 40px;
width: 850px;
background-color: #111;
color: #f1f1f1;
text-align: center;
padding: 10px;
justify-content: center;
align-items: center;
/* display: -webkit-flex; */
/* display: -ms-flexbox; */
/* -webkit-align-items: center;
-ms-flex-align: center; */
/* -webkit-justify-content: space-between; */
/* -ms-flex-pack: justify; */
}
.social-footer .social-footer-icons li {
list-style: none;
display: inline-block;
padding: 0 20px;
}
.social-footer .social-footer-icons li:last-of-type {
margin-right: 0;
}
.social-footer .social-footer-icons .fa {
font-size: 1.3rem;
color: #fefefe;
}
.social-footer .social-footer-icons .fa:hover {
color: #4a4a4a;
transition: color 0.3s ease-in;
}
<head>
<meta charset="utf-8">
<title>Projects</title>
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="bg">
<header>
<img src="images/default.png" alt="Logo" width="100" , height="70">
<div class="container">
<nav class="navbar">
<div class="menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About Me</li>
<li class="nav-item">Projects</li>
<li class="nav-item">Contact Me</li>
<li class="nav-item">Hire Me</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="projects-links">
<div class="wrapper">
<h2>Projects</h2>
<a href="GoGrocery.html">
<div class="projects-link">
<p>GoGrocery</p>
</div>
</a>
<a href="TalkBoxPro.html">
<div class="projects-link">
<p>TalkBox-Pro</p>
</div>
</a>
<!-- <div class="projects-link"><p>Medi Co.</p></div> -->
</div>
</section>
<section class="projects-links">
<div class="wrapper">
<h2>Under Construction</h2>
<div class="projects-link">
<p>Medi Co.</p>
</div>
</div>
</section>
</main>
<div class="wrapper">
<footer class="social-footer" id="footer">
<div class="social-footer-icons">
<ul class="menu simple">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</footer>
</div>
</body>
How do I make html content appear over the entire web page that says something like 'Hey! You've won' but the background of this content should be translucent showing the actual webPage behind?
I have designed a webPage called Memory Game, that allows a user to match its contents by unfliping the deck contents and I wanted the 'Congratulations' message to be printed over it when the user has finished matching all of it. Below is my code:
$(document).ready(function() {
var click = 1,totalClicks = 0, className1 = '',className2 = '',firstClick='',secondClick='',match=0;
$(".moves").html(totalClicks);
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
$(".card").click(function() {
if (!$(this).hasClass("open")) {
totalClicks++;
$(".moves").html(totalClicks);
if (click === 1) {
$(this).addClass("open show");
$(this).attr('id', 'card1');
className1 = $(this).children().attr('class');
firstClick=$(this);
} else if (click === 2) {
$(this).addClass("open show");
className2 = $(this).children().attr('class');
if(className1===className2)
{
match++;
$(this).unbind("click");
firstClick.unbind("click");
}
unflip();
}
if (click === 1) {
click++;
} else {
click = 1;
}
}
else{
$(this).removeClass("open");
$(this).removeClass("show");
}
});
$(".restart").click(function() {
totalClicks = 0;
$(".moves").html(totalClicks);
$("ul.deck>li").removeClass("open");
$("ul.deck>li").removeClass("show");
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
});
if(match===8)
{
/* This is where the 'Congragulations message must be show over the web page' */
}
function unflip() {
if (className1 !== className2) {
setTimeout(removeClasses, 1000);
function removeClasses() {
$("ul.deck>li").removeClass("open");
$("ul.deck>li").removeClass("show");
}
}
}
});
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.fa.fa-star,.fa.fa-repeat{
font-size: 25px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Memory Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<header>
<h1>Memory Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves"></span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>
Figured out the solution. A different section must be added in the html whose display must be set to none.
The display can be toggled using jQuery. Below is the solution. Added a new section with class overlay, whose display is set to none it is then toggled in the java script:
$(document).ready(function() {
var click = 1,totalClicks = 0, className1 = '',className2 = '',firstClick='',secondClick='',match=0;
shuffle();
$(".moves").html(totalClicks);
$(".card").click(function() {
if (!$(this).hasClass("open")) {
totalClicks++;
$(".moves").html(totalClicks);
if (click === 1) {
$(this).addClass("open show");
/* $(this).attr('id', 'card1'); */
className1 = $(this).children().attr('class');
firstClick=$(this);
} else if (click === 2) {
$(this).addClass("open show");
className2 = $(this).children().attr('class');
secondClick=$(this);
if(className1===className2)
{
match++;
console.log(match);
secondClick.unbind("click");
firstClick.unbind("click");
firstClick.addClass("match");
secondClick.addClass("match");
}
if(match===1)
{
console.log('match is now 8');
/*document.getElementById("overlay").style.display="block";*/
$("#overlay").css("display","block");
$(".text").hide().html('Yaay!! You\'ve Won!!!!').fadeIn('slow');
}
unflip();
}
if (click === 1) {
click++;
} else {
click = 1;
}
}
else{
click=1;
$(this).removeClass("open");
$(this).removeClass("show");
}
});
$(".restart").click(function() {
$(this).children().addClass('refresh').delay(200).queue(function(next){
$(this).removeClass('refresh');
next();
});
totalClicks = 0;
$(".moves").html(totalClicks);
$("ul.deck>li").removeClass("open");
$("ul.deck>li").removeClass("show");
$("ul.deck>li").removeClass("match");
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
});
$(".restart-overlay").click(function(){
$("#overlay").css("display","none");
totalClicks = 0;
$(".moves").html(totalClicks);
$("ul.deck>li").removeClass("open show match");
shuffle();
});
function unflip() {
if (className1 !== className2) {
setTimeout(removeClasses, 1000);
}
}
function removeClasses() {
firstClick.removeClass("open");
firstClick.removeClass("show");
secondClick.removeClass("open");
secondClick.removeClass("show");
}
function shuffle(){
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
}
});
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.fa.fa-star-o{
font-size: 28px;
}
.fa.fa-repeat{
font-size: 25px;
}
.refresh{
text-shadow:3px 3px 3px #272634;
}
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.text{
font-size: 60px;
color: yellow;
font-family:fantasy;
font-style: italic;
font-weight: bold;
position: absolute;
top: 50%;
left: 35%;
height: 30%;
width: 50%;
}
#overlay{
height: 100%;
width:100%;
}
.restart-overlay{
position: absolute;
top: 65%;
left: 50%;
height: 50%;
width: 50%;
}
.fa.fa-repeat.playagain{
font-color: grey;
font-size: 35px;
text-shadow:3px 3px 3px #272634;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Memory Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="overlay">
<section class="text"></section>
<section class="restart-overlay">
<i class="fa fa-repeat playagain"></i>
</section>
</section>
<section class="container">
<header>
<h1>Memory Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
</ul>
<span class="moves"></span> Moves
<section class="restart">
<i class="fa fa-repeat"></i>
</section>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</section>
<script src="js/app.js"></script>
</body>
</html>
I'm looking for the best way to distribute the fa-icons evenly on the full width of the screen when the screen max width is 414 and hide the navbar-brand since when I use hidden-xs its hidden till 700pt and I want to hide it exactly on 414 and have even space between the Fa-icons
tab-icon {
display: inline-block;
margin-left: 15px;
margin-right: 150px;
vertical-align: middle;
list-style: none;
padding-right: 15px;
}
.tab-icon li {
margin-left: 2.5vw;
margin-right: 2.5vw;
}
.tab-icon li a{
color: #000;
margin-top: 50%;
#media screen and (max-width: 414px) {
.tab-icon li {
margin-left: 7.5vw;
margin-right: 7.5vh;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar-header page-scroll">
<ul class="tab-icon pull-right list-inline hidden-lg">
<li><a class="fa fa-home fa-2x " href="#home"></a></li>
<li><a class="fa fa-handshake-o fa-2x" href="#service"></a></li>
<li><a class="fa fa-download fa-2x" href="#download"></a></li>
<li><a class="fa fa-car fa-2x" href="#chauffers"></a></li>
</ul>
<a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a>
</div>
Voila, you could do a flexbox like this. the only downside is you cant use Favicon icons, you have to use images, because images stretch, and fonts don't.
.tab-icon {
display: flex;
align-items: stretch;
flex-flow: row nowrap;
width: 500px;
list-style: none;
}
.tab-icon li {
flex-grow: 1;
}
.tab-icon li img{
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar-header page-scroll">
<ul class="tab-icon pull-right list-inline hidden-lg">
<li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
<li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
<li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
<li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
</ul>
<a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a>
</div>