Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
styled first row
  • Loading branch information
@mdr19002
mdr19002 committed Feb 16, 2020
1 parent 4cd195c commit ed9fbaf
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 44 deletions.
58 changes: 32 additions & 26 deletions css/axit.css
View file
Expand Up @@ -102,49 +102,51 @@ textarea {
box-sizing: border-box; box-sizing: border-box;
} }


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


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


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


.desktop {
display: none;
}

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


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

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


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


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


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


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


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

#social-banner { #social-banner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
Expand All @@ -219,12 +214,23 @@ textarea {
font-size: 2em; 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) { @media (min-width: 700px) {
.mobile { .mobile {
display: none; display: none;
} }
.desktop { .desktop {
display: block; display: flex;
padding: 25px 0;
} }
} }


Expand Down
49 changes: 31 additions & 18 deletions wk3_axit.html
View file
Expand Up @@ -13,6 +13,7 @@


<link rel="stylesheet" href="css/normalize.css"> <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://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"> <link rel="stylesheet" href="css/axit.css">


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


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


<main> <main class="bg">
<div class="centered"> <div class="centered">
<div> <div>
<img src="img/axit_logo.png" alt="AXIT logo"> <img src="img/axit_logo.png" alt="AXIT logo">
Expand All @@ -66,7 +65,7 @@
</div> </div>
</main> </main>


<div id="social-container"> <div id="social-container" class="bg">
<div id="social-banner" class="centered"> <div id="social-banner" class="centered">
<div id="social-text"> <div id="social-text">
<h3>Social Media</h3> <h3>Social Media</h3>
Expand All @@ -85,6 +84,20 @@
</div> </div>
</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="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>
Expand Down

0 comments on commit ed9fbaf

Please sign in to comment.