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.

            
              <html>
<head>
	<title>Bing Tribute Page</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
</head>
<body>
	<header>
		<div id="header-search-container">
			<div id="header-img">
				<img src="https://dl.dropboxusercontent.com/s/vr99cutotsgg2fq/bing%20icon.PNG?dl=0">
			</div>
			<div id="header-search">
				Bing
			</div>
		</div>
		<div id="header-links">
			<a href="#"><span class="highlighted">All about bing.</span></a>
			<a href="https://www.freecodecamp.org/averylucas" target="#">A FreeCodeCamp Project</a>
			<a href="#">Developed by Avery Lucas</a>
			<a href="#">My Website</a>
		</div>
	</header>

	<div id="content">
		<div id="side-info">
			<div id="bing-infobox">
				<div id="bing-infobox-header">
					<h1>Bing</h1>
					<h3>A search engine</h3>
				</div>
				<div id="bing-infobox-info">
					<a href="https://bing.com/">
						<img src="https://www.bing.com/th?id=A4db183067e2f5a1612832c3ec1fad055&w=110&h=110&c=7&rs=1&qlt=95&pcl=f9f9f9&cdv=1&pid=16.1">
					</a>
					<p id="bing-infobox-desc">
						Bing is a web search engine owned and operated by Microsoft. The service has its origins in Microsoft's previous search engines: MSN Search, Windows Live Search and later Live Search. Bing provides a variety of search services, including web, video, image and map search products. It is developed using ASP.NET.
						Wikipedia · Text under CC-BY-SA license
					</p>
				</div>
				<div id="bing-infobox-sites">
					<div class="bing-infobox-imglink">
						<a href="https://bing.com/"> 
							<img src="https://www.bing.com/th?id=A4db183067e2f5a1612832c3ec1fad055&w=110&h=110&c=7&rs=1&qlt=95&pcl=f9f9f9&cdv=1&pid=16.1"> 
						</a>
						<!-- <p class="bing-infobox-link">Official Site</p> -->
					</div>
					<div class="bing-infobox-imglink">
						<a href="https://en.wikipedia.org/wiki/Bing_(search_engine)"> 
							<img src="https://uappexplorer.com/api/icon/e9380b37e4cf2011f22f8201f25745ae/com.ubuntu.developer.adrian-arroyocalle.wikipedia-mobile.png"> 
						</a>
						<!-- <p class="bing-infobox-link">Wikipedia</p> -->
					</div>
					<div class="bing-infobox-imglink">
						<a href="http://twitter.com/bing">
							<img src="http://dl1.cbsistatic.com/i/2017/04/04/faacc8e2-3050-4c71-9379-4879dee8e0e3/1fa35d2bd94e54969b771279bce84471/imgingest-2964965363266456405.png"> 
						</a>
						<!-- <p class="bing-infobox-link">Facebook</p> -->
					</div>
					<div class="bing-infobox-imglink">
						<a href="http://www.facebook.com/Bing"> 
							<img src="http://www.pngall.com/wp-content/uploads/2016/07/Twitter-Download-PNG.png"> 
						</a>
						<!-- <p class="bing-infobox-link">Twiiter</p> -->
					</div>
				</div>
				<p>Launched: Jun 01, 2009</p>
			</div>
		</div>

		<div id="search-results" class="wrap">
			<div class="search-result">
				<p class="search-result-title">
					<a href="http://www.bing.com">Bing</a>
				</p>
				<p class="address">
					www.bing.com
				</p>
				<p class="search-result-description">
					Bing helps you turn information into action, making it faster and easier to go from searching to doing.
				</p>
			</div>

			<div class="search-result">
				<p class="search-result-title">
					Announced a whole two days before release!
				</p>
				<p class="search-result-description">
					Bing, Microsoft's replacement for Live Search, was unveiled by Microsoft CEO Steve Ballmer on May 28, 2009, at the All Things Digital conference in San Diego, California, for release on June 1, 2009.[3] Notable new features at the time included the listing of search suggestions while queries are entered and a list of related searches (called "Explore pane")
				</p>
			</div>
      
      <div class="search-result">
				<p class="search-result-title">
					Legal Challenges
				</p>
				<p class="search-result-description">
					On July 31, 2009, The Laptop Company, Inc. stated in a press release that it would challenge Bing's trademark application, alleging that Bing may cause confusion in the marketplace as Bing and their product BongoBing both do online product search. Software company TeraByte Unlimited, which has a product called BootIt Next Generation (abbreviated to BING), also contended the trademark application on similar grounds, as did a Missouri-based design company called Bing! Information Design.</p>
        
