INNOVATION CLOUD Project

Projects
1

This is how the project supposed to look like

This is my code

There is something wrong with my code but I do not know where to start to fix it

2

Hi,

Each learners lesson is private we cannot see your code.
Please paste it in here on the forum or if you feel its a huge project upload it to bin, give us the share link and we can help you.

Thanks

1 Like
3 
<!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">
      <div class="container">
        <h1>Innovation Cloud</h1>
        <p>Connect your idea globally</p>
        <a href="#" class="btn">Learn More</a>
      </div>
    </div>

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

    <div class="main">
      <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
        <div class="jumbotron">
          <h4>Any of y'all wanan join?</h4>
            <p>It is fun to join</p>
            <a href="#" class="btn">Join</a>
            </div>
        <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>
4

CSS please, [quote=“zenho33, post:1, topic:35766”]
There is something wrong with my code but I do not know where to start to fix it
[/quote]

What’s wrong with it ?

5

Ah I’m so sorry!
I was rushing to class and forgot to post the CSS also.
The cloud logo is out of place and it doesn’t look like the site that they gave me for practice.

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; 
 background:url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg);
}

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

.header h1 {
	font-size: 80px;
	line-height: 100px; 
	margin-top: 0;
	margin-bottom: 80px;
  color: #ffffff;
  text-transform: uppercase;
  
}

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

.header p {
	font-weight: 500;
	letter-spacing: 8px;
	margin-bottom: 40px;
	margin-top: 0;
  color: #ffffff;
  text-transform: uppercase;
}

.btn {
  background-color: black;
  color: white;
  text-decoration: none;
  padding: 5px 30px 5px 30px;
}

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

/* Nav */
.nav {
	background-color: black;
}

.nav ul li {
  display: inline-block;
  background-color:black;
  color: white;
  padding: 20px 3px 20px 3px;
}

.nav ul li:hover {
	background: #117bff;
	cursor: pointer; 
	transition: background .5s;
}

.nav ul {
	list-style: none;
	margin: 0 auto; 
	padding: 20px 0;
	text-align: center;
}


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

.main img {
  float:left;
}


/* Jumbotron */
.jumbotron {
	height: 600px; 
	text-align: right;
  background:url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg);
}

.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%;
  }
}
6

This image you need to re-size it, umm I would use: a width of 200 height of 130 ?

This div class jumbotron you want to put it after <div class="main"> <div class="container"> so after the closing tags of container and main, then your jumbotron div won’t interfere with these

1 Like
7

@zainabrawat How did you come to choosing this size for the image?

8

Sometimes you need to do math calculations to see what size will fit, other times you need to just play around and see what fits