diff --git a/index.html b/index.html new file mode 100644 index 0000000..f85d54f --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + + Pokemon + + + + +
+
+ + +
+
+
+
+ +
+ ash +
+
+ + + + +
+ + + \ No newline at end of file diff --git a/pic/Cover.png b/pic/Cover.png new file mode 100644 index 0000000..abee7d9 Binary files /dev/null and b/pic/Cover.png differ diff --git a/pic/Logo.png b/pic/Logo.png new file mode 100644 index 0000000..58ccf36 Binary files /dev/null and b/pic/Logo.png differ diff --git a/pic/ash.png b/pic/ash.png new file mode 100644 index 0000000..913764a Binary files /dev/null and b/pic/ash.png differ diff --git a/pic/pokeball.png b/pic/pokeball.png new file mode 100644 index 0000000..99096b5 Binary files /dev/null and b/pic/pokeball.png differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..61b55d7 --- /dev/null +++ b/styles.css @@ -0,0 +1,114 @@ +* { + margin: 0%; + padding: 0%; + overflow-x: hidden; +} +body { + background-image: url(./pic/Cover.png); + background-repeat: no-repeat; + background-size: cover; +} +#container { + width: 100vw; + height: 100vh; + /* background-color: green; */ + display: flex; + flex-direction: row; +} +#left { + width: 35%; + height: 100%; + /* background-color: red; */ +} +#logo { + /* background-color: blue; */ + width: 100%; + height: 8%; +} +#logo img { + width: 8%; + height: 70%; + padding-left: 5%; + padding-top: 2%; + cursor: pointer; +} +#comment-container { + width: 100%; + height: 42%; + /* background-color: aqua; */ + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} +#comment { + width: 80%; + height: 76%; + background-color: #f5d8ae; + border-radius: 40px; + margin-top: 5%; + /* border: 1px solid black; */ + box-shadow: -6px 10px 32px -8px rgba(0, 0, 0, 0.47); + -webkit-box-shadow: -6px 10px 32px -8px rgba(0, 0, 0, 0.47); + -moz-box-shadow: -6px 10px 32px -8px rgba(0, 0, 0, 0.47); +} +#circle { + width: 5%; + height: 10%; + border-radius: 50%; + background-color: #f5d8ae; + /* border: 1px solid black; */ + margin-bottom: 3%; + margin-left: 40%; + box-shadow: 8px -3px 32px -8px rgba(0, 0, 0, 0.47); + -webkit-box-shadow: 8px -3px 32px -8px rgba(0, 0, 0, 0.47); + -moz-box-shadow: 8px -3px 32px -8px rgba(0, 0, 0, 0.47); +} +#ash { + width: 100%; + height: 50%; + overflow-y: hidden; + /* background-color: aquamarine; */ +} +#ash img { + width: 76%; + height: 99%; + padding-bottom: 0; + margin-left: 10%; + margin-bottom: 0; + margin-top: 1%; +} +#right { + height: 100%; + width: 65%; + /* background-color: red; */ + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; +} +#pokemon { + /* background-color: blueviolet; */ + width: 100%; + height: 23%; + text-align: center; + margin-top: 2%; +} +#pokemon img { + width: 35%; +} +#details { + /* background-color: blue; */ + width: 100%; + height: 77%; +} +#card-details { + background-color: rgb(245, 216, 174,0.3); + width: 90%; + height: 90%; + border-radius: 30px; + margin-left: 5%; + box-shadow: -6px 10px 32px -8px rgba(0, 0, 0, 0.47); + -webkit-box-shadow: -6px 10px 32px -8px rgba(0, 0, 0, 0.47); + -moz-box-shadow: -6px 10px 32px -8px rgba(0, 0, 0, 0.47); +}