Colmar Academy project

Hi,

Please forgive my messy code as I am still very much of a coding beginner.
Please see link to Colmar Academy project below:

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/learn-how-to-build-websites-capstone-project/modules/colmar-academy/projects/colmar-academy

I have couple of problems with creating my Colmar Academy project code. Please advise me on below:

  1. I am not sure same divs behave differently? for example my first “aside” div (with ‘orientation date’ details) is position perfectly when the other one with ‘Campus’ details is spread in two lines (with enough space to fit). “Aside” campus div doesn’t also float all the way to left.

  2. Can’t set up header background colour like also some text jumps into header when resizing below dives.

  3. In the “middle” section I cant set padding between columns and on the outside of middle div.

  4. Not sure why my styling in CSS doesn’t apply the same way to “aside” dives with ‘Fisma’ and ‘Now and then’ details?

Thank you very much for any help and please see my codes below.

<!DOCTYPE html>
<html lang="en" dir="ltr"> 
  <head>
    <title>Colmar Academy</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/Users/ula/Desktop/Colmar/resources/CSS/style.css">
  </head>
  <style>A{text-decoration: none;}</style>
  <body>
          <div class="header">
           <div class="inner_header">
           <div class="logo_container">
               <h1><img src=/Users/ula/Desktop/Colmar/resources/images/ic-logo.svg>COLMAR<span>ACADEMY</span></h1>
           </div>
           </div>
           <ul class="navigation">
               <a href="#"><li>on campus</li></a>
               <a href="#"><li>online</li></a>
               <a href="#"><li>or companies</li></a>
               <a href="#"><li>Sign in</li></a>
           </ul>
           </div>
          <div class="banner">
            <img src=/Users/ula/Desktop/Colmar/resources/images/banner.jpg>
            <div class="inner_banner">
               <h1>Learn something<br> new everyday</h1>
               <h2>Lorem ipsum dolorsit amet, consectetur adipiscing elit.</h2>
               <a href="#"><div class="button"><h3>Start here</h3></div></a>
             </div>
          </div>

          <div class="information">
            <img src=/Users/ula/Desktop/Colmar/resources/images/information-main.jpg></div>  
            <div class="aside">
                <img src=/Users/ula/Desktop/Colmar/resources/images/information-orientation.jpg>
                <div class="aside_text">
                <h1>Orientation date</h1>
                <h2>Tue 10/11 & Wed 10/12: 8am-3pm</h2>
                <a href="#"><h3>Read more</h3></a></div>
            </div>
            <div class="aside">
              <img src=/Users/ula/Desktop/Colmar/resources/images/information-campus.jpg>
              <div class="aside_text">
                <h1>Our campus</h1>
                <h2>Find which campus is close by you</h2>
                <a href="#"><h3>Read more</h3></a></div>
            </div> 
                    
          <div class="information_text">
                  <h1>It doesn't hurt to keep practising</h1>
                  <h2>"Curabitur vitae liberto in ipsum porttitor consequat. Aliquamet commodo lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur dolor consequat, tristique ligula."</h2>
                  <h3>Emanuel, Sr Strategist at Hiring.com</h3>
          </div>        
            <div class="aside">  
            <img src=/Users/ula/Desktop/Colmar/resources/images/information-guest-lecture.jpg>
            <div class="aside_text">
                <h1>Our guest lecture</h1>
                <h2>Join a keynote with Oliver Sack about music in medical treatment</h2>
                <a href="#"><h3>Read more</h3></a></div>
            </div> 
         
      <div class="middle">
        <h1>Start learning</h1>
        <div class="row">
          <div class="column">
            <img src=/Users/ula/Desktop/Colmar/resources/images/course-software.jpg>
            <div class="column_text">
            <h1>Software engineering</h1>
            <h2>COURSES</h2>
            <h3>Web Development, Mobile Development, iOT, APIs</h3></div></div>
          <div class="column">
            <img src=/Users/ula/Desktop/Colmar/resources/images/course-computer-art.jpg>
            <div class="column_text">
            <h1>Computer art</h1>
            <h2>COURSES</h2>
            <h3>Imaging & Design, Web Design, Motion Graphics & Visual Effects, Computer Animation</h3></div></div>
          <div class="column">
            <img src=/Users/ula/Desktop/Colmar/resources/images/course-design.jpg>
            <div class="column_text">
            <h1>Design</h1>
            <h2>COURSES</h2>
            <h3>User Experience Design, User Research, Visual Design</h3></div></div>
        </div>
        <div class="row">
          <div class="column">
            <img src=/Users/ula/Desktop/Colmar/resources/images/course-data.jpg>
            <div class="column_text">
            <h1>Data</h1>
            <h2>COURSES</h2>
            <h3>Data Science, Big Data, SQL, Data Visualization</h3></div></div>
          <div class="column">
            <img src=/Users/ula/Desktop/Colmar/resources/images/course-business.jpg>
            <div class="column_text">
            <h1>Business</h1>
            <h2>COURSES</h2>
            <h3>Product Development. Business Development, Startup</h3></div></div>
          <div class="column">
            <img src=/Users/ula/Desktop/Colmar/resources/images/course-marketing.jpg>
            <div class="column_text">
            <h1>Marketing</h1>
            <h2>COURSES</h2>
            <h3>Analytics, Content Marketing, Mobile Marketing</h3></div> </div> 
        </div>
      </div>  
    </div> 
    <section class="buttom"><h1>Thesis exhibit</h1>
      <video src=/Users/ula/Desktop/Colmar/resources/videos/thesis.mp4 controls></video>
      <div class="aside">
        <img src=/Users/ula/Desktop/Colmar/resources/images/thesis-fisma.jpg>
        <div class="aside_text">
          <h1>Fisma: Design and Prototype</h1>
          <h2>Designer showcase of new prototype product</h2></div>
        <div class="aside">
          <img src=/Users/ula/Desktop/Colmar/resources/images/thesis-now-and-then.jpg>
          <div class="aside_text">
          <h1>Now and then</h1>
          <h2>Research study about New York</h2></div>
        </div>
        </div>
    </section>
      <div class="information_text">
        <h1>Reimagine urban</h1>
        <h2>"Curabitur vitae libero in ipsum porttitor consequat. Aliquam et commodo lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur dolor consequat, tristique ligula."</h2>
      </div>
