I'm building a webpage and I'm working on the navbar. Everything has been going well (mostly) until now. For some reason, the contents don't line up - there seems to be something blocking it on the right. How do I force them into alignment?
Here's my code:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Addis Abeba | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Our Work
About Us
Our Community
Culture
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>
CSS
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
padding: 2% 10%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
}
.leftside{
}
.rightside{
float: right;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 150%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkwork{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkcommunity{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
/* End Navbar */
I would suggest doing something like this:
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
padding: 2% 10%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
}
.leftside{
float: left;
width:50%;
}
.rightside{
float: right;
width:50%;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 150%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkwork{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkcommunity{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
/* End Navbar */
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Addis Abeba | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Our Work
About Us
Our Community
Culture
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>
Try this one.
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
padding: 2% 10%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
}
.navbar-wrapper a{
text-decoration: none;
}
.linkhome{
font-size: 150%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkwork{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkcommunity{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
/* End Navbar */
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Addis Abeba | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
Home
Our Work
About Us
Our Community
Culture
</div>
</nav>
<!-- End Navbar -->
</body>
</html>
Here the idea is that declaring flex to a particular div, the immediate children becomes the flex-items.
I would probably do it like this, it's a lot of single points for a vertical Selection tho
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
padding: 2% 10%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
}
.leftside{
float: left;
width:50%;
}
.rightside{
width:50%;
}
.options{
text-decoration: none;
display: flex;
flex-flow: column wrap;
align-content: flex-end;
}
.linkhome{
font-size: 150%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkwork{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkcommunity{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
/* End Navbar */
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Addis Abeba | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Our Work
About Us
Our Community
Culture
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>
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;
}
Hey i am trying to make a navbar again and I have declared that the anchor tag have display block but white space appear
Here isy HTML code=
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="css.js"></script>
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<span class="menu-btn">
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
</span>
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
</html>
And this is CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn, label{
display: none;
}
#media(min-width: 600px){
.nav-links a {
color: white;
}
.nav-links{
float: right;
justify-content: space-between;
}
.nav-links a:hover{
background-color: white;
color: black;
padding-top: 2.5px;
padding-bottom: 2.5px;
border-radius: 5px;
padding-right: 2.5px;
padding-left: 2.5px;
}
nav {
/*display: flex;*/
}
.title, .nav-links{
display: inline;
}
}
#media(max-width: 599px){
label {
display: inline;
float: right;
}
.extra{
display: none;
}
.nav-links{
text-align: center;
display: block;
}
.nav-links a {
display: block;
}
}
And the white space is only appear in mobile devices so please help me i need it fast⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
You have a padding-right on nav section
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
make padding-right: 0; for smaller screen.
#media(max-width: 599px){
nav{
padding-right: 0px;
}
}
I'm new to css/html and I still don't know how to center the text when hovering. So I have a project on my subject to create a simple website. And so far I'm starting with the header. I'm having this one problem where I can't center the text everytime i hover my mouse to the menus. Here is the image and my code.
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 100px;
display: block;
padding: 10px 70px;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
Help please : (
so many issues, and no need for such things, as long as u set one you dun have to set other, anyway I have just set the fix on the same code, you have to use li a or nav a, as long as they both are doing the same in your case, so I removed one of them both and you set padding-left: 70px, which I removed and added to the width of the buttons
check the snippet
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 170px;
display: block;
padding: 10px 0;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
In my html file I have header and inside it there is ul>li>a menu
/* ****** */
:root {
--primary: #32a852;
--white: #fafafa;
--black: #000000;
--lightgrey: #c7c7c7;
--menu-items: #333333;
--mobile-menu: #4a4a4a;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.no-select {
}
/* Tags :) */
body {
padding: 0;
margin: 0;
background: var(--primary);
}
/* Header */
.header {
display: flex;
background: var(--white);
width: 100%;
height: 0%;
padding: 5px;
}
.menu-items {
flex: 1;
text-align: right;
display: inline-block;
list-style-type: none;
transform: translateY(30%);
}
.menu-items li {
display: inline-block;
margin-right: 20px;
}
.menu-items li a {
text-decoration: none;
color: var(--menu-items);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.32rem;
}
.company-logo {
width: 50px;
}
.menu-on-off {
display: none;
width: 50px;
}
#media (max-width: 530px) {
.menu-on-off {
display: inline-block;
position: absolute;
right: 3%;
}
.menu-items {
text-align: left;
padding: 10px;
position: fixed;
background: var(--mobile-menu);
width: 100%;
height: 100vh;
}
.menu-items li {
margin-left: 10px;
margin-top: 20px;
display: block;
}
.menu-items li a {
font-size: 1.5rem;
color: var(--white);
}
}
/* Header& */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реткинский Мультисад</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<!-- Header -->
<div class="header">
<img src="img/logo.png" class="company-logo" alt="Logo">
<div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
<ul class="menu-items">
<li>Продукты</li>
<li>Услуги</li>
<li>Галерея</li>
<li>Контакты</li>
</ul>
</div>
<!-- JavaScript -->
<script src="new.js"></script>
</body>
</html>
But here is a thing
Look here
1st there is a little margin-left for the menu and second more serious problem margin-top and in not media query code I dont added margin-top or margin-left.
Happy new year from Armenia ;p. Interesting what details need stackoverflow? Interesting what details need stackoverflow? Interesting what details need stackoverflow? Interesting what details need stackoverflow?
OK—a few minor changes here, but is working. Most have to do with element positioning.
/* ****** */
:root {
--primary: #32a852;
--white: #fafafa;
--black: #000000;
--lightgrey: #c7c7c7;
--menu-items: #333333;
--mobile-menu: #4a4a4a;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.no-select {
}
/* Tags :) */
body {
padding: 0;
margin: 0;
background: var(--primary);
}
/* Header */
.header {
display: flex;
background: var(--white);
width: 100%;
height: 0%;
padding: 5px;
}
.menu-items {
flex: 1;
text-align: right;
display: inline-block;
list-style-type: none;
}
.menu-items li {
display: inline-block;
margin-right: 20px;
}
.menu-items li a {
text-decoration: none;
color: var(--menu-items);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.32rem;
}
.company-logo {
width: 50px;
}
.menu-on-off {
display: none;
width: 50px;
}
#media (max-width: 530px) {
.menu-on-off {
display: inline-block;
position: absolute;
right: 3%;
}
.menu-items {
text-align: left;
padding: 10px;
position: fixed;
background: var(--mobile-menu);
width: 100%;
top: 28px;
left: 0;
right: 0;
}
.menu-items li {
margin-left: 10px;
margin-top: 20px;
display: block;
}
.menu-items li a {
font-size: 1.5rem;
color: var(--white);
}
}
/* Header& */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реткинский Мультисад</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<!-- Header -->
<div class="header">
<img src="img/logo.png" class="company-logo" alt="Logo">
<div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
<ul class="menu-items">
<li>Продукты</li>
<li>Услуги</li>
<li>Галерея</li>
<li>Контакты</li>
</ul>
</div>
<!-- JavaScript -->
<script src="new.js"></script>
</body>
</html>
So my mission is to get the gray rectangle (<div class="brand"> </div>) to go automatic below the others, right now it's stuck between the header and my two other body divs. As I am a beginner I have no idea about how to fix this, i've searched a little and tried to add a clear: both, but that didn't solve my problem. Would love if someone out there can take a look at my code and see what's wrong. I'm sorry for no structure in my code.
Thanks,Filip
:D
CODE (CSS FIRST, THEN HTML):
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 100px;
weight: 400px;
background-color: gray;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
</body>
</html>
Sorry for no structure ;D
//Filip
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.package {
width: 80%;
margin: 30px auto;
}
.bild2 {
height: 350px;
width: 50%;
background-color: #3D6BB8;
float: left;
}
.entrytext {
margin-left: 30px;
float: left;
margin-bottom:70px;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand {
height: 100px;
background-color: gray;
clear: both;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="package">
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div></div>
<div class="brand">
</div>
</body>
</html>
Add position its styling and add botom:0;