EXERCISE 7- (3 Column CSS LAYOUT)

December 07, 2021

EXERCISE 7- (3 Column CSS LAYOUT)

.column1 {

float: left;

width: 15%;

padding: 10px;

height: 500px; /* Should be removed. Only for demonstration */

background-color:#00CDFE;

color:#1484CD;

}

.column2 {

border: 10px solid #aaa;

float: left;

width: 70%;

padding: 10px;

height: 500px; /* Should be removed. Only for demonstration */

}

.column3 {

float: right;

width: 15%;

padding: 10px;

height: 500px; /* Should be removed. Only for demonstration */

background-color:#00CDFE;

color:#1484CD;

}

* {

box-sizing: border-box;

}

.row::after {

content: "";

clear: both;

display: table;

}

[class*="col-"] {

float: left;

padding: 15px;

}

html {

font-family: "Lucida Sans", sans-serif;

color : #1484CD;

}

.header {

color:#1484CD;

padding: 15px;

}

h1{ color : #1484CD;

}

.menu ul {

color:white;

list-style-type: none;

margin: 0;

padding: 0;

}

.menu li {

color:white;

list-style-type: none;

padding: 8px;

margin-bottom: 7px;

background-color: #00CDFE;

color: #1484CD;

text-align:center;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.menu li:hover {

background-color:#7BD9F6;

color:white;

}

.aside {

background-color: #00CDFE;

padding: 15px;

color: #1484CD;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.footer {

border: 10px solid white;

background-color: #00CDFE;

color: #1484CD;

text-align: center;

font-size: 12px;

padding: 10px;

}

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}

@media only screen and (min-width: 600px) {

/* For tablets: */

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

}

@media only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

img{

float:right;

}

</style>

<ul>

<li>ISLAND</li>

</ul>

</div>

<ul>

<li>ISTHMUS</li>

</ul>

</div>

<ul>

<li>PENINSULA</li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<h2>Column 1</h2>

<p>Column Left</p>

</div>

<h1>ISLAND</h1>

<p>An island is an area of land that is surrounded by water. Islands can be found in all bodies of water, from streams and rivers to lakes, seas, and oceans. The two main types of islands are oceanic islands and continental islands.</p>

<p>Oceanic islands are the tops of underwater volcanoes. An oceanic island forms when a volcano erupts deep under the <a href="https://kids.britannica.com/kids/article/ocean/346185">ocean</a> and pushes the ocean floor upward into a mountain. The island is the top of that mountain. The Hawaiian Islands are examples of oceanic islands.</p>

<h2>Column 3</h2>

<p>Column Right..</p>

</div>

<h2>Column 4</h2>

<p>Column Left</p>

</div>

<h1>ISTHMUS</h1>

<p>An isthmus is a narrow strip of land with water on both sides that connects two large pieces of land. Isthmuses are important because they allow plant and animal species to migrate between the two land masses. However, people often construct <a href="https://kids.britannica.com/students/article/canal/273476">canals</a> across isthmuses to allow shipping between the separated bodies of water. Well-known isthmuses include the Isthmus of Panama, connecting North and South America, and the Isthmus of Suez, connecting Africa and Asia. The <a href="https://kids.britannica.com/students/article/Panama-Canal/276264">Panama Canal</a> splits the Isthmus of Panama to connect the Atlantic and Pacific oceans, and the <a href="https://kids.britannica.com/students/article/Suez-Canal/277946">Suez Canal</a> runs across the Isthmus of Suez to link the Mediterranean and Red seas.</p>

<h2>Column 6</h2>

<p>Column Right..</p>

</div>

<h2>Column 7</h2>

<p>Column Left</p>

</div>

<h1>PENINSULA</h1>

<p>A body of land surrounded by water on three sides is called a peninsula. The word comes from the Latin <em>paene insula,</em> meaning “almost an island.” In the United States Florida is the most obvious peninsula. Alaska also fits the definition, though it is very large and has a number of its own peninsulas. On the East coast the Delmarva Peninsula (named after Delaware, Maryland, and Virginia) lies between Chesapeake Bay and the Atlantic…</p>

<h2>Column 9</h2>

<p>Column Right..</p>

</div>

Search This Blog

The Artworks

EXERCISE 7- (3 Column CSS LAYOUT)

Comments

Post a Comment

Popular Posts

Personal Branding

Portfolio Photography