Skip to content
Permalink
Browse files

styled form

  • Loading branch information
mdr19002 committed Feb 17, 2020
1 parent ed8584d commit 4e68377699f7d425b292bf8f8b09147fe1055369
Showing with 44 additions and 13 deletions.
  1. +39 −8 css/axit.css
  2. +5 −5 wk3_axit.html
@@ -104,12 +104,12 @@ textarea {

.bg {
width: 100vw;
display: flex;
justify-content: center;
display: block;
}

.centered {
width: 80vw;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
@@ -196,31 +196,58 @@ textarea {
}

#form-container {
display: flex;
justify-content: center;
font-family: 'Open Sans', sans-serif;
}

form {
width: 250px;
margin: 30px auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: white;
border-radius: 3px;
}

form h3 {
background-color: gray;
margin: 0;
background-color: #f5f5f5;
margin-top: 0;
margin-bottom: 25px;
padding: 10px 50px;
font-weight: 700;
color: black;
border-radius: 3px 3px 0 0;
font-size: 14px;
}

#free {
color: #ff9b51;
}

form input {
width: 75%;
background-color: transparent;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #f5f5f5;
border-bottom: 1px solid #bdbdbd;
margin-bottom: 25px;
color: #bdbdbd;
font-size: 12px;
font-weight: 400;
padding: 8px 10px;
}

form button {
width: 100%;
background-color: #ff9b51;
color: white;
font-weight: 600;
border: none;
border-radius: 0 0 3px 3px;
padding: 15px 0;
font-size: 12px;
margin-top: 15px;
}

#social-banner {
@@ -282,8 +309,12 @@ textarea {
margin-top: 50px;
}
#form-container {
display: flex;
justify-content: flex-end;
}
form {
margin: 0;
}
}

@media (min-width: 835px) {
@@ -13,7 +13,7 @@

<link rel="stylesheet" href="css/normalize.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway:300,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Raleway:300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/axit.css">

<meta name="theme-color" content="#fafafa">
@@ -55,10 +55,10 @@ <h1 class="raleway">MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
</div>
<div id="form-container">
<form>
<h3>Try Your <span>FREE</span> Trial Today</h3>
<input type="text">
<input type="text">
<input type="text">
<h3>Try Your <span id="free">FREE</span> Trial Today</h3>
<input type="text" placeholder="Name">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Get Started</button>
</form>
</div>

0 comments on commit 4e68377

Please sign in to comment.
You can’t perform that action at this time.