Google SERPs

: mod_articles_latest

Live demo

Google SERPs


 

About 1,040,000,000 results (0.60 seconds)

Guidelines for a Happy and Beneficial Guest Blogging on web-eau.net

/blog/guidelines-for-guest-blogging-on-web-eau-net
31 mars 2019 - This article presents the guidelines for guest blogging on web-eau.net's blog. If you're a blogger and you want to publish some pieces here, I hope yo...

Analyse concurrentielle : mode d'emploi et outils

/blog/analyse-concurrentielle-mode-d-emploi-et-outils
11 mai 2016 - Quelque soit la thématique de votre site web, vous devez très probablement avoir au moins un ou plusieurs concurrents. Aujourd'hui, connaitre ses conc...

3 bonnes raisons d'opter pour Opera 37

/blog/3-bonnes-raisons-d-opter-pour-opera-37
7 mai 2016 - Alors que Chrome vient officiellement de déposséder Internet Explorer du titre du navigateur le plus utilisé au monde, la société norvégienne Opera So...

La revanche des GIF

/blog/la-revanche-des-gif
5 mai 2016 - Vous l'avez certainement remarqué depuis quelques mois, c'est le grand retour du GIF sur la toile. Bien que ce format soit utilisé depuis la nuit des...

Tout savoir sur la pénalité Penguin

/blog/tout-savoir-sur-la-penalite-penguin
3 mai 2016 - En tant que propriétaire de site web, le référencement de celui-ci est sans doute l'une de vos préoccupations premières (du moins, je l'espère). Pour...

Monétiser son blog, les conseils - 3/3

/blog/monetiser-son-blog-les-conseils
2 mai 2016 - Dans les précédents épisodes consacrés à la monétisation de son blog , nous avons vu les différentes étapes qui permettent de mener son projet depuis...



 

Markup

<div class="navbar-serp">
	<div class="lft-nav">
		<div id="logo">
			<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
		</div>
		<div class="search-area">
			<div class="search-field">
				<form>
					<input class="search" type="search" placeholder="">
				</form>
				<div class="new-mic"><i class="fa fa-search"></i></div>
			</div>
		</div>
	</div>
	<div class="rght-nav d-none d-lg-block">
		<div class="rght-nav-content">
			<ul>                 
				<li class="apps">
					<i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i> 
				</li>
				<li>
					<div class="sign-in">
						Sign In
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="navbar2">
	<div class="lft-nav2">
		<ul>
			<li>
				<div class="all-item">
					<a href="#">All</a>
				</div>
			</li>
			<li>
				<div class="news">
					<a href="#">News</a>
				</div>
			</li>
			<li>
				<div class="videos">
					<a href="#">Videos</a>
				</div>
			</li>
			<li>
				<div class="images">
					<a href="#">Images</a>
				</div>
			</li>
			<li>
				<div class="app">
					<a href="#">Apps</a>
				</div>
			</li>
			<li>
				<div class="bitchass">
					<a href="#" role="menu">
						<span class="more">More</span>
					</a>
				</div>
			</li>
			<li>
				<div class="search">
					<a class="srch-tools" href="#">Search Tools</a>
				</div>
			</li>
		</ul>
	</div>
</div>
<div class="topbar-1">
	<p>About 1,040,000,000 results (0.60 seconds)</p>
</div>
<div class="main-content-lg">
	<div class="content-md">
		<div class="content-s">
			<?php foreach ($list as $item) : ?>
			<div class="serp-section">
				<div class="c1-s2">
					<h3 class="r"><a href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h3> 
					<div class="r2">
						<span class="r21"><?php echo $item->link; ?> <i class="fa fa-caret-down"></i> </span> 
					</div>
					<div class="r3">
						<span class="r31"><?php echo \JHtml::_('date', $item->created, 'DATE_FORMAT_LC3'); ?> - <!-- article date -->
						<?php echo JHTML::_('string.truncate', $item->introtext, 150, false, false) ; ?></p></span> 
					</div>
				</div>
			</div>
			<?php endforeach; ?>
			<hr>
			<div class="section-three">
				<div class="s3-header">
					<h3>Searches related to free codecamp</h3>
				</div>
				<div class="cards">
					<div id="card1">
						<p class="lnk"><a href="#"><b>Github</b></a></p>
						<p class="lnk"><a href="#">free codecamp<b>review</b></a></p>
						<p class="lnk"><a href="#">free code camp <b>review</b></a></p>
						<p class="lnk"><a href="#"><b>the odin project</b></a></p>
					</div>
					<div id="card2">
						<p class="lnk"><a href="#">free codecamp</a></p>
						<p class="lnk"><a href="#">free codecamp</a></p>
						<p class="lnk"><a href="#">free codecamp</a></p>
						<p class="lnk"><a href="#">free codecamp</a></p>
					</div>
				</div>
			</div>
			<hr>
			<div class="section-four">
				<div class="s4-data">
					<div class="glogo"><img src="/images/overrides/Gooooogle.jpg">
					</div>
					<div class="s4-data-numbers">
						<ul>
							<li>1</li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">6</a></li>
							<li><a href="#">7</a></li>
							<li><a href="#">8</a></li>
							<li><a href="#">9</a></li>
							<li><a href="#">10</a></li>
							<li><a href="#">Next</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

