ok so far I’m learning padding and margin and I thought I could create a button which leads to google.com on new window. Can you guys please help? Or is it something that i will learn in the future?
Your code so far
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
.smaller-image {
width: 100px;
border-style: solid;
border-color: green;
border-radius: 50%;
border-width: 10px;
}
.silver-box {
background-color: silver;
}
p {
font-family: monospace;
font-size: 16px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more</p><a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat"></a>
<div class="silver-box">
<p>Things cat love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:
<ol>
<li> flea treatment</li>
<li> thunder </li>
<li> other cats </li>
</ol>
</div>
<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit"> Submit</button>
</form>
</main>
<style>
.box {
border-style: solid;
border-width:5px;
border-color: black;
}
.red-box {
background-color:red;
color: white;
text-align: center;
padding: 1.5em;
}
.blue-box {
background-color: blue;
color: white;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.injected-text {
text-align: center;
margin-bottom: -25px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 input type="button"a href="http://google.com" class="box red-box">padding</button></h5>
<h5 class="box blue-box">padding</h5>
</div>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/adjust-the-padding-of-an-element/
