Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
  <h1 id="title" class="h1_title">Gary Vaynerchuk</h1>
</header>

<main id="main">
  <section id="tribute-info" class="section_who">
    <h2 class="h2_who">WHO IS GARY VAYNERCHUK?</h2>
    <div id="img-div" class="div_img">
      <figure>
        <img src="https://www.baystbull.com/wp-content/uploads/2018/08/Gary-Vaynerchuk-8.png" alt="gary vaynerchuk" id="image" class="img"/>
        <figcaption id="img-caption" class="img-caption">Gary’s life ambition is the pursuit of buying the New York Jets.</figcaption>
      </figure>
    </div><!--img-->

    <section class="section_he-is">
      <h3 class="h3_he-is">INVESTOR & SERIAL ENTREPRENEUR</h3>
      <section class="section_point">
        <h4 class="h4_point">Wine Library</h4>
        <p class="p_point">Gary grew his father’s company from $3-60MM in sales during his tenure at Wine Library.</p>
      </section>
      <!--point-->
      <section class="section_point">
        <h4 class="h4_point">Active CEO of VaynerMedia</h4>
        <p class="p_point">
          A full-service advertising agency servicing Fortune 100 clients across the company’s 4 locations. The company includes more than 800 employees, servicing clients such as PepsiCo, GE, Johnson and Johnson, Chase, AbInBev and more in just 9 years.
        </p>
      </section>
      <!--point-->
      <section class="section_point">
        <h4 class="h4_point">Chairman of VaynerX</h4>
        <p class="p_point">A modern-day media and communications holding company.</p>
      </section>
      <!--point-->
    </section>
    <!--he-is-->

    <section class="section_he-is">
      <h3 class="h3_he-is">INTERNET INFLUENCER</h3>
      <section class="section_point">
        <h4 class="h4_point">Wine Librar TV</h4>
        <p class="p_point">One of the first long-form episodic video shows on YouTube, started in 2006 by Gary.</p>
      </section>
      <!--point-->
      <section class="section_point">
        <h4 class="h4_point">DailyVee</h4>
        <p class="p_point">A full-blown vlog documenting Gary's life as a CEO.</p>
      </section>
      <!--point-->
      <section class="section_point">
        <h4 class="h4_point">The #AskGaryVee Show</h4>
        <p class="p_point">A business and advice Q&A show online hosted by Gary.</p>
      </section>
      <!--point-->
      <section class="section_point">
        <h4 class="h4_point">The GaryVee Audio Experience</h4>
        <p class="p_point">A global top 100 business podcast which features new episodes every day.</p>
      </section>
      <!--point-->
    </section>
    <!--he-is-->

    <section class="section_he-is">
      <h3 class="h3_he-is">5X NYT BEST SELLING AUTHOR</h3>
      <ul class="ul_books">
        <li>Crushing It! How Great Entrepreneurs Build Their Business and Influence—and How You Can, Too (2018)</li>
        <li>#AskGaryVee: One Entrepreneur's Take on Leadership, Social Media, and Self-Awareness Hardcover (2016)</li>
        <li>Jab, Jab, Jab Right Hook (2013)</li>
        <li>The Thank You Economy (2011)</li>
        <li>Crush It!: Why NOW Is the Time to Cash In on Your Passion (2009)</li>
        <li>Gary Vaynerchuk's 101 Wines: Guaranteed to Inspire, Delight, and Bring Thunder to Your World (2008)</li>
      </ul>
    </section>
    <!--he-is-->
  </section>
  <!--who-->
  <section class="section_story">
    <h2 class="h2_story">Gary's story</h2>
    <p>
      Gary and his family immigrated to the US from Belarus in 1978. He lived with 8 family members in a studio apartment in Queens, New York, before relocating to Edison, New Jersey. Gary often calls himself a “purebred entrepreneur” having successfully started
      a lemonade franchise at age 7, and eventually selling tens of thousands of dollars worth of baseball cards and toys throughout his high school career. At 14 he joined his family business bagging ice for $2/hr. When Gary identified “the internet”
      as a land-grab opportunity in the late 90’s he transitioned his father’s local liquor store (then named “Shoppers Discount Liquors”) into one of the first e-commerce platforms for alcohol in the country resulting in explosive top-line growth. Renaming
      the business to “Wine Library,” Gary grew his father’s company from $3-60MM in sales during his tenure at Wine Library. <a href="https://www.garyvaynerchuk.com/biography/" target="_blank" id="tribute-link">Click here to read more about Gary</a>
    </p>
  </section>
  <!--story-->
</main>

<footer>
  <p>
    Reference: <a href="https://en.wikipedia.org/wiki/Gary_Vaynerchuk">Wikipedia</a> and <a href="https://www.garyvaynerchuk.com/">www.garyvaynerchuk.com</a>
  </p>
  <p>Created by Ming Yong for freeCodeCamp Responsive Web Design Certification</p>
</footer>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,700&display=swap');

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

body{
  display:grid;
  grid-template-columns:10% 80% 10%;
  grid-template-rows:700px auto auto;
  max-width:100vw;
  min-height:100vh;
  background:black;
  color:white;
  font-family: 'Noto Serif SC', serif;
}

header{
  grid-area:1/1/2/4; 
  background:url("https://qph.fs.quoracdn.net/main-raw-17758-hghvjbtpzcquiqpmlprymniiiubwhbey.jpeg");
  height:100%;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: contain; 
  display:flex;
  justify-content:center;
  align-items:center;
}

.h1_title{
  background:rgba(0,0,0,0.8);
  padding:1rem;
  text-align:center;
  font-weight:700;
  font-size:3rem;
  line-height:3rem;
}

main{
  grid-area:2/2/3/3;
  border-top:2px solid white;
  padding:1rem;
}

h2{
  text-align:center;
  font-size:2.5rem;
  line-height:3rem;
  padding:1rem 0;
  font-weight:700;
}

h3{
  font-size:2rem;
  line-height:2.5rem;
  font-weight:700;
  padding:1rem 0;
}

h4{
  font-size:1.5rem;
  line-height:1.8rem;
  font-weight:700;
  padding-bottom:0.5rem;  
}

p,li{
  font-size:1rem;
  line-height:1.5rem;
  font-weight:400;
}

a{
  color:white;
}

.section_who{
  margin-bottom:3rem;
}

.div_img{
  width:100%;
  text-align:center;
  margin-bottom:2rem;
}

img{
  max-width:300px;
  display:block;
  height:auto;
  margin:auto;
}

.section_he-is + .section_he-is{
  margin-top:3rem;
}

.section_point + .section_point{
  margin-top:1rem;
}

.ul_books{
  padding-left:1.5rem;
}
.section_story{
  margin-bottom:3rem;
  text-align:justify;
}

footer{
  grid-area:3/2/4/3;
  border-top:2px solid white;
  padding:1.5rem;
}

              
            
!

JS

              
                // fcc test runner: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
              
            
!
999px

Console