<!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"> <meta name="description" content=""> <meta name="author" content=""> <title>Controv-issue</title> <!-- Bootstrap Core CSS --> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> <!-- Custom Fonts --> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css"> <!-- Plugin CSS --> <link rel="stylesheet" href="css/animate.min.css" type="text/css"> <!-- Custom CSS --> <link rel="stylesheet" href="css/creative.css" type="text/css"> <link rel="stylesheet" href="css/round-about.css" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body id="page-top"> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand page-scroll" href="#page-top">Controv-issue</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li> <a class="page-scroll" href="#about">About</a> </li> <li> <a class="page-scroll" href="#mission">Our Mission</a> </li> <li> <a class="page-scroll" href="#issues">Issues</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> <li> <a class="page-scroll" href="#team">Our Team</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <header> <div class="header-content"> <div class="header-content-inner"> <h1>Controv-issue</h1> <hr> <p>Keeping our readers educated on the society of today</p> <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a> </div> </div> </header> <section class="bg-primary" id="about"> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 text-center"> <h2 class="section-heading">We are Controv-issue</h2> <hr class="light"> <p class="text-faded">The world is engaged in hundreds of controversial debates every second. We're here to keep you up-to-date with background information, breaking news, and opinions, to make sure you're educated on these topics.</p> <a href="#mission" class="btn btn-default btn-xl page-scroll">What Do We Stand For?</a> </div> </div> </div> </section> <section id="mission"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">Our Mission</h2> <hr class="primary"> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 text-center"> <div class="service-box"> <i class="fa fa-4x fa-comment-o wow bounceIn text-primary"></i> <h3>Focused</h3> <p class="text-muted">We only write articles on the most important and most controversial topics.</p> </div> </div> <div class="col-lg-3 col-md-6 text-center"> <div class="service-box"> <i class="fa fa-4x fa-archive wow bounceIn text-primary" data-wow-delay=".1s"></i> <h3>Researched</h3> <p class="text-muted">Before we tackle an article, we back up our opinions with legitimate information.</p> </div> </div> <div class="col-lg-3 col-md-6 text-center"> <div class="service-box"> <i class="fa fa-4x fa-newspaper-o wow bounceIn text-primary" data-wow-delay=".2s"></i> <h3>Quality</h3> <p class="text-muted">Our content is thought-provoking and detailed.</p> </div> </div> <div class="col-lg-3 col-md-6 text-center"> <div class="service-box"> <i class="fa fa-4x fa-users wow bounceIn text-primary" data-wow-delay=".3s"></i> <h3>Shared</h3> <p class="text-muted">We're here to make sure everyone has access to information and opinions regarding the most-talked-about issues of today.</p> </div> </div> </div> </div> </section> <section class="no-padding" id="issues"> <div class="container-fluid"> <div class="row no-gutter"> <div class="col-lg-4 col-sm-6"> <a href="blog_sexeducation.html" class="portfolio-box"> <img src="sexed/tile.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Sex Education </div> <div class="project-name"> Diana Yuan & Janice Zhu </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="blog_abortion.html" class="portfolio-box"> <img src="abortion/tile.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Abortion </div> <div class="project-name"> Janice Zhu </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="blog_marijuana.html" class="portfolio-box"> <img src="marijuana/background.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Marijuana </div> <div class="project-name"> Carmen Wu </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="blog_marriage.html" class="portfolio-box"> <img src="marriage/background.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Marriage Rights </div> <div class="project-name"> Carmen Wu </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="blog_guncontrol.html" class="portfolio-box"> <img src="guncontrol/background.png" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Gun Control </div> <div class="project-name"> Diana Yuan </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="blog_alcohol.html" class="portfolio-box"> <img src="alcohol/background.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Alcohol </div> <div class="project-name"> Caitlin Stanton </div> </div> </div> </a> </div> </div> </div> </section> <section id="contact"> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 text-center"> <h2 class="section-heading">Let's Get In Touch!</h2> <hr class="primary"> <p>Do you have an idea for a story? Want to comment on something we've written about? Just want to talk?</p> </div> <div class="col-lg-8 col-lg-offset-2 text-center"> <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i> <p><a href="mailto:controvissue@gmail.com">controvissue@gmail.com</a></p> </div> </div> </div> </section> <section id="team" class="bg-primary row content-section text-center" style="padding-left:50px; padding-right:50px; margin: auto;"> <div class="col-lg-12"> <h2>Our Team</h2> </div> <hr class="light"> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="img/team/caitlin.jpg" alt="" style="width:200px; height:200px;"> <h3>Caitlin Stanton</h3> <p class="text-faded">Webmaster & Writer</p> <!-- <p class="text-faded">What does this team member to? Keep it short! This is also a great spot for social links!</p> --> </div> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="img/team/janice.png" alt="" style="width:200px; height:200px;"> <h3>Janice Zhu</h3> <p class="text-faded">Writer</p> <!-- <p class="text-faded">What does this team member to? Keep it short! This is also a great spot for social links!</p> --> </div> <br> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="img/team/carmen.jpg" alt="" style="width:200px; height:200px;"> <h3>Carmen Wu</h3> <p class="text-faded">Writer</p> <!-- <p class="text-faded">What does this team member to? Keep it short! This is also a great spot for social links!</p> --> </div> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="img/team/diana.jpg" alt="" style="width:200px; height:200px;"> <h3>Diana Yuan</h3> <p class="text-faded">Writer</p> <!-- <p class="text-faded">What does this team member to? Keep it short! This is also a great spot for social links!</p> --> </div> </section> <footer> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> <ul class="list-inline text-center"> <li> <a href="#"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> </span> </a> </li> <li> <a href="#"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> </span> </a> </li> <li> <a href="#"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-github fa-stack-1x fa-inverse"></i> </span> </a> </li> </ul> <p class="text-center copyright text-muted">Copyright © Controvissue 2016</p> </div> </div> </div> </footer> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- Plugin JavaScript --> <script src="js/jquery.easing.min.js"></script> <script src="js/jquery.fittext.js"></script> <script src="js/wow.min.js"></script> <!-- Custom Theme JavaScript --> <script src="js/creative.js"></script> </body> </html>