diff --git a/README.md b/README.md deleted file mode 100644 index 3c5c687..0000000 --- a/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# batch9-activities -batch-9 activities repositories diff --git a/batal-jerald/chessboard_flex/chessboard-flex.html b/batal-jerald/chessboard_flex/chessboard-flex.html new file mode 100644 index 0000000..0ee78e2 --- /dev/null +++ b/batal-jerald/chessboard_flex/chessboard-flex.html @@ -0,0 +1,109 @@ + + + + Chessboard Flex + + + + + + +

Responsive Chessboard (Flex) + +
+ +
♖
+
♘
+
♗
+
♕
+
♔
+
♗
+
♘
+
♖
+ +
♙
+
♙
+
♙
+
♙
+
♙
+
♙
+
♙
+
♙
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
♟
+
♟
+
♟
+
♟
+
♟
+
♟
+
♟
+
♟
+ +
♜
+
♞
+
♝
+
♛
+
♚
+
♝
+
♞
+
♜
+ +
+ + + + \ No newline at end of file diff --git a/batal-jerald/chessboard_flex/images/chess.jpg b/batal-jerald/chessboard_flex/images/chess.jpg new file mode 100644 index 0000000..49c707b Binary files /dev/null and b/batal-jerald/chessboard_flex/images/chess.jpg differ diff --git a/batal-jerald/chessboard_flex/images/chessbg.jpg b/batal-jerald/chessboard_flex/images/chessbg.jpg new file mode 100644 index 0000000..79a4b04 Binary files /dev/null and b/batal-jerald/chessboard_flex/images/chessbg.jpg differ diff --git a/batal-jerald/chessboard_flex/images/chesss.jpg b/batal-jerald/chessboard_flex/images/chesss.jpg new file mode 100644 index 0000000..fa9ef1f Binary files /dev/null and b/batal-jerald/chessboard_flex/images/chesss.jpg differ diff --git a/batal-jerald/chessboard_flex/images/wallpaper.jpg b/batal-jerald/chessboard_flex/images/wallpaper.jpg new file mode 100644 index 0000000..afa3a16 Binary files /dev/null and b/batal-jerald/chessboard_flex/images/wallpaper.jpg differ diff --git a/batal-jerald/chessboard_flex/images/wp2418790-king-and-queen-wallpapers.png b/batal-jerald/chessboard_flex/images/wp2418790-king-and-queen-wallpapers.png new file mode 100644 index 0000000..aa0772a Binary files /dev/null and b/batal-jerald/chessboard_flex/images/wp2418790-king-and-queen-wallpapers.png differ diff --git a/batal-jerald/chessboard_flex/style-flex.css b/batal-jerald/chessboard_flex/style-flex.css new file mode 100644 index 0000000..5690577 --- /dev/null +++ b/batal-jerald/chessboard_flex/style-flex.css @@ -0,0 +1,60 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-image:url(./images/wp2418790-king-and-queen-wallpapers.png) ; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center; + background-size: cover; + text-align: center; + margin-top: 5.1vw; + font-family:'Courier New', Courier, monospace; + color: white; +} +h1 { + font-size: 1.7vw; +} + +.chessboard { + display: flex; + flex-wrap: wrap; + width: 30.3vw; + height: 30.3vw; + margin: 3.3vw auto; + border-style: groove; + border-color: #DEB887; + font-size:2.3vw; +} + +.chessboard > div { + width:12.5%; + height: 12.5%; +} + +.odd { + background:#DEB887; + cursor: pointer; + transition: transform .2s; +} + +.even { + background:#CD853F; + cursor: pointer; +} + +.chessboard > div:nth-child(n+30):nth-child(-n+64){ + color: #222; +} + +.chessboard > div:nth-child(n+49):nth-child(-n+64):hover{ + background-color: greenyellow; + transform: translateY(-10px); +} + +.chessboard > div:nth-child(n+1):nth-child(-n+16):hover { + transform: translateY(10px); + background-color: greenyellow; +} \ No newline at end of file diff --git a/batal-jerald/chessboard_grid/chessboard-grid.html b/batal-jerald/chessboard_grid/chessboard-grid.html new file mode 100644 index 0000000..4181140 --- /dev/null +++ b/batal-jerald/chessboard_grid/chessboard-grid.html @@ -0,0 +1,111 @@ + + + + + + + + Chessboard Grid + + + +

Responsive Chessboard (Grid) + +
+ +
♖
+
♘
+
♗
+
♕
+
♔
+
♗
+
♘
+
♖
+ +
♙
+
♙
+
♙
+
♙
+
♙
+
♙
+
♙
+
♙
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
♟
+
♟
+
♟
+
♟
+
♟
+
♟
+
♟
+
♟
+ +
♜
+
♞
+
♝
+
♛
+
♚
+
♝
+
♞
+
♜
+ +
+ + + diff --git a/batal-jerald/chessboard_grid/images/chess.jpg b/batal-jerald/chessboard_grid/images/chess.jpg new file mode 100644 index 0000000..49c707b Binary files /dev/null and b/batal-jerald/chessboard_grid/images/chess.jpg differ diff --git a/batal-jerald/chessboard_grid/images/chessbg.jpg b/batal-jerald/chessboard_grid/images/chessbg.jpg new file mode 100644 index 0000000..79a4b04 Binary files /dev/null and b/batal-jerald/chessboard_grid/images/chessbg.jpg differ diff --git a/batal-jerald/chessboard_grid/images/chesss.jpg b/batal-jerald/chessboard_grid/images/chesss.jpg new file mode 100644 index 0000000..fa9ef1f Binary files /dev/null and b/batal-jerald/chessboard_grid/images/chesss.jpg differ diff --git a/batal-jerald/chessboard_grid/images/wallpaper.jpg b/batal-jerald/chessboard_grid/images/wallpaper.jpg new file mode 100644 index 0000000..afa3a16 Binary files /dev/null and b/batal-jerald/chessboard_grid/images/wallpaper.jpg differ diff --git a/batal-jerald/chessboard_grid/images/wp2418790-king-and-queen-wallpapers.png b/batal-jerald/chessboard_grid/images/wp2418790-king-and-queen-wallpapers.png new file mode 100644 index 0000000..aa0772a Binary files /dev/null and b/batal-jerald/chessboard_grid/images/wp2418790-king-and-queen-wallpapers.png differ diff --git a/batal-jerald/chessboard_grid/style-grid.css b/batal-jerald/chessboard_grid/style-grid.css new file mode 100644 index 0000000..abd8926 --- /dev/null +++ b/batal-jerald/chessboard_grid/style-grid.css @@ -0,0 +1,56 @@ +* { + margin: 0; + padding: 0 +} + +body { + background-image:url(./images/wp2418790-king-and-queen-wallpapers.png) ; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center; + background-size: cover; + text-align: center; + margin-top: 100px; + font-family:'Courier New', Courier, monospace; + color: white; +} + +.chessboard { + display: grid; + grid-template-columns: repeat(8, 12.5%); + grid-template-rows: repeat(8, 12.5%); + font-size: 45px; + max-width:580px; + height: 580px; + margin: 60px auto; + border-style: groove; + border-color: #DEB887; +} + +.odd { + position: relative; + background:#DEB887; + cursor: pointer; + transition: transform .2s; +} + +.even { + position: relative; + background:#CD853F; + cursor: pointer; +} + +.chessboard > div:nth-child(n+33):nth-child(-n+64){ + color: #222; +} + + +.chessboard > div:nth-child(n+49):nth-child(-n+64):hover{ + background-color: greenyellow; + transform: translateY(-10px); +} + +.chessboard > div:nth-child(n+1):nth-child(-n+16):hover { + transform: translateY(10px); + background-color: greenyellow; +} \ No newline at end of file diff --git a/batal-jerald/survey_form/images/Background Color In Html.jpg b/batal-jerald/survey_form/images/Background Color In Html.jpg new file mode 100644 index 0000000..a2f2090 Binary files /dev/null and b/batal-jerald/survey_form/images/Background Color In Html.jpg differ diff --git a/batal-jerald/survey_form/images/check.png b/batal-jerald/survey_form/images/check.png new file mode 100644 index 0000000..00f0e19 Binary files /dev/null and b/batal-jerald/survey_form/images/check.png differ diff --git a/batal-jerald/survey_form/images/heart.jpg b/batal-jerald/survey_form/images/heart.jpg new file mode 100644 index 0000000..380db49 Binary files /dev/null and b/batal-jerald/survey_form/images/heart.jpg differ diff --git a/batal-jerald/survey_form/images/inalid.png b/batal-jerald/survey_form/images/inalid.png new file mode 100644 index 0000000..c92c7c2 Binary files /dev/null and b/batal-jerald/survey_form/images/inalid.png differ diff --git a/batal-jerald/survey_form/images/wallpapertip_love-background-wallpaper_131771.jpg b/batal-jerald/survey_form/images/wallpapertip_love-background-wallpaper_131771.jpg new file mode 100644 index 0000000..57ceb1f Binary files /dev/null and b/batal-jerald/survey_form/images/wallpapertip_love-background-wallpaper_131771.jpg differ diff --git a/batal-jerald/survey_form/index.html b/batal-jerald/survey_form/index.html new file mode 100644 index 0000000..d9d6fa2 --- /dev/null +++ b/batal-jerald/survey_form/index.html @@ -0,0 +1,85 @@ + + + + + + + + Dating Form Survey + + +
+ +
+

Dating Form Survey

+
+ +
+

Answer this dating form, and you find strong relationship <3

+ +
+
+ + +
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ + +
+

How would you describe your personality?

+ + + + +
+ +
+

What traits do you look for in a partner?

+ + + + +
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ + diff --git a/batal-jerald/survey_form/style.css b/batal-jerald/survey_form/style.css new file mode 100644 index 0000000..7f5b4a0 --- /dev/null +++ b/batal-jerald/survey_form/style.css @@ -0,0 +1,186 @@ +/* HTML tags */ + +body { + padding: 0%; + background-image: url('./images/heart.jpg'); + background-attachment: fixed; + background-size: cover; +} + +label, span { + display: flex; + margin-bottom: 0.5rem; +} + +input, button, select, textarea { + font-family: inherit; + font-size: inherit; +} + +#radio label, #checkbox label { + text-align: start; + font-size:1rem !important; + font-weight:100; +} + +span { + margin-left:7px; + color: red; +} +h3 { + text-align: start; +} +/* ID */ + +#main { + margin-top: 1% !important; + margin-bottom: 1% !important; + width: 45%; + margin: auto; + text-align: center; + border-style:ridge; + background-color: white; +} + + +#title h1 { + color: black; + font-weight: bolder; + font-weight: 600; + line-height: 1.2; +} + +#description { + margin: 4% 10%; + padding:20px 0px; + text-align: center; + font-style: italic; + font-weight: 200; + font-size: 1.3rem; + text-shadow: 1px 1px 1px rgba(0,0,0,0.4); +} + +#radio label, #checkbox label, #text label{ + margin-bottom: 5%; + font-size: 1.5rem; +} + +#survey-form { + margin: 0% 8%; +} + +/* Input types */ + +input[type=text], input[type=email] { + display: block; + width: 100%; + padding: 10px 20px; + border: 1px solid #ccc; + border-radius: 6px; + box-sizing: border-box; +} + +#radio [type=text], #checkbox [type=text] { + width: 20%; +} + +input[type=number], select { + display: block; + width: 50%; + padding: 10px 20px; + border: 1px solid #ccc; + border-radius: 6px; + box-sizing: border-box; +} + +input[type=radio], input[type=checkbox] { + margin-right: 2rem; + transition: all 0.15s ease-out 0s; + cursor: pointer; +} + +input[type=radio]:after { + width: 15px; + height: 15px; + border-radius: 15px; + top: -2px; + left: -1px; + position: relative; + background-color: #ffff; + content: ''; + display: inline-block; + visibility: visible; + border: 2px solid gray; +} + +input[type=checkbox]:after { + width: 15px; + height: 15px; + top: -2px; + left: -1px; + position: relative; + background-color: #ffff; + content: ''; + display: inline-block; + visibility: visible; + border: 2px solid gray; +} + +input[type=radio]:checked:after, input[type=checkbox]:checked:after { + width: 15px; + height: 15px; + top: -2px; + left: -1px; + position: relative; + background-color: #008CBA; + content: ''; + display: inline-block; + visibility: visible; + border: 2px solid white; +} + +input:focus:invalid { + background-image: url(./images/inalid.png); + background-position:99%; + background-size: 15px; + background-repeat: no-repeat; +} + +input:required:valid { + background-image: url(./images/check.png); + background-position:99%; + background-size: 15px; + background-repeat: no-repeat; +} + +/* Text Area */ + +textarea { + width: 90%; + padding: 1rem; + font-size: 1.1rem; + outline: none; +} + +/* Button */ + +button { + background-color: #008CBA; + border: none; + color: #fff; + padding: 15px 32px; + font-size: 16px; + margin: 20px 2px; + cursor: pointer; + border-radius:10px; + width: 95%; +} + + +/* Media Queries */ + +@media (max-width: 1252px) { + #main { + width: 75%; + } +} \ No newline at end of file diff --git a/batal-jerald/survey_form/success.html b/batal-jerald/survey_form/success.html new file mode 100644 index 0000000..7e53733 --- /dev/null +++ b/batal-jerald/survey_form/success.html @@ -0,0 +1,26 @@ + + + + + + + Document + + + +

Successfully fill up your dating form

+ + + \ No newline at end of file diff --git a/batal-jerald/tribute_page/images/brian.jpg b/batal-jerald/tribute_page/images/brian.jpg new file mode 100644 index 0000000..8a6c2b9 Binary files /dev/null and b/batal-jerald/tribute_page/images/brian.jpg differ diff --git a/batal-jerald/tribute_page/images/kian.jpg b/batal-jerald/tribute_page/images/kian.jpg new file mode 100644 index 0000000..1bdac74 Binary files /dev/null and b/batal-jerald/tribute_page/images/kian.jpg differ diff --git a/batal-jerald/tribute_page/images/markus.png b/batal-jerald/tribute_page/images/markus.png new file mode 100644 index 0000000..4e139fa Binary files /dev/null and b/batal-jerald/tribute_page/images/markus.png differ diff --git a/batal-jerald/tribute_page/images/nicholas.jpg b/batal-jerald/tribute_page/images/nicholas.jpg new file mode 100644 index 0000000..354de9a Binary files /dev/null and b/batal-jerald/tribute_page/images/nicholas.jpg differ diff --git a/batal-jerald/tribute_page/images/shane.png b/batal-jerald/tribute_page/images/shane.png new file mode 100644 index 0000000..29a32ea Binary files /dev/null and b/batal-jerald/tribute_page/images/shane.png differ diff --git a/batal-jerald/tribute_page/images/westlife _logo.jpg b/batal-jerald/tribute_page/images/westlife _logo.jpg new file mode 100644 index 0000000..cd7be05 Binary files /dev/null and b/batal-jerald/tribute_page/images/westlife _logo.jpg differ diff --git a/batal-jerald/tribute_page/images/westlife.jpg b/batal-jerald/tribute_page/images/westlife.jpg new file mode 100644 index 0000000..1ee4997 Binary files /dev/null and b/batal-jerald/tribute_page/images/westlife.jpg differ diff --git a/batal-jerald/tribute_page/images/westlife_members.jpg b/batal-jerald/tribute_page/images/westlife_members.jpg new file mode 100644 index 0000000..733b91b Binary files /dev/null and b/batal-jerald/tribute_page/images/westlife_members.jpg differ diff --git a/batal-jerald/tribute_page/index.html b/batal-jerald/tribute_page/index.html new file mode 100644 index 0000000..8b08c00 --- /dev/null +++ b/batal-jerald/tribute_page/index.html @@ -0,0 +1,160 @@ + + + + + + + + + Tribute Page + + + +
+ + +
+
+

Westlife Boy Band 1998

+ +

Westlife are an Irish boy band group, formed in 1998 in Sligo, Ireland. They disbanded in 2012 and reunited in 2018. ... The group currently consists of Shane Filan, Markus Feehily, Kian Egan, and Nicky Byrne. They have a total of thirteen major album releases, twelve of which are studio albums.

+
+ +
+
+

Wikipedia

+

They have a total of thirteen major album releases, twelve of which are studio albums. Five albums are as a five-piece and eight are as a four-piece. The group rose to fame with their debut international self-titled studio album, Westlife (1999). It was followed by Coast to Coast (2000), World of Our Own (2001), Unbreakable – The Greatest Hits Vol. 1 (2002), and Turnaround (2003), which continued the group's success worldwide. Before the start of their Turnaround Tour in 2004, one of the original members, Brian McFadden, departed from the band. The four remaining members continued as a group to release their cover albums Allow Us to Be Frank (2004) and The Love Album (2006) and the studio albums Face to Face (2005) and Back Home (2007). After a hiatus of studio recording for almost one year in 2008, they regrouped and released the studio albums Where We Are (2009), and Gravity (2010), and the compilation album Greatest Hits (2011). After eight years, the quartet group released their eleventh studio album, Spectrum, in 2019.

+

They generated singles such as "Swear It Again", "If I Let You Go", "Flying Without Wings", "I Have a Dream", "Seasons in the Sun", "Fool Again", "My Love", "What Makes a Man", "I Lay My Love On You", "Uptown Girl", "Unbreakable", "When You're Looking Like That", "Queen of My Heart", "Mandy", "Tonight", "Hey Whatever", "You Raise Me Up", "Bop Bop Baby", "The Rose", and "World of Our Own". 19 out their 29 singles as lead artist and as featured artist received UK certifications from 1999 to 2019, 17 out of 29 singles from 1999 to 2009 reached the top 2 on the UK Singles Chart. They are the top act with most Number 1 debuts on the UK Singles Chart, with all 14 of their chart-toppers landing there in their first week.[4] They have the second most certifications for a boy band in the UK Singles Chart after Take That and the most singles certifications for a pop band on the UK number one singles artists chart since The Beatles.

+ View more +
+ + +
+
+ +

History

+

The new group, formed on 3 July 1998, was renamed Westside but that name was already in use by another band, so it was changed to Westlife. It was revealed that Walsh was already calling them Westlife before Westside name came along.[18] In Westlife – Our Story, Byrne revealed that, unlike the others in the group, he was keen to change the name to West High. McFadden also changed the spelling of his name to Bryan to make it easier to sign autographs. They managed to secure a major record deal the second time around under BMG with all other record labels competed. They have signed a four million pound record deal with RCA Records. Westlife's first big break came in 1998 when they opened for Boyzone and Backstreet Boys' concerts in Dublin. Boyzone singer Ronan Keating was brought in to co-manage the group with Walsh. Later, they won a special Smash Hits Roadshow award at that year's Smash Hits Poll Winners Party. Their first live television performance as a group in Ireland and worldwide was on the Irish TV series and the world's second longest-running late-night talk show, The Late Late Show that had its broadcast on 13 November 1998. They performed "Flying Without Wings".[19] The band then released an EP titled Swear It Again afterwards. Both recorded songs under Westside were produced by Steve Mac and written by Mac and Wayne Hector. The debut extended play and single was chosen by Cowell with the guidance of his father, Eric Cowell. His father stated then, "I think they will be big".[18]

+ + +

Shane Steven Filan (born 5 July 1979)

+

is an Irish singer and songwriter. He is one of the two lead singers of boy band Westlife, which was formed in 1998, disbanded in 2012, and regrouped in 2018. Westlife have released thirteen albums, embarked on twelve world tours, and won several awards, becoming one of the most successful musical groups of all time.

+ + +

Markus Michael Patrick Feehily (born 28 May 1980)

+

is an Irish singer and songwriter. He is one of the two lead singers of the vocal group Westlife. He is the youngest in the band.

+ + + +

Kian John Francis Kelly Egan (born 29 April 1980, Sligo, Ireland)

+

is a member of the Irish boyband, Westlife and coach on The Voice. He was ranked as Ireland's third sexiest man in 2014. ... Egan married actress/singer Jodi Albert (who is a singer of the girlband Wonderland) on 8 May 2009 in Barbados.

+ + +

Nicholas Bernard James (born 9 October 1978)

+

is an Irish singer, songwriter, radio presenter, dancer, television presenter and former professional footballer, best known for being a member of Irish music band Westlife; he is the band's oldest member.

+ + +

Brian McFadden (born 12 April 1980)

+

is an Irish singer, songwriter and television presenter who rose to fame in 1998 as a member of the Irish boy band Westlife. Following his departure from the group in 2004, McFadden released his debut solo album, Irish Son.

+ +
+ +
+ +
+ +

Song List

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
A Fragile HeartMaria AndersGermanyChange The World
Can't Lose What You Never HadClose Your EyesDon't Get Me WrongBad Girls
Drive (for All Time)Fool AgainHey WhateverCome Fly With Me
I CryI Have A DreamI Left My Heart In San FranciscoDon't Let Me Go
If I Had WordsIf Tomorrow Never ComesLet's Make Tonight SpecialEvergreen
Love Takes TwoMiss You NightMy Private MovieFly Me To The Moon
Nothing Is ImpossibleOpen Your HeartSeasons In The SunForever
Story Of LoveSwear It Again (rokstone Mix)That's What's It's All AboutHey Whatever!!
Together Girl ForeverTurn AroundWalk AwayI Did It For You
What I Want Is What I've GotWhen I Fall In LoveYou Make Me FeelIf I Let You Go
+
+
+ View all song + +
+
+ + + +
+ + + + \ No newline at end of file diff --git a/batal-jerald/tribute_page/style.css b/batal-jerald/tribute_page/style.css new file mode 100644 index 0000000..f3c1f62 --- /dev/null +++ b/batal-jerald/tribute_page/style.css @@ -0,0 +1,296 @@ +html { + scroll-behavior: smooth; +} + +.lds-hourglass { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + margin-top: 3%; +} +.lds-hourglass:after { + content: " "; + display: block; + border-radius: 50%; + width: 0; + height: 0; + margin: 8px; + box-sizing: border-box; + border: 32px solid #fff; + border-color: #fff transparent #fff transparent; + animation: lds-hourglass 1.2s infinite; +} +@keyframes lds-hourglass { + 0% { + transform: rotate(0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 50% { + transform: rotate(900deg); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 100% { + transform: rotate(1800deg); + } +} + + +* { + padding: 0; + margin: 0; + font-family: 'Orelega One', cursive; +} + + +h1.title { + padding-top: 3%; + margin-bottom: 90px; + font-size: 38px; + word-spacing: 15px; + letter-spacing: 5px; + color: #ddd; +} + +p,a { + color: rgb(148, 143, 143); + +} + +h3 { + font-family: 'Dancing Script', cursive; + margin: 20px 0px; +} + +a#tribute-link { + display: block; + width: 180px; + height: 35px; + border: 2px solid; + line-height: 35px; + margin: auto; + text-decoration: none; + text-align: center; + margin-bottom: 30px; +} + +a#tribute-link:hover { + background-color: #ddd; + color:black; +} + +#main { + background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(/batal-jerald/tribute_page/images/westlife.jpg) ; + background-attachment: fixed; + background-size: cover; +} + +/* Nav css */ + +nav { + position: fixed; + padding: 0 5%; + background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)); + left: 0; + right: 0; + height: 60px; +} + +nav .logo { + float: left; + width: 8%; + height: 100%; + display: flex; + align-items: center; + color:white; +} + +nav ul { + float: right; + padding:0; + margin: 0; + width: 60%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-around; + display: none; + + } + +nav a { + margin: 20px; + text-decoration: none; + color: #fff; +} + + +.btn-2:hover, +.btn-2:active { +letter-spacing: 5px; +background-color: #ddd; +border-radius: 5%; +color: black; +} + +nav ul li { + list-style: none; + text-transform: uppercase; + padding: 7px 7px; + border-radius: 20%; + cursor: pointer; +} + +#check { + position: absolute; + display: none; +} + +nav .icon { + display: none; + position: absolute; + right: 1%; + top: 20%; + transform: translate(-50%); +} + +nav .icon .line { + width: 30px; + height: 5px; + background-color: #fff; + margin: 5px; + border-radius: 25%; +} + +@media (max-width: 768px) { + nav .logo{ + float: none ; + width: auto; + justify-content: center; + } + nav .links { + float: none; + position: fixed; + z-index: 9; + left: 0; + right: 0; + top: 60px; + bottom: 100%; + width: auto; + height: auto; + flex-direction: column; + background-color: rgba(0,0,0,.8); + overflow: hidden; + } + nav .icon { + display: block; + } + + nav :checked ~ .links { + bottom: 0; + } +} + +/* image div */ + +#image-div { + justify-content: center; + text-align: center; + color:#fff +} + +#image-div img { + border: 3px solid #ddd; + width: 20%; + +} + +#image-div p { + font-family: 'Dancing Script', cursive; + margin-top: 65px !important; + font-size: 100%; + width: 40%; + margin: auto; + +} + +/* Wikipedia */ + +#wikipedia { + justify-content: center; + text-align: center; + color:#fff +} + +#wikipedia p { + font-family: 'Dancing Script', cursive; + margin-top: 10px !important; + margin-bottom: 100px !important; + font-size: 100%; + width: 40%; + margin: auto; +} + +/* History */ + +#history { + justify-content: center; + text-align: center; + color:#fff +} + +#history p { + font-family: 'Dancing Script', cursive; + margin-top: 10px !important; + margin-bottom: 100px !important; + font-size: 100%; + width: 40%; + margin: auto; +} + +#history img { + width: 300px; + border-radius: 10%; + border: 3px solid #ddd; + +} + +#albums { + justify-content: center; + text-align: center; + color:#fff +} + +table { + text-align: center; + margin: auto; + margin-bottom: 50px !important; +} + +td { + padding: 8px; + color: #ddd; +} + + +footer { + width: 100%; + text-align: center; + background: #444444; + padding: 8px 0; +} + +footer a { + color: #fff; + text-decoration: none; +} + + + +@media (max-width: 952px) { + #image-div h1 { + padding-top: 100px; + } +} + +