diff --git a/README.md b/README.md index ae576a9..ebef998 100644 --- a/README.md +++ b/README.md @@ -1 +1,13 @@ -# Web-UI \ No newline at end of file +# Web-UI + +This is the marketing page for KickStarter Success and consist of a the Landing(Home) and the Meet The Team(Team) page with a link to the react through the login button. + +## Less +Less is being used for styling in which everything is compiled into the index.css file by importing all less files into the index.less. + +Navigation, footer, and global are in their own less files and are used accross the site. + +### Variables + +Variables reside within their own less file titled variables.less + diff --git a/about.html b/about.html index e408072..2ac3b2a 100644 --- a/about.html +++ b/about.html @@ -41,7 +41,7 @@

Meet The Team

- A picture of a DE + A picture of a DE
    diff --git a/css/index.css b/css/index.css index 26d505e..57fdda1 100644 --- a/css/index.css +++ b/css/index.css @@ -184,6 +184,12 @@ h3 { margin-left: 0; } } +@media (max-width:530px) { + .navigation .kickstarter-success-logo { + margin-left: -1rem; + width: 100%; + } +} .navigation .kickstarter-success-logo img { width: 6rem; margin: auto; @@ -192,15 +198,21 @@ h3 { } @media (max-width:530px) { .navigation .kickstarter-success-logo img { - width: 12%; + width: 5rem; align-content: center; - margin-left: 6rem; + margin-left: auto; } } .navigation .kickstarter-success-logo p { font-size: 3rem; font-weight: 400; } +@media (max-width:530px) { + .navigation .kickstarter-success-logo p { + font-size: 3rem; + margin-left: 1rem; + } +} .navigation nav { margin: auto; display: flex; @@ -231,7 +243,6 @@ h3 { text-align: center; align-items: center; font-size: 3rem; - margin-left: 3rem; } } footer { @@ -326,16 +337,15 @@ footer { .intro-section img { width: 50%; } -@media (max-width: 1550px) { +@media screen and (max-width: 1550px) and (min-width: 531px) { .intro-section img { width: 70%; - padding-left: 12rem; + padding-left: 15rem; } } @media (max-width:530px) { .intro-section img { - width: 100vw; - padding-bottom: 5rem; + width: 100%; } } .body-content { @@ -763,14 +773,10 @@ footer { background: linear-gradient(90.4deg, #74d5ab 0.21%, #abd7c4 99.73%); padding-bottom: 10rem; } -@media (max-width: 1550px) { - .about-upper-portion { - padding-bottom: 0rem; - } -} @media (max-width:530px) { .about-upper-portion { - padding-bottom: 8rem; + padding-bottom: 4rem; + width: 100%; } } .about-upper-portion .about-us { @@ -780,14 +786,10 @@ footer { margin: 0 auto; padding: 5rem; } -@media (max-width: 1550px) { - .about-upper-portion .about-us { - padding: 5rem 0; - } -} @media (max-width:530px) { .about-upper-portion .about-us { width: 100%; + padding: 4rem; } } .about-upper-portion .about-us .about-info { @@ -806,7 +808,7 @@ footer { } @media (max-width:530px) { .about-upper-portion .about-us .about-info h1 { - font-size: 5rem; + font-size: 4rem; padding-top: 2rem; } } @@ -817,7 +819,7 @@ footer { } @media (max-width:530px) { .about-upper-portion .about-us .about-info p { - font-size: 2.5rem; + font-size: 2rem; } } .meet-the-team { diff --git a/img/Jordan Ireland.jpg b/img/Jordan Ireland.jpg new file mode 100644 index 0000000..e4b99ee Binary files /dev/null and b/img/Jordan Ireland.jpg differ diff --git a/img/jordan-ireland.jpg b/img/jordan-ireland.jpg deleted file mode 100644 index bebd9b7..0000000 Binary files a/img/jordan-ireland.jpg and /dev/null differ diff --git a/less/about.less b/less/about.less new file mode 100644 index 0000000..1602a3d --- /dev/null +++ b/less/about.less @@ -0,0 +1,122 @@ + +.about-upper-portion{ + background: linear-gradient(90.4deg, #74d5ab 0.21%, #abd7c4 99.73%); + padding-bottom: 10rem; + + @media @mobile{ + padding-bottom: 4rem; + width: 100%; + } + .about-us{ + display:flex; + flex-flow: column wrap; + align-items: center; + margin:0 auto; + padding: 5rem; + + @media @mobile{ + width: 100%; + padding: 4rem; + } + .about-info{ + width: 40%; + line-height: 5rem; + @media @mobile{ + width: 100%; + } + h1{ + text-align: center; + font-size: 6rem; + padding-bottom: 2rem; + @media @mobile{ + font-size: 4rem; + padding-top: 2rem; + } + } + + p{ + font-size: 3rem; + text-align: center; + font-weight: 400; + + @media @mobile{ + font-size:2rem; + } + } + } + } +} + +.meet-the-team{ + margin: 0 auto; + display:flex; + flex-flow: column wrap; + align-items: center; + padding: 2rem 0; + font-size: 3rem; + + @media @mobile{ + padding: 3rem; + } + h2{ + text-align: center; + font-size: 2.5rem; + } +} + +.team-profiles{ + display: flex; + flex-wrap: wrap; + width: 80%; + padding: 1rem 0; + + + + + .team-profile{ + width: 30vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 1 0; + padding: 8rem; + border-radius: 6px; + background: whitesmoke; + color: #6e6e6e; + box-shadow: 2px 2px 2px rgba(0,0,0,0.85); + margin: 1rem; + @media @mobile{ + padding: 4rem; + } + + .team-profile-img{ + width: 150px; + height: 150px; + justify-self: center; + border-radius: 50%; + box-shadow: 2px 2px 2px #a7a6a6; + + img{ + width: 100%; + border-radius: 50%; + align-self: center; + filter: grayscale(40%); + } + } + + .team-role{ + padding: 2rem; + text-align: center; + font-size: 1.5rem; + } + .github-link{ + align-self: center; + i{ + font-size: 3rem; + color: @main-bg-color; + } + } + } + + } diff --git a/less/home-page.less b/less/home-page.less index 5723a20..40315bb 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -34,7 +34,7 @@ justify-content: space-between; - @media @laptop{ + @media @laptop { flex-flow: row nowrap; width: 30%; } @@ -95,15 +95,13 @@ width: 50%; - @media @laptop{ + @media screen and (max-width: 1550px) and (min-width: 531px) { width: 70%; - padding-left: 12rem; + padding-left: 15rem; } @media @mobile{ - width: 100vw; - - padding-bottom: 5rem; + width: 100%; } } } diff --git a/less/navigation.less b/less/navigation.less index 257777e..b11ed6b 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -21,8 +21,14 @@ margin-left: 5rem; @media @laptop{ - margin-left: 0; + margin-left: 0; + + } + @media @mobile{ + margin-left: -1rem; + width: 100%; + } img{ @@ -32,9 +38,10 @@ font-size: 4rem; @media @mobile{ - width: 12%; + width: 5rem; align-content: center; - margin-left: 6rem; + margin-left: auto; + } } @@ -42,6 +49,10 @@ font-size: 3rem; font-weight: 400; + @media @mobile{ + font-size: 3rem; + margin-left: 1rem; + } } } @@ -61,7 +72,7 @@ width: 100%; text-align: center; justify-content: space-evenly; - + } @@ -78,7 +89,7 @@ text-align: center; align-items: center; font-size: 3rem; - margin-left: 3rem; + } } } diff --git a/less/variables.less b/less/variables.less index 88e1d13..9ccf39e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -23,6 +23,7 @@ @mobile: ~'(max-width:530px)'; @laptop: ~'(max-width: 1550px)'; + //Fonts @lato: 'Lato', sans-serif; \ No newline at end of file