diff --git a/AdobeStock_230407429.webp b/AdobeStock_230407429.webp new file mode 100644 index 00000000..d2344a5e Binary files /dev/null and b/AdobeStock_230407429.webp differ diff --git a/css/main.css b/css/main.css index aa561706..af5a0458 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,267 @@ /* Add your CSS here */ -/* Dont' forget to link this file to your HTML in the */ +body { + margin: 0 auto; + font-family: 'Quicksand', sans-serif; + background: linear-gradient(90deg,#e6dacd 44%, white 44%); + overflow-y: auto; + +} +/*nav bar */ +nav{ + background: white; + height: 150px; + +} +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + align-items: center; + width: calc(100% - 60px); + z-index:1; + height:150px ; + padding: 0 30px; + background: white; + } + + .nav-left { + display: flex; + align-items: center; + } + + .name { + font-style: normal; + font-weight: normal; + font-size: 25px; + line-height: 1.4em; + font-family: 'Poppins Semibold', 'Poppins', sans-serif; + } + + .square { + width: 20px; + height: 20px; + background-color:blue; + margin-right: 10px; + } + + .nav-left p { + margin: 0; + } + + .nav-right { + display: inline-block; + margin: 0; + } + + .nav-right a { + display: inline-block; + margin: 0 10px; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 1.4em; + text-decoration: none; + color: black; + + } + .nav-right a:hover { + color:blue; + } + + + + + +/* centered card and text*/ + main{ + display: grid; + grid-template-columns: 1fr 2fr 2fr 1fr; + grid-template-rows: auto; + grid-template-areas: ". card content ." ; + + + } + + .main-container{ + background-color: #F4ECE6; + border-radius: 5px; + box-shadow: 0 2px 6px rgba(0,0,0,0.3); + width: fit-content; + margin: 4rem; + grid-area: card; + } + + .img-maya{ + width: 205px; + height: 205px; + object-fit: cover; + border-radius: 50%; +} +.icons{ + background-color: white; + padding: 20px; + text-align: center; + +} +.main-info{ + display: inline-block; + padding: 60px; + +} +.aside{ + grid-area: content; + + +} + +.separator { + height: 5px; + width: 50px; + margin: 20px auto; + border-bottom: 2px solid blue; +} +.icons img{ +width:20px; +margin: 0 10px; +} + +h1{ + line-height: 1.4em; + text-align: center; + font-size: 27px; + font-family:'Poppins Semibold', 'Poppins', sans-serif ; + font-weight: bold; +} +.job-title{ + letter-spacing: 0.25em; + font-size: 17px; +} +.aside p { + display: inline-block; + margin: 0; + +} + +.aside p:first-child { + + font-size: 100px; + font-weight: bold; + line-height: 1.4em; + font-family:'Poppins Semibold', 'Poppins', sans-serif ; + white-space: nowrap; + overflow: hidden; + padding-top: 1em; + +} +.aside p:nth-child(2) { + /* styles for second p */ + display: block; + font-size: 25px; + font-weight: bold; + line-height: 1.4em; + padding-bottom: 1em; +} + +.paragraph3 { + line-height: 1.5em; + padding-bottom: 1rem; + font-size: 17px; + text-align: start; + overflow-wrap: break-word; + width:369px; + } + .paragraph4{ + width: 369px; + font-size: 17px; + text-align: start; + padding-top:1rem ; + line-height: 1.5em; +} +/* button's styling*/ +button{ + display: inline-flex; + box-sizing: border-box; + width: max-content; + font-size: 14px; + border-radius: 100px 100px 100px 100px; + text-align: center; + padding: 7px 20px; + margin-right: 10px; + margin-bottom: 3rem; + margin-top: 1em; + border-width: 1px; + background-color: white; + +} +.blue-btn{ + border: 2px solid blue; + background: blue; + color: white; +} +.blue-btn:hover{ + background: white; + color: black; +} + .white-btn{ + border: 1px solid; + background: white; + color: black; + } +.white-btn:hover{ + background-color: blue; + color: white; +} + +/*footer */ +footer{ + background: white; +} +.footer-container { + display: grid; + grid-template-columns: 30% 50%; + padding: 1rem 0 1rem; + justify-content: space-around; + align-items: center; +} + +.footer-p{ + display: block; + margin-top: 40px; + font-size: 12px; +} +.contacts-section { + display: flex; + justify-content: flex-end; + column-gap: 2rem; +} +.contacts-section p{ + text-align: center; + font-weight: bold; + font-family: 'avenir-lt-w01_85-heavy1475544', 'avenir-lt-w05_85-heavy', sans-serif; + font-size: 14px; + line-height: 1.2em; + font-style: normal; + font-weight: normal; + +} +.email a{ + text-decoration: none; + color: inherit; +} +.social .soc-icons { + display: flex; + justify-content: space-around; + align-items: center; +} +.soc-icons img{ + width: 20px; + margin: 0 10px; +} + + + + + + diff --git a/images/fb.png b/images/fb.png new file mode 100644 index 00000000..90fac7d4 Binary files /dev/null and b/images/fb.png differ diff --git a/images/inst.png b/images/inst.png new file mode 100644 index 00000000..0f73017c Binary files /dev/null and b/images/inst.png differ diff --git a/images/linkd.png b/images/linkd.png new file mode 100644 index 00000000..3167fec4 Binary files /dev/null and b/images/linkd.png differ diff --git a/images/twi.png b/images/twi.png new file mode 100644 index 00000000..cf0b5227 Binary files /dev/null and b/images/twi.png differ diff --git a/index.html b/index.html index cd704c69..df3ebba6 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,89 @@ - - + + Responsive grid project + +
+
+
+ maya nelson smiling +

Maya Nelson

+
+

PROJECT MANAGER

+
+
+ Facebook + Twitter + LinkedIn + Instagram +
+
+ +
+

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.

+
+ +
+ + - - -

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

\ No newline at end of file