From 07d60b00e696fc79d9f4117d2bf89813e91b9120 Mon Sep 17 00:00:00 2001 From: Danny Romero <108970600+Elenar9@users.noreply.github.com> Date: Wed, 22 Feb 2023 01:32:52 +0000 Subject: [PATCH 1/7] HTML-CSS-Coursework-Week4 update html ,css and Js --- css/main.css | 100 +++++++++++++++++++++++++++++++++++++++++++++++++-- css/week4.js | 5 +++ index.html | 33 +++++++++++++---- 3 files changed, 130 insertions(+), 8 deletions(-) create mode 100644 css/week4.js diff --git a/css/main.css b/css/main.css index aa561706..3f619814 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,99 @@ -/* Add your CSS here */ -/* Dont' forget to link this file to your HTML in the */ + +.header { + display: flex; + flex-direction: row; + width: 100%; + justify-content: space-between; +} +.header-content { +display: flex; +flex-direction: column; + +} +.square { + background-color: blue; + height: 2rem; + width: 2rem; + margin-right: 1rem; + +} +.first-header { + display: flex; + flex-direction: row; + align-items: center; + +} + +@import "compass/css3"; +.menu-toggle { + width: 40px; + height: 30px; + position: absolute; + top: 20px; + right: 25px; + cursor: pointer; + + &.on { + .one { + @include transform(rotate(45deg) translate(7px, 7px)); + } + + .two { + opacity: 0; + } + + .three { + @include transform (rotate(-45deg) translate(8px, -10px)); + } + } +} + +.one, +.two, +.three { + width: 100%; + height: 5px; + background: white; + margin: 6px auto; + backface-visibility: hidden; + @include transition-duration(0.3s); +} + +nav ul { + margin: 0; + padding: 0; + font-family: Open Sans; + list-style: none; + margin: 4em auto; + text-align: center; + + &.hidden { + display: none; + } + + a { + @include transition-duration(0.5s); + text-decoration: none; + color: white; + font-size: 3em; + line-height: 1.5; + width: 100%; + display: block; + + &:hover { + background-color: rgba(0, 0, 0, 0.5); + } + } +} + +.menu-section { + &.on { + z-index: 10; + width: 100%; + height: 100%; + display: block; + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + } +} diff --git a/css/week4.js b/css/week4.js new file mode 100644 index 00000000..f39e4020 --- /dev/null +++ b/css/week4.js @@ -0,0 +1,5 @@ + $(".menu-toggle").on('click', function () { + $(this).toggleClass("on"); + $('.menu-section').toggleClass("on"); + $("nav ul").toggleClass('hidden'); + }); \ No newline at end of file diff --git a/index.html b/index.html index cd704c69..af3cbc4b 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,39 @@ - + Responsive grid project + +
+
+
+
+

Danny Romero

+
+

Web Developer

+
- - - - -

This website design was created by Wix.com, and is used here for strictly educational purposes.

+
+
+
+
+
+
+ +
+
+ \ No newline at end of file From faa987e4f13936951d2c0f2d9c94010d584149f0 Mon Sep 17 00:00:00 2001 From: Danny Romero <108970600+Elenar9@users.noreply.github.com> Date: Thu, 23 Feb 2023 15:35:07 +0000 Subject: [PATCH 2/7] Html-css-coursework-week4 structure build --- css/main.css | 28 ++++++++++++++++++++++++++++ index.html | 16 ++++++++++++++-- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/css/main.css b/css/main.css index 3f619814..7d916687 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,12 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');/* use in headings */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap');/* use in the web*/ + +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + .header { @@ -97,3 +106,22 @@ nav ul { position: absolute; } } +.page_container { + display:block; + position:relative; + height: auto; + width: 100%; + min-height: auto; + +} + +.img { + display: flex; + flex-direction: column; + justify-content: center; + height: 120px; + width: 120px; + object-fit: cover; + + +} diff --git a/index.html b/index.html index af3cbc4b..85906497 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@

Danny Romero

-

Web Developer

+

Full Stack Developer Trainee at CYF.

@@ -36,7 +36,19 @@

Web Developer

- +
+
+
+ +
+
+
+

Danny Romero

+
+
+ +
+
\ No newline at end of file From 6634d7d1da0bcf6a2533c27e674efabcf35268f6 Mon Sep 17 00:00:00 2001 From: Danny Romero <108970600+Elenar9@users.noreply.github.com> Date: Thu, 23 Feb 2023 21:47:11 +0000 Subject: [PATCH 3/7] html-css-coursework-week4 update html --- index.html | 40 +++++++++++++++++++++++++++++----------- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 85906497..ec687938 100644 --- a/index.html +++ b/index.html @@ -28,24 +28,42 @@

Full Stack Developer Trainee at CYF.

-
-
- -
+
+
+

Hello

+

Here's who I am & what I do

+

I'm a paragraph. Click here to add your own text and edit me. + It's easy. Just click “Edit Text” or double click me to + add your own content and make changes to the font.

+

I'm a great place for you to tell a story and let your users know + a little more about you

-
-

Danny Romero

+
+
+ Danny image +

Danny Romero

