Created
August 31, 2018 10:59
-
-
Save joel-extremo/703059952f025083acaf3db11ffebb64 to your computer and use it in GitHub Desktop.
2.3: Modal Windows
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Bugs Bunny</title> | |
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> | |
<!-- Bootstrap core CSS --> | |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> | |
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> | |
<link rel="stylesheet" href="css/bootstrap.min.css"> | |
<link rel="stylesheet" href="css/styles.css"> | |
</head> | |
<body> | |
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-custom"> | |
<a class="navbar-brand" href="#">BugsBunny</a> | |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
<ul class="navbar-nav ml-auto xm-mx-auto"> | |
<li class="nav-item"> | |
<a class="nav-link" href="#video">video</a> | |
</li> | |
</ul> | |
</div> | |
</nav><!-- end navbar --> | |
<div class="container"> | |
<section id="video"> | |
<h1 class="text-center">Video</h1> | |
<div class="embed-responsive embed-responsive-16by9"> | |
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/O7w7xp9q71w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> | |
</div> | |
<div class="row"> | |
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target=".bd-example-modal">Lear More about Bugs Bunny</button> | |
</div> | |
</section><!-- end video --> | |
<section id="contact"> | |
<h1 class="text-center">Contact Bugs Bunny</h1> | |
<div class="row"> | |
<div id="info" class="col-sm"> | |
<h3 class="d-none d-sm-block">Get in touch</h3> | |
<p class="d-none d-sm-block">he wants to know you</p> | |
<ul id="contact-list"> | |
<li><i class="fas fa-phone"></i>1-829-849-2121</li> | |
<li><i class="far fa-envelope"></i>jmrv002@gmail.com</li> | |
<li><i class="fab fa-instagram"></i>@jmrv002</li> | |
<li><i class="fab fa-facebook-square"></i>Joel Rodriguez Varona</li> | |
</ul> | |
</div><!-- end info --> | |
<div id="form" class="col-sm"> | |
<h3>Send us a message</h3> | |
<form action="/message" method="post"> | |
<div class="form-group"> | |
<label for="name">Name</label> | |
<input id="name" class="form-control" name="name" type="text" placeholder="Juan Mendez" minlength="3" required> | |
</div> | |
<div class="form-group"> | |
<label for="email">Email</label> | |
<input id="email" class="form-control" name="email" type="email" placeholder="example@gmail.com" minlength="3" required> | |
</div> | |
<div class="form-group"> | |
<label for="message-box">Message</label> | |
<textarea id="message-box" class="form-control" name="message" placeholder="YOUR MESSAGE" style="resize:none" cols="40" rows="5" required></textarea> | |
</div> | |
<button type="submit" class="btn btn-primary">Submit</button> | |
</form> | |
</div><!-- end form --> | |
</div> | |
</section><!-- end contact --> | |
</div><!-- end container --> | |
<footer> | |
<div class="row"> | |
<div id="social-media" class="col-sm"> | |
<div class="social-media-container"> | |
<a href="https://twitter.com/jmrv002?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Follow @jmrv002</a> | |
</div> | |
<div class="social-media-container"> | |
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FUniversidadAPEC.UNAPEC%2F&width=200&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=317854238964944" width="400" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> | |
</div> | |
</div><!-- end social media --> | |
<div class="col-sm"> | |
<div id="copyright">Copyright <span>©</span> All Rights Reserved</div> | |
</div> | |
</div> | |
</footer><!-- end footer --> | |
<!-- Modal --> | |
<div class="modal fade bd-example-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> | |
<div class="modal-dialog modal-lg"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h5 class="modal-title" id="exampleModalLabel">Bugs Bunny in DOUBLE TROUBLE</h5> | |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
<span aria-hidden="true">×</span> | |
</button> | |
</div> | |
<div class="modal-body"> | |
<embed id="modal-embed" src="documents/bugs_bunny.pdf"> | |
</div> | |
</div> | |
</div> | |
</div><!-- end modal --> | |
<!-- Javascript --> | |
<script src="js/jquery-3.3.1.min.js"></script> | |
<script src="js/bootstrap.min.js"></script> | |
<script src="js/main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h1{ | |
margin-bottom: 50px; | |
} | |
section{ | |
margin-top: 50px; | |
} | |
/*** video ***/ | |
#video button{ | |
margin-top: 50px; | |
} | |
/*** contact ***/ | |
.form-control{ | |
width: 80%; | |
} | |
/*** footer ***/ | |
.footer a:active { | |
color: #ff0000; | |
} | |
footer { | |
width: 100%; | |
background-color: lightgray; | |
color: black; | |
} | |
.social-media-container{ | |
padding: 15px; | |
text-align: left; | |
} | |
#copyright{ | |
text-align: center; | |
margin-top: 10%; | |
} | |
/*** modal ***/ | |
#modal-embed { | |
height: 500px; | |
width: 100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment