Btn-main button stylish

 <div class="jumbotron">
      <div class="container">  
        <div class="main">
          <h1>We are Broadway</h1>
          <a class="btn-main" href="#"> Get Started</a>
          
        </div>
      </div>
    </div>

After this addition to code, the button doesn’t turn grey

You need to format all your html code otherwise we cannot see it all, or post it as a codepen link,

I fixed it. Maybe because of late response of network!

Great! Okay so what I am seeing is that you want a button.

Thanks to HTML5 there is a <button> tag you can use to acheive what you want and also attach a link to it.


Try this,

<a href="#"><button>Get Started</button></a>

I’m ok! Thanks!
The problem i got this time is that i cannot make the image of the project float left of the text.

html, body {
margin: 0;
padding: 0;
background-image: url(“https://www.planwallpaper.com/static/images/Alien_Ink_2560X1600_Abstract_Background_1.jpg”);
}

body {
font-family: ‘Roboto’, sans-serif;
font-weight: 100;
}

.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}

/* Header */
.header {
height: 800px;
text-align: center;
}

.btn{
background-color:grey;
text-decoration:none;
color: white;
padding:10px;
}

.header .container {
position: relative;
top: 200px;
}

.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
color:white;
background-color:black;
}

@media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}

.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
}

.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}

/* Nav */
.nav ul li {
list-style: none;
margin: 10 auto;
padding: 30px 0;
text-align: center;
display:inline;
font-weight:bold;
word-spacing: length;
}

.nav ul{
border: 1px solid black;
border-width: 2px;

}

/* Main */
.main .container {
margin: 80px auto;
}

/* Jumbotron */
.jumbotron {
height: 600px;
text-align: left;
}

.jumbotron .container {
position: relative;
top: 220px;
}

/* Footer */
.footer {
font-size: 14px;
}

/* Media Queries */
@media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}

.main, .jumbotron {
padding: 0 30px;
}

.main img {
float:left;
width:10px;
}
}

You defined the image in your html selector meaning you want to cover the whole web view. Is that what you wanted?

I want the img to float left of the text. But ideally i want to make the image a llittle bit smaller.

okay I will not write the css code for you but I will show you what you can use achieve your goal.


  1. use background-size: property to set the size of your image.

  2. use background-repeat: to make sure only one image is being displayed

  3. use background-position to set the position of your image

  4. for finer adjustment set the image’s position to relative and then use margin-right, left, top, bottom to move it to your desired position, position: relative

I think i need to change the img properties, not the background properties.