css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main">
    <div id="title">
        <h1>Tim Berners-Lee</h1>
  <div style="background-color: #504f2c">
          <a href="#tribute-info">Biography</a>
    <a href="#awards">Awards</a>
    <a id="tribute-link" href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" target="_blank">Wikipedia</a>
    <a href="https://www.w3.org/People/Berners-Lee/" target="_blank">Website</a>
  <div id="img-div">
    <div id="intro"><p id="quote"><strong> “When something is such a creative medium as the web, the limits to it are our imagination.”</strong></p></div>
    <div id="pic-back">
    <img id="image" src="https://k-actus.net/wp-content/uploads/2017/04/tim_berners_lee_nowadays.jpg" alt="A picture of Tim Berners-Lee smiling"></div>
    <figcaption id="img-caption"><strong>Inventor of the World Wide Web</strong></figcaption>
  <div id="tribute-info">
      <p id='p1'>Berners-Lee was born in London, England, United Kingdom, one of four children born to Mary Lee Woods and Conway Berners-Lee. His parents worked on the first commercially built computer, the Ferranti Mark 1. He attended Sheen Mount Primary School, and then went on to attend south west London's Emanuel School from 1969 to 1973, at the time a direct grant grammar school, which became an independent school in 1975. A keen trainspotter as a child, he learnt about electronics from tinkering with a model railway. He studied at The Queen's College, Oxford, from 1973 to 1976, where he received a first-class bachelor of arts degree in physics. While he was at college, Berners-Lee made a computer out of an old television set, which he bought from a repair shop.<br><br>After graduation, Berners-Lee worked as an engineer at the telecommunications company Plessey in Poole, Dorset. In 1978, he joined D. G. Nash in Ferndown, Dorset, where he helped create type-setting software for printers. Berners-Lee worked as an independent contractor at CERN from June to December 1980. While in Geneva, he proposed a project based on the concept of hypertext, to facilitate sharing and updating information among researchers. To demonstrate it, he built a prototype system named ENQUIRE. After leaving CERN in late 1980, he went to work at John Poole's Image Computer Systems, Ltd, in Bournemouth, Dorset. He ran the company's technical side for three years. The project he worked on was a "real-time remote procedure call" which gave him experience in computer networking. In 1984, he returned to CERN as a fellow.</p>

<p id="p2">In 1989, CERN was the largest internet node in Europe, and Berners-Lee saw an opportunity to join hypertext with the internet:<br><br>

<i>I just had to take the hypertext idea and connect it to the Transmission Control Protocol and domain name system ideas and—ta-da!—the World Wide Web... Creating the web was really an act of desperation, because the situation without it was very difficult when I was working at CERN later. Most of the technology involved in the web, like the hypertext, like the internet, multifont text objects, had all been designed already. I just had to put them together. It was a step of generalising, going to a higher level of abstraction, thinking about all the documentation systems out there as being possibly part of a larger imaginary documentation system.</i><br><br>

Berners-Lee wrote his proposal in March 1989 and, in 1990, redistributed it. It then was accepted by his manager, Mike Sendall, who called his proposals 'vague, but exciting'. He used similar ideas to those underlying the ENQUIRE system to create the World Wide Web, for which he designed and built the first Web browser. His software also functioned as an editor (called WorldWideWeb, running on the NeXTSTEP operating system), and the first Web server, CERN HTTPd (short for Hypertext Transfer Protocol daemon).<br><br> <strong><i>For more information, please be sure to check out the Wiki or Website links above.</i></p></div><br>
    <div id="awards">
      <h3 href="#">Awards</h3>
      <ul id="list">
        <li>1995:<br>World Wide Web Hall of Fame<br>
Kilby Foundation's "Young Innovator of the Year" Award<br>
ACM Software Systems Award (co-recipient)<br> 
Honorary Prix Ars Electronica<br>
Distinguished Fellow of the British Computer Society</li><br>
        <li>1997:<br>Awarded an Order of the British Empire (OBE)<br>IEEE Koji Kobayashi Computers and Communications Award<br>
