I want to make the image a link so that when you click on the image it takes you to the link.
I tried the anchor link but that doesn't work. Below is my HTML and CSS code.
.ideas-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 2.5rem;
margin-bottom: 2rem;
}
.title-heading{
text-align: center;
text-transform: uppercase;
margin-bottom: 10rem;
color: rgba(0,0,0,.7);
background-color: white;
}
.title-heading h1{
font-family: 'Aldrich', sans-serif;
font-size: 2rem;
margin: .5rem 0 1rem;
text-align: center;
}
.title-heading p{
text-transform: none;
padding: 0 50px;
}
.idea-grid-item{
height: 50rem;
width: 50rem;
padding: 5rem;
color: white;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1;
}
.idea-grid-item{
content:"";
position: relative;
top: 0;
left: 0;
width: 100%;
height: 30rem;
background-image: linear-gradient(135deg, rgba(49,24,131,0.9) 0%, rgba(72,56,149,0.8) 100%);
z-index: -1;
}
.idea-grid-item p{
color: rgba(0, 0, 0, 0.7);
}
.idea-grid-item a{
float: right;
}
<div class="ideas-grid">
<!--Idea grid item 1-->
<div class="idea-grid-item number-1">
<p>
</p>
</div>
If you want the entire image to be a link, wrap it in an <a> element like this:
<a href="http://yoursite.com">
<img src="image.jpg" alt="">
</a>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="image.jpg"/>
</body>
</html>
Related
I want to achieve this desktop design.
The mobile design has been completed but when I try changing the mobile design to desktop design, I am using a specific flex property row-reverse. When I use the row-reverse property the result looks like this
I am unable to figure out how to fix the position to achieve the desktop design and have been stuck on this problem for the past few days.
Could someone please tell me what am i doing wrong and how do i fix this issue.
#import url('css-reset.css');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap');
:root {
--color-main-background: hsl(233, 47%, 7%);
--color-card-background: hsl(244, 38%, 16%);
--color-soft-voilet: hsl(277, 64%, 61%);
--color-white-main: hsl(0, 0%, 100%);
--color-white-paragraph: hsla(0, 0%, 100%, 0.75);
--color-white-stats: hsla(0, 0%, 100%, 0.6);
--font-weight-four: 400;
--font-weight-seven: 700;
}
body {
background-color: var(--color-main-background);
font-weight: var(--font-weight-four);
color: var(--color-white-main);
margin: 0;
}
.container {
display: grid;
grid-auto-flow: row;
border-radius: 10px;
justify-content: center;
text-align: center;
align-self: center;
max-width: 350px;
min-height: 750px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
/* padding: 0 2rem; */
background-color: var(--color-card-background);
overflow: hidden;
}
/* .main-img {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
} */
picture>* {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main-header {
font-family: 'Lexend Deca',
sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.5rem;
color: var(--color-white-main);
margin-top: 20px;
}
.insight {
color: var(--color-soft-voilet)
}
.h1-first,
.h1-second {
display: block;
}
.stats,
.heading {
display: block;
}
.paragraph {
margin-top: 5px;
margin-bottom: 30px;
}
.para-1,
.para-2,
.para-3,
.para-4 {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.875rem;
color: var(--color-white-paragraph);
display: block;
line-height: 1.75;
}
.stats {
color: var(--color-white-main);
font-family: 'Inter', sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.25rem;
margin-top: 10px;
}
.heading {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.7rem;
color: var(--color-white-stats);
margin-bottom: 20px;
}
#media (min-width:768px) {
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: row-reverse;
min-height: 400px;
max-width: 50rem;
overflow: hidden;
}
picutre {
max-width: 100%;
max-height: 100%;
}
picture>* {
width: 100%;
height: 400px;
border-top-left-radius: 0px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 0px;
border-top-right-radius: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Stats preview card component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
</style>
</head>
<body>
<div class="container">
<div class="img-component">
<picture>
<source media="(min-width: 768px)" srcset="/images/image-header-desktop.jpg">
<source media="(min-width: 100px)" srcset="/images/image-header-mobile.jpg">
<img class="main-img" src="/images/image-header-mobile.jpg" alt="main image">
</picture>
</div>
<div class="main-header">
<h1><span class="h1-main"> Get <span class="insight">insights</span> that</span>
<span class="h1-first">help your business</span>
<span class="h1-second"> grow.</span></h1>
</div>
<div class="paragraph">
<p>
<span class="para-1"> Discover the benefits of data</span>
<span class="para-2">analytics and make better decisions</span>
<span class="para-3">regarding revenue, customer</span>
<span class="para-4">experience, and overall efficiency.</span>
</p>
</div>
<div class="stat-heading">
<span class="stats">10k+</span>
<span class="heading">COMPANIES</span>
<span class="stats">314</span>
<span class="heading">TEMPLATES</span>
<span class="stats">12M+</span>
<span class="heading">QUERIES</span>
</div>
</div>
</body>
</html>
Hope this will help to restructure your section.
I basically tried to roughly replicate your design using a slightly different approach:
So given the main div (container), let's split it in half creating 2 child div into it, aligning them with d-flex applied to the container.
Into the left one, let's create 2 other divs: one which will contain the header and paragraph and the other which will contain the 3 stats and heading. I will then suggest to wrap each stats and heading into they own div, this will help you to correctly align them on desktop and mobile using d-flex, and related flex-directions.
html,
body {
height: 100%;
}
div {
border: 2px solid red
}
.container {
display: flex;
align-items: center;
}
.box-left {
width: 50%;
background-color: blueviolet;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-right {
width: 50%;
background-color: brown;
height: 500px;
width: 50%;
background-image: url(https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
}
.box-bottom {
display: flex;
justify-content: space-between;
}
.text-wrapper {
padding: 50px;
}
#media (max-width:768px) {
.container {
flex-direction: column-reverse;
}
.box-left,
.box-right {
width: 100%;
}
.box-left {
text-align: center;
}
.box-bottom {
display: flex;
flex-direction: column;
justify-content: center;
}
}
<body>
<div class="container">
<div class="box-left">
<div class="text-wrapper">
<div>
<h1>Your title here</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English.</p>
</div>
<div class="box-bottom">
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
</div>
</div>
</div>
<div class="box-right">
</div>
</div>
</body>
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 10 months ago.
I want to keep the button at bottom previously which I was making it possible by writing more text to push it to bottom but it wasn't responsive for every device any way I can keep the button in a div at bottom?
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>
Codepen
My solution would be:
.container {
display: flex;
flex-flow: column nowrap; /* Flex everything inside your cards vertically */
}
.description {
flex-grow: 1;
/*
When a card has more space (because another card is taller
with more info) - grow the description
*/
}
Here is a working snippet, click Full page top right to see it working:
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
display: flex;
flex-flow: column nowrap;
align-items: center;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
flex-grow: 1;
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed last year.
i want to set z-index -999 in the green small rectangle that be set it behind the glass card but it dose not work. i have position rel and abs in my code and i rellay confiusing about this that why it is not work!
.second-card::before {
content: '';
display: inline-block;
width: 5rem;
height: 2rem;
background-color: #82c91e;
border-radius: 2px;
position: absolute;
top: -5%;
left: 50%;
transform: translateX(-50%);
z-index: -999;
}
i use before for that.
https://jsfiddle.net/9do7hpnx/1/
The issue is that you are trying to hide the green rectangle from its parent , you cant do that , because when you apply z index to the parent , it gets applied to the child also ( ie the green rectangle ) to solve this issue create another div which is not a child of the blurred div like
here is a working demo
https://jsfiddle.net/mcshjxqt/1/
code
<!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="style.css">
<title>Payment</title>
</head><!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="style.css">
<title>Payment</title>
</head>
<body>
<div class="payment-container">
<div class="payment-content">
<div class="container-content">
<h2 class="payment-title">Checkout</h2>
<p class="payment-timer">
<span class="timer-txt">0</span>
<span class="timer-txt">1</span>
<span class="timer-semicolumn">:</span>
<span class="timer-txt">1</span>
<span class="timer-txt">9</span>
</p>
</div>
</div>
<div class="payment">
<div class="card">
<div class="main-card">
<div class="main-card--top">
<div class='greenBg'>
</div>
<div class="second-card">
<div class="second-card--logo">
<img src="img/logo.png" alt="logo" class="logo-img">
</div>
<div class="second-card--content">
<div class="second-card--txt">
<p class="card-name">Benjamin Taylor</p>
<div class="card-name--details">
<span class=""></span>
</div>
</div>
<div class="second-card--icon">
<p class="second-card--date">
12 / 05
</p>
<ion-icon class="sec-icon-wifi" name="wifi-outline"></ion-icon>
</div>
</div>
</div>
<div class="main-card--content">
<div class="main-card--order">
<p class="order-title">order</p>
<p class="order-number">4239421</p>
</div>
<div class="main-card--product">
<p class="product-title">product</p>
<p class="product-name">reels on rails</p>
</div>
<div class="main-card--vat">
<p class="vat-title">vat (<span class="vat-per">10</span>%)</p>
<p class="vat-price">Rp 25.000</p>
</div>
</div>
</div>
<div class="main-card--bottom">
<div class="main-card--total">
<div class="total-price--content">
<p class="total-title">total</p>
<div class="total-price">
<p class="total-price-sym">Rp</p>
<p class="totla-price-pay">2.256.100</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pay">2</div>
</div>
</div>
<!-- JavaScript -->
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500;600;700&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 62.5%;
}
body {
min-height: 100vh;
font-size: 1rem;
background-color: #212529;
color: #fff;
}
/* ================== Payment container ================== */
.payment-container {
max-width: 100rem;
margin-inline: auto;
}
/* ================== Payment content ================== */
.payment-content {
display: grid;
grid-template-columns: 1fr 2fr;
padding: 3.2rem;
}
.payment-title {
font-weight: 600;
font-size: 2rem;
}
.container-content {
grid-column: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ================== Payment timer ================== */
.payment-timer {
display: flex;
align-items: center;
gap: .5rem;
}
.timer-txt {
width: 3.2rem;
height: 3.2rem;
font-size: 2rem;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
/* ================== Payment ================== */
.payment {
display: grid;
grid-template-columns: 1fr 2fr;
}
/* ================== Card ================== */
.main-card {
background-color: #313538;
width: 90%;
margin-inline: auto;
}
.main-card--content {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.main-card-container--content {
width: 70%;
margin-inline: auto;
}
.second-card {
background: rgba(255, 255, 255, 0.25);
border-radius: 5px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 5px solid #94d82d;
min-height: 20rem;
transform: translateY(-60px);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.main-card--top {
width: 75%;
margin-inline: auto;
position: relative;
z-index: 999;
}
.second-card--logo {
margin-block: 4rem;
text-align: center;
}
.logo-img {
width: 6.4rem;
}
.sec-icon-wifi {
color: #fff;
width: 2rem;
height: 2rem;
}
.second-card--content {
display: flex;
flex-direction: column;
gap: 3.2rem;
}
.card-name {
font-size: 1.4rem;
margin-block: 5px;
}
.card-name--details {
font-size: 1.2rem;
}
.second-card--icon {
display: flex;
justify-content: space-around;
align-items: center;
margin-block: 1rem;
}
.second-card--txt {
text-align: center;
margin-top: 2rem;
}
.order-title,
.product-title,
.vat-title {
color: #8a8a8a;
}
.main-card--bottom {
background-color: #525353;
padding: 2rem 3rem;
position: relative;
}
.main-card--bottom::before {
content: '';
display: block;
width: 3rem;
height: 3rem;
background: #212529;
border-radius: 50%;
position: absolute;
top: -20%;
left: -5%;
}
.main-card--bottom::after {
content: '';
display: block;
width: 3rem;
height: 3rem;
background: #212529;
border-radius: 50%;
position: absolute;
top: -20%;
right: -5%;
}
.total-price--content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.total-title {
text-align: right;
text-transform: uppercase;
font-weight: 600;
}
.total-price-sym {
font-weight: 700;
}
.totla-price-pay {
font-size: 1.2rem;
font-weight: 700;
}
.total-price {
display: flex;
justify-content: space-between;
}
.greenBg::before {
content: '';
display: inline-block;
width: 5rem;
height: 2rem;
background-color: #82c91e;
border-radius: 2px;
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
z-index: -999;
}
Hey so I'm trying to have black borders in between each tab at the top of my page (shown below), however when I try to add border-left: ; it adds it to the text in the cell rather than the cell itself.
I have tried adding:
height: 100%;
width: 100%;
but this messes with the text inside as well.
This is where I would want the border to be:
and this is where I would want the text to be:
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #70614b;
}
.banner {
display: grid;
z-index: 1;
position: fixed;
width: auto;
height: 90px;
background-color: #d7cdc7;
grid-template: 100% / 20% repeat(5, 1fr);
grid-gap: 2px;
justify-items: center;
align-items: center;
}
.logo img {
width: 100%;
height: auto;
}
.about {
grid-area: 1 / 2 / span 1 / span 1;
}
.tabs {
font-family: Roboto;
font-size: 40px;
font-weight: bold;
text-align: center;
border-left: 2px black solid;
}
<html>
<head>
<link href="./style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<div class="logo"><img src="./photos/aa logo.png" /></div>
<div class="about tabs">ABOUT</div>
</div>
</body>
</html>
Without modifying your stylesheet too much, I'd suggest giving your tabs selector the height of its parent and then aligning the text using flex. It should look like this:
.tabs {
font-family: Roboto;
font-size: 40px;
font-weight: bold;
text-align: center;
border-left: 2px black solid;
height: 100%;
display: flex;
align-items: center;
}
Hope it helps!
Good days guys I would like to ask if how to center the image element in the navigation bar, I dint use ul element when I try to use absolute dint work as well.. what I want to make it happen is just like on the image that attached here. thanks
here's the code, by the use I used grid system here
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
/* ########## Custome Design ######### */
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
/* margin: 10px 0; */
height: 100vh;
}
.box{
background-image: linear-gradient(to bottom,
rgba(93, 173, 226, 0.800),
rgba(93, 173, 226, 0.932) ),
url(/img/bg-picture.jpg);
background-size: cover;
background-position: left;
height: 100vh;
}
header {
grid-row: 1 / 2;
grid-column: 1 / -1;
/* background-color: #fff; */
}
.logo {
height: 65px;
width: 65px;
position: absolute;
margin: auto;
}
.firstNav {
text-align: center;
}
.firstNav > a {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
color: #fff;
}
.firstNav > a:hover {
background: #000;
}
<body>
<div class="mainbox box">
<header>
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img src="./img/logo.png" alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>
</header>
</div>
</body>
When I tried to use the code above the result is just like below image I attached
I solved this using flexbox, replace the text-align:center; in .firstNav and add a display: flex;
.firstNav {
display: flex;
justify-content: center;
align-items: center;
}
Here you have a codepen if you want to checkit! Let me know if that helps!
You can do something like this:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
/* ########## Custome Design ######### */
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
/* margin: 10px 0; */
height: 100vh;
}
.box{
background-image: linear-gradient(to bottom,
rgba(93, 173, 226, 0.800),
rgba(93, 173, 226, 0.932) ),
url(/img/bg-picture.jpg);
background-size: cover;
background-position: left;
height: 100vh;
}
header {
grid-row: 1 / 2;
grid-column: 1 / -1;
/* background-color: #fff; */
}
#header ul li a.logo {
background: url("http://i48.tinypic.com/2mob6nb.png");
background-repeat:no-repeat;
height:140px;
display:block;
width:215px;
margin-top:-61px;
padding: 0;
}
.firstNav {
text-align: center;
}
.firstNav > a {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
color: #fff;
}
.firstNav > a:hover {
background: #000;
}
<body>
<div class="mainbox box">
<header>
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>
</header>
</div>
</body>
I would use a grid like this:
nav {
display: grid;
grid-template-columns: repeat(3, 1fr) auto repeat(3, 1fr)
}
nav > * {
text-align: center;
}
<body>
<div class="mainbox box">
<header>
<nav>
Home
Blog
Portfolio
<img src="./img/logo.png" alt="logo" class="logo">
Progress
About
Contact
</nav>
</header>
</div>
</body>
Note: your <div class="FirstNav"> is useless.
I would suggest using
.firstNav {
display: flex
justify-content: center
align-items: center
}
Full example:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
/* ########## Custome Design ######### */
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
/* margin: 10px 0; */
height: 100vh;
}
.box{
background-image: linear-gradient(to bottom,
rgba(93, 173, 226, 0.800),
rgba(93, 173, 226, 0.932) ),
url(/img/bg-picture.jpg);
background-size: cover;
background-position: left;
height: 100vh;
}
header {
grid-row: 1 / 2;
grid-column: 1 / -1;
/* background-color: #fff; */
}
.logo {
height: 65px;
width: 65px;
}
.firstNav {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.firstNav > a {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
color: #fff;
}
.firstNav > a:hover {
background: #000;
}
<div class="mainbox box">
<header>
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img src="https://placehold.it/50x50" alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>
</header>
</div>