Tribute Page - Build a Tribute Page

Tell us what’s happening:
Hi,
This is my first Tribute page project. Kindly let me know your suggestions for improvements.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tribute Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style="background-color:#f5f5f5;padding-top:1px;">
   <header class="header">
      <div class="tribute_person">Sundar Pichai</div>
      <nav class="nav_bar">
        <ul class="nav_links">
           <li><a href="#">Home</a></li>
           <li><a href="#tribute-info">Introduction</a></li>
           <li><a href="#EarlyLife_container_id">Early Life</a></li>
           <li><a href="#Education_container_main_id">Education</a></li>
           <li><a href="#defining_moments_container_id">Defining Moments</a></li>
            <li><a href="#Image_container_id">Image Gallery</a></li>
           <li><a href="#more_liks_container_id">More links</a></li>
        </ul>
      
      </nav>
   
   </header>
  <main id="main">
   <div class="main_container" >
	    <h1 class="h1_css" id="title">Sundar Pichai</h1>
	    <h5 class="h5_css">CEO of <img class="google_logo"src="https://rulesofgames.github.io/Images/google-logo.png"></h5>
	   
	    <figure class="figure_class" id="img-div">
	       <img class="image_class" src="https://rulesofgames.github.io/Images/main_image.jpg" id="image"> 
	           <figcaption id="img-caption">Google CEO Sundar Pichai takes the stage during the presentation of new Google hardware in San Francisco on Oct. 4, 2016.</figcaption>
	    </figure>
	    <div class="Intro_container" id="tribute-info"> 
		    <h2 class="h2_css">Introduction</h2>
		    	<p>Pichai Sundararajan (born June 10, 1972), better known as Sundar Pichai is an Indian-American business executive. He is the chief executive officer (CEO) of Alphabet Inc. and its subsidiary Google. Pichai was included in Time's annual list of the 100 most influential people in 2016 and 2020.</p>
		        <p>Under Pichai's leadership, Google invested in new opportunities such as Google Cloud and YouTube and continues to research advanced technologies, including machine learning and quantum computing.</p>
		        <p>In 2021, Sundar Pichai stated that artificial intelligence, when machines are programmed to simulate the human mind and solve problems and mimic human activity, "will have a bigger impact than most of the breakthroughs in recent history" and "can make humans more productive than we ever imagined." Pichai expects AI to play a foundational role in every aspect of our lives, by mimicking human tasks, from healthcare and education to how we manufacture things and consume information.</p>
		        
		        <p>In 2021, Alphabet crossed $2 trillion in market value due to sales and profit growth during the COVID-19 pandemic. While many other technology giants embrace the metaverse as the next frontier of growth, Sundar Pichai sees Google's future in its oldest offering, the Internet search, with consumers asking computers more questions with voice and multimodal experiences.</p>
		        <p>To Pichai's point, environmental concerns can impact where young employees want to work. Hence,Sundar Pichai has committed to running Google data centers and campuses on 24/7 carbon-free energy by 2030.That's why Google want to run our data centers on carbon-free energy, 24/7. So, in the future, every search you do, every YouTube video you watch, every Gmail you send will be powered by clean energy sources like wind, solar, and geothermal. And our goal is to do all this by 2030.</p>
	    </div>
	    
	    <hr>
	    
	    <div id="EarlyLife_container_id">
		    <div class="EarlyLife_container" >
			    <h2 class="h2_css" id="Early_life">Early Life</h2>
			    	<p>
			    	  He was born to a middle class family in Madurai, Tamil Nadu and brought up in Ashok Nagar, Chennai. His mother, Lakshmi Pichai was a Stenographer and father Ragunatha Pichai was an Electrical engineer at General Electric Company, the Conglomerate. His father had a manufacturing plant that produced electrical components and that's where Sundar Pichai got his interest in technology. His father introduced him to technology by sharing stories and challenges that he faced during his work day. His first encounter with technology and the first time Pichai was introduced to the technology was when he was 12 and his family bought their first telephone. He discovered how effortlessly he recalls the digits and he would remember every number he dialed. He did not know, of course, how useful this skill would be in the future.
			    	</p>
		    </div> 	
	    </div>
	    
	    <hr>
	    
	    <div id="Education_container_main_id">
		    <div class="Education_container_main" >
			    <h2 class="h2_css" id="Education">Education</h2>
			    <div class="education_container">
			        <ul>
			           <li>Pichai completed schooling in Jawahar Vidyalaya Senior Secondary School in Ashok Nagar, Chennai </li>
			           <li>Pichai completed the Class XII from Vana Vani school at IIT Madras</li>
			           <li>He earned his degree from IIT Kharagpur in metallurgical engineering and is a distinguished alumnus from that institution</li>
			           <li>He holds an M.S. from Stanford University in materials science and engineering</li>
			           <li>He holds an  MBA from the Wharton School of the University of Pennsylvania, where he was named a Siebel Scholar and a Palmer Scholar, respectively.</li>
			        </ul>
			    </div>
			 </div>
	    </div>	
	    
	    <hr>	 
		 
		 <div id="defining_moments_container_id">
			<div class="defining_moments_container" >  
			    <h2 class="h2_css" id="Defining_Moments">Defining Moments</h2>
				    	<table class="defining_moments_table">
				    		<thead>
					    		<tr>
					    		  <th>Timeline</th>
					    		  <th>Moments</th>
					    		 
					    		</tr>
					        </thead>
					        <tbody>
					            <tr>
					        		<td>2002</td>
					        		<td>Got his 3rd degree at The Wharton School of Business after IIT and Stanford</td>
					        		
					        	</tr>
					        	
					        	 
					        	 
					        	<tr>
					        		<td>2004</td>
					        		<td>Joined Google as Product Manager</td>
					        	</tr>
					        	<tr>
					        		<td>2005</td>
					        		<td>Launched <span class="table_data_highlights">Google Maps</span> - today has 1 billion active users</td>
					        	</tr>
					        	<tr>
					        		<td>2008</td>
					        		<td><span class="table_data_highlights">Became the Vice President of Google</span></td>
					        	</tr>
					        	<tr>
					        		<td>2012</td>
					        		<td>Took over Google Apps after the head left to start his own company,UpStart</td>
					        	</tr>
					        	<tr>
					        		<td>2013</td>
					        		<td>Headed the <span class="table_data_highlights">Andriod One</span> project - increased andriod users from 230 million to 1 billion</td>
					        	</tr>
					        	<tr>
					        		<td>2014</td>
					        		<td>Rejected the CEO position offer at Microsoft and Twitter - stuck to Google</td>
					        	</tr>
					        	<tr>
					        		<td>2015</td>
					        		<td><span class="table_data_highlights">Became the first non-white CEO of Google</span></td>
					        	</tr>
					        	<tr>
					        		<td>2016</td>
					        		<td>Awarded Googles conglomerate, Alphabet's shares worth <span class="table_data_highlights">$199 million</span></td>
					        	</tr>
					        	 <tr>
					        		<td>2017</td>
					        		<td>Launched Tez in India - 30 million transactions within 2 months - eventually rebranded to <span class="table_data_highlights">Google Pay</span></td>
					        	</tr>
					        	 <tr>
					        		<td>2019</td>
					        		<td><span class="table_data_highlights">Became CEO of Alphabet Inc.</span> Also the highest paid CEO in the IT industry</td>
					        	</tr>
					        	<tr>
					        		<td>2022</td>
					        		<td><span class="table_data_highlights">Received the Padma Bhushan</span></td>
					        	</tr>
					        </tbody>		 
					    		 	
				    	</table>
		    </div>
	    </div>
	    
	    <hr>
	    
	    <div id="Image_container_id">
		    <div class="Image_container" >
			    <h2 class="h2_css" id="Image_gallery_id">Image Gallery</h2>	
			    <div class="image_gallery_cssgrid">
			       <img class="image_css" src="https://rulesofgames.github.io/Images/image_1.jpg">
			       <img class="image_css" src="https://rulesofgames.github.io/Images/image_2.jpg">
			       <img class="image_css" src="https://rulesofgames.github.io/Images/image_3.jpg">
			       <img class="image_css" src="https://rulesofgames.github.io/Images/image_4.jpg">
			       <img class="image_css" src="https://rulesofgames.github.io/Images/image_5.jpg">
			       <img class="image_css"  src="https://rulesofgames.github.io/Images/image_6.jpg">
			    
			    </div>
		    </div>
	    </div>
	    
	    <hr>
	    
	    <div class="more_liks_container" id="more_liks_container_id">
	    	<h2 class="h2_css" id="More_Links">More Links</h2>
	    		<p>If you want to know more about Sundar Pichai, You can follow him on below social media platforms </p>
	    		<a href="https://twitter.com/sundarpichai?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" class="fa fa-twitter" target="_blank" id="tribute-link"></a> 
	    		<a href="https://www.instagram.com/sundarpichai/?hl=en" class="fa fa-instagram" target="_blank" id="tribute-link"></a>
	    	
	    </div>	 
    </div>
  </main> 
    	    <hr>
  <footer class="footer_css">
	    <div class="footer_1">
	      	Coded and &copy;Copyright by: <strong>Nischitha Thimmegowda</strong>
	    </div>  	
	    <div class="footer_2">
	       Tribute Page project on <a href="https://www.freecodecamp.com" target="_blank"><strong style="color:white;">FreeCodeCamp.com</strong></a>
	    <div>
  </footer> 
