From ed7a41c25c4e08dc3b9395c980504107f18b3173 Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Mon, 15 Jan 2024 17:54:22 +0100 Subject: [PATCH 1/3] test --- index.html | 88 +++++++++++++++++++++++++++++++++++++++++++----------- style.css | 28 +++++++++++++++++ 2 files changed, 98 insertions(+), 18 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 72b560d..d97842e 100644 --- a/index.html +++ b/index.html @@ -2,35 +2,87 @@ My Personal Web Page + + -
-

Welcome to My Personal Web Page

- -
+ + + + + +
+ +
+
+

Welcome to My Personal Web Page

+ +
+
+
-
-

About Me

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor - diam vel eros aliquam, vitae consequat tellus lacinia. Donec convallis - magna leo. -

-
+
+
+

About Me

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor + diam vel eros aliquam, vitae consequat tellus lacinia. Donec convallis + magna leo. +

+
+
+ +

Contact Information

Email: info@example.com

Phone: 123-456-7890

+
+ + +
+ + + + + + + +600px. + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..90e3ea2 --- /dev/null +++ b/style.css @@ -0,0 +1,28 @@ +.Par { + + background-color: #ddbdd6; + + margin: 10px; + padding: 20px; + font-size: 30px; + display: block; + +} + +.c { + background-color: #eaeaea; + text-align: center; + margin: 10px; + padding: 20px; + font-size: 30px; + +} + +.A { + background-color: #d4cfd2; + text-align: center; + margin: 10px; + padding: 20px; + font-size: 30px; + +} \ No newline at end of file From c7c0397aaa660a3df21e6acfb5c8f5c474af1d2e Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Thu, 18 Jan 2024 18:42:02 +0100 Subject: [PATCH 2/3] =?UTF-8?q?=E2=80=9CTEST=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/launch.json | 15 +++ README.md | 2 + index.html | 121 +++++++---------- style.css | 307 +++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 351 insertions(+), 94 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..2ba986f --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 63968e5..b4facca 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ 1. Open the HTML file in a text editor. 2. Create CSS file (`styles.css`) and link it in the `` section of the HTML using the `` tag. + 3. Apply default styles to the elements in the CSS (e.g., `body`, `header`, `nav`, `main`, `section`, `footer`). + 4. Add the following line inside the `` section of the HTML to enable responsive behavior: ``. **Mobile First approach and Media Queries:** diff --git a/index.html b/index.html index d97842e..5660914 100644 --- a/index.html +++ b/index.html @@ -3,86 +3,53 @@ My Personal Web Page - + - - - - -
- -
-
-

Welcome to My Personal Web Page

- -
-
- -
-
-
-

About Me

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor - diam vel eros aliquam, vitae consequat tellus lacinia. Donec convallis - magna leo. -

-
-
- -
-
-

Contact Information

-

Email: info@example.com

-

Phone: 123-456-7890

-
-
-
- - -
- -
-

© 2023 My Personal Web Page. All rights reserved.

-
+
+ +
+
+

Welcome to My Personal Web Page

+
+ + + + Home + About + Contact + +
+
+
+ +
+ +
+

About Me

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor + diam vel eros aliquam, vitae consequat tellus lacinia. Donec convallis + magna leo. +

+
+ +
+

Contact Information

+

Email: info@example.com

+

Phone: 123-456-7890

+
+ +
+ + + +
+

© 2023 My Personal Web Page. All rights reserved.

+
+ +
- - - - - -600px. - \ No newline at end of file diff --git a/style.css b/style.css index 90e3ea2..ef78daa 100644 --- a/style.css +++ b/style.css @@ -1,28 +1,301 @@ -.Par { - background-color: #ddbdd6; - - margin: 10px; - padding: 20px; - font-size: 30px; - display: block; + + + + +@media (max-width: 600px) { + + + + body { + font-family: Helvetica, Arial, sans-serif; + background-color: #ddbdd6; + } + + h2 { + font-size: 30px; + font-weight: bold; + } + + p { + font-size: 16px; + } + + + + .Pers { + display: block; + background-color: #ddbdd6; + /* justify-content: center; + align-items: center; */ + padding: 5px; + } + + + .WC { + display: flex; + flex-flow: column nowrap; + /* justify-content:left; */ + /* text-align: left; */ + margin: 20px; + } + + + + header { + font-size: 20px; + font-weight:bolder; + } + + .navList { + display: flex; + flex-flow: row nowrap; + /* justify-content:center; */ + /* align-items: center; */ + text-align: left; + margin-bottom: 10px; + } + + + a { + text-decoration: none; + margin: 10px; + font-size: 20px; + color: rgb(0, 0, 0); + } + + a:hover { + color: rgb(73, 73, 73); + } + + + + .M { + display: flex; + flex-flow: row nowrap; + justify-content:space-between; + align-items:flex-start; + background-color: #ffffff; + margin: 10px; + } + + .A { + width: 50%; + text-align: left; + /* margin: 20px 20px 20px 20px; */ + padding: 20px; + } + + /* margin　（上）　（右）　（下）　（左） */ + + .C { + width: 50%; + text-align: left; + /* margin: 20px 20px 20px 20px; */ + padding: 20px; + } + + + .F { + text-align: center; + } + + } -.c { - background-color: #eaeaea; - text-align: center; - margin: 10px; - padding: 20px; + + + + + + + + +@media screen and (min-width: 601px) { + + + body { + font-family: Helvetica, Arial, sans-serif; + background-color: #ddbdd6; + } + + h2 { font-size: 30px; + font-weight: bold; + } + + p { + font-size: 16px; + } + + + + .Pers { + display: block; + background-color: #ddbdd6; + /* justify-content: center; + align-items: center; */ + padding: 5px; + } -} -.A { - background-color: #d4cfd2; + .WC { + display: flex; + flex-flow: column nowrap; + /* justify-content:left; */ + /* text-align: left; */ + margin: 20px; + } + + + + header { + font-size: 20px; + font-weight:bolder; + } + + .navList { + display: flex; + flex-flow: row nowrap; + /* justify-content:center; */ + /* align-items: center; */ + text-align: left; + margin-bottom: 10px; + } + + + a { + text-decoration: none; + margin: 10px; + font-size: 20px; + color: rgb(0, 0, 0); + } + + a:hover { + color: rgb(73, 73, 73); + } + + + + .M { + display: flex; + flex-flow: row nowrap; + justify-content:space-between; + align-items:flex-start; + background-color: #ffffff; + margin: 10px; + } + + .A { + width: 50%; + text-align: left; + /* margin: 20px 20px 20px 20px; */ + padding: 20px; + } + + /* margin　（上）　（右）　（下）　（左） */ + + .C { + width: 50%; + text-align: left; + /* margin: 20px 20px 20px 20px; */ + padding: 20px; + } + + + .F { text-align: center; - margin: 10px; - padding: 20px; + } + + + + + + body { + font-family: Helvetica, Arial, sans-serif; + background-color: #ddbdd6; + } + + h2 { font-size: 30px; + font-weight: bold; + } + + p { + font-size: 16px; + } + + + + .Pers { + display: block; + background-color: #ddbdd6; + justify-content: center; + align-items: center; */ + padding: 5px; + } + + + + + + + .WC { + display: flex; + justify-content:center; + align-items: left; + text-align: left; + } + + header { + font-size: 30px; + font-weight:bolder; + } + + .navList { + display: flex; + flex-flow: row nowrap; + justify-content:left; + align-items: left; + text-align: left; + margin-bottom: 40px; + } + + + a { + text-decoration: none; + margin: 10px; + } + + + + + + .M { + display: flex; + flex-flow: row nowrap; + background-color: #ffffff; + justify-content: center; + margin: 10px; + } + + .A { + text-align: left; + margin: 20px 30px 0px 30px; + padding: 20px; + } */ + + /* margin　（上）　（右）　（下）　（左） */ + + .C { + text-align: left; + margin: 0px 30px 20px 30px; + /* padding: 20px; */ + } + + .F { + text-align: center; + } } \ No newline at end of file From 8cf2435dd8725722418af9a6904951d334d56887 Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Thu, 18 Jan 2024 22:52:47 +0100 Subject: [PATCH 3/3] =?UTF-8?q?=E2=80=9CTEST=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/style.css b/style.css index ef78daa..49dc7f9 100644 --- a/style.css +++ b/style.css @@ -1,8 +1,3 @@ - - - - - @media (max-width: 600px) {