Innovation Cloud Project *** PLS HELP ** waited over 2 hours for adisors and still no reply


#1

Hi very new to all this. Trying to work on the Innovation Cloud project but I really don't know what I'm doing and if it's correct or not. Here are some problems I'm encountering:

  1. Can't get the Nav, cloud image and bottom have of the page to align on the right side like the website sample

  2. Can't load the jumbotron image on CSS

  3. Cant get the body content to align with the cloud image.

Please help. Here is my code.

HTML:

html {background-image: URL("https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg"); 
background-size: contain;
background-repeat: no-repeat;}
#btn-learn {
  height: 100px;
  width: 300px;
  font-family: Arial;
  border: 1px solid black; 
  padding: 10px 30px;
  color: white;
  background-color:black;
  text-transform: uppercase; 
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 1.3px; 
}
#c {font-size: 30px;}
#d {position: relative; 
top: 100px;
padding: 50px;}

.nav {color: white;
  font-family: arial; 
  font-size: 15px;  
  background: black;}

.nav ul li {color: white;
display: inline-block;
padding: 0px 20px 0px 20px; 
position: relative; 
float: left; 
}

.header {color: white;
font-family: Arial; 
letter-spacing: 1.3px;
padding: 100px 0px 0px 0px;}


html, body {
	margin: 0;
	padding: 0;
}

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; 
}

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

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

@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 {
	list-style: none;
	margin: 0 auto; 
	padding: 30px 0;
	text-align: center;
  margin: 0px 100px 0px 100px;
}

.main {height: 20%;
width: 20%;
float: left;
margin: 100px 100px 0px 100px;}

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


/* Jumbotron */
.jumbotron {
  background-image: URL("https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg");
  size: contain;}

.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 {
    width: 100%;
  }
}

CSS:
html {background-image: URL("https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg"); 
background-size: contain;
background-repeat: no-repeat;}
#btn-learn {
  height: 100px;
  width: 300px;
  font-family: Arial;
  border: 1px solid black; 
  padding: 10px 30px;
  color: white;
  background-color:black;
  text-transform: uppercase; 
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 1.3px; 
}
#c {font-size: 30px;}
#d {position: relative; 
top: 100px;
padding: 50px;}

.nav {color: white;
  font-family: arial; 
  font-size: 15px;  
  background: black;}

.nav ul li {color: white;
display: inline-block;
padding: 0px 20px 0px 20px; 
position: relative; 
float: left; 
}

.header {color: white;
font-family: Arial; 
letter-spacing: 1.3px;
padding: 100px 0px 0px 0px;}


html, body {
	margin: 0;
	padding: 0;
}

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; 
}

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

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

@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 {
	list-style: none;
	margin: 0 auto; 
	padding: 30px 0;
	text-align: center;
  margin: 0px 100px 0px 100px;
}

.main {height: 20%;
width: 20%;
float: left;
margin: 100px 100px 0px 100px;}

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


/* Jumbotron */
.jumbotron {
  background-image: URL("https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg");
  size: contain;}

.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 {
    width: 100%;
  }
}

#2

Hi,

The advisors are on 8pm until 11:59pm EST... so right now they're snoozing. Check back tomorrow! :]


#3

hehe thanks :disappointed_relieved:


#4

i thought the chat says 8am till 12am :stuck_out_tongue:


#5

lets focus about this topic in here.

What you posted is your css code, i asked for the html code located in index.html

You added the background image to html, why?

did you check csstricks to see how to add the background image correctly? Doesn't seem like you did


#6

hi, thanks for your help. here's the html code:

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <h1 id="d">Innovation Cloud</h1>
      <p id="c">Connect your ideas here</p>
      <a href="www.ezwash.com.hk" id="btn-learn">Learn More</a>
      <div class="container">
        
      </div>
    </div>

    <div class="nav">
      <ul>
        <li> Register</li>
        <li> Schedule</li>
        <li>Sponsors</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
        
      <div class="container">
        
      </div>
    </div>

    <div class="main">
       <div class="jumbotron">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg"/>
        <h3>Stay Connected</h3>
        <p>Receive weekly insights from industry insiders.</p>
        <a href="www.ezwash.com.hk">Join</a>
      <div class="container">
        

        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
         <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
      </div>
    </div>

    
  </body>
</html>

#7

could you explain to me why you use the containers (div with class container) the way you did? It doesn't seem very logic