body{
    font-family: 'Roboto', sans-serif;
    color: #4a4a4a;
    background-color: rgb(238, 234, 234);
    width: 100%;
    
}



<!--header-->


.header{
    height: 4em;
    padding-right: 1.5em;
    padding-left: 1.5em;
    background-color: white;
}
.inner_header{   
   display: block;
   margin: 0 auto;
    
}
.logo_container{  
   float: left;
  
}

.logo_container h1{
    color: #4d4b4b;
    vertical-align: middle;
    font-size: 1em;
    font-weight: normal;
    float: left;

}

.logo_container img{
    padding-left: 1.5em;
    size: 1.5em;
    vertical-align: middle;
    height: auto;
}

.logo_container span{
    font-weight: normal;
    color: #4a4a4a;

} 
.navigation{
    float: right;  
    padding-right: 1.5em; 
}

.navigation a{
    padding: 0em 0.5em;  
}

.navigation a li{
   display: table-cell;
   vertical-align: middle;
   font-size: 1em;
   text-align: center;  
   color: #4a4a4a; 
}


<!--banner-->


.banner{
    background-color: gray;
    display: inline-block;

}
.banner img{
    max-width: 55%;
    padding: 2em 2em 2em 1.5em;
    float: left;
       
}
.inner_banner{
    padding: 4em 1.5em 4em 0.75em; 
    max-width: 37%;
    float: right;
  
    
}    
.inner_banner h1{
    font-size: 3em;
    
}  
.inner_banner h2{
    font-size: 1.75em;
    font-weight: lighter;
}
.inner_banner h3{
    font-size: 1.3em;
    color: #ffffff;
    letter-spacing: 0.03em;
    line-height: 2.0em;
    text-align: center;
    
}
.button {
    width: 80%;
    background-color: #4a4a4a;
    height: 3.03em;
    
    
}
<!--information_main-->

.information {
    display: inline-block;
    width: 100%;
}

.information img, video, .information_text{
    padding: 2em 1.5em;
    width: 55%;
    float: left;
}

<!--aside-->

.aside {
    max-width: 40%;
    padding-top: 2em;
    
}    
.aside img{
    width: 13%;  
    float: left;
    padding: 2em 1em;

}    

.aside_text {  
    float: left;
    padding-top: 2em;
    width: 20%;
    text-align: left;
}
.aside_text h1{
    font-weight: bold;
    font-size: 1.5em;
    
}

.aside_text h2{
    font-weight: lighter;
    font-size: 1em;
    
}
.aside_text h3{
    font-weight: lighter;
    color: rgb(42, 42, 252);
    font-size: 0.75em;
    
}

<!--information_text-->

.information_text h1{
    font-weight: bold; 
    font-size: 2em;
}
.information_text h2{
    font-weight: normal;
    font-size: 1em;
    padding-top: 1.5em;
}
.information_text h3{
    font-size: 0.75em;
    font-weight: normal;
    padding: 2em 0em;
}


<!--middle-->

.middle{
    background-color: lightgrey;
    display: inline-block;
    padding: 2em 4.5em;
    width: 100%;
}

.middle h1{
    text-align: center;

}
<!--row_and_column-->
.row {
    display: table;
    padding: 2em 4.5em; 

}
.column {
    width: 28%;
    background-color: white;
    display: inline-block;
}
.column img{
    width: 100%;
    
}
.column_text{
    padding: 1em 1em 1.5em 1em; 
    
}  
.column h1{
    font-size: 1.4em;
    text-align: left;
}

.column h2, h3{
    font-size: 0.9em;
    font-weight: lighter;
    padding-top: 0.5em;
}

<!--buttom-->

.buttom{
    width: 100%;
    display: inline-block;
    
}

.buttom h1{
    text-align: center;
    padding-top: 2em;
    font-size: 2em;
}

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.