Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added responsive assignment
  • Loading branch information
maa17019 committed Feb 17, 2020
1 parent 69894ee commit 71703a4
Show file tree
Hide file tree
Showing 9 changed files with 173 additions and 4 deletions.
Binary file modified .DS_Store
Binary file not shown.
Binary file added Flexbox Micro-layouts 2/.DS_Store
Binary file not shown.
109 changes: 105 additions & 4 deletions css/responsive.css
Expand Up @@ -329,7 +329,7 @@ width: 100%;
align-items: center;
justify-content: space-around;
}
}


.white{
line-height: normal;
Expand Down Expand Up @@ -402,11 +402,13 @@ width: 100%;
}
#footer-two{
height: 100%;
}

}

@media (min-width: 480px){
#bg {
height: 175%;
height: 185%;
}
}
@media (min-width: 590px){
Expand All @@ -419,6 +421,50 @@ width: 100%;
.column-one p{
width: 600px;
}
}
@media (max-width: 649px){
.big-logos img{
width: 80%;
margin-left: 10%;
text-align: center;
margin-bottom: 10px;

}

}
@media (max-width: 775px){
/*footer!*/

#footer-one{
background-color: white;
height: 25vh;
display: flex;
flex-direction: column;

}
.big-logos img{
width: 70%;
margin-left: 16%;
text-align: center;
margin-bottom: 10px;

}

.white h5{
color: black;
font-family: 'Open Sans';
font-size: 1em;
text-align: left;
}
.white p{
color: black;
font-family: 'Open Sans';
font-size: 0.8em;
text-align: left;
width: 90%;
}
}

}
@media (min-width: 650px){
#bg {
Expand All @@ -442,9 +488,15 @@ width: 100%;
.column-one p{
width: 600px;
}

/*footer!*/
.big-logos img{
width: 100%;
}
.white p{
font-size: 0.7em;
width: 70%;
}
}

@media (min-width: 950px){

#bg {
Expand All @@ -462,6 +514,14 @@ width: 100%;
.column-one p{
width: 350px;
}
/*footer!*/
.big-logos img{
width: 85%;
}
.white p{
font-size: 0.7em;
width: 70%;


}

Expand All @@ -476,6 +536,15 @@ width: 100%;
.column-one p{
width: 400px;
}
/*footer!*/
.big-logos img{
width: 85%;
}
.white p{
font-size: 0.7em;
width: 70%;
}

}
@media (min-width: 1100px){
#bg {
Expand All @@ -487,6 +556,7 @@ width: 100%;
.column-one p{
width: 500px;
}

}

@media (min-width: 1200px){
Expand All @@ -504,6 +574,37 @@ width: 100%;
.column-one p{
width: 600px;
}
/*footer!*/

#footer-one{
background-color: white;
height: 21vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.big-logos img{
width: 90%;
}

.white h5{
color: black;
font-family: 'Open Sans';
font-size: 1em;
margin-bottom: 0px;
margin-left: 10%;
margin-top: 20px;
}
.white p{
color: black;
font-family: 'Open Sans';
font-size: 0.8em;
margin-top: 5px;
margin-left: 10%;
margin-bottom: 20px;
width: 70%;
}
}


Expand Down
Binary file modified week-4/.DS_Store
Binary file not shown.
47 changes: 47 additions & 0 deletions week-4/css/index.css
@@ -0,0 +1,47 @@
body, html{
background-color: white;
}

.container{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
line-height: 80%;


}
.image{
width: 5%;
height: auto;
}
h1, h3{
font-family: Arial, Helvetica, sans-serif;
color: #8a9496;
}
h1{
font-size: 50px;
}
h3{
font-size: 30px;
}
button{
height: 50px;
margin: 20px 0px;
background-color: #48bce2;
color: white;
font-weight: bolder;
font-family: 'Open Sans';
border: solid white 2px;
font-size: 15px;
color: white;
padding: 10px 25px;
border-radius: 10px;
border: 2px solid #409db2;

}
button:hover{
text-decoration: underline;
}
Binary file modified week-4/flexbox defense completion.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added week-4/img/.DS_Store
Binary file not shown.
File renamed without changes
21 changes: 21 additions & 0 deletions week-4/index.html
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout #2</title>
<link href="css/index.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="image">
<img src="img/smile-regular.svg"/>
</div>
<h1>Welcome to the app!</h1>
<h3>Thanks for signing up. Let's take a look around</h3>
<button type="submit" name="Get Started">Begin tour</button>


</div>
</body>
</html>

0 comments on commit 71703a4

Please sign in to comment.