</body>
</html>


*{
	  scroll-behavior:smooth;
	}
	
    p{
	    font-family:Roboto,Arial;
	   font-size:15px;
     }

	  .header{
	     display:flex;
	     position:fixed;
	     justify-content:space-around;
	     align-items:center;
	     height:40px;   
	     background-color:black;
	     left:0;
	     right:0;
	     top:0;
	     margin:0;
	     
	  }
	  
	  hr{
	    border-style:dotted;
	    border-color:gray;
	    margin-top:5px;
	    margin-bottom:-16px;
	  }
	  
	  .tribute_person{
	    width:400px;
	    color: #E8E8E8;
	    letter-spacing:3px;
	    font-size:1.2em;
	  }
	  
	  .nav_bar{
	   flex:1;
	  }
  
	  .nav_links{
	     list-style:none;
	  
	    
	  }
	  
	  li,a{
	      text-decoration:none;
	      color: #E8E8E8;
	      font-size:17px;
	  }
  
	  .nav_links li{
	    display:inline-block;
	    margin-left:10px;
	    margin-right:10px;
	   
	  }
  
  .nav_links li a{
    transition:color 0.5s;
  }
  
  .nav_links li a:hover{
     color:gray;
  }
  
  .main_container{
   
  }
  
  
  .h1_css{

     font-size:50px;
     color:black;
     text-align:center;
     margin-top:35px;
     margin-bottom:-10px;
     
  }
  
  .google_logo{
     height:45px;
     width:150px;
     vertical-align:middle;
     margin-top:-5px;
  }
  
  .h5_css{
   font-size:18px;
   text-align:center;
  }
  
  .h2_css{
	    margin-top:33px;
	    margin-bottom:20px;
	    font-size:27px;
	    color:black;
	    font-weight:800;
  }
  
  #img-div{
     text-align:center;
  }
  #image{
   margin:auto;
   display:block;
   max-width:100%;
   height:auto;
  }
  #img-caption{
    font-style:italic;
    font-weight:bold;
  }
  

  .education_container ul li{
     color:black;
     text-align:left;
     margin-left:-10px;
  }
  .defining_moments_table{
    min-width:1200px;
    border-collapse: collapse;
    border: 1px solid rgb(105,105,105);
    border-radius:5px 5px 0 0;
    overflow:hidden;
    box-shadow:0 0 20px rgba(0,0,0,0.25);
    margin-bottom:0;
    font-family:Roboto,Arial;
    font-size:1em;
  }
  
  .defining_moments_table thead tr th{
     background-color:rgb(105,105,105);
     color:white;
     font-size:25px;
     text-align:left;
     padding:8px 8px;
  }
  
  .defining_moments_table tbody tr:last-of-type{
    border-bottom:3px solid rgb(105,105,105);
  }
  
   .defining_moments_table tbody tr{
     transition: background-color 0.5s;
     cursor:pointer;
  }
  
  .defining_moments_table tbody tr:hover{
     background-color:rgb(245,245,245);
  }
  
  .defining_moments_table tbody tr:nth-of-type(even){
      background-color:	rgb(224,224,224);
  }
  
  .defining_moments_table tbody tr td{
     
     text-align:left;
      padding:8px 0;
     
  }
  
  .table_data_highlights{
     color:green;
     font-weight:bold;
  }
  
  
 
  .image_gallery_cssgrid{
    display:grid;
    grid-template-columns:400px 400px 400px;
    column-gap:25px;
    row-gap:25px;
  }
  
  .image_css{
     width:100%;
     height:100%;
  }

.footer_css{
   display:flex;
   margin-top:26px;
   background-color:black;
   color: #E8E8E8;
}

.footer_1{
   flex:1;
   padding:10px 40px;
   font-size:18px;
   
}
.footer_2{
   flex:1;
  padding:10px 40px;
   font-size:18px;
   text-align: right;
}

.fa {
  padding: 8px;
  font-size: 35px;
  width: 34px;
  text-align: center;
  text-decoration: none;
  border-radius:10px;
  transition: opacity 0.55s;
}
.fa:hover {
  opacity: 0.7;
}
.fa:active{
  opacity: 0.5;
  box-shadow:3px 3px;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-instagram{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); 
  color: white;
}
.more_liks_container h2 a{
   padding-left:10px;
}

#tribute-info,#EarlyLife_container_id,#Education_container_main_id,#defining_moments_container_id,#Image_container_id,#more_liks_container_id{
   text-align:left;
    margin-left:40px;
    padding-top:6px;
    padding-bottom:3px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

A few suggestions:

  • Run your HTML through a validator. There are lots of little errors you can clean up.
  • There are some responsiveness issues:
    • The links at the top disappear as I narrow my browser
    • The images near the bottom need to rearrange as the browser is narrowed to prevent a horizontal scroll bar.
  • FYI, it is OK if the table under Defining Moments scrolls. But it should be just that table, not the entire page.
1 Like

Thank You for your suggestions. I will incorporate the same.