HTML and CSS for Final Project

The code for this project was a lot. It came down to having a lot of content to sift through and I believe that I got lost a couple of times. I have a few mistakes, in the last code I did, I was unable to get the main images aligned in column 8 and column 4. With it being so difficult, I wanted to write my blogposts and troubleshoot in the morning when I get up. While I’m disappointed in myself for not having more time to troubleshoot this problem like I did with the others, I hope I can have an update for this problem once I’m finished with the last tutorial.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title> Version 4</title>
    <link rel= "stylesheet" href="css/gridlex.css"/>
    <link rel="stylesheet" href="css/style4.css" /> 
</head>

    <body>
    <div class="container">
        <div class="grid">
            <div class="col-6">
                <div class="card card-feature">
                <div class="card-media">
                  <img class="card-image" src="img/wise-owl.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Advice</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">If only you could see what I've seen with your eyes</a>
                  </h2>
                  <p class="card-slug">
                    I've seen things you people wouldn't believe. Attack ships on
                    fire off the shoulder of Orion. I watched C-beams glitter in the
                    dark near the Tannhauser gate. All those moments will be lost in
                    time... like tears in rain...
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Batty Owl</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-6 grid"> 
            <div class="col-12">
                <div class="card card-main-primary">
               
                <div class="card-media">
                  <img class="card-image" src="img/couple.jpg" alt="" />
                </div>
                <div class="card-body">

                  <h3 class="card-category">Love</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">By night's end, I predict me and her will interface.</a>
                  </h2>
                  <p class="card-slug">
                    Come on, what's the problem here? I'm a boy. You're a girl. Is
                    there any thing wrong with me trying to put together some kind
                    of relationship between us?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Geek Zombie</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>

                </div>
              </div>
            </div>
            <div class="col-6">
                <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/thing2.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Jobs</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">When looking for a career, start with the things you don't
                          want to do</a>
                      </h2>
                      <p class="card-slug">
                        I don't want to sell anything, buy anything, or process anything
                        as a career. I don't want to sell anything bought or processed,
                        or buy anything sold or processed, or process anything sold,
                        bought, or processed, or repair anything sold, bought, or
                        processed.
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Fuzzy Wuzzy Dobler</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/birds-girl-escape.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Rewind</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">If you had a chance to go back and do it all differently,
                          what would you have changed?</a>
                      </h2>
                      <p class="card-slug">
                        I happen to know that in the future I will not have the
                        slightest use for algebra, trust me I speak from experience. I
                        want to have fun. I want to go to Liverpool and discover the
                        Beatles.
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Peggy Sue</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/the-dude.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Advice</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">Yeah, well, you know, that's just like, uh, your opinion,
                          man.</a>
                      </h2>
                      <p class="card-slug">
                        Let me explain something to you. Um, I am not "Mr. Lebowski".
                        You're Mr. Lebowski. I'm the Dude. So that's what you call me.
                        You know, that or, uh, His Dudeness, or uh, Duder, or El
                        Duderino if you're not into the whole brevity thing.
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">The Dude</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/stormtrooper-fawkes.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Advice</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">Not a dice roll: ten tips to stand out in a crowd</a>
                      </h2>
                      <p class="card-slug">
                        Valorous visitation of a by-gone vexation, stands vivified and
                        has vowed to vanquish these venal and virulent vermin
                        vanguarding vice and vouchsafing the violently vicious and
                        voracious violation of volition!
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Trooper Fawkes</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
            </div>
            <div class="col-6">
                <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/couple.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Love</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">By night's end, I predict me and her will interface.</a>
                      </h2>
                      <p class="card-slug">
                        Come on, what's the problem here? I'm a boy. You're a girl. Is
                        there any thing wrong with me trying to put together some kind
                        of relationship between us?
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Geek Zombie</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/banksy.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Tech</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">Was it dormanted or deleted? Inoperative or Excised? Maybe
                          completed.</a>
                      </h2>
                      <p class="card-slug">
                        Information Transit got the wrong man. I got the *right* man.
                        The wrong one was delivered to me as the right man, I accepted
                        him on good faith as the right man. Was I wrong?
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Buttle Tuttle</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/game-over-man.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Animals</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">That's it, man. Game over, man. Game over! What are we gonna
                          do?</a>
                      </h2>
                      <p class="card-slug">
                        Seventeen *days*? Hey man, I don't wanna rain on your parade,
                        but we're not gonna last seventeen hours! Those things are gonna
                        come in here just like they did before. And they're gonna come
                        in here and they're gonna get us!
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Private Hudson</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/cowboy.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Tech</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">The sacred trust that a free society is founded on</a>
                      </h2>
                      <p class="card-slug">
                        Never broke into a car, never hotwired a car. Never broke into a
                        truck. 'I shall not cause harm to any vehicle nor the personal
                        contents thereof, nor through inaction let the personal contents
                        thereof come to harm'.
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Bud</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
            </div>
            </div>
        </div>
    </div>  
       <div class="card card-feature">
            <div class="card-media">
              <img class="card-image" src="img/wise-owl.jpg" alt="" />
            </div>
            <div class="card-body">
              <h3 class="card-category">Advice</h3>
              <h2 class="card-title">
                <a href="#" class="title-link">If only you could see what I've seen with your eyes</a>
              </h2>
              <p class="card-slug">
                I've seen things you people wouldn't believe. Attack ships on
                fire off the shoulder of Orion. I watched C-beams glitter in the
                dark near the Tannhauser gate. All those moments will be lost in
                time... like tears in rain...
              </p>
              <div class="card-by-line">
                <h4 class="card-author">
                  by <a href="#" class="author-link">Batty Owl</a>
                </h4>
                <h4 class="card-date">March 4, 2020</h4>
              </div>
            </div>
          </div>
      
    
