I'm currently learning the basics of HTML and CSS and I wanna try to practice and to make some research when I get some troubles. Now I wanted to style the landing page just like in this screenshot I made but I didnt't found how to place the image under the navbar. I could use the power of photoshop and insert it in background but I think I can do in css that withouth making background basically an image. Don't judge me if I wrote something too wrong but I tried to think it before copy and paste from somewhere.
That's my entire code. I hope somebody can help me to place that image where I want. Thank you so much in advance and don't kill me please :)
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-color: var(--color-dark);
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background: var(--color-dark);
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!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="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<img src="images/landingpage_picture.jpg" alt="Landing Image" class="landing_image">
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
You can do this by turning the page into a flexbox/grid to ensure responsiveness, then adding a left shadow to the image (if you want the shadow)
You mean like this?? Just change your img its on the body.
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-image: url("https://icatcare.org/app/uploads/2018/06/Layer-1704-1200x630.jpg");
background-size:cover;
background-repeat:no-repeat;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
.landing_image {
display:flex;
justify-content:right;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!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="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
Related
When I hover a menu item it affect other items. All other elements are moving. How to stop other elements to move from its position. Someone please review my code. I want the menu item to be bold when I hover and all the menu item does not move to its position. I tried many different ways to but it always moves and changing other elements positions
Here is the code:
<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>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul li {
display: inline-block;
color: #fff;
margin-inline: 50px;
font-weight: 400;
font-size: 25px;
transition: all 0.5s;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="">
</div>
<div class="menu">
<ul>
<li class="list active">Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>```
When you increase the font-weight on hover, you are in turn increasing the size of the text in the <li> and if the <li> doesn't already have enough space to contain the text, it needs to adapt its width and this ends up pushing the other elements.
You can simply increase the width of <li> so that the contained text can safely scale within the increased container without altering any of the surrounding elements, like so:
<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>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul {
display: flex;
gap: 50px;
}
.menu ul li {
display: inline-block;
color: #fff;
width: 150px;
font-weight: 400;
font-size: 25px;
transition: all 0.3s ease;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="" />
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>
```
This is my HTML and CSS code I want to make the navigation bar responsive but the media query doesn't cooperate It doesn't make any difference. and #menu doesn't make any difference in the first place(display: none doesn't work) it also doesn't work under media query. I can't figure out why, please help me.
.header .icons a {
cursor: pointer;
font-size: 2.5rem;
color: #333;
margin-left: 1.5rem;
}
header .icons a:hover {
color: black;
}
#menu {
display: none;
}
#media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}
#media(max-width:768px) {
#menu {
display: inline-block;
}
.header .navbar {
position: absolute;
top: 100px;
right: 0;
background-color: black;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar a {
color: white;
display: block;
margin: 1.5rem;
padding: .5rem;
font-size: 2rem;
}
}
<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>jj </title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="header" >
<a href="#" class="logo">
<img src="images/logo.jpg" alt=""></a>
<nav class="navbar">
home
varieties
about us
contact us
</nav>
<div class="icons">
</div>
Add a head element with a meta tag at the beginning of your code so the website is properly rendered based on actual lower screen sizes (without this, websites tend to render in higher resolution sizes than the device actually is).
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I also cannot find where your header class is used in your html code so I got rid of most of the .header portions in your media queries to have the styling take effect.
#media(max-width:991px){
html{
font-size: 55%;
}
.header{
padding: 1.5rem 2rem;
}
}
#media(max-width:768px){
#menu {
display: inline-block;
}
.navbar{
position: absolute;
top:100px; right: 0;
background-color:#333;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.navbar a{
color:rgb(243, 215, 215);
display: block;
margin:1.5rem;
padding:.5rem;
font-size:2rem;
}
}
Basicly just exchange your nav with this template and it should work perfectly.
#media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}
#media(max-width:768px) {
.topnav {
display: inline-block;
}
}
.topnav {
background-color: gray;
overflow: hidden;
margin: 1px;
border-radius: 10px;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav a:hover {
background-color: light-gray;
color: red;
transition: 1s;
}
.topnav a.active {
background-color: red;
color: white;
border-radius: 10px;
}
<div class="topnav">
home
varieties
about us
contact us
</div>
My English is weak, and below is my question.
I would like creat a menu buttom(mobile style), I have a question somewhere, when I set
.menu-btn i::before{content: "\f00d";} will cover <i class="fa-solid fa-bars"></i>, I want to knew why?
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav{
height: 80px;
background-color: black;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 60px 0 100px;
}
nav ul{
display: flex;
list-style-type: none;
}
nav .logo{
font-weight: 600;
font-size: 35px;
}
nav ul li{
margin: 0 10px
}
nav ul li a{
text-decoration: none;
color: #fff;
letter-spacing: 1px;
font-weight: 500;
font-size: 18px;
padding: 5px 10px;
border-radius: 5px;
}
nav ul .active a,
nav ul li a:hover{
color: black;
background-color:#fff;
}
nav #click,
nav .menu-btn i{
display: none;
font-size: 26px;
cursor: pointer;
}
#media screen and (max-width:768px) {
nav .menu-btn i{
display: block;
}
nav #click:checked ~ .menu-btn i::before{
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
nav #click:checked ~ ul{
left: 0;
transform: all 1s ease;
}
nav ul{
display: block;
width: 100%;
height: 100vh;
position: fixed;
top: 80px;
left: 100%;
background-color: black;
text-align: center;
}
nav ul li{
margin: 50px 0;
}
nav ul .active a,
nav ul li a:hover{
color: skyblue;
background-color: black;
}
}
<!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">
<script src="https://kit.fontawesome.com/6c92ff04b8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link rel="stylesheet" href="20220319.css">
<title>20220319-navbar</title>
</head>
<body>
<nav>
<div class="logo">Brand</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fa-solid fa-bars"></i>
</label>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Servises</li>
<li>Gallery</li>
<li>Feedback</li>
</ul>
</nav>
</body>
</html>
It's because your setting has a higher specificity than the one that the Fontawesome system has set.
When you apply the class fa-bars Fontawesome's CSS is:
.fa-bars:before, .fa-navicon:before {
content: "\f0c9";
}
But you are applying:
.menu-btn i::before{content: "\f00d";}
This has higher specificity than the previous setting because of the .menu-btn
If you take that out and just have:
i::before{content: "\f00d";}
the hamburger icon will be shown.
You can read more about specificity on MDN
We are using a font called font-awesome. In that font, the character \f0c9 means a hamburger, and \f00d means the cross icon. When you change the class, for example, fa-plug it's the character on before changes to \f1e6 and so on
Here is the fiddle: https://jsfiddle.net/gnsho1br/2/
There were similar questions that suggests to set display to inline-block but I have done that. My container is col-1. I also tried to give my logo class of float: left but then the menu is off-center (maybe the left margin starts at the end of the logo???).
Use display: flex instead. If you want items to be centered, try align-items: center, justify-items: center. Refer to Flexbox for more info.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li,
a,
button {
font-family: "Elliot-Sans", sans-serif;
font-weight: 300;
font-size: 14px;
color: #777777;
text-decoration: none;
}
#wrapper {
margin: 0 15px;
padding: 15px 0;
position: relative;
}
.row {
max-width: 65%;
margin: 0 auto;
padding: 75px 0;
position: relative;
}
.col-1 {
width: 100%;
padding: 20px;
display: flex;
}
#header {
height: 71px !important;
overflow: visible;
z-index: 9999;
width: 100%;
position: absolute !important;
}
#header .row {
padding: 0;
}
#header ul {
text-align: center;
}
.logo {
width: 150px;
height: auto;
cursor: pointer;
margin-right: auto;
background-color: inherit;
display: inline-block;
vertical-align: middle;
}
#topNavBar {
list-style: none;
margin: 0;
background-color: #ffffff;
}
ul{
display: flex;
}
#topNavBar li {
display: inline-block;
padding: 0px 20px;
background-color: inherit;
vertical-align: middle;
}
#topNavBar li a {
transition: all 0.2s ease 0s;
font-weight: 400;
text-transform: uppercase;
}
#topNavBar li a:hover {
color: #04ad9e;
text-decoration: none;
padding-bottom: 4px;
border-bottom: 3px solid #04ad9e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/> -->
<link
href="https://fonts.googleapis.com/css2?family=Rajdhani:wght#300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
<title>Title</title>
</head>
<body>
<div id="wrapper">
<header id="heroImage">
<div id="header" class="navCollapse">
<div class="row clearfix">
<div class="col-1">
<div class="logo">
<img class="logo" src="image.png" alt="logo" />
</div>
<nav id="topNavBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Read</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
I'm trying to make the navigation bar for my personal site. I'm using flexbox because it's the only (pure CSS) solution I've found so far where the dropdown plays nicely with the link background color.
I'm trying to position the dropdown so that it floats over the content when opened. I tried setting the main nav li elements to have position: relative, then setting position: absolute and z-index: 1 for .dropdown ul , which technically works, but it breaks the grey background color for the link. I also tried using blocks, but it still looks bad either way. Does anyone know a pure CSS solution for this?
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: flex;
flex-direction: column;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
jsfiddle: http://jsfiddle.net/eq6o3yp5/8/
When you position it as absolute, the relative element do not get 'stretched' or resized, and so, that is why the background of the relative element do not reflect on the absolute positioned element.
Position it as absolute and give it a width, perhaps a min-width... and set a desired background-color or set it background-color: inherit;
.dropdown:hover ul, .dropdown ul:hover {
...
background-color: grey;
min-width: 100%;
position: absolute;
}
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: block;
position: absolute;
background-color: grey;
left: 0;
min-width: 100%;
position: absolute;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>