diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/4k.jpg b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/4k.jpg new file mode 100644 index 0000000..6797ff4 Binary files /dev/null and b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/4k.jpg differ diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/andi.png b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/andi.png new file mode 100644 index 0000000..758e552 Binary files /dev/null and b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/andi.png differ diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/dogs.gif b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/dogs.gif new file mode 100644 index 0000000..26182e3 Binary files /dev/null and b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/dogs.gif differ diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/favicon.ico b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/favicon.ico new file mode 100644 index 0000000..a59308e Binary files /dev/null and b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/favicon.ico differ diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/grace.png b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/grace.png new file mode 100644 index 0000000..9fc9577 Binary files /dev/null and b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/grace.png differ diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jamie.png b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jamie.png new file mode 100644 index 0000000..090be04 Binary files /dev/null and b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jamie.png differ diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jojo.gif b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jojo.gif new file mode 100644 index 0000000..e8421c1 Binary files /dev/null and b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jojo.gif differ diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/main.css b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/main.css new file mode 100644 index 0000000..a99df0f --- /dev/null +++ b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/main.css @@ -0,0 +1,68 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:300'); + +body { + text-align:center; + background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%); + color:#555; + font-family:'Roboto'; + font-weight:300; + font-size:32px; + padding-top:40vh; + height:100vh; + overflow:hidden; + -webkit-backface-visibility: hidden; + -webkit-perspective: 1000; + -webkit-transform: translate3d(0,0,0); +} + +div { + display:inline-block; + overflow:hidden; + white-space:nowrap; +} + +div:first-of-type { /* For increasing performance + ID/Class should've been used. + For a small demo + it's okaish for now */ + animation: showup 7s infinite; +} + +div:last-of-type { + width:0px; + animation: reveal 7s infinite; +} + +div:last-of-type span { + margin-left:-355px; + animation: slidein 7s infinite; +} + +@keyframes showup { + 0% {opacity:0;} + 20% {opacity:1;} + 80% {opacity:1;} + 100% {opacity:0;} +} + +@keyframes slidein { + 0% { margin-left:-800px; } + 20% { margin-left:-800px; } + 35% { margin-left:0px; } + 100% { margin-left:0px; } +} + +@keyframes reveal { + 0% {opacity:0;width:0px;} + 20% {opacity:1;width:0px;} + 30% {width:355px;} + 80% {opacity:1;} + 100% {opacity:0;width:355px;} +} + + +p { + font-size:12px; + color:#999; + margin-top:200px; +} \ No newline at end of file diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/pic.jpg b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/pic.jpg new file mode 100644 index 0000000..30f32b7 Binary files /dev/null and b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/pic.jpg differ diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/profile.html b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/profile.html new file mode 100644 index 0000000..40dffda --- /dev/null +++ b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/profile.html @@ -0,0 +1,83 @@ + + + + Profile Page + + + + + + + + +

Profile

+
+ + +

Name

 +

Anakin Arthur Ace S. Diaz IV

 +

(Akii)

 + NIPPON BANZAI
+
+ + +

Personal Information

 +

Birthday:April,12,2002

 +Address:#34 Diamond St,Homepoint Village Champaca st brgy.Fortune , marikina city.

 +Favorite Food:Spaghetti,Burger,Tahong,Kariman,pizza,wings,Piattos- bbq flavor,Takoyaki,sophia.

 +Favorite Games:Monster hunter,Halo,League of Legends,magic the gathering,Dungeons and Dragons, Gundam.

 +Hobbies:Building scale model like Gundam and other scale models,playing all night and watch anime all night,sometimes look at the stars with my telescope and sleeping.

 +Interest:SPACE,fantasy books,Games,WEBDEV,and any netflix series.

+
+

Educational Background

 +

Primary School

+

St.John Bosco

+

Prep

+

Graduated Date:???

+
+ +

Secondary School

+

Marikina Christian Integrated School (MCIS)

+

Graduated Date:2014

+
+

High School

+

Fortune High School

+

Moving Up:2019

+
+

Senior High School

+

Jesus Dela Peña National High School

+

Graduated Date:????

+
+ + + + + + + + + + + +
Something about myself
 +

I like to play games like monster hunter, League of Legends, any MMORPG or Rpg games and im fond of Sci-Fi books or fantasy books and i watch anime for 24hrs and play straight 24hrs and i support the first girl group of our country which is MNL48 and i play magic the gathering and D&D with my friends/Play group.

+
+ + + + + diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/redirect.html b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/redirect.html new file mode 100644 index 0000000..90739fa --- /dev/null +++ b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/redirect.html @@ -0,0 +1,10 @@ + + + + Redirect page + + + +

