28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous
Je souhaiterai comme la maquette que mes logos fontawesome se trouve à côté de mes <h2> et non au dessus . Je n'arrive pas du tout à les placer correctement
QQun peux il m'aider ?



<section>
	<article>
		<h1 class="titre_services"> Nos services  </h1>
		

			<p class="services">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed molestie</br> purus, nec bibendum turpis. Duis nec orci ligula. Vivamus.</p>
<div class="pc">
	<img src="images/pic_pc.png" alt="photo de pc" />
</div>
	<div class="titres_services">

		<div class="services_description">
				<div class="services_logo">
					<div class="bulle-bleue"></div>
					<p class="fa_logo"><i class="fas fa-chart-line"></i></p>
					
				</div>
			<div class="service-text">
				<h2> UX Design </h2>
					<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
			</div> 
		</div>
		

			<div class="services_description">
				<div class="services_logo">
					<div class="bulle-bleue"> </div>
					<p class="fa_logo"><i class="fas fa-chart-pie"></i></p>
				</div>
				<div class="service-text">
				<h2>UI Design</h2> 
					<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
				</div>
			</div>

			<div class="services_description">
				<div class="services_logo">
					<div class="bulle-bleue"></div>
					<p class="fa_logo"><i class="fas fa-cubes"></i></p>
				</div>
				<div class="service-text">
				<h2>SEO</h2> 
					<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
				</div>
			</div>
	</div>

</article>
</section>


.pc
{
	position: absolute;
}

.titres_services

{
	
	float: right;
	height: 500px;
	
	padding-right: 50px; 
	position: relative;
	top:1px;
}

/* FONT AWESOME */

.services_logo
{
	width: 55px;
	min-width: 55px;
	border-radius: 30px;
	border: 1px solid rgb(217,217,217);
	display:flex;
	align-self: center;
	padding-top:5px;
	justify-content: center;
	position: relative;
	color:rgb(92,173,211);
	transition: all 0,5s ease;
}

.bulle-bleue
{
	height:10px;
	width:10px;
	border-radius: 5px;
	background-color: rgb(92,173,211);
	position: absolute;
	top:25px;
	right:-5px;
  }



upload/1550480794-74431-maquette210.png
Modifié par Tinkerbell06 (18 Feb 2019 - 10:33)