.navbar-serp{
  margin: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  height: 65px;
}
.lft-nav{
  display: flex;
  flex-direction: row;
  align-items: center;
}
#logo img{
  width: 115px;
  padding: 6px 21px 0px 15px;
}
.search-area{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search-field{
  position: relative;
  width: 490px;
  /*display: flex;*/
}
form input[type=search]{
  position: relative;
  box-sizing: border-box;
  width: 490px;
  height: 36px;
  padding: 19px 15px;
  outline-color: #4285f4;
  direction: ltr;
  font-size: 16px;
  font-family: sans-serif;
  border: 1px solid rgb(217, 217, 217);
  border-radius: 24px !important;
  margin-bottom: 1px;
 }
.new-mic i{
  position: absolute;
  width: 4%;
  right: 6px;
  top: 8px;
  color: #4285F4;
}
.apps{
  font-size: 1.5em; 
  color: #727272; 
  padding-top: 18px;
  cursor: pointer;
}
.apps i {
  margin-right: 2px;
}
.rght-nav-content ul{
  width: auto;
  display: flex;
  align-items: center;
  padding: 0px 30px;
}
.rght-nav-content ul li{
  text-decoration: none;
  display: inline-block;
  padding-left: 19px;
}
.sign-in{
  margin-top: 15px;
  font-weight: bold;
  background-color: #4285f4;
  background-size: auto;
  border-image-repeat: stretch;
  line-height: 28px;
  border-radius: 2px;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  text-decoration: none;
  color: #fff !important;
  font-size: 13px;
  font-family: sans-serif;
}
.navbar2{
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
  margin: 0px;
  height: 59px;
  background-color: rgb(255, 255, 255);
  align-items: center;
  border-bottom: 1px solid rgb(235, 235, 235);
}
.lft-nav2 ul{
  display: flex;
}
.lft-nav2 ul li{
  line-height: 54px;
  display: inline-block;
  margin: 0px 8px;
}
.lft-nav2 ul li a{
  text-decoration: none;
  color: rgb(119, 119, 119);
  font-size: 13px;
  font-family: arial, sans-serif;
  padding: 0px 8px;
  margin: 0px;
}
.lft-nav2 .all-item{
  padding: 0px;
  border-bottom: 3px solid #4285f4;
  margin-left: 84px;
}
.lft-nav2 .all-item a{
  color: #4285f4;
  font-weight: bold;
}
.topbar-1{
  display: flex;
  height: 43px;
  justify-content: flex-start;
  align-items: center;
}
.topbar-1 p{
  display: block;
  line-height: 43px;
  font-size: 13px;
  color: rgb(128, 128, 128);
  font-family: arial, sans-serif;
  margin: 0 0 0 134px;
}
.main-content-lg{
  width: 1250px;
  height: 1300px;
  margin-top: 3px;
  clear: both;
}
.content-md{
  width: 616px;
  margin-left: 120px;
  margin-right: 254px;
  padding: 0 8px;
}
.content-s{
  width: 600px;
  padding: 0 8px;
}
.serp-section{
  display: flex;
  flex-direction: column;
  width: 600px;
  text-align: left;
  padding-top: 6px;
  margin-bottom: 23px;
}
.section-one-header{
  display: flex;
  flex-direction: column;
}
.r{
  font-size: 18px;
  margin-top: 0px;
}
.r a{
  color: rgb(26, 13, 171);
  font-weight: normal!important;
  text-decoration: none;
}
.r a:hover{
  cursor: pointer;
  text-decoration: underline;
}
.r2{
  display: flex;
  justify-content: flex-start;
  height: 17px;
  padding-bottom: 11px;
}
.r21{
  color: rgb(0, 102, 33) !important;
  font-size: 14px;
  line-height: 16px;
}
.r31{
  color: rgb(84, 84, 84);
  font-size: 13px;
}
hr{
  margin-bottom: 16px;
  margin-left: -8px;
  margin-right: -8px;
  opacity: 0.35;
}
.section-two{
  width: 600px;
  height: 692px;
}
.c1-s2{
  width: 600px;
  height: 74px;
  margin-bottom: 23px;
}
.section-three{
  width: 600px;
  height: 133px;
  margin: 0px;
  padding-left: 8px;
  padding-right: 8px;
}
.s3-header{
  height: 18px;
  padding-bottom: 7px;
  padding-top: 0px;
}
.s3-header h3{
  color: rgb(128, 128, 128);
  font-family: arial, sans-serif;
  font-size: 18px;
  font-weight: normal!important;
  margin-top: 0px;
}
.cards{
  padding-top: 2px;
  display: flex;
  justify-content: flex-start;;
}
.cards #card1{
  display: block;
  float: left;
  width: 152px;
  height: 100px;
  padding-right: 16px;
}
.cards #card2{
  display: block;
  float: right;
  width: 152px;
  height: 100px;
}
.lnk{
  margin: 0px;
  padding-bottom: 7px;
}
.cards p a{
  text-decoration: none;
  font-size: 13px;
  color: rgb(26, 13, 171);
}
.section-four{
  width: 616px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s4-data{
  height: 55px;
  margin-top: 18px;
}
.s4-data-numbers{
  padding-left: 15px;
}
.s4-data-numbers ul{
  display: flex;
  justify-content: center;
  padding-left: 0px;
  margin-top: 0px;
}
.s4-data-numbers ul li{
  display: inline-block;
  font-size: 13px;
  font-family: arial, sans-serif;
  padding: 0 6px;
}
.s4-data-numbers ul li:nth-child(11){
  padding-left: 30px;
}
.s4-data-numbers ul li a{
  color: rgb(66, 133, 244);
  text-decoration: none;
}
Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.