Skip to content

Oct 19 responsiveness #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shrubin2 wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Oct 19 responsiveness #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
db525b6
redesigned div borders
shrubin2 Oct 16, 2019
8b59d5d
refactored section 1
shrubin2 Oct 16, 2019
d58da98
did homepage
shrubin2 Oct 17, 2019
f1aecbb
working on tool page
shrubin2 Oct 17, 2019
29f83c3
done with tools
shrubin2 Oct 17, 2019
742dc0e
done with mission
shrubin2 Oct 17, 2019
4bead0c
done with team
shrubin2 Oct 17, 2019
41ae310
working on in-your-city
shrubin2 Oct 17, 2019
bc5569b
in-your-city
shrubin2 Oct 17, 2019
1f2d716
working on mobile
shrubin2 Oct 23, 2019
7466d40
fuck travis
shrubin2 Oct 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 170 additions & 69 deletions _sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,28 @@ body {

.btn {
height: 50px;
color: #FFFFFF;
font-size: 24px;
line-height: 28px;
display: flex;
align-items: center;
text-align: center;
background-color: #464646;
border-radius: 9px;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}

.btn:hover {
background-color: #888888;
box-shadow: 4px 0 4px rgba(0, 0, 0, 0.25), 0 4px 4px rgba(0, 0, 0, 0.25);
}
.btn-primary {
background-color: #464646;
color: #FFFFFF;
}

.btn-secondary {
color: #464646;
border: 3px solid #464646;
}

a.button {
Expand All @@ -53,12 +61,18 @@ a.button {
.hero-banner {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 6px;
border-bottom: 10px solid #1BA4E3;
h1 {
font-size: 38px;
line-height: 46px;
font-style: normal;
font-weight: 500;
font-size: 48px;
line-height: 56px;
text-align: center;
@media only screen and (min-width: 600px) {
font-size: 48px;
line-height: 56px;
}
}
h2 {
font-style: normal;
Expand All @@ -72,165 +86,252 @@ a.button {
.page-content {
@extend %content-width;
}

.section-1 {
height: 387px;
display: flow-root;
@media only screen and (min-width: 600px) {
display: flex;
}

background: linear-gradient(292.39deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%);
border-top: 10px solid #FEF035;
border-bottom: 10px solid #F18DB9;
border-left: 10px solid #F59331;
border-right: 10px solid #F59331;
margin-bottom: 6px;
.h1-left {
display: inline-block;
width: 280px;
text-align: center;
transform: translate(190px, 120px);
width:100%;
@media only screen and (min-width: 600px){
width:40%;
}
h1 {
@media only screen and (min-width: 600px) {
padding-top:80px;
}
}
img {
height: 300px;
}
}

.center-btn {
.btn-learn {
width: 170px;
margin-top: 60px;
padding: 0px 0px 0px 24px;
padding: 0 0 0 24px;
}

margin: 0 auto;
width: 50%;
width: 20%;
text-align: center;
.img-container {
height: 130px;
padding-top: 10px;
img {
margin-bottom: -53px;
height: 80px;
@media only screen and (min-width: 600px) {
height: 130px;
}
}
}
}

.homepage-p-right {
display: inline-block;
height: 100px;
width: 330px;
width: 40%;
float: right;
margin: -100px 90px 0px 0px;
padding: 80px 0;
p {
width: 70%;
margin: auto;
}
}

.homepage-p-center {
display: inline-block;
height: 100px;
width: 560px;
margin: 70px 0px 0px 480px;
p {font-size: 20px;}
width: 60%;
margin: auto;
p {
font-size: 20px;
padding: 30px 0;
}
}

.tool-p-right {
display: inline-block;
height: 100px;
float: right;
width: 330px;
margin: 120px 160px 0px 0px
width: 50%;
p {
width: 60%;
margin: auto;
padding-top: 90px;
}
}

.mission-p-right {
display: inline-block;
height: 100px;
float: right;
width: 50%;
p {
width: 60%;
margin: auto;
padding-top: 50px;
}
}
}
.bkgd-1 {
background-image: url(/assets/images/mobile-partition-left.png);
@media (min-width: 501px) {
background-image: url(/assets/images/partition-left.png);
}
background-size: cover;
background-repeat: no-repeat;
width: 130%;
margin-left: -230px;

}

.three-buttons {
border-top: 10px solid #493390;
text-align: center;
.features-img {
height: 170px;
margin: -80px 0px 0px 120px;
height: 90px;
@media only screen and (min-width: 600px) {
height: 170px;
}
margin-top: -70px;
}
}

.section-2 {
display: flex;
border-bottom: 10px solid #F59331;
margin-bottom: 6px;
height: 240px;

.h1-right {
display: inline-block;
width: 280px;
width: 50%;
float: right;
text-align: center;
margin: 30px 100px 0px 0px;
}

.center-text {
width: 51%;
width: 100%;
text-align: center;
margin: auto;
font-size: 20px;
padding: 30px 0px 50px 0px;

p {
width: 70%;
margin: auto;
}
}

.p-left {
display: inline-block;
height: 100px;
float: left;
width: 330px;
margin: 60px 0px 0px 60px;
width: 50%;

p {
width: 60%;
margin: auto;
margin-top: 40px;
}
}

.btn-mission {
width: 170px;
margin-top: 30px;
padding: 0px 0px 0px 32px;
padding: 0 0 0 32px;
}

.btn-div {
width: 100%;
.btn-github {
margin-top: 90px;
}
}
}

.section-3 {
height: 350px;
display: flex;
background: linear-gradient(292.39deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%);
border-top: 10px solid #16A050;
border-bottom: 10px solid #DE1D41;
border-left: 10px solid #F18DB9;
border-right: 10px solid #F18DB9;
margin-bottom: 6px;
height: 300px;

.h1-left {
display: inline-block;
width: 280px;
width: 50%;
padding-top: 60px;
text-align: center;
transform: translate(140px, 80px);
}

.p-left {
display: inline-block;
height: 100px;
float: left;
width: 330px;
margin: 100px 0px 0px 130px;
width: 50%;

p {
width: 60%;
margin: auto;
padding-top: 100px;
}
}

.p-right {
display: inline-block;
height: 100px;
float: right;
width: 330px;
margin: 100px 300px 0px 0px;
width: 50%;

p {
padding-top: 100px;
width: 60%;
margin: auto;
}

img {
height: 320px;
margin-left: 90px;
margin-top: -7px;
}
}

.center-text {
width: 31%;
text-align: center;
margin: auto;
font-size: 20px;
padding: 110px 310px 50px 0px;
}
.btn-team {
width: 170px;
margin-top: 30px;
padding: 0px 0px 0px 40px;
padding: 0 0 0 40;
}
}

.bkgd-2 {
background-image: url(/assets/images/mobile-partition-right.png);
@media (min-width: 501px) {
background-image: url(/assets/images/partition-right.png);
}
background-size: cover;
background-repeat: no-repeat;
width: 130%;
margin-right: -230px;
}
.section-4 {
border-top: 10px solid #1BA4E3;
height: 260px;
text-align: center;
width: 440px;
margin: auto;

.p-center {
width: 121%;
text-align: center;
margin: auto;
font-size: 27px;
padding: 50px 0px 100px 0px;
font-size: 20px;
padding: 50px 0 100px 0;
}
}
.btn-github {
width: 240px;
margin-top: 30px;
padding: 0px 0px 0px 37px;
p {
width: 50%;
margin: auto;
padding-top: 30px;
}
}

*:focus {
outline: none;
box-shadow: 0px 0px 0px 3px $orange;
outline: none;
box-shadow: 0 0 0 3 $orange;
}

Loading