Skip to content
Permalink
Browse files

styled first row

  • Loading branch information
mdr19002 committed Feb 16, 2020
1 parent 4cd195c commit ed9fbaf941df77af7d66b97f4e333e70ebec883a
Showing with 63 additions and 44 deletions.
  1. +32 −26 css/axit.css
  2. +31 −18 wk3_axit.html
@@ -102,49 +102,51 @@ textarea {
box-sizing: border-box;
}

header {
background-color: black;
.bg {
width: 100vw;
display: flex;
justify-content: center;
}

.desktop {
display: none;
.centered {
width: 80vw;
display: flex;
justify-content: space-between;
}

.centered {
width: 80vw;
display: flex;
justify-content: space-between;
header {
background-color: black;
font-family: 'Open Sans', sans-serif;
font-weight: semibold;
color: white;
font-size: 13px;
}

.desktop {
display: none;
}

header .centered img {
height: 1.3em;
height: 25px;
align-self: center;
}

.mobile {
align-self: center;
display: flex;
background-color: cyan;
}

.mobile i {
align-self: center;
margin-left: 10px;
}

header ul {
display: flex;
align-items: center;
justify-content: flex-end;
list-style-type: none;
padding: 0;
margin: 16px 0;
padding: 10px 0;
margin: 0;
}

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

main {
@@ -153,8 +155,6 @@ textarea {
background-repeat: no-repeat;
background-position: center;
padding: 10vh 0;
display: flex;
justify-content: center;
text-align: center;
}

@@ -195,11 +195,6 @@ textarea {
margin-bottom: 25px;
}

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

#social-banner {
display: flex;
flex-direction: column;
@@ -219,12 +214,23 @@ textarea {
font-size: 2em;
}

footer {
background-color: black;
color: white;
flex-direction: column;
text-align: center;
padding-top: 20px;
padding-bottom: 5px;
}


@media (min-width: 700px) {
.mobile {
display: none;
}
.desktop {
display: block;
display: flex;
padding: 25px 0;
}
}

@@ -13,6 +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&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/axit.css">

<meta name="theme-color" content="#fafafa">
@@ -24,26 +25,24 @@
<![endif]-->

<!-- Add your site or application content here -->
<header>
<div class="centered">
<header class="bg">
<nav class="centered">
<img src="img/axit_logo.png" alt="AXIT logo">
<nav class="mobile">
<h2>Menu</h2>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</nav>
<nav class="desktop">
<ul>
<li>Features</li>
<li>About</li>
<li>Pricing</li>
<li>Reviews</li>
<li>Contact</li>
</ul>
</nav>
</div>
<ul class="mobile">
<li><h2>Menu</h2></li>
<li><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
</ul>
<ul class="desktop">
<li>Features</li>
<li>About</li>
<li>Pricing</li>
<li>Reviews</li>
<li>Contact</li>
</ul>
</nav>
</header>

<main>
<main class="bg">
<div class="centered">
<div>
<img src="img/axit_logo.png" alt="AXIT logo">
@@ -66,7 +65,7 @@ <h3>Try Your <span>FREE</span> Trial Today</h3>
</div>
</main>

<div id="social-container">
<div id="social-container" class="bg">
<div id="social-banner" class="centered">
<div id="social-text">
<h3>Social Media</h3>
@@ -85,6 +84,20 @@ <h3>Social Media</h3>
</div>
</div>

<footer class="bg">
<div id="footer-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>
<p>© 2015 Axure Themes</p>
</footer>


<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>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>

0 comments on commit ed9fbaf

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