PLEASE WAIT 5 SECONDS

+ + \ No newline at end of file diff --git a/Diaz IV_-Anakin Arthur Ace S (CSS demo)/style.css b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/style.css new file mode 100644 index 0000000..364ad64 --- /dev/null +++ b/Diaz IV_-Anakin Arthur Ace S (CSS demo)/style.css @@ -0,0 +1,64 @@ +* { + font-family:"Century Gothic"; + color: white; + + + +} + +body{ + background: #172d52; + +} + +h1 { + color:white; +} + +h2 { + color:white; +} + +h3{ +color:white; +} + +img { + width:400px; + height:400px; + border-radius:50%; +} + +header{ + + margin-top: 50px; +} + +header * { + display: inline; +} + +.imageclass { + width:360px + height:360px; + border-radius:50%; +} + +nav p a { + text-decoration: none; + padding-right: 20px; + border: #ffffff 0.5px double; + margin: 5px; +} + +nav p a:hover { + + border:#f7dfeb 0.5px solid; +} + +nav{ + position: fixed; + background-color: #181818; + top: 0; + width: 100% +} \ No newline at end of file diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/4k.jpg b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/4k.jpg new file mode 100644 index 0000000..6797ff4 Binary files /dev/null and b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/4k.jpg differ diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/andi.png b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/andi.png new file mode 100644 index 0000000..758e552 Binary files /dev/null and b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/andi.png differ diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/dogs.gif b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/dogs.gif new file mode 100644 index 0000000..26182e3 Binary files /dev/null and b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/dogs.gif differ diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/grace.png b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/grace.png new file mode 100644 index 0000000..9fc9577 Binary files /dev/null and b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/grace.png differ diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jamie.png b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jamie.png new file mode 100644 index 0000000..090be04 Binary files /dev/null and b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jamie.png differ diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jojo.gif b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jojo.gif new file mode 100644 index 0000000..e8421c1 Binary files /dev/null and b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/jojo.gif differ diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/main.css b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/main.css new file mode 100644 index 0000000..a99df0f --- /dev/null +++ b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/main.css @@ -0,0 +1,68 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:300'); + +body { + text-align:center; + background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%); + color:#555; + font-family:'Roboto'; + font-weight:300; + font-size:32px; + padding-top:40vh; + height:100vh; + overflow:hidden; + -webkit-backface-visibility: hidden; + -webkit-perspective: 1000; + -webkit-transform: translate3d(0,0,0); +} + +div { + display:inline-block; + overflow:hidden; + white-space:nowrap; +} + +div:first-of-type { /* For increasing performance + ID/Class should've been used. + For a small demo + it's okaish for now */ + animation: showup 7s infinite; +} + +div:last-of-type { + width:0px; + animation: reveal 7s infinite; +} + +div:last-of-type span { + margin-left:-355px; + animation: slidein 7s infinite; +} + +@keyframes showup { + 0% {opacity:0;} + 20% {opacity:1;} + 80% {opacity:1;} + 100% {opacity:0;} +} + +@keyframes slidein { + 0% { margin-left:-800px; } + 20% { margin-left:-800px; } + 35% { margin-left:0px; } + 100% { margin-left:0px; } +} + +@keyframes reveal { + 0% {opacity:0;width:0px;} + 20% {opacity:1;width:0px;} + 30% {width:355px;} + 80% {opacity:1;} + 100% {opacity:0;width:355px;} +} + + +p { + font-size:12px; + color:#999; + margin-top:200px; +} \ No newline at end of file diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/pic.jpg b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/pic.jpg new file mode 100644 index 0000000..30f32b7 Binary files /dev/null and b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/pic.jpg differ diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/profile.html b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/profile.html new file mode 100644 index 0000000..ea36311 --- /dev/null +++ b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/profile.html @@ -0,0 +1,81 @@ + + + + Profile Page + + + + + + + +

Profile

+
+ + +

Name

 +

Anakin Arthur Ace S. Diaz IV

 +

(Akii)

+
+ + +

Personal Information

 +

Birthday:April,12,2002

 +Address:#34 Diamond St,Homepoint Village Champaca st brgy.Fortune , marikina city.

 +Favorite Food:Spaghetti,Burger,Tahong,Kariman,pizza,wings,Piattos- bbq flavor,Takoyaki,sophia.

 +Favorite Games:Monster hunter,Halo,League of Legends,magic the gathering,Dungeons and Dragons, Gundam.

 +Hobbies:Building scale model like Gundam and other scale models,playing all night and watch anime all night,sometimes look at the stars with my telescope and sleeping.

 +Interest:SPACE,fantasy books,Games,WEBDEV,and any netflix series.

+
+

Educational Background

 +

Primary School

+

St.John Bosco

+

Prep

+

Graduated Date:???

+
+ +

Secondary School

+

Marikina Christian Integrated School (MCIS)

+

Graduated Date:2014

+
+

High School

+

Fortune High School

+

Moving Up:2019

+
+

Senior High School

+

Jesus Dela Peña National High School

+

Graduated Date:????

+
+ + + + + + + + + + + +
Something about myself
 +

I like to play games like monster hunter, League of Legends, any MMORPG or Rpg games and im fond of Sci-Fi books or fantasy books and i watch anime for 24hrs and play straight 24hrs and i support the first girl group of our country which is MNL48 and i play magic the gathering and D&D with my friends/Play group.

+
+ + + + + diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/redirect.html b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/redirect.html new file mode 100644 index 0000000..90739fa --- /dev/null +++ b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/redirect.html @@ -0,0 +1,10 @@ + + + + Redirect page + + + +

PLEASE WAIT 5 SECONDS

+ + \ No newline at end of file diff --git a/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/style.css b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/style.css new file mode 100644 index 0000000..364ad64 --- /dev/null +++ b/activity_2/Diaz IV_-Anakin Arthur Ace S (CSS demo)/style.css @@ -0,0 +1,64 @@ +* { + font-family:"Century Gothic"; + color: white; + + + +} + +body{ + background: #172d52; + +} + +h1 { + color:white; +} + +h2 { + color:white; +} + +h3{ +color:white; +} + +img { + width:400px; + height:400px; + border-radius:50%; +} + +header{ + + margin-top: 50px; +} + +header * { + display: inline; +} + +.imageclass { + width:360px + height:360px; + border-radius:50%; +} + +nav p a { + text-decoration: none; + padding-right: 20px; + border: #ffffff 0.5px double; + margin: 5px; +} + +nav p a:hover { + + border:#f7dfeb 0.5px solid; +} + +nav{ + position: fixed; + background-color: #181818; + top: 0; + width: 100% +} \ No newline at end of file diff --git a/activity_2/README b/activity_2/README new file mode 100644 index 0000000..f10a330 --- /dev/null +++ b/activity_2/README @@ -0,0 +1,17 @@ +Follow these instructions for Activity #1 in HTML + +Instructions: + +1. Create a folder named in this format "LAST_NAME-FIRST_NAME" +2. Create an HTML file named 'profile' +3. Design the Layout of your Profile Web Page + Your Profile Web Page must contain (but not limited) the following content: + * Detailed Personal Information (i.e. Fullname, Nickname, Birthday, Address etc.) + * Educational Background + * Hobbies and Interest + * Something about yourself +4. Use the different tags discussed in our lesson + + + +NOTE: Don't forget to PUSH your works in this repository diff --git a/activity_2/main.css b/activity_2/main.css new file mode 100644 index 0000000..a99df0f --- /dev/null +++ b/activity_2/main.css @@ -0,0 +1,68 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:300'); + +body { + text-align:center; + background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%); + color:#555; + font-family:'Roboto'; + font-weight:300; + font-size:32px; + padding-top:40vh; + height:100vh; + overflow:hidden; + -webkit-backface-visibility: hidden; + -webkit-perspective: 1000; + -webkit-transform: translate3d(0,0,0); +} + +div { + display:inline-block; + overflow:hidden; + white-space:nowrap; +} + +div:first-of-type { /* For increasing performance + ID/Class should've been used. + For a small demo + it's okaish for now */ + animation: showup 7s infinite; +} + +div:last-of-type { + width:0px; + animation: reveal 7s infinite; +} + +div:last-of-type span { + margin-left:-355px; + animation: slidein 7s infinite; +} + +@keyframes showup { + 0% {opacity:0;} + 20% {opacity:1;} + 80% {opacity:1;} + 100% {opacity:0;} +} + +@keyframes slidein { + 0% { margin-left:-800px; } + 20% { margin-left:-800px; } + 35% { margin-left:0px; } + 100% { margin-left:0px; } +} + +@keyframes reveal { + 0% {opacity:0;width:0px;} + 20% {opacity:1;width:0px;} + 30% {width:355px;} + 80% {opacity:1;} + 100% {opacity:0;width:355px;} +} + + +p { + font-size:12px; + color:#999; + margin-top:200px; +} \ No newline at end of file