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 72b560d..5660914 100644 --- a/index.html +++ b/index.html @@ -2,35 +2,54 @@ 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

-
-
- + +
+ +
+
+

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

+
+ +
+ + + + + +
+ diff --git a/style.css b/style.css new file mode 100644 index 0000000..49dc7f9 --- /dev/null +++ b/style.css @@ -0,0 +1,296 @@ +@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; + } + + + +} + + + + + + + + + +@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; + } + + + .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; + } + + + + + + 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