+
+
+ + +
-
+
From 31e5db1cede03bf60d327b9cc470f8e60afc10c7 Mon Sep 17 00:00:00 2001 From: Danny Romero <108970600+Elenar9@users.noreply.github.com> Date: Fri, 24 Feb 2023 11:17:01 +0000 Subject: [PATCH 4/7] html-css-coursework-week4 update --- css/main.css | 111 ++++++++++----------------------------------------- 1 file changed, 20 insertions(+), 91 deletions(-) diff --git a/css/main.css b/css/main.css index 7d916687..d1e3efd8 100644 --- a/css/main.css +++ b/css/main.css @@ -1,13 +1,33 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');/* use in headings */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap');/* use in the web*/ + :root { + --beige-dark: #e6dacd; + --beige-light: #f4ece6; + + --blue-royal: #0150fd; + --black: #000; + --white: #fff; + + --heading-font: "Poppins", sans-serif; + --body-font: "Quicksand", sans-serif; + } + *{ padding: 0; margin: 0; box-sizing: border-box; } +body { + line-height: 1.4; +} +.grid { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 10px; +} .header { display: flex; @@ -34,94 +54,3 @@ flex-direction: column; } -@import "compass/css3"; -.menu-toggle { - width: 40px; - height: 30px; - position: absolute; - top: 20px; - right: 25px; - cursor: pointer; - - &.on { - .one { - @include transform(rotate(45deg) translate(7px, 7px)); - } - - .two { - opacity: 0; - } - - .three { - @include transform (rotate(-45deg) translate(8px, -10px)); - } - } -} - -.one, -.two, -.three { - width: 100%; - height: 5px; - background: white; - margin: 6px auto; - backface-visibility: hidden; - @include transition-duration(0.3s); -} - -nav ul { - margin: 0; - padding: 0; - font-family: Open Sans; - list-style: none; - margin: 4em auto; - text-align: center; - - &.hidden { - display: none; - } - - a { - @include transition-duration(0.5s); - text-decoration: none; - color: white; - font-size: 3em; - line-height: 1.5; - width: 100%; - display: block; - - &:hover { - background-color: rgba(0, 0, 0, 0.5); - } - } -} - -.menu-section { - &.on { - z-index: 10; - width: 100%; - height: 100%; - display: block; - background-color: rgba(0, 0, 0, 0.5); - position: absolute; - } -} -.page_container { - display:block; - position:relative; - height: auto; - width: 100%; - min-height: auto; - -} - -.img { - display: flex; - flex-direction: column; - justify-content: center; - height: 120px; - width: 120px; - object-fit: cover; - - -} From ba031a593a60af00276657dcf05def11f808b79b Mon Sep 17 00:00:00 2001 From: Danny Romero <108970600+Elenar9@users.noreply.github.com> Date: Tue, 28 Mar 2023 15:34:37 +0100 Subject: [PATCH 5/7] update --- css/main.css | 26 +++++++++++++++++++++++++- index.html | 13 ++++++------- 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/css/main.css b/css/main.css index d1e3efd8..f094dedf 100644 --- a/css/main.css +++ b/css/main.css @@ -23,10 +23,31 @@ body { line-height: 1.4; } -.grid { +/*.grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; +}*/ +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box2 { + display: grid; + justify-content: flex-end; + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + +} + +.box3 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; } .header { @@ -53,4 +74,7 @@ flex-direction: column; align-items: center; } +.navigation{ + +} diff --git a/index.html b/index.html index ec687938..621cf0c9 100644 --- a/index.html +++ b/index.html @@ -39,13 +39,12 @@

Full Stack Developer Trainee at CYF.

-

Hello

-

Here's who I am & what I do

-

I'm a paragraph. Click here to add your own text and edit me. - It's easy. Just click “Edit Text” or double click me to - add your own content and make changes to the font.

-

I'm a great place for you to tell a story and let your users know - a little more about you

+

Hello Word

+

Welcome

+

My name is Danny and I'm a full stack Software Engineer + and I'm looking for an opportunity in the industry + to gain experience

+

I am hard worked and my strength is teamwork and market analysis

From a23bf7a42ed51f8cf25a1de3dab195eeeead5943 Mon Sep 17 00:00:00 2001 From: Elenar9 Date: Sun, 2 Apr 2023 15:12:35 +0100 Subject: [PATCH 6/7] Html-Css-coursework-Week4 update index and css --- css/main.css | 43 +++++++++++++++++++++++++++++++++++++++++-- index.html | 12 +++++++----- 2 files changed, 48 insertions(+), 7 deletions(-) diff --git a/css/main.css b/css/main.css index f094dedf..eff0af60 100644 --- a/css/main.css +++ b/css/main.css @@ -74,7 +74,46 @@ flex-direction: column; align-items: center; } -.navigation{ - +.hidden{ + display: flex; + flex-direction: row; + margin: 0 10px 0 0; + +} +.fa { + padding: 20px; + font-size: 30px; + width: 30px; + text-align: center; + text-decoration: none; + margin: 3px 2px; +} + +.fa:hover { + opacity: 0.7; +} + +.fa-facebook { + background: white; + color: #3B5998; } +.fa-twitter { + background: white; + color: #55ACEE; +} + +.fa-linkedin { + background: white; + color: #007bb5; +} + +.fa-instagram { + background: white; + color: #125688; +} +.social-media{ + display: flex; + flex-direction: row; + align-items:; +} \ No newline at end of file diff --git a/index.html b/index.html index 621cf0c9..917582b2 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Responsive grid project @@ -17,7 +18,7 @@

Danny Romero

-

Full Stack Developer Trainee at CYF.

+

Full Stack Developer Trainee at CYF.

@@ -58,10 +59,11 @@

Danny Romero

From c59b6a469aeae46998a1ad2368f53d2340415ade Mon Sep 17 00:00:00 2001 From: Elenar9 Date: Mon, 17 Apr 2023 16:51:46 +0100 Subject: [PATCH 7/7] Create settings.json --- .vscode/settings.json | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +}