123

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.

            
              <body>
<div class="text-center">

    <h1 id="title" class=" text-primary text-center rwanda">Rwanda</h1>
   <img src="http://www.focolare.org/wp-content/uploads/2017/06/Rwanda-600x399.jpg" class="img-rounded" width="400" height="400"</div>
    <h3>the country of thousand hills</h3>
    <div class="container">
      <div class="item1">

      <div class="p1">
      <h5 style="color:Blue;">KEY GEOGRAPHICAL UNIQUENESS:</h5>
        <p class="a"> 
		Rwanda, warmly known as "the land of a 
		thousand hills’’ is situated in East – 
		central Africa. It lies 121 Km South 
		(75 miles) of the equator in the Tropic 
		of Capricorn, 1416 kilometers (880Miles)
		west of the Indian Ocean and 1250Km 
		(777Miles) east of the Atlantic Ocean – 
		literally the heart of Africa.
		</p>
		</div>
		<br>
		
		<div class="p2">
        <p class="a">  
	Rwanda is bordered by Uganda to the north, 
	Tanzania to the east, Burundi to the south 
	and the Democratic Republic of Congo to the 
	west. The country has a temperate climate, 
	with two rainy seasons (February to April, 
	November to January).
	<br><br>
	Average temperatures range from 16-22 degree 
	Celsius.
	<br><br>
	Anyone visiting the land of a thousand
	hills’ is in for a multitude of surprises:
	<br><br>
	First is the personal safety, peace security
	and stability enjoyed by both citizens
	and visitors of the country.
	</p> 
    </div>	
	<div class="img1">
    <div class="pic1"><img src="https://dx-world.net/wp-content/uploads/2018/05/9x.jpg"></div><br>
	<div class="pic2"><img src="images/rwanda.jpg"></div><br>
	<div class="pic3"><img src="images/gorilla.jpg"></div>
	</div>
      <div class="p4">
	  <p class="a">
      Second there is the beauty of this nation. The landscapes in this green country are truly 
	  breathtaking. Many visitors to Rwanda have remarked that the physical beauty of the country 
	  is without an equal on the African continent. Rwanda has five volcanoes, twenty-three lakes 
	  and numerous rivers, some forming the source of River Nile. Spectacular volcanoes and dense 
	  tropical forests dominate the north of the country, while gentle hills and valleys, calm lakes 
	  and turbulent rivers in both savannah and dense tropical vegetation dominate the rest of the country.</p>
	  <br>

      <p class="a"> 
	  The high altitude forests of the Virunga volcanic mountains, in northern 
	  Rwanda are home to the world’s largest number of endangered mountain gorillas. 
	  Numbering in the hundreds, the gorillas live in protected areas, free from 
	  poachers The gorillas can be viewed in their natural mountain habitats at 
	  a fairly close range.</p> 
	  </div>
	  </div>
	  </div>
	  <br>
          
        
 <div class="container">
<div class="item2">
 <div class="p5">
      <h5 style="color:Blue;">THE PEOPLE</h5>
      <p class="a">Nothing describes Rwanda’s culture better than the 
	  affectionate hospitality of its people, the thrill of its intore
	  culture dancers and singers as well as the usual determined ethic
	  for work and industry. Little wonder some have referred to Rwanda 
	  as a land of a million smiles. The country has a population of 
	  9.1million people. Over 85% of the Rwandans live in rural areas.
	  Rwanda is one of the few countries in Africa, with a sole common 
	  language and culture. Many people who have had a chance to visit 
	  Rwanda have been amused if not intrigued by the actuality that 
	  Rwandans are harmoniously living together afterthe Genocide that 
	  threatened to ruin the social fabric and destroy the centuries of long 
	  interactions among them.</p>
	  </div>
	  
	  <div class="img2">
	   <div class="pic4"><img src="images/dancer1.jpg"></div><br>
	   <div class="pic5"><img src="images/dancer.jpg"></div>
	  </div>
	  <div class="p6">
      <p class="a">Today, not only are Rwandans living together but they also 
	  share the common aspirations as it used to be. Music and dance plays a 
	  central role in the tradition of Rwandans. The Rwandan people have a 
	  diversity of music and dance with an assortment of acts that express 
	  epics celebrating excellence and bravery, humorous lyrics and hunting 
	  roots. Intore Dance Troup is the finest model of Rwanda’s varied and 
	  dynamic traditional musical and dance style. A wide range of traditional 
	  handicrafts is produced in rural Rwanda, ranging from ceramics and baskets 
	  to traditional and contemporary woodcarvings.</p>
	  </div>
	<h4 style="color:black;">if you want to know more about rwanda visit this link below.</h4>
	  <a href="https://en.wikipedia.org/wiki/History_of_Rwanda" target="_blank">about rwanda</a>
	   
      </div>
	  </div>
	  </div>
	  </body>
            
          