<div class="container container-lower">
    <div class="grid">
        <div class="col-8">
            <div class="card card-main">
                <div class="card-media">
                    <img src="img/tech-head.jpg" alt="" class="card-image">
                </div>
                <div class="card-body">
                    <h3 class="card-category">Tech</h3>
                    <h2 class="card-title"><a href="#" class="title-link">The Latest and Greatest Thing in Widgets that blink and make our lives better</a></h2>
                    <p class="card-slug">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, corrupti doloremque nam ut aliquid eos at vitae expedita dolor ipsa tempora aperiam eius, voluptatibus ex, quo asperiores ipsam ipsum quibusdam!</p>
                    <div class="card-by-line">
                        <h4 class="card-author">by <a href="#" class="author-link">  Mr.Techy Head</a></h4>
                        <h4 class="card-date">May 2, 2020</h4>
                    </div>
                </div>
            </div>
            <div class="card card-main">
                <div class="card-media">
                    <img src="img/tree.jpg" alt="" class="card-image">
                </div>
                <div class="card-body">
                    <h3 class="card-category">Travel</h3>
                    <h2 class="card-title"><a href="#" class="title-link">The Latest and Greatest picture You can never really Take in nature</a></h2>
                    <p class="card-slug">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, corrupti doloremque nam ut aliquid eos at vitae expedita dolor ipsa tempora aperiam eius, voluptatibus ex, quo asperiores ipsam ipsum quibusdam!</p>
                    <div class="card-by-line">
                        <h4 class="card-author">by <a href="#" class="author-link"> by Mr.Travel Bones</a></h4>
                        <h4 class="card-date">May 2, 2020</h4>
                    </div>
                </div>
            </div>
            <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/couple.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Love</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">By night's end, I predict me and her will interface.</a>
                  </h2>
                  <p class="card-slug">
                    Come on, what's the problem here? I'm a boy. You're a girl. Is
                    there any thing wrong with me trying to put together some kind
                    of relationship between us?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Geek Zombie</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/stormtrooper-fawkes.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Advice</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">Not a dice roll: ten tips to stand out in a crowd</a>
                  </h2>
                  <p class="card-slug">
                    Valorous visitation of a by-gone vexation, stands vivified and
                    has vowed to vanquish these venal and virulent vermin
                    vanguarding vice and vouchsafing the violently vicious and
                    voracious violation of volition!
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Trooper Fawkes</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-feature-hero">
                <div class="card-media">
                  <img class="card-image" src="img/stormtrooper-fawkes.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Advice</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">Not a dice roll: ten tips to stand out in a crowd</a>
                  </h2>
                  <p class="card-slug">
                    Valorous visitation of a by-gone vexation, stands vivified and
                    has vowed to vanquish these venal and virulent vermin
                    vanguarding vice and vouchsafing the violently vicious and
                    voracious violation of volition!
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Trooper Fawkes</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/couple.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Love</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">By night's end, I predict me and her will interface.</a>
                  </h2>
                  <p class="card-slug">
                    Come on, what's the problem here? I'm a boy. You're a girl. Is
                    there any thing wrong with me trying to put together some kind
                    of relationship between us?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Geek Zombie</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/thing2.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Jobs</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">When looking for a career, start with the things you don't
                      want to do</a>
                  </h2>
                  <p class="card-slug">
                    I don't want to sell anything, buy anything, or process anything
                    as a career. I don't want to sell anything bought or processed,
                    or buy anything sold or processed, or process anything sold,
                    bought, or processed, or repair anything sold, bought, or
                    processed.
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Fuzzy Wuzzy Dobler</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/birds-girl-escape.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Rewind</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">If you had a chance to go back and do it all differently,
                      what would you have changed?</a>
                  </h2>
                  <p class="card-slug">
                    I happen to know that in the future I will not have the
                    slightest use for algebra, trust me I speak from experience. I
                    want to have fun. I want to go to Liverpool and discover the
                    Beatles.
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Peggy Sue</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/the-dude.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Advice</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">Yeah, well, you know, that's just like, uh, your opinion,
                      man.</a>
                  </h2>
                  <p class="card-slug">
                    Let me explain something to you. Um, I am not "Mr. Lebowski".
                    You're Mr. Lebowski. I'm the Dude. So that's what you call me.
                    You know, that or, uh, His Dudeness, or uh, Duder, or El
                    Duderino if you're not into the whole brevity thing.
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">The Dude</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-feature-hero">
                <div class="card-media">
                  <img class="card-image" src="img/she.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Trending</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">It's kind of a double edged sword isn't it?</a>
                  </h2>
                  <p class="card-slug">
                    If you say you haven't, you're a prude. If you say you have
                    you're a slut. It's a trap. You want to but you can't, and when
                    you do you wish you didn't, right?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">A Basket Case</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/banksy.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Tech</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">Was it dormanted or deleted? Inoperative or Excised? Maybe
                      completed.</a>
                  </h2>
                  <p class="card-slug">
                    Information Transit got the wrong man. I got the *right* man.
                    The wrong one was delivered to me as the right man, I accepted
                    him on good faith as the right man. Was I wrong?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Buttle Tuttle</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/game-over-man.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Animals</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">That's it, man. Game over, man. Game over! What are we gonna
                      do?</a>
                  </h2>
                  <p class="card-slug">
                    Seventeen *days*? Hey man, I don't wanna rain on your parade,
                    but we're not gonna last seventeen hours! Those things are gonna
                    come in here just like they did before. And they're gonna come
                    in here and they're gonna get us!
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Private Hudson</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/cowboy.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Tech</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">The sacred trust that a free society is founded on</a>
                  </h2>
                  <p class="card-slug">
                    Never broke into a car, never hotwired a car. Never broke into a
                    truck. 'I shall not cause harm to any vehicle nor the personal
                    contents thereof, nor through inaction let the personal contents
                    thereof come to harm'.
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Bud</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
                
                  <div class="card card-feature-hero">
            
            </div>

            </div>
        </div>
        <div class= "col-4">

            <div class="card card-feature">
                <div class="card-media">
                    <img class= " card-image" src="img/tech-head.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class=" card-image" src="img/tech-head.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class= "class-image"src="img/stormtrooper-fawkes.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class= "card-image" src="img/containers.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class= "class-image" src="img/fashion.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class="class-image" src="img/plane.jpg" alt=""/>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>


Join the Conversation

1 Comment

  1. There’s also time down the road to keep troubleshooting. There was a lot there in the end but you really hung in there and a lot of it done! That’s for staying in there!

Leave a comment

Your email address will not be published. Required fields are marked *

css.php