Skip to content

Commit

Permalink
updated mobile-first
Browse files Browse the repository at this point in the history
  • Loading branch information
@jzc16101
jzc16101 committed Feb 14, 2020
1 parent 44f9b75 commit d522391
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 47 deletions.
4 changes: 3 additions & 1 deletion css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,9 @@ textarea {
/* ==========================================================================
Author's custom styles
========================================================================== */

* {
box-sizing: border-box;
}
/* ==========================================================================
Helper classes
========================================================================== */
Expand Down
99 changes: 85 additions & 14 deletions css/mobile-first.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,11 @@
/* ==========================================================================
Author's custom styles
========================================================================== */

/*Styles for Header */
* {
box-sizing: border-box;
}
header {
background-color: #000;
font-family: 'Open Sans', sans-serif;
Expand All @@ -106,7 +110,6 @@
header nav a {
color: #ffffff;
text-decoration: none;

}
header nav a:hover{
color: black;
Expand All @@ -118,12 +121,12 @@
}
#main-background {
background-image: url("../img/u2_state0.jpg");
padding: 150px;
background-size: cover;
background-repeat: no-repeat;
padding: 50px;
}
#white {
background-color: white;
padding: 30px 0 0 0;
}
footer {
background-color: black;
Expand All @@ -134,33 +137,88 @@
}
form {
background-color: white;
padding: 20px;
border: none;
border-radius: 5px;
margin: 50px;
}
input {
width: 100%;
border-top: none;
border-bottom: 1px solid grey;
border-right: none;
border-left: none;
margin-bottom: 25px;
}
#free-trial {
border-radius: 5px 5px 0px 0px;
background-color: #e0e0df;
padding: 10px 5px;
padding: 10px auto;
}
#download {
background-color: transparent;
border: white solid 2px;
color: white;
padding:10px 5px;
margin: 0px;
padding:10px 25px;
margin: auto;
}
h3 {
margin: 0px;
}
#logo {
margin: 5px;

.logo > img {
width: 20%;
}
.white {
color:white;
display: flex;
}
.grey {
color: gray;
}
#get-started {
color: white;
padding: auto;
background-color: #ff9900;
width: 100%;
border: none;
border-radius: 0 0 5px 5px;
}
hr {
width: 20%;
border-top: 2px solid white;
}
i {
width: 100%;
color: grey;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.social {
width: 40%;
}
.icons {
width: 60%;
}
#bottom {
display: flex;
justify-content: space-around;
align-items: center;
width: 50%;
margin: auto;
position: center;
flex-direction: column;
}
#b-icons {
display: flex;
justify-content: space-around;
align-items: center;
}
#section1 {
margin: 50px;
}

/*Desktop*/
@media (min-width: 768px){
div.centered {
Expand All @@ -170,10 +228,18 @@
display: flex;
justify-content: space-between;
}
.logo > img {
width: 50%;
}
header nav {
display: flex;
align-items: center;
}
#main-background {
background-image: url("../img/u2_state0.jpg");
padding: 100px 0px;
background-size: cover;
}
nav > ul {
display: flex;
list-style-type: none;
Expand All @@ -184,17 +250,22 @@
display: block;
padding: 5px 10px;
}
#section1 {
padding-right: 10%;

}
ul {
display: flex;
justify-content: space-around;
}
.half {
width: 50%;
}
#download {
margin: 0;
}
form {
margin-left: 50%;
}
#section1 {
margin: none;
}

}
/* ==========================================================================
Expand Down
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="https://use.fontawesome.com/d4e127e2d0.js"></script>
<script src="https://kit.fontawesome.com/9c045b0ca9.js" crossorigin="anonymous"></script>

<meta name="theme-color" content="#fafafa">
</head>
Expand Down
70 changes: 38 additions & 32 deletions mobile-first.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/mobile-first.css">
<script src="https://use.fontawesome.com/d4e127e2d0.js"></script>
<script src="https://kit.fontawesome.com/9c045b0ca9.js" crossorigin="anonymous"></script>

<meta name="theme-color" content="#fafafa">
</head>
Expand All @@ -25,9 +27,9 @@
<!-- Add your site or application content here -->
<header>
<div class="centered">
<logo id="logo">
<div class="logo">
<img src="img/logo_navbar_u70.png" alt="logo">
</logo>
</div>
<nav>
<ul>
<li><a href="#">Features</a></li>
Expand All @@ -41,53 +43,57 @@
</header>
<div id="main-background"><!---background image-->
<div class="centered">
<div id="section1">
<div class="half" id="section1">
<img src="img/logo_navbar_u701.png" alt="AXIT">
<h1>MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
<hr>
<p class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente expedita quo similique, totam temporibus exercitationem! Iure corrupti est, quod expedita cumque harum quibusdam vitae, doloribus praesentium porro temporibus ut soluta!</p>
<button type="button" id="download">Download</button>
</div>
<div>
<div id="form">
<h3 id="free-trial">Try Your FREE Trial Today</h3>
<form action="/action_page.php" method="get">
Name: <input type="text" name="name"><br>
Email: <input type="text" name="email"><br>
Password: <input type="text" name="password"><br>
</form>
<div class="half" id="form">
<form action="/action_page.php" method="get">
<h3 id="free-trial">Try Your FREE Trial Today</h3>
<div>
<input type="text" name="name" placeholder="Name"><br>
<input type="email" name="email" placeholder="Email"><br>
<input type="password" name="password" placeholder="Password"><br>
</div>
<button type="submit" id="get-started">Get Started</button>
</div>
</form>

</div>
</div>
</div>
<div class="centered" id="white"><!--white background-->
<div class="half">
<div class="social">
<h3>Social Media</h3>
<p class="grey">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quis molestias accusantium quam quasi tempore perspiciatis, atque eveniet facere vel optio veritatis veniam ut, ex nesciunt blanditiis. Saepe, adipisci beatae.</p>
<p class="grey">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="half">
<div class="icons">
<ul>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Google Plus</a></li>
<li><a href="">Pinterest</a></li>
<li><a href="">Instagram</a></li>
<li><a href="">Icon</a></li>
<li><a href="">Icon</a></li>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-google-plus-g"></i></li>
<li><i class="fab fa-pinterest"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-stumbleupon"></i></li>
<li><i class="fas fa-wifi"></i></li>
</ul>
</div>
</div>
<footer>
<ul>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Google Plus</a></li>
<li><a href="">Pinterest</a></li>
<li><a href="">Instagram</a></li>
<li><a href="">Icon</a></li>
<li><a href="">Icon</a></li>
</ul>
<p>© 2015 Axure Themes</p>
<div id="bottom">
<ul id="b-icons">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-google-plus-g"></i></li>
<li><i class="fab fa-pinterest"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-stumbleupon"></i></li>
<li><i class="fas fa-wifi"></i></li>
</ul>
<p>© 2015 Axure Themes</p>
</div>
</footer>

<script src="js/vendor/modernizr-3.8.0.min.js"></script>
Expand Down

0 comments on commit d522391

Please sign in to comment.