I have now included the complete code. Like i said the text for the button always goes out of the padding i set for it? I am just a beginner so there might be some mistakes if any pls point out and thank you for helping me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555555;
font-family:'Lato' , 'Arial' , sans-serif;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0,auto;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url(img/hero.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
h1 {
margin: 0;
font-size: 300%;
color: #ffffff;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 3px;
}
.btn {
display: inline-block;
padding: 10px ,30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
}
.btn-full {
color:#e67e22;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/2015-03-25_13-52-05__grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>
Omnifood
</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>
Goodbye junk food.<br /> Hello super healthy meals.
</h1>
<a href="#" class="btn btn-full">I’m hungry </a>
<a href="#" class= " btn btn-ghost">Show me more </a>
</div>
The button text always shows out of the padding I have set for it ???? screenshot of the result
.btn {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
}<a href="#" class="btn btn-full">I’m hungry </a>
<a href="#" class= "btn btn-ghost">Show me more </a>
Aucun commentaire:
Enregistrer un commentaire