dyarfi

<section>
	<div class="container">
		<div class="row">			
			<div class="mx-auto">
				<div class="col-lg-12 position-relative" style="overflow:visible !important;">
					<div class="centering-element">
						<div class="w-75">
							<h1 class="display-1 heading-big heading-big-square text-left" style="word-wrap:visible">CSS<br/>is<br/>Awesome</h1>
						</div>
					</div>

dyarfi

body {
	font-family: Arial, sans-serif;
	background-color: white;
}
.centering-element{
	margin: 0;
	min-height: 100vh;
	height: 100%;
	display: grid;
	justify-content: center;

dyarfi

body { 
   background-color: black;
   margin: 5rem 4rem;
   text-align: center;
   font-family: 'Poppins', 'sans-serif';
}
h1, h2 {   
   margin: 0;
   padding: 0;
   color: white;

dyarfi

<div class="hello-world">
   <h1>H</h1>
   <h1>E</h1>
   <h1>L</h1>
   <h1>L</h1>
   <h1>O</h1>
   <br/>
   <h2>W</h2>
   <h2>O</h2>
   <h2>R</h2>

dyarfi

/** Body CSS sample **/
body {   
   background:rgb(255, 247, 233);
}
/** Flatted button %placeholder **/
%btn-flat {
   border-radius: 0rem;
}
/** Rounded button **/
.btn-rounded {

dyarfi

<div class="container py-5">
   <!-- H1 heading purpose only -->
   <h1 class="text-center font-weight-light text-dark mb-5 pb-3 display-4">Bootstrap 4 <em class="px-2 bg-warning">Hover</em> Button Icon</h1>
   <!-- Rounded Button | Font Awesome -->   
   <h1 class="font-weight-light">Font Awesome</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
            <i class="fa fa-chevron-left"></i> <span class="spn">Submit</span>

dyarfi

<div class="container py-5">
  <h1 class="text-center font-weight-bold text-light mb-5 pb-3 display-4">Responsive <span class="px-2 bg-secondary">Card</span> Component</h1>
  <div class="card-group">
    <div class="col-md-4 py-3">
      <div class="card text-white bg-dark">
        <img src="https://source.unsplash.com/random/800x400/?caferacer" class="card-img-top" alt="Card Component">
        <div class="card-body">
          <div class="card-title">
            <h5><a href="javascript:;">CB100 Classic Ride Custom Build</a></h5>
          </div>

dyarfi

@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700,900&display=swap');
body {
   background-color: hsl(0, 0%, 30%);
}
h1, h2, h3, h4, h5 { font-weight: 700; }
a { 
   color: var(--light); 
   &:hover {      
      color: var(--secondary); 
   }

dyarfi

<div class="container-fluid bg-dark p-1 p-md-5">
   <div class="row bg-light no-gutters p-1 p-md-5">
      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-6">
         <div class="container no-gutters mx-auto">
            <div class="position-relative">
                  <img class="img-fluid ilist-c pt-3 text-center" src="https://placeimg.com/1280/1940/people"/>
                  <div class="img-headline px-3 px-sm-2">Be Happy and Smile!</div>               
</div>
            <div class="small mt-2 text-center">Text by : <a href="https://www.lipsum.com/" target="_blank" class="text-muted">Lipsum</a> and Image by : <a href="https://placeimg.com" target="_blank" class="text-muted">Placeimg</a>.
      Made by <a href="https://dyarfi.github.io/" target="_blank" class="text-muted">dyarfi.github.io</a></div>

dyarfi

@import "https://fonts.googleapis.com/css?family=Playfair+Display:300,400,600,700,900";
body {
   font-size: .95rem;
}
h1,h2,h3,h4,h4 {
   font-family: 'Playfair Display', sans-serif;
   font-weight: 900;
}
.content {
   &:first-letter {