CIu Web Design Class

COM 3720 - SP24
Wix Assignment
Show Your Work

Jan. 25, 2024

Take Quiz

After the quiz, go to codepen.io.

Create an account and log in.

Once logged in, in the top left corner, click on “PEN” under create. 

Once you’re there, the page should look like this…

You’re going to copy all of the text in the code-block below, and paste it into the HTML section on the left of that codepen window.

				
					<body style="width:100%; background:#121212; color:#EBEAE7; font-family:Helvetica; line-height:1.4em; margin:0;">
  <header style="width:100%; background:linear-gradient(48deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(6,75,164,1) 25%, rgba(0,212,255,1) 100%); height:150px; text-align:center; padding:30px 0 60px;">
    <h1>
      Benjamin Andrew Mitchell
    </h1>
    <hr style="width:20px; border: 2px solid #EBEAE7;" />
    <h5 style="text-transform:uppercase; letter-spacing:2px;">
      Designer. Educator. Musician.
    </h5>  
  </header>
  
  <div style="width:100%;">  
    <div style="width:150px; height:150px; overflow:hidden; position: relative; border-radius:75px; border:4px solid #EBEAE7; margin-auto; left:50%; margin-left:-75px; margin-top:-75px; margin-bottom: 0px;" >
      <img decoding="async" src="https://creative.plus/wp-content/uploads/2022/12/2022CreativeHeadshots-Benji-7-scaled.jpg" style="width:150px;" />
    </div>
  </div>

  <div style="display:flex; justify-content:center;"> 
  <div style="display:flex; justify-content:center; max-width:900px;">
    <div style="width:65%; display:inline-block;">
      <div style="padding:30px 50px;">
        <h1>Howdy!</h1>
        <p>
          I'm Benji. Nice to meet you.
        </p>
        <p>
           By day I'm a co-founder and Creative Director of a design agency, <a href="https://creative.plus" style="color:#00d4ff;">Creative Plus</a>, and an adjunct professor of design at Columbia International University.
        </p>
        <p>
          By weekend you'll find me out for a run, or on a date with my lovely bride, Bethany — my very best friend and lifelong sweetheart. Then Sunday morning I'll be playing guitar / French horn in the Riverland Hills church orchestra — unless I'm filling in for the worship leader... or filling in on drums... or bass.
        </p>
        <p>
          In the wise words of Ben Rector, I'm just <i>Livin' My Best Life</i>.
        </p>
      </div> 
    </div>  
    <div style="width:35%; display:inline-block;">
      <div style="padding:30px 0 50px;">
        <h5 style="text-transform:uppercase; letter-spacing:2px;">Random Things I like...</h5>
        <ul>
          <li>time with my wife</li>
          <li>family & friends</li>
          <li>playing music</li>
          <li>sweet tea</li>
          <li>Biblical discussion</li>
          <li>decaf latte with oat milk</li>
          <li>running (sort of)</li>
          <li>a good game of chess</li>
          <li>Chick-fil-A</li>
          <li>playing soccer</li>
          <li>Rosemary Beach, FL</li>
          <li>Magnolia (Waco, TX)</li>
        </ul>  
      </div>  
    </div>   
  </div>    
      </div>  
  <footer style="font-size:0.8em; text-align:center; border-top:2px solid #333; padding:12px;">
    ⓒ 2024 Benji Mitchell
  </footer>
   
</body>

Next, we’ll talk through what all of this means.

If you are having trouble accessing the url of an image of yourself, you use your canvas profile, or giphy or google images to just find something that represents you.

Show Your Work