Duddell Medal of the Institute of Physics<br>
Interactive Services Association's Distinguished Service Award<br>
MCI Computerworld/Smithsonian Award for Leadership in Innovation <br>
International Communication Institute's Columbus Prize </li><br>
Charles Babbage award<br>
Mountbatten Medal of the National Electronics Council<br>
Lord Lloyd of Kilgerran Prize from the Foundation for Science and Technology
<br>PC Magazine Lifetime Achievement Award in Technical Excellence<br>
MacArthur Fellowship<br>
The Eduard Rhein Technology Award<br>
Honorary Fellow, Institution of Electrical Engineers</li><br>
Named "One of the 100 greatest minds of the century" by Time Magazine<br>
World Technology Award for Communication Technology<br>
Honorary Fellowship, The Society for Technical Communications</li><br>
Paul Evan Peters Award of ARL, Educause and CNI<br>
Electronic Freedom Foundation's Pioneer Award<br>
George R Stibitz Computer Pioneer Award, American Computer Museum <br>
Special Award for Outstanding Contribution of the World Television Forum</li><br>
Sir Frank Whittle Medal, the Royal Academy of Engineering<br>
Fellow,Royal Society<br>
Member, American Academy of Arts and Sciences</li></ul>
      <ul id="list2">
Japan Prize, the Science and Technology Foundation of Japan
<br>Prince of Asturias Foundation Prize for Scientific and Technical Research (shared with with Larry Roberts, Rob Kahn and Vint Cerf)<br>
Fellow, Guglielmo Marconi Foundation<br>
Albert Medal of the Royal Society for the Encouragement of Art, Manufactures and Commerce (RSA)</li><br>
The Royal Photographic Society's Progress Medal and Honorary Fellowship (HonFRPS)<br>
Computer History Museum Fellow Award</li><br>
Knighted (KBE) by H.M. the Queen for services to the global development of the Internet<br>
Millennium Technology Prize<br>
Special Award of the American Society for Information Science and Technology<br>
Member, American Philosophical Society</li><br>
Common Wealth Award for Distinguished Service for Mass Communications<br>
Die Quadriga Award<br>
Financial Times Lifetime Achievement Award</li><br>
President's Medal, the Institute of Physics</li><br>
Awarded the Order of Merit by H.M. the Queen<br>
Charles Stark Draper Prize, National Academy of Engineering<br>
Lovelace Medal, British Computer Society<br>
D&AD President's Award for Innovation and Creativity<br>
MITX (Massachusetts Innovation & Technology Exchange) Leadership Award<br>
Foreign Associate of the National Academy of Engineering</li><br>
BITC Award for Excellence<br>
IEEE/RSE Wolfson James Clerk Maxwell Award<br>
Fellow, IEEE<br>
Pathfinder Award, Harvard Kennedy School of Government</li><br></ul>
        <ul id="list3">
