Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added section 7
  • Loading branch information
mdr19002 committed May 8, 2020
1 parent e5b7aaf commit a7298c0
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 16 deletions.
82 changes: 74 additions & 8 deletions css/main.css
Expand Up @@ -95,15 +95,15 @@ textarea {
font-weight: 400;
padding: 10px 30px;
margin: 0;
font-size: 14pt;
font-size: 12pt;
}

.tiny {
font-size: 10pt;
}

.small {
font-size: 14pt;
font-size: 12pt;
}

.title {
Expand Down Expand Up @@ -214,16 +214,67 @@ textarea {
}

#section-6-img{
width: min-content;
width: 50vw;
margin: 0 auto;
}

#section-6-img img {
max-width: 100%;
}

#section-6-text {
text-align: center;
max-width: 35%;
margin: 0 auto;
}

#section-7 {
background-color: #323969;
text-align: center;
padding: 50px;
}

#section-7 input {
border-radius: 3px;
background-color: #474d78;
border-color: #848bbd;
color: white;
padding: 15px;
border-style: solid;
border-width: 1px;
margin: 10px;
}

#trial-flex-container {
display: flex;
justify-content: center;
}

#trial-img {
align-self: flex-end;
margin-right: 3px;
}

#trial-text {
align-self: flex-start;
}

::placeholder {
color: white;
font-size: 12pt;
}

#section-7 form {
display: flex;
flex-direction: column;
}

#section-7 button {
width: 200px;
}

/* ----------START OF MEDIA QUERIES------------ */

@media (min-width: 484px) {
#section-1 {
background-image: url(/img/bg-1_md.jpeg);
Expand All @@ -232,10 +283,7 @@ textarea {
#section-1 .tiny {
color:#282828;
}
#section-1 h1 {
font-size: 50pt;
}


#section-5 {
background-image: url(/img/bg-2_md.jpeg);
}
Expand All @@ -246,6 +294,9 @@ textarea {
background-image: url(/img/bg-1_lg.jpeg);
min-height: 800px;
}
#section-1 h1 {
font-size: 50pt;
}
#section-2 {
grid-template-columns: 1fr max(40%);
grid-template-rows: auto auto auto auto;
Expand Down Expand Up @@ -315,7 +366,22 @@ textarea {
display: flex;
justify-content: space-evenly;
}


#section-7 form {
flex-direction: row;
}
#form-flex-container {
display: flex;
justify-content: center;
align-items: flex-end;
}
#section-7 input {
width: 20vw;
}
#section-7 button {
width: 20vw;
}

}

@media (min-width: 1921px) {
Expand Down
Binary file added img/arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 12 additions & 8 deletions index.html
Expand Up @@ -131,16 +131,20 @@
<section class="white" id="section-7">
<p class="salmon medium small">THIS FORM DOESN'T HAVE TO WORK</p>
<h3 class="medium title">But create it anyway. Use the right fields...</h3>
<form>
<input>
<input>
<input>
<div id="form-flex-container">
<form class="small">
<input type="text" id="name" placeholder="FULL NAME">
<input type="text" id="email" placeholder="YOUR EMAIL">
<input type="text" id="password" placeholder="PASSWORD">
</form>
<div>
<img>
<p class="small">30 days free trial for all.</p>
<div id="trial-flex-container">
<img id="trial-img" src="img/arrow.png">
<p id="trial-text" class="small">30 days free trial for all.</p>
</div>
<button class="salmon-button">TRY NOW</button>
</div>
<button class="salmon-button">TRY NOW</button>
</form>
</div>
<p class="tiny">And some small text should go here.</p>
</section>

Expand Down

0 comments on commit a7298c0

Please sign in to comment.