I'm following a free code camp video on personal portfolio, i'm stuck with icons class. I need to add color, font-size for the active icon (i am currently using scss), up to now i am not able to apply any specific style (color and font-size) to ' i ' What am i doing the wrong way? Please need help
enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
:root {
--color-primary: #191d2b;
--color-secondary: #27ae60;
--color-white: #fff;
--color-black: #000;
--color-grey-0:#f8f8f8;
--color-grey-1: #dbe1e8;
--color-grey-2: #b2becd;
--color-grey-3: #6c7983;
--color-grey-4: #454e56;
--color-grey-5: #2a2e35;
--color-grey-6: #12181b;
--br-sm-2: 14px
--box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--color-primary);
font-size: 1.1rem;
color: var(--color-white);
transition: all .4s ease-in-out;
}
a {
display: inline-block;
text-decoration: none;
color: inherit;
font-family: inherit;
}
header {
height: 100vh;
color: var(--color-white);
overflow: hidden;
}
section {
min-height: 100vh;
width: 100%;
top: 0;
left: 0;
position: absolute;
padding: 3rem 18rem;
}
.section {
transform: translateY(-100%) scale(0);
transition: all .4s ease-in-out;
background-color: var(--color-primary);
}
.sec1 {
display: none;
transform: translateY(0) scale(1);
}
.sec2 {
display: none;
transform: translateY(0) scale(1);
}
.sec3 {
display: none;
transform: translateY(0) scale(1);
}
.sec4 {
display: none;
transform: translateY(0) scale(1);
}
.sec5 {
display: none;
transform: translateY(0) scale(1);
}
//controls
.controlls {
position: fixed;
z-index: 10;
top: 50%;
right: 3%;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
transform: translateY(-50%);
/*HERE IS THE CODE*/
.active-btn {
background-color: var(--color-secondary) !important;
transition: all .4s ease-in-out;
i {
color: var(--color-white) !important;
}
}
.control {
padding: 1rem;
cursor: pointer;
background-color: var(--color-grey-4);
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: .7rem 0;
box-shadow: var(--box-shadow-1);
/*HERE IS THE CODE*/
i {
font-size: 1.2rem;
color: var(--color-grey-2);
pointer-events: none;
}
}
}
<!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>Portfolio</title>
<link rel="stylesheet" href="../portfolio/css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body class="main-content">
<header class="section sec1 header active">
</header>
<main>
<section class="section sec2 about"></section>
<section class="section sec3 portfolio"></section>
<section class="section sec4 blogs"></section>
<section class="section sec5 contact"></section>
</main>
<div class="controlls">
<div class="control control-1 active-btn">
<i class="fas fa-home"></i>
</div>
<div class="control control-2">
<i class="fas fa-user"></i>
</div>
<div class="control control-3">
<i class="fas fa-briefcase"></i>
</div>
<div class="control control-4">
<i class="fas fa-newspaper"></i>
</div>
<div class="control control-5">
<i class="fas fa-envelope-open"></i>
</div>
</div>
</body>
</html>
You are using SASS or SCSS with nested classes in a CSS file. The file extension should be .sass or the stylesheet must be coded according to the following CSS syntax
body {
margin: 0;
background: #F2F2F2;
font-family: "Montserrat", sans-serif;
height: 100vh;
}
#container {
display: grid;
grid-template-columns: 70px auto;
height: 100%;
}
#container #content {
padding: 30px 50px;
}
#container #content ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#container #content ul li {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 8px;
}
#container #content ul li a {
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color: #00A8FF;
}
#container #content ul li ul {
margin-top: 20px;
}
#container #content ul li ul li {
padding: 0;
}
#container #content ul li ul li a {
font-size: 1em;
font-weight: 300;
}
Related
So I am new to web development and was trying to practice by making a portfolio for myself but I ran into a slight issue. It seems that when a set margin-top to a divider, my navigation bar shifts a bit to the right.
So for some reason, when I apply "margin-top: 300px;" to the ".header" class, my navigation bar shifts to the right a bit.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
* {
font-family: 'Poppins', 'sans-serif';
padding: 0px;
margin: 0px;
box-sizing: border-box;
scroll-padding-top: 1rem;
scroll-behavior: smooth;
list-style: none;
text-decoration: none;
}
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 10px;
cursor: pointer;
}
.nav-header {
color: var(--text-color);
}
.nav-header h2 {
font-weight: 500;
margin: 0;
padding: 0;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
font-size: 18px;
font-weight: 500;
}
nav ul li a {
color: var(--text-color);
transition-duration: 0.7s;
}
nav ul li a:hover {
color: var(--text-highlight)
}
nav ul li a:active {
color: var(--text-active);
}
nav ul li a span {
color: var(--text-active);
}
:root {
--text-color: #000000;
--text-highlight: #D3D3D3;
--text-active: #6b84d1;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.header {
text-align: center;
margin-top: 300px;
;
}
.header h1 {
color: rgb(255, 100, 0);
font-size: 64px;
}
.header p {
font-weight: 500;
font-size: 36px;
}
.header hr {
margin-top: 225px;
}
<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>Kelvin Kuoch | Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/d4a6ce6cea.js" crossorigin="anonymous"></script>
<script>
function scrollToTop() {
window.scrollTo(0, 0);
}
</script>
</head>
<body>
<div class="container">
<div class="navbar">
<a class="nav-header">
<h2 onclick="scrollToTop()">Kelvin Kuoch</h2>
</a>
<nav>
<ul>
<li><a><span onclick="scrollToTop()" class="homeBtn">Home</a></span>
</li>
<li>Work</li>
<li>About</li>
</ul>
</nav>
<hr id="nav-div">
</div>
<div class="header">
<h1>Hello!</h1>
<h2>I'm Kelvin, a <br> highschool student <br> based in Australia.</h2>
<hr>
</div>
<div class="mid-container" id="my-work">
<h1>My Work</h1>
</div>
</div>
</body>
I think there is problem with your .navbar class; when I remove the extra margin it showing well:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 0px;
cursor: pointer;
}
Before removing the margin:
After removing it is fine now:
But I suggest you to use Bootstrap navigation which are fully responsive.
I am a beginner and I am learning HTML and CSS. I am trying to make a webpage but the menu of the webpage is not working fully.
There is another menu in the main menu like the nested menu (I actually don't know what it is called). The first menu is working perfectly but the nested menu is not working. I want, if I click on the Menu option, which is indicated in the image, the second menu appears over the first menu.
The red mark on the image is the link to the second menu.
My menu will be like Starbucks menu which appears when the width is 768px.
My Codes:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html, body {
overflow-x: hidden;
height: 100%;
}
.header {
background-color: #fff;
width: 100%;
height: 83px;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.header {
display: flex;
align-items: center;
}
.header .logo {
padding-left: 2rem;
}
.header .logo img {
width: 50px;
}
.toogle-menu {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
right: 2rem;
z-index: 20;
cursor: pointer;
}
.spinner {
background-color: #000;
height: 3px;
margin: 5px 0;
transition: all 0.3s ease;
}
#menu:checked ~ .toogle-menu > .spinner.middle {
opacity: 0;
}
#menu:checked ~ .toogle-menu > .spinner.top {
transform: rotate(135deg);
margin-top: 15px;
}
#menu:checked ~ .toogle-menu > .spinner.bottom {
transform: rotate(-135deg);
margin-top: -16px;
}
#menu:checked ~ .sidebarMenu, .nested-menu a #nested:checked ~ .menu-2 {
transform: translateX(0);
}
.sidebarMenu, .menu-2 {
height: 100%;
width: 80vw;
margin-top: 83px;
position: fixed;
top: 0;
right: 0;
background-color: #fff;
border-left: 1px solid rgb(235, 227, 227);
transform: translateX(80vw);
transition: all 0.3s ease;
}
.sidebarMenu ul, .menu-2 ul {
padding: 1rem 2rem 3rem 2rem;
}
.sidebarMenu ul li, .menu-2 ul li {
margin-bottom: 2rem;
}
.sidebarMenu ul li a, .menu-2 ul li a {
color: #000;
font-size: 24px;
}
.nested-menu a label {
display: flex;
justify-content: space-between;
font-size: 24px;
cursor: pointer;
}
.nested-menu a input {
visibility: hidden;
}
.btn-list {
margin-top: 2rem;
}
.btn {
padding: 7px 16px !important;
border: 1px solid #000 !important;
font-size: 16px !important;
border-radius: 30px !important;
color: #1E3932 !important;
font-weight: 500 !important;
}
.btn-black {
background-color: #000 !important;
color: #fff !important;
margin-left: 1rem;
}
<!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>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="mobile-menu">
<div class="header">
<div class="logo">
<img src="./starbucks-logo.png" alt="">
</div>
</div>
<input type="checkbox" id="menu">
<label for="menu" class="toogle-menu">
<div class="spinner top"></div>
<div class="spinner middle"></div>
<div class="spinner bottom"></div>
</label>
<div class="sidebarMenu">
<ul>
<li class="nested-menu">
<a href="#">
<input type="checkbox" id="nested">
<label for="nested">Menu <i class="fas fa-chevron-right"></i></label>
</a>
</li>
<li>Rewards</li>
<li>Gift Cards</li>
<hr>
<li class="btn-list">
Sign in
Join now
</li>
<li class="location"><i class="fas fa-map-marker-alt"></i> Find a store</li>
</ul>
</div>
<div class="menu-2">
<ul>
<li>All Orders</li>
<li>Featured</li>
<li>Previous Orders</li>
<li>Favorite Products</li>
</ul>
</div>
</div>
</body>
</html>
Why it is not working?
How can I fix the issue and what is the solution?
Place .menu-2 with the next item after <input type="checkbox" id="nested" />.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
html,
body {
overflow-x: hidden;
height: 100%;
}
.header {
background-color: #fff;
width: 100%;
height: 83px;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.header {
display: flex;
align-items: center;
}
.header .logo {
padding-left: 2rem;
}
.header .logo img {
width: 50px;
}
.toogle-menu {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
right: 2rem;
z-index: 20;
cursor: pointer;
}
.spinner {
background-color: #000;
height: 3px;
margin: 5px 0;
transition: all 0.3s ease;
}
#menu:checked ~ .toogle-menu > .spinner.middle {
opacity: 0;
}
#menu:checked ~ .toogle-menu > .spinner.top {
transform: rotate(135deg);
margin-top: 15px;
}
#menu:checked ~ .toogle-menu > .spinner.bottom {
transform: rotate(-135deg);
margin-top: -16px;
}
#nested {
display: none;
}
#menu:checked ~ .sidebarMenu,
.nested-menu #nested:checked ~ .menu-2 {
transform: translateX(0);
}
.sidebarMenu,
.menu-2 {
height: 100%;
width: 80vw;
margin-top: 83px;
position: fixed;
top: 0;
right: 0;
background-color: #fff;
border-left: 1px solid rgb(235, 227, 227);
transform: translateX(80vw);
transition: all 0.3s ease;
}
.sidebarMenu ul,
.menu-2 ul {
padding: 1rem 2rem 3rem 2rem;
}
.sidebarMenu ul li,
.menu-2 ul li {
margin-bottom: 2rem;
}
.sidebarMenu ul li > *,
.menu-2 ul li a {
color: #000;
font-size: 24px;
cursor: pointer;
}
.nested-menu a label {
display: flex;
justify-content: space-between;
font-size: 24px;
cursor: pointer;
}
.nested-menu a input {
visibility: hidden;
}
.btn-list {
margin-top: 2rem;
}
.btn {
padding: 7px 16px !important;
border: 1px solid #000 !important;
font-size: 16px !important;
border-radius: 30px !important;
color: #1e3932 !important;
font-weight: 500 !important;
}
.btn-black {
background-color: #000 !important;
color: #fff !important;
margin-left: 1rem;
}
<!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>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="mobile-menu">
<div class="header">
<div class="logo">
<img src="./starbucks-logo.png" alt="" />
</div>
</div>
<input type="checkbox" id="menu" />
<label for="menu" class="toogle-menu">
<div class="spinner top"></div>
<div class="spinner middle"></div>
<div class="spinner bottom"></div>
</label>
<div class="sidebarMenu">
<ul>
<li class="nested-menu">
<input type="checkbox" id="nested" />
<label for="nested">Menu <i class="fas fa-chevron-right"></i></label>
<div class="menu-2">
<ul>
<li>All Orders</li>
<li>Featured</li>
<li>Previous Orders</li>
<li>Favorite Products</li>
</ul>
</div>
</li>
<li>Rewards</li>
<li>Gift Cards</li>
<hr />
<li class="btn-list">
Sign in
Join now
</li>
<li class="location">
<i class="fas fa-map-marker-alt"></i> Find a store
</li>
</ul>
</div>
</div>
</body>
</html>
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
i {
margin-right: 0.3rem;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.05rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
}
.showcase-img {
width: 960px;
height: 400px;
background-color: blue; /* For testing */
border-radius: 4px;
}
.showcase-img img {
width: 100%;
height: 100%;
opacity: 0.1;
}
.showcase ul {
display: flex;
bottom: 13.73rem;
position: relative;
justify-content: space-between;
}
.showcase ul li {
font-size: 2rem;
float: left;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img src="images/#" alt="">
</div>
<ul>
<li class="left-flash"><i class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
</body>
</html>
// I want the left arrow to stick to the left side of the showcase-img container and the right arrow to the right side... I tried justify-content: space-between; but it didn't work, I can of course add margins but that's annoying and would make the site less responsive, any help is greatly appreciated!
 
it is very useful for your question
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase-img img:hover {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
// When i hover over the showcase-img container the opacity changes but when the mouse goes over the ul which contains 2 li's that are icons the hovering stops and the opacity resets which shouldn't happen, i want the opacity to stay at 0.7 while the mouse is in the showcase-img container, how can i fix this? Thanks!
Rather than applying :hover directly on image like this .showcase-img img:hover img{} apply it directly on parent div it means .showcase:hover img{}. This should be something like this:
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase:hover img {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
PROBLEM: I am having problems in my bootstrap imports that seems to be affecting my link logo and social icon border. If i remove the link for the bootstrap, the logo and icon borders will work fine. However, I need the bootstrap tag for the gallery. Can someone help me fix this?
this is the code with errors
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
This is the source of error (Specifically the code above) :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
This is my current output with the link for the bootstrap enabled.You could see that the logo and social box is not properly placed.
This is what it looks like when i commented the bootstrap link. You can see that the logo and social border works fine, but the gallery does not.
Is there anyway for me to fix both?
HERE IS THE HTML CODE
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<a name="home">
<!--- Start Navigation -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script> <!--- For Navigation -->
<!---ADD NAVIGATION HERE-->
<div class="logo">
<img src="images/seafoodLogo.png">
</div>
<div class="nav-outer">
<div class="nav-wrap">
<nav class="navigation">
<div class='nav' nav-menu-style="yoga">
<ul class="nav-menu">
<li> EXPLORE</li>
<li> MENU</li>
<li> GALLERY</li>
<li> RESERVATION</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="nav-clear"></div>
<!--- End Navigation -->
<div class="clearfix"></div>
<!-- Start of Content -->
<h1> Check out some of our Suggested Paluto!</h1>
<section class="paluto">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs1.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab</h3>
<p>Considered as one of our year-round staples, our bright and bold #ChiliCrab packs a lot of flavor and heat! If you prefer to have it mildly spiced, our kitchen team is flexible with all types and tastes and preference.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs2.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Grilled Crab</h3>
<p>Our take on #GrilledCrab is deliciously simple and oozing with smoky flavor. Plus it's meaty and guaranteed fresh! Contact us on our Facebook fan page for booking and inquiries.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs3.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab with Black Pepper</h3>
<p>Thankfully, crabs are always at full swing and piled high in our #seafoodrestaurant! Roll up your sleeves and get ready to indulge our #chilicrab that's deliciously drenched with garlic and herbs. We're open 'til 10:30 pm so it's never too late to satisfy your cravings for crustaceans!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of Content -->
<div class="clearfix"></div>
<footer>
<center>
</center>
<p> © 2018 SABREEN'S SEAFOOD MARKET & RESTAURANT ALL RIGHTS RESERVED</p>
</footer>
</body>
HERE IS THE CSS CODE FOR MY NAV.CSS AND STYLES.CSS
/*styles.css*/
/*---Body Font--*/
#import url(https://fonts.googleapis.com/css?family=Hindi);
/*---Heading Font--*/
#import url(https://fonts.googleapis.com/css?family=Nobile);
/*---Social Font--*/
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
/*---Menu Gallery Font--*/
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #fffdf9;
font-family: 'Times New Roman', Times, serif;
font-size: 18px;
position: relative;
}
h1 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 175%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h2 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 150%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h3 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
color: #494949;
text-transform: uppercase;
letter-spacing: 1%;
}
p {
padding: 2%;
color: #4A4444;
text-align: justify;
font-size: 125%;
}
img {
max-width: 100%;
max-height: auto;
}
#banner-wrapper {
max-width: 1280px;
margin: 0 auto;
}
/*---Start Image Slider Style--*/
.slider {
width: 100%;
}
.slider1 img {
min-width: 100%;
}
.slider .bx-wrapper .bx-controls-direction a {
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev {
background: #000 url("img/left-arrow-white.png") no-repeat 8px 13px;
left: 0;
opacity: 0.3;
}
.slider .bx-wrapper .bx-prev:hover {
opacity: 0.6;
}
.slider .bx-wrapper .bx-next {
background: #000 url("img/right-arrow-white.png") no-repeat 10px 12px;
right: 0px;
opacity: 0.3;
}
.slider .bx-wrapper .bx-next:hover {
opacity: 0.6;
}
/*---End Image Slider Style--*/
.reservation {
margin-top: 25px;
}
.reservation p {
width: 70%;
text-align: center;
}
.one-half {
width: 44%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.one-third {
width: 28%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.left-col {
width: 60%;
float: left;
margin: 4% 0 4% 4%;
}
.sidebar {
width: 26%;
float: right;
margin: 4% 4%;
}
.sidebar img {
opacity: 1;
}
.clearfix {
clear: both;
}
/*---Start Parallax Section--*/
.parallax-1 {
background: url("../images/parallaxBG.jpg") fixed 100%;
text-align: center;
max-height: 300px
}
.parallax-inner {
padding-top: 90px;
padding-bottom: 300px;
}
.parallax-2 {
background: url("https://www.w3newbie.com/wp-content/uploads/black-pattern.jpg") repeat fixed 100%;
text-align: center;
}
.parallax-inner h3, .parallax-inner p{
color: #F1F1F1;
}
/*---End Parallax Section--*/
/*Start of Menu Gallery Section*/
section.paluto {
padding: 50px 0 0 ;
}
.box-paluto {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: #000;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
transition: .5s;
}
.box-paluto:hover {
transform: translateY(-30px);
}
.box-paluto .imgBox-paluto {
position: relative;
}
.box-paluto .imgBox-paluto img {
transition: .5s;
width: 100%;
}
.box-paluto:hover .imgBox-paluto img {
opacity: .5;
transform: translateY(-20px);
}
.box-paluto .content-paluto{
position: absolute;
bottom: -30px;
left: 0;
padding: 20px;
box-sizing; border-box;
transition: .5s;
opacity: 0;
}
.box-paluto:hover .content-paluto{
opacity: 1;
bottom: 0;
}
.box-paluto .content-paluto h3{
font-size: 28px;
color: #fff;
font-weight: 700;
}
.box-paluto .content-paluto p{
font-size: 15px;
color: #fff;
font-weight: 400;
}
#media only screen and (max-width: 700px){
.box-paluto{
height: auto;
max-width: 100%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px){
.box-paluto{
max-height: 300px;
max-width: 300px;
margin: 15px 0;
}
}
/*End of Menu Gallery Section*/
/*Start of Social*/
.fa {
padding: 5px;
margin: 2px;
font-size: 15px;
width: 15px;
height: 15px;
border-radius: 25%;
text-align: center;
justify-content: center;
text-decoration: none;
border: 4px solid #d3d3d3;
transition: all 0.5s;
background: #fff;
}
.fa:hover {
-webkit-animation: expand 0.5s ease-in-out;
-moz-animation: expand 0.5s ease-in-out;
animation: expand 0.5s ease-in-out;
color: #fff;
}
#keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
#-webkit-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
#-moz-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
.fa-facebook {
color: #3B5998;
}
.fa-facebook:hover {
background: #3B5998;
}
/*End of Social*/
/*---Start Footer--*/
footer {
background: #fffdf9;
opacity: 0.9;
width: 100%;
/*margin-top: 5%;*/
padding: 1% 0;
overflow: auto;
}
footer p{
color: #fff;
text-align: center;
font-size: 12px;
background-image: linear-gradient(to left, #d0d5de, #001947 40%, #001947 60%, #d0d5de 100%);
padding: 7px 0;
}
iframe {
width: 60%;
height: 400px;
}
/*---Start Media Queries--*/
#media screen and (max-width: 768px) {
.slider .bx-wrapper .bx-controls {
display: none;
}
.parallax-inner {
display: none;
}
.one-third {
width: 100%;
margin: 4% 0;
}
.one-half {
display: none;
}
h1 {
font-size: 125%;
}
.left-col {
width: 100%;
margin: 0 0 3% 0;
}
.sidebar {
width: 100%;
margin: 0;
}
.sidebar img {
max-width: 75%;
height: auto;
}
h3 {
padding-top: 3%;
}
.social-container {
display: block;
}
footer{
margin-top: 15px;
}
.reservation p {
margin-top: 155px;
width: 80%;
}
iframe {
width: 80%;
height: 400px;
}
}
/*nav.css*/
#import url(https://fonts.googleapis.com/css?family=Questrial);
/*--- Nav Font --*/
/*--- Start Navigation Style --*/
.nav-outer {
width: 100%;
height: 67px;
background: #fffdf9;
position: fixed !important;
z-index: 1;
}
.nav-wrap {
max-width: 100%;
margin: 0 auto;
}
nav {
margin-top: 0;
background: #fffdf9;
font-family: 'Times New Roman', Times, serif;
}
.nav ul {
overflow:hidden;
list-style:none;
}
.nav-button:hover {
cursor:pointer;
}
.navigation {
clear: both;
width: 100%;
position: relative;
}
.nav a {
color: #494949;
text-transform: uppercase;
text-decoration:none;
}
body .nav .nav-menu li a {
display:inline-block;
margin-top: 10px;
padding:15px 20px;
color: #494949;
font-size: 19px;
}
.nav.yoga .nav-menu li.active a {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-menu li a:hover {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-toggled {
min-height:36px;
border-radius:6px;
margin-top: -7px;
}
.nav.yoga .nav-toggled-controls {
display:block;
height:40px;
text-align:left;
position:relative;
}
.nav.yoga .nav-toggled-title {
position:relative;
top:9px;
left:15px;
font-size:16px;
}
.nav.yoga .nav-button {
display:block;
position:absolute;
right:15px;
top:8px;
background: #0a0c42;
}
.nav.yoga .nav-button span {
display:block;
margin-top:4px;
height:2px;
background: #0a0c42;
width:24px;
}
.nav-toggled-controls{
border-bottom: 0px solid #0a0c42;
}
.nav.yoga .nav-toggled ul li a {
display:block;
width:100%;
background-color: #505E67;
text-align:left;
padding:10px 0px 10px 15px;
border-bottom:1px solid #FFF;
text-align: center;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav.yoga .nav-toggled ul li ul a {
font-size: 15px;
text-transform: none;
}
.nav.yoga .nav-toggled ul li.active a {
background-color: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li a:hover {
background: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li {
position: relative;
}
.toggle-sm:after {
position: absolute;
right: 15px;
top: 10px;
font-size: 18px;
line-height: 25px;
}
.toggle-sm:after {
content: '+';
cursor: pointer;
}
.toggle-sm.open:after {
content: '-';
cursor: pointer;
}
.nav .nav-menu {
text-align: center;
overflow: visible;
min-height: 56px;
padding-left: 0;
margin: 0;
}
#media (min-width: 823px) {
.nav {
float: right;
}
.logo {
float: left;
}
}
#media screen and (max-width: 822px) {
body .nav .nav-menu li a {
margin-top: 4px;
}
.logo img {
max-width: 135px !important;
margin-bottom: 3px;
}
.nav-outer {
height: 21px;
}
.nav.yoga .nav-toggled-controls {
top: -40px;
margin-bottom: -36px;
}
.nav-clear {
padding-top: 37px;
margin-bottom: -15px;
}
}
.logo img {
max-height: 100px;
height: auto;
margin-left: 30px;
margin-bottom: 5px;
background-color: #002859;
z-index: 2;
position: absolute;
padding: 70px 10px 50px 10px;
background-image: linear-gradient(#253688, #060729);
}
.navigation:after {
content: "";
display: table;
clear: both;
}
.nav .nav-menu li {
display:inline-block;
padding:0px;
margin:0px !important;
position: relative;
}
.nav-button:hover {
cursor:pointer;
}
.nav .nav-toggled ul {
display:none;
margin:0px ;
padding:0px ;
position: relative;
}
.nav .nav-menu > li > ul {
position: absolute;
z-index: 10000000000;
top: 50px;
text-align: left;
background: #505E67;
width: 100%;
padding-left: 0;
display: none;
}
.nav.yoga .nav-menu > li > ul a {
padding: 11px 15px;
font-size: 18px;
font-weight: normal;
text-transform: none;
}
.nav .nav-menu > li > ul li {
position: relative;
width: 100%;
text-align: center;
}
.nav .nav-menu > li > ul > li ul {
position: absolute;
right: -100%;
top: 0;
width: 100%;
padding-left: 0;
background: #505E67;
}
.nav .nav-menu > li > ul > li ul a {
white-space: nowrap;
}
.nav ul {
overflow: visible;
}
.has-children {
position: relative;
}
.has-children:after {
content: '+';
color: #FFF;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
cursor: pointer;
}
.has-children:hover:after {
content: '-';
color: #FFF;
cursor: pointer;
}
body .nav .nav-menu li a {
padding: 15px 30px;
}
.clicker {
width: 45px;
height: 45px;
position: absolute;
right: 0;
z-index: 30000;
}
.nav-clear {
clear: both;
padding-top: 67px;
}
/*--- End Navigation Style --*/
/*--------------------MEDIA!!!---------------*/
#media screen and (max-width: 768px) {
#banner-wrapper {
position: relative;
-ms-overflow-x: hidden;
overflow-x: hidden;
}
.nav-menu {
display: none;
}
}
add your bootstrap css at the top
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet" >
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
</head>
As you have not posted the full code here , I can suggest you to do this
List out all the properties that are overlapping when you add the external CSS File.
for suppose i have a <div class="firstDiv" id="firstDivId"></div>
1.Overwrite the properties which are affecting using !important property.
In file1 i have
.firstDiv{
width:33%;
}
which is overridden by bootstrap css
.firstDiv{
width:100%;
}
In file1 you update the property using !important
.firstDiv{
width:33%!important;
}
2.download the css file , attach to your project then update the bootstrap.css file with :not selector
In bootstrap.css property should be like
.firstDiv:not('#firstDivId'){
width:33%;
}
Hope this may help you.