feat: Html + CSS

pselfin · Jul 4, 2024 · b54947c · b54947c
1 parent a71b7f6
commit b54947c
Show file tree

Hide file tree

Showing 7 changed files with 210 additions and 29 deletions.
diff --git a/.vscode/tasks.json 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
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/img/rsschool-logo.svg b/img/rsschool-logo.svg
diff --git a/index.html b/index.html
@@ -4,38 +4,42 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Petr Selfin - CV#2. HTML, CSS and Git Basics</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
     <header>
-        <div class="logo">Petr Selfin - CV#2</div>
-        <nav>
-            <ul>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-            </ul>
-        </nav>
+<div class="row">
+            <div class="logo">Petr Selfin - CV#2</div>
+            <nav>
+                <ul>
+                    <li><a href="#name">Me</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#code">Code</a></li>
+                    <li><a href="#edu">Education</a></li>
+                    <li><a href="#eng">English</a></li>
+                </ul>
+            </nav>
+</div>
     </header>
-    <main>
+    <main id="name">
         <h1>Petr Selfin - CV#2. HTML, CSS &amp; Git Basics</h1>
 
-        <div class="col-2">
-            <img src="img/avatar.png" alt="Avatar">
-        </div>
-        <div class="col-2">
-            <b>Name:</b> Petr Selfin <br>
-            <b>Contact:</b>
-            <ul>
-                <li>Telegram: <a href="https://t.me/pselfin">@pselfin</a></li>
-                <li>GitHub: <a href="https://github.com/pselfin/">@pselfin</a></li>
-                <li>Discord: Petr Selfin (@pselfin)</li>
-            </ul>
-        </div>
+     <div class="row">
+            <div class="col-2">
+                <img src="img/avatar.png" alt="Avatar">
+            </div>
+            <div class="col-2">
+                <b>Name:</b> Petr Selfin <br>
+                <b>Contact:</b>
+                <ul>
+                    <li>Telegram: <a href="https://t.me/pselfin">@pselfin</a></li>
+                    <li>GitHub: <a href="https://github.com/pselfin/">@pselfin</a></li>
+                    <li>Discord: Petr Selfin (@pselfin)</li>
+                </ul>
+            </div>
+     </div>
 
-        <h2>About me</h2>
+        <h2 id="about">About me</h2>
 
         <p>I play bass guitar, develop and promote websites</p>
         <h2>Skills</h2>
@@ -45,24 +49,29 @@ <h2>Skills</h2>
             <li>PPC</li>
         </ul>
 
-        <h2>Code example</h2>
+        <h2 id="code">Code example</h2>
 
         <pre>
             function multiply(a, b){
             return a * b;
             }
         </pre>
 
-        <h2>Job</h2>
+        <h2 id="job">Job</h2>
         <p>Portfolio me and my small company: <a href="https://pro-self.ru">pro-self.ru</a></p>
 
-        <h2>Education</h2>
+        <h2 id="edu">Education</h2>
         <p>Htmlbook.ru, some cource and book, forums, blogs))</p>
 
-        <h2>English</h2>
+        <h2 id="eng">English</h2>
         <p>Very very bad</p>
     </main>
     <footer>
+        <div class="row">
+            <div class="copy">2024 <a href="https://github.com/pselfin" target="_blank">Petr Selfin</a></div>
+            <a href="https://rs.school/courses/javascript-ru" target="_blank"><img src="img/rsschool-logo.svg" alt=""></a>
+
+        </div>
     </footer>
 </body>
 </html>
diff --git a/scss/styles.scss 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;
+
+    }
+}