<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> CSS 3 Rows-3 Columns Grid </title>
<link rel="stylesheet" href="Exercise 007 CSS codes.css">
</head>
<body>
<div class="header">
<div class="header-text">
<h1 style="font-family: Baskerville Old Face;">♦ Raven's Art ♦</h1>
<h4 style="font-family: Baskerville Old Face; margin-top: -40px;"> <i> Welcome to Raven's Website! </i> </h4>
</div>
</div>
<div class="navbar">
<a href="#home"> HOME </a>
<div class="subnav">
<a href="#phoenix_section"> Phoenix </a>
</div>
<div class="subnav">
<a href="#pisces_section"> Pisces </a>
</div>
<div class="subnav">
<a href="#horse_section"> Horse </a>
</div>
<div class="subnav">
<a href="#ninetailed_section"> Nine-tailed Fox </a>
</div>
<div class="subnav">
<a href="#hydra_section"> Hydra </a>
</div>
<div class="subnav">
<a href="https://twitter.com/RavenRose73" target="https://twitter.com/RavenRose73"> Raven's Twitter </a>
</div>
</div>
<div id="row1" class="row">
<div class="column1">
</div>
<div id="row1" class="row">
<div class="column2">
<h1 class="font1"> ♦ Animal Artworks </h1>
<h4 style="margin-top: -10px; margin-left: 17px;"> Created by: Raven </h4>
<a href="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" target="_blank">
<img class="photo1" src="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" alt="Raven short hair" title="Raven" style="float:right; width:200px; height:200px; margin-top: -15px;" hspace="30" vspace="15">
</a>
<h2 class="fonttwo"> ♦ About </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> Jil or "Raven" is currently a 3rd year Multimedia Arts student, enrolled at the University of Perpetual Help System DALTA, Molino. Currently residing at Imus City, Cavite. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> <i> "I chose the Multimedia Arts course because I want to enhance my skills in drawing, graphic designs, animation, video editing and to learn about the continuing development in the fields of multimedia." </i> </h5>
<br> <br>
<hr class="new1">
<a href="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" target="_blank">
<img src="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42816451_2097507573647485_4849142845983948800_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=Pzb9Vwru1PAAX9tVxZp&_nc_ht=scontent.fmnl9-2.fna&oh=991ef3806a54f62191431c83884435de&oe=609BB509" alt="Phoenix" title="Phoenix" style="float:right; width:438px; height:290px;" hspace="20" vspace="5">
</a>
<section id="phoenix_section"></section>
<h2 class="fonttwo"> ♦ Phoenix </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> The phoenix is a long-lived bird associated with Greek mythology that cyclically regenerates or is otherwise born again. Associated with the sun, a phoenix obtains new life by arising from the ashes of its predecessor. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> A phoenix symbolizes birth, death, and rebirth, as well as eternity, strength, and renewal. The whole idea that this mythical bird is reborn from the ashes of the flames of death signifies a journey through fire or adversity. </h5>
<br> <br>
<br> <br>
<hr class="new1">
<a href="https://scontent.fmnl9-1.fna.fbcdn.net/v/t1.6435-9/42790084_2097507373647505_4892638160179167232_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=-ph6TCSb8qwAX-ZEMNm&_nc_ht=scontent.fmnl9-1.fna&oh=8de4fb7a6367c1eb3d02c70534cb329e&oe=609CF601" target="_blank">
<img src="https://scontent.fmnl9-1.fna.fbcdn.net/v/t1.6435-9/42790084_2097507373647505_4892638160179167232_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=-ph6TCSb8qwAX-ZEMNm&_nc_ht=scontent.fmnl9-1.fna&oh=8de4fb7a6367c1eb3d02c70534cb329e&oe=609CF601" alt="Pisces" title="Pisces" style="float:right; width:273px; height:312.5px;" hspace="20" vspace="5">
</a>
<section id="pisces_section"></section>
<h2 class="fonttwo"> ♦ Pisces </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> Pisces is the twelfth astrological sign in the Zodiac. It is a negative, mutable sign. It spans 330° to 360° of celestial longitude. Under the tropical zodiac, the sun transits this area between February 19 and March 20. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> Pisces is a sensitive water sign, ruled by the planet Neptune. Your sign is fluid and tends to be sympathetic to the underdog. It's so easy for you to feel other people's experiences that they can obscure your own. You can be vague and escapist, but make up for it by being compassionate and intuitive. </h5>
<br> <br>
<br> <br>
<br> <br>
<hr class="new1">
<a href="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42780541_2097507056980870_6262511949104283648_n.jpg?_nc_cat=101&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=_Yz_Uvzb71cAX-yH9Pe&_nc_ht=scontent.fmnl9-2.fna&oh=119701869632ad34130f32790748b336&oe=609E3E2A" target="_blank">
<img src="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42780541_2097507056980870_6262511949104283648_n.jpg?_nc_cat=101&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=_Yz_Uvzb71cAX-yH9Pe&_nc_ht=scontent.fmnl9-2.fna&oh=119701869632ad34130f32790748b336&oe=609E3E2A" alt="Horse" title="Horse" style="float:right; width:381.5px; height:312.5px;" hspace="20" vspace="5">
</a>
<section id="horse_section"></section>
<h2 class="fonttwo"> ♦ Horse </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> One of the most present figures in various cultures is horse symbolism. From a straightforward omen to an actual emblem of war, the horse symbol is present in most parts of the world. Understanding this phenomenon is crucial since we will encounter the horse spirit in many moments of our lives, and we must catch its message. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> The main symbols that depict the horse are courage and freedom. This majestic animal is a being of power, independence, freedom, nobleness, endurance, confidence, triumph, heroism, and competition. </h5>
<br> <br>
<br> <br>
<br> <br>
<hr class="new1">
<a href="https://scontent.fmnl9-1.fna.fbcdn.net/v/t1.6435-9/42799453_2097506440314265_3593063378047729664_n.jpg?_nc_cat=109&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=rFGW5Nx5OvcAX9hK9ah&_nc_ht=scontent.fmnl9-1.fna&oh=8be7f936ce07ebebd7b734105b3cb1f7&oe=609C00C0" target="_blank">
<img src="https://scontent.fmnl9-1.fna.fbcdn.net/v/t1.6435-9/42799453_2097506440314265_3593063378047729664_n.jpg?_nc_cat=109&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=rFGW5Nx5OvcAX9hK9ah&_nc_ht=scontent.fmnl9-1.fna&oh=8be7f936ce07ebebd7b734105b3cb1f7&oe=609C00C0" alt="Nine-tailed Fox" title="Nine-tailed Fox" style="float:right; width:434.5px; height:312.5px;" hspace="20" vspace="5">
</a>
<section id="ninetailed_section"></section>
<h2 class="fonttwo"> ♦ Nine-tailed Fox </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> There is a beast whose appearance resembles a fox. It has four feet and nine tails, and makes a sound like a baby. Wisdom and power fill its tail with a new one growing every 100 years. After a millennium on Earth, the worthy fox may ascend to the Heavens and join the gods. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> That is the nine-tailed fox, a deity beast appearing alongside Xi Wangmu (Queen Mother of the West) with the Rabbit, the Toad, and the Three-foot Blue Bird. </h5>
<br> <br>
<br> <br>
<br> <br>
<hr class="new1">
<a href="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42829153_2097510543647188_3055166694713458688_n.jpg?_nc_cat=103&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=1j5DRfz-z-IAX9311jH&_nc_ht=scontent.fmnl9-2.fna&oh=fba1241d9f2aa228a23712fdef282ed2&oe=609E64CD" target="_blank">
<img src="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42829153_2097510543647188_3055166694713458688_n.jpg?_nc_cat=103&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=1j5DRfz-z-IAX9311jH&_nc_ht=scontent.fmnl9-2.fna&oh=fba1241d9f2aa228a23712fdef282ed2&oe=609E64CD" alt="Hydra" title="Hydra" style="float:right; width:341.5px; height:312.5px;" hspace="20" vspace="5">
</a>
<section id="hydra_section"></section>
<h2 class="fonttwo"> ♦ Hydra </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> Hydra, also called the Lernean Hydra, in Greek legend, the offspring of Typhon and Echidna (according to the early Greek poet Hesiod’s Theogony), a gigantic water-snake-like monster with nine heads (the number varies), one of which was immortal. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> The monster’s haunt was the marshes of Lerna, near Árgos, from which he periodically emerged to harry the people and livestock of Lerna. Anyone who attempted to behead the Hydra found that as soon as one head was cut off, two more heads would emerge from the fresh wound. </h5>
</div>
<div id="row1" class="row">
<div class="column3">
</div>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> CSS 3 Rows-3 Columns Grid </title>
<link rel="stylesheet" href="Exercise 007 CSS codes.css">
</head>
<body>
<div class="header">
<div class="header-text">
<h1 style="font-family: Baskerville Old Face;">♦ Raven's Art ♦</h1>
<h4 style="font-family: Baskerville Old Face; margin-top: -40px;"> <i> Welcome to Raven's Website! </i> </h4>
</div>
</div>
<div class="navbar">
<a href="#home"> HOME </a>
<div class="subnav">
<a href="#phoenix_section"> Phoenix </a>
</div>
<div class="subnav">
<a href="#pisces_section"> Pisces </a>
</div>
<div class="subnav">
<a href="#horse_section"> Horse </a>
</div>
<div class="subnav">
<a href="#ninetailed_section"> Nine-tailed Fox </a>
</div>
<div class="subnav">
<a href="#hydra_section"> Hydra </a>
</div>
<div class="subnav">
<a href="https://twitter.com/RavenRose73" target="https://twitter.com/RavenRose73"> Raven's Twitter </a>
</div>
</div>
<div id="row1" class="row">
<div class="column1">
</div>
<div id="row1" class="row">
<div class="column2">
<h1 class="font1"> ♦ Animal Artworks </h1>
<h4 style="margin-top: -10px; margin-left: 17px;"> Created by: Raven </h4>
<a href="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" target="_blank">
<img class="photo1" src="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" alt="Raven short hair" title="Raven" style="float:right; width:200px; height:200px; margin-top: -15px;" hspace="30" vspace="15">
</a>
<h2 class="fonttwo"> ♦ About </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> Jil or "Raven" is currently a 3rd year Multimedia Arts student, enrolled at the University of Perpetual Help System DALTA, Molino. Currently residing at Imus City, Cavite. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> <i> "I chose the Multimedia Arts course because I want to enhance my skills in drawing, graphic designs, animation, video editing and to learn about the continuing development in the fields of multimedia." </i> </h5>
<br> <br>
<hr class="new1">
<a href="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" target="_blank">
<img src="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42816451_2097507573647485_4849142845983948800_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=Pzb9Vwru1PAAX9tVxZp&_nc_ht=scontent.fmnl9-2.fna&oh=991ef3806a54f62191431c83884435de&oe=609BB509" alt="Phoenix" title="Phoenix" style="float:right; width:438px; height:290px;" hspace="20" vspace="5">
</a>
<section id="phoenix_section"></section>
<h2 class="fonttwo"> ♦ Phoenix </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> The phoenix is a long-lived bird associated with Greek mythology that cyclically regenerates or is otherwise born again. Associated with the sun, a phoenix obtains new life by arising from the ashes of its predecessor. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> A phoenix symbolizes birth, death, and rebirth, as well as eternity, strength, and renewal. The whole idea that this mythical bird is reborn from the ashes of the flames of death signifies a journey through fire or adversity. </h5>
<br> <br>
<br> <br>
<hr class="new1">
<a href="https://scontent.fmnl9-1.fna.fbcdn.net/v/t1.6435-9/42790084_2097507373647505_4892638160179167232_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=-ph6TCSb8qwAX-ZEMNm&_nc_ht=scontent.fmnl9-1.fna&oh=8de4fb7a6367c1eb3d02c70534cb329e&oe=609CF601" target="_blank">
<img src="https://scontent.fmnl9-1.fna.fbcdn.net/v/t1.6435-9/42790084_2097507373647505_4892638160179167232_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=-ph6TCSb8qwAX-ZEMNm&_nc_ht=scontent.fmnl9-1.fna&oh=8de4fb7a6367c1eb3d02c70534cb329e&oe=609CF601" alt="Pisces" title="Pisces" style="float:right; width:273px; height:312.5px;" hspace="20" vspace="5">
</a>
<section id="pisces_section"></section>
<h2 class="fonttwo"> ♦ Pisces </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> Pisces is the twelfth astrological sign in the Zodiac. It is a negative, mutable sign. It spans 330° to 360° of celestial longitude. Under the tropical zodiac, the sun transits this area between February 19 and March 20. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> Pisces is a sensitive water sign, ruled by the planet Neptune. Your sign is fluid and tends to be sympathetic to the underdog. It's so easy for you to feel other people's experiences that they can obscure your own. You can be vague and escapist, but make up for it by being compassionate and intuitive. </h5>
<br> <br>
<br> <br>
<br> <br>
<hr class="new1">
<a href="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42780541_2097507056980870_6262511949104283648_n.jpg?_nc_cat=101&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=_Yz_Uvzb71cAX-yH9Pe&_nc_ht=scontent.fmnl9-2.fna&oh=119701869632ad34130f32790748b336&oe=609E3E2A" target="_blank">
<img src="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42780541_2097507056980870_6262511949104283648_n.jpg?_nc_cat=101&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=_Yz_Uvzb71cAX-yH9Pe&_nc_ht=scontent.fmnl9-2.fna&oh=119701869632ad34130f32790748b336&oe=609E3E2A" alt="Horse" title="Horse" style="float:right; width:381.5px; height:312.5px;" hspace="20" vspace="5">
</a>
<section id="horse_section"></section>
<h2 class="fonttwo"> ♦ Horse </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> One of the most present figures in various cultures is horse symbolism. From a straightforward omen to an actual emblem of war, the horse symbol is present in most parts of the world. Understanding this phenomenon is crucial since we will encounter the horse spirit in many moments of our lives, and we must catch its message. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> The main symbols that depict the horse are courage and freedom. This majestic animal is a being of power, independence, freedom, nobleness, endurance, confidence, triumph, heroism, and competition. </h5>
<br> <br>
<br> <br>
<br> <br>
<hr class="new1">
<a href="https://scontent.fmnl9-1.fna.fbcdn.net/v/t1.6435-9/42799453_2097506440314265_3593063378047729664_n.jpg?_nc_cat=109&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=rFGW5Nx5OvcAX9hK9ah&_nc_ht=scontent.fmnl9-1.fna&oh=8be7f936ce07ebebd7b734105b3cb1f7&oe=609C00C0" target="_blank">
<img src="https://scontent.fmnl9-1.fna.fbcdn.net/v/t1.6435-9/42799453_2097506440314265_3593063378047729664_n.jpg?_nc_cat=109&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=rFGW5Nx5OvcAX9hK9ah&_nc_ht=scontent.fmnl9-1.fna&oh=8be7f936ce07ebebd7b734105b3cb1f7&oe=609C00C0" alt="Nine-tailed Fox" title="Nine-tailed Fox" style="float:right; width:434.5px; height:312.5px;" hspace="20" vspace="5">
</a>
<section id="ninetailed_section"></section>
<h2 class="fonttwo"> ♦ Nine-tailed Fox </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> There is a beast whose appearance resembles a fox. It has four feet and nine tails, and makes a sound like a baby. Wisdom and power fill its tail with a new one growing every 100 years. After a millennium on Earth, the worthy fox may ascend to the Heavens and join the gods. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> That is the nine-tailed fox, a deity beast appearing alongside Xi Wangmu (Queen Mother of the West) with the Rabbit, the Toad, and the Three-foot Blue Bird. </h5>
<br> <br>
<br> <br>
<br> <br>
<hr class="new1">
<a href="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42829153_2097510543647188_3055166694713458688_n.jpg?_nc_cat=103&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=1j5DRfz-z-IAX9311jH&_nc_ht=scontent.fmnl9-2.fna&oh=fba1241d9f2aa228a23712fdef282ed2&oe=609E64CD" target="_blank">
<img src="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/42829153_2097510543647188_3055166694713458688_n.jpg?_nc_cat=103&ccb=1-3&_nc_sid=cdbe9c&_nc_ohc=1j5DRfz-z-IAX9311jH&_nc_ht=scontent.fmnl9-2.fna&oh=fba1241d9f2aa228a23712fdef282ed2&oe=609E64CD" alt="Hydra" title="Hydra" style="float:right; width:341.5px; height:312.5px;" hspace="20" vspace="5">
</a>
<section id="hydra_section"></section>
<h2 class="fonttwo"> ♦ Hydra </h2>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> Hydra, also called the Lernean Hydra, in Greek legend, the offspring of Typhon and Echidna (according to the early Greek poet Hesiod’s Theogony), a gigantic water-snake-like monster with nine heads (the number varies), one of which was immortal. </h5>
<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> The monster’s haunt was the marshes of Lerna, near Árgos, from which he periodically emerged to harry the people and livestock of Lerna. Anyone who attempted to behead the Hydra found that as soon as one head was cut off, two more heads would emerge from the fresh wound. </h5>
</div>
<div id="row1" class="row">
<div class="column3">
</div>
</div>
</body>
</html>