Skip to content
Permalink
Browse files

bootstrap hw

  • Loading branch information
mdr19002 committed Apr 6, 2020
1 parent 65420b6 commit cee29ae6f2e24c2e9ced6b2617d4cb5fab598caf
Showing with 231 additions and 0 deletions.
  1. +138 −0 css/axit_bootstrap.css
  2. +93 −0 wk10_axit_bootstrap.html
@@ -0,0 +1,138 @@

html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 65px; /* Margin bottom by footer height */
}

.container, .logo, .row, [class^="col"] {
background-color: hsla(199, 74%, 78%, 0.15);
border: 1px solid hsla(199, 74%, 78%, 0.4);
}

.raleway {
color: white;
font-family: "Raleway", sans-serif;
}

.raleway h1{
font-weight: 400;
}

.raleway p {
font-weight: 300;
}

#download {
font-family: 'Open Sans', sans-serif;
font-weight: semibold;
border: 3px solid white;
width: 160px;
text-align: center;
padding: 10px 30px;
margin-top: 30px;
}

hr{
border-top: 2px solid white;
width: 60px;
align: center;
margin-bottom: 30px;
}

#form-container {
font-family: 'Open Sans', sans-serif;
}

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

form h3 {
width: 75%;
margin-top: 0;
margin-bottom: 25px;
padding: 10px 30px;
font-weight: 700;
color: black;
border-radius: 3px 3px 0 0;
font-size: 14px;
}

#free {
color: #ff9b51;
}

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

form button {
width: 75%;
font-weight: 600;
border: none;
border-radius: 0 0 3px 3px;
padding: 15px 0;
font-size: 12px;
margin-top: 15px;
}

#social-text {
font-family: 'Open Sans', sans-serif;
}

#social-text h3 {
font-weight: 700;
margin: 5px;
font-size: 24px;
}

#social-text p {
font-weight: 400;
}

#social-icons {
font-size: 36px;
}

#social-icons i {
margin: 0 5px;
}

footer {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: absolute;
bottom: 0;
left:0;
right:0;
margin: auto;
height: 65px; /* Set the fixed height of the footer here */
}

#footer-icons i {
margin: 10px;
font-size: 24px;
}

#copyright {
font-size: 12px;
}
@@ -0,0 +1,93 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>AXIT - Landing Page (Bootstrap)</title>
<meta name="description" content="Responsive Layout with Bootstrap">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Raleway:300,400&display=swap" rel="stylesheet">
<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 rel="stylesheet" href="css/axit_bootstrap.css">
</head>

<body>
<div class="container">

<header class="row">
<nav class="col navbar navbar-expand-sm">
<p class="navbar-brand">LOGO</p>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">Menu</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="navbar-item"><a href="#" class="nav-link">Features</a></li>
<li class="navbar-item"><a href="#" class="nav-link">About</a></li>
<li class="navbar-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="navbar-item"><a href="#" class="nav-link">Reviews</a></li>
<li class="navbar-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
</header>

<main class="row mt-3">
<div class="col-md" id="main-text">
<p class="text-center text-md-left logo">LOGO</p>
<h1 class="text-center text-md-left">MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
<hr>
<p class="text-center text-md-left">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 class="mx-auto mx-md-0" id="download">Download</p>
</div>
<div class="col-md" id="form-container">
<form>
<h3 class="text-center">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>
</main>

<div id="social-container" class="row mt-3">
<div id="social-text" class="col-lg-7 text-center">
<h3>Social Media</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean euismod bibendum laoreet.</p>
</div>
<div id="social-icons" class="col-lg-5 text-center text-lg-left">
<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>

<footer class="container">
<div id="footer-icons" class="text-center">
<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 class="text-center" id="copyright">© 2015 Axure Themes</p>
</footer>

</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

0 comments on commit cee29ae

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