Skip to content
Permalink
Browse files

added 2nd and 3rd row of axit layout

  • Loading branch information
mdr19002 committed Feb 16, 2020
1 parent e4d6f52 commit 4cd195c00fdddd775d79e8702c5e20193cb2898d
Showing with 153 additions and 6 deletions.
  1. +110 −5 css/axit.css
  2. BIN img/axit_bg.jpg
  3. +43 −1 wk3_axit.html
@@ -117,11 +117,9 @@ textarea {
width: 80vw; width: 80vw;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: blue;

} }


.centered img { header .centered img {
height: 1.3em; height: 1.3em;
align-self: center; align-self: center;
} }
@@ -142,10 +140,83 @@ textarea {
justify-content: flex-end; justify-content: flex-end;
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 16px 0;
} }


.desktop li { .desktop li {
margin: 0 20px; margin-left: 20px;
}

main {
background-image: url(../img/axit_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 10vh 0;
display: flex;
justify-content: center;
text-align: center;
}

main .centered {
flex-direction: column;
align-items: center;
}

main .centered > * {
width: 50%;
}

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

form {
width: 250px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: white;
}

form h3 {
background-color: gray;
margin: 0;
}

form input {
background-color: transparent;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 25px;
}

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

#social-banner {
display: flex;
flex-direction: column;
align-items: center;
}

#social-text {
text-align: center;
}

#social-banner i {
margin: 10px;
}

#social-icons {
display: block;
font-size: 2em;
} }


@media (min-width: 700px) { @media (min-width: 700px) {
@@ -155,8 +226,42 @@ textarea {
.desktop { .desktop {
display: block; display: block;
} }

}


@media (min-width: 768px) {
main {
text-align: left;
}
main .centered {
flex-direction: row;
}
#form-container {
justify-content: flex-end;
}
}

@media (min-width: 835px) {
#social-banner {
flex-direction: row;
justify-content: space-between;
}

#social-text {
width: 33.3333%;
text-align: left;
}

#social-icons {
width: 66.6667%;
text-align: center;
display: flex;
justify-content: space-around;

}

#social-icons i{
font-size: 40px;
}
} }




BIN -560 KB (41%) img/axit_bg.jpg
Binary file not shown.
@@ -26,7 +26,7 @@
<!-- Add your site or application content here --> <!-- Add your site or application content here -->
<header> <header>
<div class="centered"> <div class="centered">
<img src="img/axit_logo.png"> <img src="img/axit_logo.png" alt="AXIT logo">
<nav class="mobile"> <nav class="mobile">
<h2>Menu</h2> <h2>Menu</h2>
<i class="fa fa-chevron-down" aria-hidden="true"></i> <i class="fa fa-chevron-down" aria-hidden="true"></i>
@@ -43,6 +43,48 @@ <h2>Menu</h2>
</div> </div>
</header> </header>


<main>
<div class="centered">
<div>
<img src="img/axit_logo.png" alt="AXIT logo">
<h1>MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
euismod bibendum laoreet. Proin gravida dolor sit amet lacus
accumsan et viverra justo commodo.</p>
<p>Download</p>
</div>
<div id="form-container">
<form>
<h3>Try Your <span>FREE</span> Trial Today</h3>
<input type="text">
<input type="text">
<input type="text">
<button>Get Started</button>
</form>
</div>
</div>
</main>

<div id="social-container">
<div id="social-banner" class="centered">
<div id="social-text">
<h3>Social Media</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean euismod bibendum laoreet.</p>
</div>
<div id="social-icons">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-stumbleupon" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
</div>

<script src="js/vendor/modernizr-3.8.0.min.js"></script> <script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>

0 comments on commit 4cd195c

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