From b54947c5418cfdebe677daf9b18da4e390786eac Mon Sep 17 00:00:00 2001 From: Petr Selfin Date: Thu, 4 Jul 2024 13:43:58 +0300 Subject: [PATCH] feat: Html + CSS --- .vscode/tasks.json | 13 +++++++ css/style.css | 0 css/styles.css | 72 ++++++++++++++++++++++++++++++++++++ css/styles.css.map | 1 + img/rsschool-logo.svg | 1 + index.html | 67 +++++++++++++++++++--------------- scss/styles.scss | 85 +++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 210 insertions(+), 29 deletions(-) create mode 100644 .vscode/tasks.json delete mode 100644 css/style.css create mode 100644 css/styles.css create mode 100644 css/styles.css.map create mode 100644 img/rsschool-logo.svg create mode 100644 scss/styles.scss diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..27d3308 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,13 @@ +{ + // See https://go.microsoft.com/fwlink/?LinkId=733558 + // for the documentation about the tasks.json format + "version": "2.0.0", + "tasks": [ + { + "label": "Compile SCSS to CSS", + "type": "shell", + "command": "sass scss/styles.scss css/styles.css", + "group": "build" + } + ] +} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..13cbe2f --- /dev/null +++ b/css/styles.css @@ -0,0 +1,72 @@ +body { + margin: 0; +} + +header { + background-color: blue; +} +header .row { + display: flex; + margin: 0 auto; + max-width: 600px; + justify-content: space-around; +} +header ul { + display: flex; + margin: 0; + align-content: baseline; +} +header ul li { + padding: 10px 15px; + list-style: none; +} +header ul li a { + text-decoration: none; + color: #fff; + padding: 5px; +} +header ul li a:hover { + text-decoration: underline; + background-color: darkblue; +} +header .logo { + color: #fff; + padding: 5px; + margin: 5px; +} + +main { + margin: 0 auto; + max-width: 600px; +} +main div.row { + display: flex; + gap: 20px; +} + +pre { + background-color: black; + color: #fff; + padding: 10px; +} + +footer { + color: #fff; + background-color: gray; +} +footer .row { + display: flex; + align-items: center; + max-width: 600px; + margin: 0 auto; + justify-content: space-around; +} +footer a { + color: #fff; +} +footer img { + width: 200px; + height: auto; +} + +/*# sourceMappingURL=styles.css.map */ diff --git a/css/styles.css.map b/css/styles.css.map new file mode 100644 index 0000000..10fcd1f --- /dev/null +++ b/css/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/styles.scss"],"names":[],"mappings":"AAAA;EAAM;;;AAEN;EAEI;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAMhB;EACI;EACA;EACA;;;AAKR;EACI;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;EACA;;;AAIJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAAG;;AAEH;EACI;EACA","file":"styles.css"} \ No newline at end of file diff --git a/img/rsschool-logo.svg b/img/rsschool-logo.svg new file mode 100644 index 0000000..3b80540 --- /dev/null +++ b/img/rsschool-logo.svg @@ -0,0 +1 @@ +rs_school_js \ No newline at end of file diff --git a/index.html b/index.html index 0a5c79b..1233631 100644 --- a/index.html +++ b/index.html @@ -4,38 +4,42 @@ Petr Selfin - CV#2. HTML, CSS and Git Basics - +
- - +
+ + +
-
+

Petr Selfin - CV#2. HTML, CSS & Git Basics

-
- Avatar -
-
- Name: Petr Selfin
- Contact: - -
+
+
+ Avatar +
+
+ Name: Petr Selfin
+ Contact: + +
+
-

About me

+

About me

I play bass guitar, develop and promote websites

Skills

@@ -45,7 +49,7 @@

Skills

  • PPC
    • -

    Code example

    +

    Code example

                 function multiply(a, b){
@@ -53,16 +57,21 @@ 
    Code example
    
             }
    -

    Job

    +

    Job

    Portfolio me and my small company: pro-self.ru

    -

    Education

    +

    Education

    Htmlbook.ru, some cource and book, forums, blogs))

    -

    English

    +

    English

    Very very bad

    \ No newline at end of file diff --git a/scss/styles.scss b/scss/styles.scss new file mode 100644 index 0000000..f709515 --- /dev/null +++ b/scss/styles.scss @@ -0,0 +1,85 @@ +body { + margin: 0; + scroll-behavior: smooth; +} + +header { + + background-color: blue; + + .row { + display: flex; + margin: 0 auto; + max-width: 600px; + justify-content: space-around; + } + + ul { + display: flex; + margin: 0; + align-content: baseline; + + li { + padding: 10px 15px; + list-style: none; + + a { + text-decoration: none; + color: #fff; + padding: 5px; + + + &:hover { + text-decoration: underline; + background-color: darkblue; + } + } + } + } + + .logo { + color: #fff; + padding: 5px; + margin: 5px; + + } +} + +main { + margin: 0 auto; + max-width: 600px; + + div.row { + display: flex; + gap: 20px; + } +} + +pre { + background-color: black; + color: #fff; + padding: 10px; + +} + +footer { + color: #fff; + background-color: gray; + padding: 15px 0; + + .row { + display: flex; + align-items: center; + max-width: 600px; + margin: 0 auto; + justify-content: space-around; + } + + a {color: #fff;} + + img { + width: 200px; + height: auto; + + } +} \ No newline at end of file