!
            
              body {
background:	#DCDCDC;
font-size:15px;
position:relative;
left:center;
top:5px;
}
@media only screen and (max-width: 600px) {
    body {
        background-color:#DCDCDC;}
		}

.p1{
position:relative;
top:2%;
left:2px;
margin-right:35%;
margin-left:10%;
text-align:justify;
box-sizing: border-box;
}
.p2{
margin-right:35%;
margin-left:10%;
padding-top:0%;
text-align: justify;
box-sizing: border-box;
}
.p3{
margin-right:35%;
margin-left:10%;
margin-top:-2%;
text-align: justify;
 box-sizing: border-box;
}
.p4{
margin-right:7%;
margin-left:10%;
margin-top:-65%;
padding-top:3%;
text-align: justify;
box-sizing: border-box;
}
.p5{
margin-right:35%;
margin-left:10%;
margin-top:-2%;
padding-top:3%;
text-align: justify;
box-sizing: border-box;
}
.p6{
margin-right:1%;
margin-left:10%;
margin-top:-65%;
padding-top:10%;
text-align: justify;
box-sizing: border-box;
}
.img-circle{
 width:30%;
 height:auto;
}
.img1{
position:relative;
left:163%;
top:-462px;
margin-bottom:20px;
max-width:100%;
height:auto;
gap:5%;
box-sizing: border-box;
}

.img2{
position:relative;
left:106%;
top:-380px;
margin-bottom: 10px;
width: 100%;
height: auto;
box-sizing: border-box;

}
/*@media only screen and (min-width: 600px){
.img1{
position:relative;
left:98%;
top:-410px;
margin-bottom:10px;
width:80%;
max-width:50px;
height:auto;
gap:5%;
box-sizing: border-box;
}
}*/

.pic1{
position:relative;
left:-98%;
width:30%;
box-sizing: border-box;
}


.pic2{
position:relative;
left:-98%;
width:30%;
box-sizing: border-box;
}


.pic3{
position:relative;
left:-98%;
width:30%;
box-sizing: border-box;
}
.pic4{
 position:relative;
left:-98%;
width: 150%;
margin-top:7%;
box-sizing: border-box;
}
.pic5{
position:relative;
left:-73%;
width:100%;
box-sizing: border-box;
}

p.a {
    font-family:garamond,serif;
	font-size:12pt;
	text-align: justify;
}
.container{
  display:grid;
  grid-template-columns:1fr;
  grid column-gap:10px;
  background:#E6E6FA;
  font-family:garamond,serif;
  width:48%;
  padding-top:-30px;
  column-gap:2px;  
  box-sizing: border-box;
  
  }
  @media (min-width: 481px) and (max-width: 767px) {
  p.a {
    font-family:garamond,serif;
	font-size:8pt;
	text-align: justify;
     }

	 
}
  
  
  .container > div {
  background-color:none;
  text-align: center;
  padding-top:-12px;
  font-size:20px;
  box-sizing: border-box;
  }
  
  
}
.item1{
}
.item2{
  grid-columns:2/1;
  padding-bottom:10px;
    box-sizing: border-box;
}
            
          
!
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.

Console