18BCE0557 KUSHAL

IWP: LAB-2

My Favourite Pet

WebSite Characteristics:
- Css hover transition
- Css table view
- Hyperlinks
- Self page section linking
- Different page section linking

Click on header for going to the bottom section of the page.

Screen Shots:
Index.html code:
<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​link​ ​rel​=​"stylesheet"​ ​href​=​"./style.css"​>
​<​script​ ​src​=​"./script.js"​></​script​>
​<​link​ ​rel​=​"shortcut icon"​ ​href​=​"./images/pawprint.png"
type​=​"image/x-icon"​>
​<​title​>​My Favourite Animal​</​title​>

</​head​>

<​body​>
​<​a​ ​href​=​"#dog-breeds"​>
​<​header​>
​<​div​ ​style​=​"display: inline-block;"​>
​<​img​ ​src​=​"./images/icons8-dog-64.png"​ ​alt​=​"dog icon"​>
A website for Dogs and Cats! by 18BCE0557 KUSHAL
​<​img​ ​src​=​"./images/icons8-cat-64.png"​ ​alt​=​"cat icon"​>
​</​div​>
​</​header​>
</​a​>
​<​div​ ​class​=​"row"​>
​<​div​ ​class​=​"column"​>
​<​img​ ​class​=​"image"​ ​src​=​"./images/dog2.jpg"​ ​alt​=​"dog 2"
style​=​"float: left;"​>
​</​div​>
​<​div​ ​class​=​"column"​>
​<​img​ ​class​=​"image"​ ​src​=​"./images/cat1.jpg"​ ​alt​=​"cat 1"
style​=​"float: right;"​>
​</​div​>
​</​div​>
​<​div​ ​class​=​"row"​>
​<​div​ ​class​=​"column"​>
​<​h3​ ​style​=​"float: left;"​ ​class​=​"h3"​>​Qualities of Dogs​</​h3​>
​</​div​>
​<​div​ ​class​=​"column"​>
​<​h3​ ​style​=​"float: right;"​ ​class​=​"h3"​>​Qualities of Cats​</​h3​>
 ​</​div​>
​</​div​>
​<​div​ ​class​=​"row"​>
​<​div​ ​class​=​"column"​ ​style​=​"float: left;"​>
​<​ol​>
​<​li​>​Loyalty​</​li​>
​<​li​>​Unconditional Love​</​li​>
​<​li​>​Internal and External Satisfaction​</​li​>
​<​li​>​Simple Mindset​</​li​>
​<​li​>​Being Selfless​</​li​>
​</​ol​>
​<​h4​ ​class​=​"h4"​>​Read More by clicking ​<​a
href​=​"https://medium.com/@AceGreen1989/5-characteristics-we-should-learn-f
rom-dogs-c569acf811ac"​ ​target​=​"_blank"​>​here​</​a​></​h4​>
​</​div​>
​<​div​ ​class​=​"column"​ ​style​=​"float: right;"​>
​<​ol​>
​<​li​>​Loving and Caring​</​li​>
​<​li​>​Curious​</​li​>
​<​li​>​Playful​</​li​>
​<​li​>​Cuddly​</​li​>
​<​li​>​Adventurous​</​li​>
​</​ol​>
​<​h4​ ​class​=​"h4"​>​Read More by clicking ​<​a
href​=​"https://www.lovemeow.com/top-15-cat-qualities-1607997052.html"
target​=​"_blank"​>​here​</​a​></​h4​>
​</​div​>
​</​div​>

​<​hr​>

​<​div​ ​style​=​"text-align: center; margin-bottom: 5px;"​><​a

href​=​"./dog_breeds.html"​ ​id​=​"dog-breeds"​><​h3​>​Let's talk about Dog
Breeds​</​h3​></​a​></​div​>
​<​div​ ​style​=​"text-align: center; margin-bottom: 3px; border: 2px solid
lightblue;"​>​Afghan Hound​</​div​>
 ​<​div​ ​style​=​"text-align: center; margin-bottom: 3px; border: 2px solid
lightblue;"​>​Aussiepom​</​div​>
​<​div​ ​style​=​"text-align: center; margin-bottom: 3px; border: 2px solid
lightblue;"​>​Bocker​</​div​>
</​body​>

</​html​>

Dog_breeds.html
<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​link​ ​rel​=​"stylesheet"​ ​href​=​"./style.css"​>
​<​script​ ​src​=​"./script.js"​></​script​>
​<​link​ ​rel​=​"shortcut icon"​ ​href​=​"./images/pawprint.png"
type​=​"image/x-icon"​>
​<​title​>​Dog Breeds​</​title​>
</​head​>
<​body​>
​<​header​>
​<​div​ ​style​=​"display: inline-block;"​>
Lets talk about Dog Breeds!
​</​div​>
​</​header​>

​<​ul​>
​<​li​>
​<​div​><​a
href​=​"https://www.google.com/search?client=firefox-b-d&q=afghan+hound"​>​Afg
han Hound​</​a​>​ ​<​img​ ​src​=​"./images/file_23004_afghan-hound-300x189.png"
alt​=​"Afghan"​ ​style​=​"border-radius: 50%; width: 80px;"​></​div​>
​</​li​>
​<​li​>
​<​div​><​a
href​=​"https://www.google.com/search?client=firefox-b-d&q=aussiepom"​>
Aussiepom​</​a​>​ ​<​img
src​=​"./images/aussiepom-mixed-dog-breed-pictures-cover-650x368.png"
alt​=​"Aussiepom"​ ​style​=​"border-radius: 50%; width: 80px;"​></​div​>
​</​li​>
​<​li​>
​<​div​><​a
href​=​"https://www.google.com/search?client=firefox-b-d&q=bocker+dog"​>
Bocker ​</​a​><​img
src​=​"./images/bocker-mixed-dog-breed-pictures-cover-650x368.png"
alt​=​"Bocker"​ ​style​=​"border-radius: 50%; width: 80px;"​></​div​>
​</​li​>
​</​ul​>
​<​div​><​h3​><​a​ ​href​=​"./index.html#dog-breeds"​>​Go Back to Dog Breeds
Section of Previous Page​</​a​></​h3​></​div​>
</​body​>
</​html​>

Style.css
body​ {
​background-color​: ​beige​;
}

header​ {
​background-color​: ​azure​;
​padding​: ​15px​;
​margin​: ​10​;
​border​: ​7px​ ​solid​ ​lightblue​;
​text-align​: ​center​;
​vertical-align​: ​middle​;
​transition​: ​0.5s​;
}

header:hover​ {
​background-color​: ​azure​;
​padding​: ​20px​;
​text-align​: ​center​;
​text-decoration​: ​solid​;
 ​color​: ​blueviolet​;
}

.image​ {
​width​: ​430px​;
​margin​: ​40px​;
​border​: ​2px​ ​solid​ ​lightblue​;
​transition​: ​0.5s​;
}
.image:hover​ {
​width​: ​450px​;
}

.row::after​ {
​content​: ​""​;
​clear​: ​both​;
​display​: ​table​;
}
.h3​ {
​margin-left​: ​70px​;
​margin-right​: ​70px​;
}

.h4​ {
​margin-left​: ​26px​;
​margin-right​: ​26px​;
}

Images used:
- Unsplash

----------------------------------------------------------------------------------------------------------------------------