Foreign Associate, National Academy of Sciences<br>
Given the title of Royal Designer by the Royal Society for the encouragement of Arts, Manufacture nd Commerce<br> 
Webby Awards Lifetime Achievement Award</li><br>
UNESCO Niels Bohr Gold Medal Award</li><br>
The Mikhail Gorbachev Award<br>
DAMA Web Awards, Bilbao Web Summit</li><br>
Institute of Electrical and Electronics Engineers Internet Hall of Fame <br>
Innovation 101 Lifetime Achievement Award<br>
Sultan Qaboos Order for Culture, Science and Arts (First Class)<br>
DNA Summit Lifetime Achievement Award</li><br>
Shared the Queen Elizabeth II Prize for Engineering with Bob Kahn, Vint Cerf, Louis Pouzin and Marc Andreessen.<br>
Visionary of the Year Award, Society for New Communication Research.</li><br>
Honorary Freedom of the City of London <br>
Lifetime Achievement Award from the Oxford Internet Institute<br>
Pride of Britain "Special Award for Outstanding Achievement"<br>
Webby award for Lifetime Achievement<br>
Public Knowledge IP3 Award<br>
Bradford Wasburn Award, Museum of Science, Boston<br>
Mohammed bin Rashid Knowledge Award (with Jimmy Wales)</li><br>
Gottlieb Duttweiler Prize, Zurich, Switzerland<br>
The 1st class Order of the Cross of Terra Mariana, Republic of Estonia</li><br>
John Maynard Keynes Prize</li><br>
ACM A.M. Turing Prize, San Francisco, California</li>
Coded by Jaime Padilla

              html, body, main {
  background-color: black;
  color: white;
  height: 100%;
  width 100%;
  text-align: center;
  margin: 30px;

#img-div /*container*/{ 
  background-color: black;
  box-shadow: 3px 3px 3px 0px #504f2c;
  display: grid;
  width: 100%;
    "pic . content"
    "caption . content"

#pic-back /*pic background */{
  background-color: black;
  margin-left: 50px;
  width: 100%;

#image /*Box 1*/{
  max-width: 23em;
  height: auto;
  display: block;
  margin: auto;
  grid-area: pic;
  padding-top: 20px;
  padding-bottom: 10px;
#img-caption /*box2*/{
  background-color: black;
  grid-area: caption;
  padding-left: 100px;
  padding-bottom: 10px;

#intro /*Box 3*/{
  background-color: black;
  grid-area: content;
  text-align: justify;
  padding-left: 120px;
  padding-right: 125px;
  padding-top: 100px;

#quote {
  text-align: left;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  padding-top: 10px;
  font-size: 20px;
  color: white;
#title {
  /* make edges round */
  background-image: url("http://www.smallpc.net/wp-content/uploads/2012/10/worldmap-net2.jpg ");
  background-position: center;
  background-repeat: no-repeat;
  height: 15em;
  border-radius: 25%;
  width: 90%;
  margin: auto;

a:link, a:visited {
    background-color: silver;
    color: black;
    border: 1px solid black;
    margin: 3px 3px 3.5px;
    box-shadow: 1px 1px 1px;
    font-weight: none;
    padding: 0.3px 0.4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    width: 7%;

a:hover, a:active {
  color: #11117a;

h1 { 
  font-size: 43px;
  padding-top: 95px;

h2 {
  text-align: center;
  grid-area: header;
  font-size: 23px;

h3 {
  text-align: center;
  grid-area: header3;
  font-size: 23px;

#tribute-info {
  background-color: #504f2c;
  display: grid;
  grid-template-columns: 1fr 1fr;
    "header header"
    "para1 para2"
    "para1 para2";
  border-style: solid;
  width: 100%;
  height: auto;
  grid-column-gap: 50px;
  text-align: left;

#p1 {
  margin-left: 25px;
  grid-area: para1;
  line-height: 20px;

#p2 {
  margin-right: 25px;
  line-height: 19px;
  grid-area: para2;

#awards /* Container */ {
  background-color: black;
  border: 4px double #504f2c;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
    "header3 header3 header3"
    "lis1 lis2 lis3"
    "lis1 lis2 lis3"

#list {
  padding-top: 35px;
  text-align: left;
  grid-area: lis1;
  line-height: 1;

#list2 {
  padding-top: 37px;
  text-align: left;
  grid-area: lis2;
  line-height: 1;

#list3 {
  padding-top: 42px;
  text-align: left;
  grid-area: lis3;
  line-height: 1;

.auth {
  margin-left: 900px;
  width: 250px;
  font-size: 15px;
  font-family: "Book Antiqua", Palatino, serif;
  text-align: center;
  background-color: black;
  color: white;
  cursor: pointer;


    #tribute-info {
    grid-auto-rows: auto;
        "header header"
        "para1 para1"
        "para2 para2";
    text-align: center;
    #p1, #p2{


              // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

  - Select the project you would 
    like to complete from the dropdown 
  - Click the "RUN TESTS" button to
    run the tests against the blank 
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................