diff --git a/css/main.css b/css/main.css index aa561706..3baca758 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,142 @@ /* Add your CSS here */ /* Dont' forget to link this file to your HTML in the */ + +html { + font-size: 10px; +} + +:root { + --color_15: rgb(0,0,0); + --color_11_square: rgb(255,255,255); + --color_18: rgb(0,80,255); + --font_4: poppins-semibold,poppins,sans-serif; + +} + +body { + font-family: Arial,Helvetica,sans-serif; + width: 320px; + height: 1094.4px; + border: green solid 0.5px; + +} + +/* header section */ + +header { + width: 32rem; + height: 9.1rem; +} + +.header-name::before { + content: ""; + display: inline-block; + margin: 2.4rem 0rem 1.2rem 2rem; + place-self: start; + width: 1.6rem; + height: 1.6rem; + background-color: var(--color_18); + padding: -1px; + margin: -1px; + margin-right: 0.6rem; + /* firstChildMarginTop: -1px; + lastChildMarginBottom: -1px; */ +} + +.header-name { + display: inline-block; + left: 4.8rem; + margin: 2.2rem 0px 1rem; +} + +.header-name, .card-names { + font-size: 2rem; + font-weight: bold; + font-family: var(--font_4); + /* background-color: var(--color_); */ +} + +.header-text { + display: block; + height: 1.68rem; + text-transform: uppercase; +} + +/* card section */ + +card { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 28rem; + height: 37.54rem; + border: palevioletred solid 0.25rem; + +} + +.card-photo { + width: 12rem; + height: 12rem; + border-radius: 10rem; + margin-top: 3rem;; +} + +/* How to adjust the sizes bellow a/c to grid */ +.card-names { + display: block; + margin-top: 1.5rem; + margin-bottom: 3rem; + height: 5.04rem; + border: darkcyan solid 0.2rem; +} + +.card-name-first { + padding: 0rem; + margin: 0rem; +} + +.card-name-last { + padding: 0rem; + margin: 0rem; +} + +.card-btn { + display: flex; + gap: 1.25rem; +} + +.card-btn-1 { + text-transform: uppercase; + width: 12rem; + height: 3.3rem; + background-color: #0150FD; + /* check exact boarder radius */ + border-radius: 3rem; +} + +.card-btn-2 { + text-transform: uppercase; + width: 11.4rem; + height: 3.3rem; + border-radius: 3rem; +} + + +.card-bottom-nav { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 28rem; + height: 4rem; + margin: 5rem 0 1rem 0; + border: powderblue solid 0.25rem; +} + +.card-bottom-nav-icon { + margin: 0rem 0.5rem; +} + + diff --git a/icons/facebook.webp b/icons/facebook.webp new file mode 100644 index 00000000..ae1278b7 Binary files /dev/null and b/icons/facebook.webp differ diff --git a/icons/instagram.webp b/icons/instagram.webp new file mode 100644 index 00000000..4ce532bb Binary files /dev/null and b/icons/instagram.webp differ diff --git a/icons/linkedin.webp b/icons/linkedin.webp new file mode 100644 index 00000000..4712e25d Binary files /dev/null and b/icons/linkedin.webp differ diff --git a/icons/twitter.webp b/icons/twitter.webp new file mode 100644 index 00000000..8adbffa7 Binary files /dev/null and b/icons/twitter.webp differ diff --git a/images/maya.webp b/images/maya.webp new file mode 100644 index 00000000..d47b4798 Binary files /dev/null and b/images/maya.webp differ diff --git a/index.html b/index.html index cd704c69..4b747145 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,146 @@ - - - - + + + + + + + + + - Responsive grid project - + Resume Clone + - + +
+

Maya Nelson

+ project manager + + +
+
+ + photo of Maya smiling +
+

Maya

+

Nelson

+
- +
+ + +
+ + +
+

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. +

- -

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

- +

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

+
+
+ + - \ No newline at end of file + + + +

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

+ + diff --git a/main.js b/main.js new file mode 100644 index 00000000..c4b5ad9d --- /dev/null +++ b/main.js @@ -0,0 +1,8 @@ +const navigation = document.getElementById("navigation") + +const navButton = document.getElementById("nav-btn--open"); + +navButton.addEventListener("click", () => { + navigation.classList.tg + console.log("button clicked"); +});