<p>
Microsoft contended that claims challenging its trademark were without merit because these companies filed for U.S. federal trademark applications only after Microsoft filed for the Bing trademark in March 2009.
				</p>
			</div>
      
			<div class="search-result">
				<p class="search-result-title">
					Rebrand as Bing
				</p>
				<p class="search-result-description">
					Microsoft recognised that there would be a problem with branding as long as the word "Live" remained in the name. As an effort to create a new identity for Microsoft's search services, Live Search was officially replaced by Bing on June 3, 2009.
				</p>
			</div>

			<div class="search-result">
				<p class="search-result-title">
					Censoring and Performance issues
				</p>
				<p class="search-result-description">
					Bing has been criticized for being slower to index websites than Google. It has also been criticized for not indexing some websites at all. It also censors any search involving simplified chinese characters no matter what country you live in. This is done to comply with chinese government.
				</p>
			</div>
      
			<div class="search-result">
				<p class="search-result-title">
					<a href="https://account.microsoft.com/rewards/dashboard/">Microsoft rewards</a>
				</p>
				<p class="address">
					https://account.microsoft.com/rewards/dashboard/ (Must be signed in to see rewards)
				</p>
				<p class="search-result-description">
					Launched by Microsoft in September 2010. It was similar to two earlier services, SearchPerks! and Bing Cashback, which were subsequently discontinued. The Bing Rewards program was rebranded as "Microsoft Rewards" in 2016,  at which point it was modified to only two levels, Level 1 and Level 2. Level 1 is similar to 'Member' and Level 2 is similar to 'Gold' of the previous Bing Rewards.

					The program basically awarded points to users who actively used bing as their primary search engine. These points could then be traded in for electronics, gift cards, sweepstakes, and donations.
				</p>
			</div>
		</div>
	</div>

	<div class="footer">2017-2018</div>
</body>
</html>
            
          
!
            
              html {
	height: 100%;
	box-sizing: border-box;
}

body {
	position: relative;
	margin: 0;
	padding-bottom: 6rem;
	min-height: 100%;
	font-family: 'Open Sans', sans-serif;
}

#content {
	display: flex;
	justify-content: space-around;
}


#side-info {
	order: 2;
	padding: 30px;
	height: 100%;
}

header {
	/*background-color: #DFDFDF;*/
	width: 100%;
	height: 110px;
	padding-top: 12px;
	box-shadow: 0 .2px 2px grey;
}

#header-search-container {
	margin-left: 30px;
	display: flex;
	/*width: 100%;*/
	height: 64px;

}

#header-search-container #header-img img {
	width: 64px;
	height: 64px;
	margin-right: 30px;
}

#header-search {
	height: 32px;
	flex-basis: 80%;
	background-color: white;
	margin-top: 17px;
	box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 2px 4px 0 rgba(0,0,0,.16);
	padding-top: 15px;
	padding-left: 20px;
	font-size: 16px;
}

#header-links {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding-top: 2px;
	max-width: 920px;
}

#header-links * {
	margin: 16px 0;
	text-decoration: none;
	color: #7a7a7a;
}

#header-links *:hover {
	animation-name: borderFadein;
	animation-duration: .25s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

#header-links .highlighted {
	padding-bottom: 6px;
	border-bottom: 3px solid red;
	font-weight: bold;
	color: black;
}

@keyframes borderFadein {
	0% {
		border-bottom: 0px solid white;
		padding-bottom: 0px;

	}
	100% {
		border-bottom: 3px solid #ffaaaa;
		padding-bottom: 6px;
		color: black;
	}
}

/* EVERYTHING that has to do with the infobox */
#bing-infobox {
	width: 400px;
	min-height: 350px;
	padding: 20px;
	margin-bottom: 50px;
	/*background-color: #DFDFDF;*/
	display: flex;
	box-shadow: 1px 1px 3px grey;
	flex-direction: column;
	font-size: 13px;
}

/* EVERYTHING that has to do with description and main image stuff under here.*/
/* This selector refers to main bing image used with description */
#bing-infobox-img {
	flex-basis: 100px;
	flex-shrink: 0;
	height: 100px;
	margin: 10px;
	margin-left: 0;
	background-color: #C4C4C4;
}

#bing-infobox-info {
	display: flex;
	flex-wrap: nowrap;
	/*flex-direction: row;*/
}

#bing-infobox-desc {
	flex-grow: 1;
	padding: 10px;
	color: rgb(102, 102, 102);
}

#bing-infobox-sites {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

/* EVERYTHING that has to do with link stuff under here.*/
.bing-infobox-imglink {
	display: flex;
	flex-direction: column;
	/*flex-wrap: nowrap;*/
}

#bing-infobox-info a {
	width: 110px;
	height: 110px;
	padding-top: 20px;
}

.bing-infobox-imglink a img {
	width: 32px;
	height: 32px;
	background-color: #C4C4C4;
	flex-shrink: 0;
	/*margin: 5px;*/
}

#search-results {
	order: 1;
	max-width: 900px;
	
}

.search-result {
	padding-top: 20px;
  
}

.search-result-title:hover {
  transform: translateY(-3px); 
}

.search-result-title {
	font-size: 20px;
	margin-bottom: 5px;
	color: #001ba0;
  transition: transform .2s ease-in-out;
}

.search-result-description {
	line-height: 17px;
	margin-top: 5px;
}

.address {
	margin: 0;
	color: #7a7a7a;
	margin: 2px 0;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

/*Responsiveness stuff*/
@media only screen and (max-width: 720px) {
	#header-links {
		flex-direction: column;
	}

	header {
		height: 100%;
	}

	header #header-links{
		padding-left: 20px;
		text-align: left;
	}
}


@media only screen and (max-width: 970px) {
	#content {
		flex-direction: column;
	}
	
	#bing-infobox {
		margin: 0 auto;
	}

	#bing-infobox-info {
		flex-direction: column;
	}

	#bing-infobox-img {
		width: 140px;
		margin: 0 auto;
	}
  
  #search-results {
    padding: 20px;
  }

	#side-info {
		order: 1;
	}

	#search-results {
		order: 2;
	}
}
            
          
!
999px
🕑 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 ..................

Console