I'm trying to move the search box down, I already tried adding a margin-top and I also tried adding a padding-top but it won't move. I want it to be positioned vertically in the middle of the blue rectangle. I would also like to change the color of the box and the text to different shades of gray. Help would be much appreciated. Thanks!
header {
position: fixed; /* Helps us position at the top; header no longer takes up space in the flow of the document */
top: 0px;
width: 100%;
padding: 15px;
background-color: #693969;
height: 150px;
margin: 0;
opacity: .9;
}
header {
margin: 0;
font-family: 'DM Sans', sans-serif;
font-weight: 600;
}
.topnav {
overflow: hidden;
background-color: rgb(68, 71, 125);
width: 1260px;
float: right;
}
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
}
.topnav a {
float: right;
color: #391616;
text-align: center;
padding: 20px 40px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: rgb(194, 125, 125);
color: rgb(100, 77, 77);
}
.topnav a.nav {
background-color: none;
color: rgb(120, 42, 42);
}
.search {
margin-top: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="indexx.css">
</head>
<body>
<header>
<div class="topnav">
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<input class="search" type="text" placeholder="Search...">
</div>
</header>
</body>
</html>
I have added a basic reset which I recommend each time you're creating any HTML/CSS/JS design. There are libraries you can use in the future but for now this will do fine. Here is my solution:
* { / * This is basic browzer reset */
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
position: fixed;
/* Helps us position at the top; header no longer takes up space in the flow of the document */
top: 0px;
width: 100%;
padding: 15px;
background-color: #693969;
height: 150px;
margin: 0;
opacity: .9;
margin: 0;
font-family: 'DM Sans', sans-serif;
font-weight: 600;
}
.topnav {
background-color: rgb(68, 71, 125);
width: 1260px;
float: right;
}
.topnav input {
float: right;
padding: 6px;
border: none;
margin-top: 15px;
margin-right: 16px;
font-size: 17px;
max-width: 100px;
}
.topnav input::placeholder { / * Add the ::placeholder pseudoclass to change color of your placeholder text */
color: #444444;
}
.topnav a {
float: right;
color: #391616;
text-align: center;
padding: 20px 40px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: rgb(194, 125, 125);
color: rgb(100, 77, 77);
}
.topnav a.nav {
background-color: none;
color: rgb(120, 42, 42);
}
.search {
margin-top: 16px;
}
<header>
<div class="topnav">
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<input class="search" type="text" placeholder="Search...">
</div>
</header>
A few things to mention, you're using a few unnecessary floats, I would suggest reading up on the current modern solutions; Flexbox & CSS Grid. You'll make your life much easier in terms of designing layouts
Flexbox
CSS Grid
update the following css
.topnav {
overflow: hidden;
background-color: rgb(68, 71, 125);
width: 1260px;
float: right;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row-reverse;
}
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-right: 16px;
font-size: 17px;
margin: 0;
}
You can have it, hope it helps
/* header */
.container-fluid{ padding-left: 15px; padding-right: 15px; }
.d-flex{ display: flex; }
.justify-content-end { justify-content: flex-end ; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
header {width: 100%;height: 130px;position: fixed;left: 0;top: 0;z-index: 9;-webkit-box-shadow: 0px 2px 9px rgb(0 0 0 / 9%);-moz-box-shadow: 0px 2px 9px rgba(0,0,0,0.09);box-shadow: 0px 2px 9px rgb(0 0 0 / 9%);background: #fff; font-family: 'Roboto', sans-serif; }
header .header-inner{ margin-top: 15px; padding-left:15px; padding-right:15px; height: 80px; background-color: #D9DEDF; color: #606A71; font-family: 'Roboto', sans-serif; font-weight: 400; font-style: normal; font-size: 14px; }
header nav { margin-right: 15px; }
header nav ul{ list-style-type: none; padding: 0; margin: 0;}
header nav ul li{ font-size: 14px; line-height: 17px; list-style: none; padding:0 ; margin: 0 1px; color: #131516; background-color: inherit; }
header nav ul li a{ color: #131516; background-color: inherit; padding: 15px; text-decoration: none; }
header nav ul li a:hover{ color: #131516; background-color: #F2F3F4; padding: 15px; }
.form-control{ display: block;width: 100%;padding: 0.375rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #212529;background-color: #fff;background-clip: padding-box;border: 1px solid #89979B;-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0.25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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=Roboto:ital#1&display=swap" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<header>
<div class="container-fluid d-flex justify-content-end">
<div class="header-inner d-flex justify-content-between align-items-center">
<nav>
<ul class="d-flex">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
<input type="text" class="form-control">
</div>
</div>
</header>
</body>
</html>
Or check in jsfiddle example link :
https://jsfiddle.net/DeveloperSandip/fer3o9nd/3/
Related
When I increase the px of the icon located on the cards (The Gaming Controller and the Question Mark) It will not change the actual size of the icon when I run the code, Is there any other way to increase the size of these icons or a solution to my problem in anyway? Thanks for the help guys!
Here is my code :)
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px;
align-items: center; /* Added */
}
.card {
display: inline-block;
width: 200px;
height: 150px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 24px;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
</style>
<body>
<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<a href = "#test"class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</a>
</div>
A way to fix are adding "!important" to font-size it will work change your icon size, for example:
.material-icons {
font-size: 30px!important;
color: #D32F2F;
margin-bottom: 5px;
}
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 6 months ago.
I'm trying to create a website with navbar that is position is fixed then a main section that has 100vh, that is the only content that I have but the webpage is too tall although my web is 100vh height only so it doesn't make any sense why it has scroll.
#import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
position: fixed;
padding: 1rem 0;
width: 100%;
}
nav .navbar-container {
display: flex;
width: 90%;
margin: 0 auto;
}
nav .navbar-brand {
font-family: 'Barlow', sans-serif;
color: #212529;
font-size: 2.5rem;
text-decoration: none;
padding-top: 5px;
margin-right: 20px;
}
nav .navbar-links {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav .navbar-links li {
display: inline-block;
margin-right: 10px;
}
nav .navbar-links li a {
color: #212529;
display: block;
text-align: center;
padding: 20px 7px;
text-decoration: none;
font-size: 1rem;
line-height: 1rem;
font-family: 'Barlow', sans-serif;
}
.dropdown .dropbtn {
font-size: 1rem;
outline: none;
background-color: inherit;
height: 100%;
font-family: 'Barlow', sans-serif;
margin: 0;
}
nav .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
nav .dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
nav .dropdown-content a:hover {
background-color: #ddd;
}
nav .dropdown:hover .dropdown-content {
display: block;
}
.main-section {
height: 100vh;
background-color: #eeeeee;
}
.main-container {
height: 100%;
width: 90%;
margin: 0 auto;
position: relative;
}
.main-content {
position: relative;
top: 50%;
transform: translateY(-50%);
width: fit-content;
}
.main-content h1 {
font-family: 'Barlow', sans-serif;
margin-bottom: 10px;
font-size: 2rem !important;
}
.main-content p {
margin-top: 0;
font-family: 'Barlow', sans-serif;
}
.main-content .link-group a {
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: 0;
font-family: 'Barlow', sans-serif;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.contact-link {
color: #fff;
background-color: #212529;
border: 1px solid #212529;
}
.buy-now-link {
color: #212529;
border: 1px solid #212529;
}
.buy-now-link:hover {
color: #fff;
background-color: #212529;
border-color: #212529;
}
<!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="src/css/style.css">
<title>Gizmo Twist | Home</title>
</head>
<body>
<nav>
<div class="navbar-container">
<a class="navbar-brand" href="#">GIZMOTWIST</a>
<ul class="navbar-links">
<li>
Home
</li>
<li>
<div class="dropdown">
<a class="dropbtn">Products</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-container">
<div class="main-content">
<h1>PH NO.1 CUBE SHOP</h1>
<p>ITS START WITH A CROSS</p>
<div class="link-group">
<a class="contact-link" href="#">Contact Us</a>
<a class="buy-now-link" href="#">Buy Now</a>
</div>
</div>
</div>
</section>
<script src="src/js/app.js"></script>
</html>
your main container is getting a margin on top. You can use negative margin to fix it
.main-container {
height: 100%;
width: 90%;
margin: 0 auto;
position: relative;
margin-top: -30px;
}
I'm making a simple product display website for my class and I'm a little stuck on centering the image for my header. I'll be adding a product navigation menu to the left so I wanted my logo centered but I can't seem to get it to center. What should I change in order to center it since with my current code text-align: center isn't working.
header, footer {
background-color: lightgray;
border: solid 1px black;
overflow: hidden;
padding: 20px 10px;
}
footer {
padding: 10px;
border-radius: 3px;
}
body {
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: darkgray;
}
html, body {
padding: 0;
margin: 0;
}
.header a {
float: left;
color: #000000;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 26px;
border-radius: 4px;
}
.header .logo {
text-align: center;
max-width: 12%;
height: auto;
}
.header a:hover {
background-color: #9B9B9B;
color: #000000;
}
.header a.active {
background-color: #767676;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vape Away</title>
<meta name="description" content="Vape Juice Product Display">
<meta name="author" content="Jordan">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<header class="header">
<img src="img/logo.png" class="logo">
<div class="header-right">
<a class="active" href="index.html">Home</a>
Contact Me
About Me
Wholesale Options
</div>
<!-- ^ header ^ -->
</header>
</div>
</body>
</html>
Add text-align:center to header:
header, footer {
background-color: lightgray;
border: solid 1px black;
overflow: hidden;
padding: 20px 10px;
text-align:center;
}
.header a {
float: left;
color: #000000;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 26px;
border-radius: 4px;
}
.header .logo {
text-align: center;
max-width: 12%;
height: auto;
}
.header a:hover {
background-color: #9B9B9B;
color: #000000;
}
.header a.active {
background-color: #767676;
}
.header-right {
float: right;
}
<div id="wrapper">
<header class="header">
<img src="img/logo.png" class="logo">
<div class="header-right">
<a class="active" href="index.html">Home</a>
Contact Me
About Me
Wholesale Options
</div>
<!-- ^ header ^ -->
</header>
</div>
You can do as Moize says. You can also solve your problem using display flex.
header,
footer {
background-color: lightgray;
border: solid 1px black;
overflow: hidden;
padding: 20px 10px;
}
footer {
padding: 10px;
border-radius: 3px;
}
body {
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: darkgray;
}
html,
body {
padding: 0;
margin: 0;
}
.header a {
float: left;
color: #000000;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 26px;
border-radius: 4px;
}
.header .logo {
/* text-align: center; */
max-width: 12%;
/* height: auto; */
}
.header a:hover {
background-color: #9B9B9B;
color: #000000;
}
.header a.active {
background-color: #767676;
}
.header-right {
/* float: right; */
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.header { /*I took some of your lines into the comment and added this. */
display: flex;
justify-content: space-between;
align-items: center;
}
<div id="wrapper">
<header class="header">
<img src="https://static.rfstat.com/renderforest/images/v2/logo-homepage/flat_3.png" class="logo">
<div class="header-right">
<a class="active" href="index.html">Home</a>
Contact Me
About Me
Wholesale Options
</div>
<!-- ^ header ^ -->
</header>
</div>
In the mobile version (width max 411px) when I create a navbar and I use absolute position when the dropdown active, why the background color don't cover all the element inside nav div?
Codepen <<-- Here's the codepen version
I've using overflow hidden and still doesn't work
$(document).ready(function(){
$('.navbar-burger').click(function(){
$('.inactive').toggleClass('active-nav');
$('.navbar-burger').toggleClass('inactive');
$('.navbar-close').toggleClass('close-navi');
$('.header').toggleClass('border-bg');
})
$('.navbar-close').click(function(){
$('.inactive').removeClass('active-nav');
$('.navbar-burger').removeClass('inactive');
$('.navbar-close').removeClass('close-navi');
$('.header').removeClass('border-bg');
})
})
*{
font-family: 'Open Sans Light', sans-serif;
color: black;
}
body{
margin: 25px 60px;
background-color: #fafafa;
font-size: 16px;
}
.header{
float: right;
transition: 0.4s ease-in-out;
}
.navbar{
font-size: 1.2em;
}
.navbar ul{
list-style: none;
margin: 0px;
padding: 0;
}
.navbar ul li{
display: inline-block;
margin: 0px 15px;
}
.navbar ul li a{
text-decoration: none;
}
.navbar ul li a:hover{
color: #70BCFF;
}
.content{
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
padding: 70px 0px;
cursor: default;
}
.welcome-message h1{
font-size: 5.3em;
margin: 0px;
}
.welcome-message h2{
font-size: 2.15em;
font-weight: 100;
margin: 0px;
line-height: 60px;
color: #707070;
}
.welcome-message h4{
font-size: 1.0625em;
color: #8D8D8D;
margin-left: 4px;
}
.welcome-message p{
font-size: 1.0625em;
color: #8D8D8D;
margin-left: 4px;
}
.expand-bio{
background-color: #fff;
border: 0.3px solid rgba(0, 0, 0, .16);
font-size: 1.0625em;
padding: 20px 30px;
box-shadow: rgba(0, 0, 0, .16) 2px 7px 8px;
border-radius: 15px;
margin-left: 4px;
cursor: pointer;
}
.expand-bio:hover{
box-shadow: rgba(0, 0, 0, .16) 2px 7px 14px;
}
.ava{
display: grid;
grid-template-areas: 100%;
}
.ava img{
width: 70%;
overflow: hidden;
align-self: center;
justify-self: center;
margin: 0px;
}
.navbar-burger,.navbar-close{
display: none;
}
.active a{
color: #70BCFF;
}
/* Responsive Design */
#media only screen and (max-width: 1140px){
body{
font-size: 11px;
}
}
/* iPad && iPad Pro && another tablet */
#media only screen and (max-width: 1024px) and (max-height: 1366px){
body{
font-size: 20px;
}
.content{
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
}
.ava{
grid-area: 1/1;
margin-bottom: 80px;
}
.welcome-message h1, .welcome-message h2, .welcome-message h4, .welcome-message p{
text-align: center;
}
.welcome-message h4{
margin-top: 15px;
}
.expand-bio{
display: block;
margin: 0 auto;
margin-top: 26px;
}
}
/* ================= */
#media only screen and (max-width: 412px){
body{
margin: 25px 10px;
font-size: 20px;
}
.navbar-burger{
position: absolute;
display: block;
right: 20px;
cursor: pointer;
}
.close-navi{
position: absolute;
display: block;
right: 20px;
cursor: pointer;
}
.navbar ul li{
padding-bottom: 15px;
}
.inactive{
display: none;
}
.active-nav{
display: block;
position: absolute;
}
.header{
float: left;
width: 100%;
}
.border-bg{
background-color: #aaa;
}
.content{
padding-top: 0px;
}
}
<!DOCTYPE html>
<head>
<title>Ananda Vijaya</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/b1643406ad.js"></script>
</head>
<body>
<div class="header">
<div id="navbar" class="navbar">
<span class="navbar-burger"><i class="fas fa-bars"></i></span>
<span class="navbar-close"><i class="fas fa-times"></i></span>
<ul class="nav">
<li class="active">Introduction</li>
<span class="inactive">
<li>Finished Project List</li>
<li>Contact Me</li>
</span>
</ul>
</div>
</div>
<div class="content">
<div class="welcome-message">
<h1>Hi There~</h1>
<h2>This is the Place Where You Can Get to<br>Know Me Better</h2>
<h4>Ananda Vijaya || Web Developer</h6>
<p>I'm a Front-end Developer Who Currently a College Student<br>Majoring in Computer Science at Diponegoro University</p>
<button class="expand-bio">My Complete Profile</button>
</div>
<div class="ava">
<img src="ava.png">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
I expect to have all the element (navbar menu) get the gray background color
i am a 17 year old boy and recently new at using html and css ,i have been making a website and i am trying to add a drop down menu on my existing website but i am struggling to do so as everything , i want a drop down menu on my photos tab so that i can add some pictures and one in my "ABOUT" tab as well , i tried is not working , any help will be appreciated and welcomed. Thanks in advance
*
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1493004618106.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding; 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 100px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px
margin: auto;
}
.hero
{
position: absolute;
width: 1000px;
margin-left: 200px;
margin-top: 0px;
margin-right: 50px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 330px;
}
.btn
{
border : 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase
}
.btn-one
{
background-color: darkblue;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif
}
.btn-two:hover
{
background-color: darkblue
}
index.html
<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="fr.png">
</div>
<ul class="main-nav">
<li class="active"> HOME</li>
<li> ABOUT</li>
<li> PHOTOS</li>
<li> CONTACT</li>
</ul>
</div>
<div class="hero">
<h1>WELCOME!</h1>
<div class="button">
Watch video
Explore more
</div>
</div>
</header>
</body>
</html>
Does this help you?
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Dropdown Button</h2>
<p>Move the mouse over the button to open the dropdown content.</p>
<div class="w3-dropdown-hover">
<button class="w3-button w3-black">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
I didn't change too much of your code, just some designs and dynamics. Please sort your code later, it's a bit confusing.
CSS
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1493004618106.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding; 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 100px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px
margin: auto;
padding-top: 10px;
}
.hero
{
position: absolute;
width: 1000px;
margin-left: 200px;
margin-top: 0px;
margin-right: 50px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 330px;
}
.btn
{
border : 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase
}
.btn-one
{
background-color: darkblue;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif
}
.btn-two:hover
{
background-color: darkblue
}
.float-right{
margin-left: 60%
}
.dropbtn {
background-color: #464;
border-radius: 5px;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
HTML
<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row" style="">
<div class="logo">
<img src="fr.png">
</div>
<div class="float-right">
<!-- ++++++++ Home -->
<button class="dropbtn">Home</button>
<!-- ++++++++ About -->
<div class="dropdown">
<button class="dropbtn">About</button>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
<!-- ++++++++ Photos -->
<div class="dropdown">
<button class="dropbtn">Photos</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<!-- ++++++++ Contact -->
<button class="dropbtn">Contact</button>
</div>
</div>
<div class="hero">
<h1>WELCOME!</h1>
<div class="button">
Watch video
Explore more
</div>
</div>
</header>
</body>
</html>