TheCodePeople · mehdi22256 · Mar 4, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pokemon</title>
+    <link rel="stylesheet" href="./styles.css">
+</head>
+
+<body>
+    <div id="container">
+        <div id="left">
+            <div id="logo">
+                <img src="./pic/pokeball.png" alt="logo">
+            </div>
+
+            <div id="comment-container">
+                <div id="comment"></div>
+                <div id="circle"></div>
+            </div>
+
+            <div id="ash">
+                <img src="./pic/ash.png" alt="ash">
+            </div>
+        </div>
+
+
+
+        <div id="right">
+            <div id="pokemon">
+                <img src="./pic/Logo.png" alt="ash">
+
+            </div>
+            <div id="details">
+                <div id="card-details">
+                    <div id="card">
+                        <div id="image"></div>
+                        <div id="title"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/pic/Cover.png b/pic/Cover.png
diff --git a/pic/Logo.png b/pic/Logo.png
diff --git a/pic/ash.png b/pic/ash.png
diff --git a/pic/pokeball.png b/pic/pokeball.png
diff --git a/styles.css 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);
+}