Last active
January 23, 2017 23:20
-
-
Save ellathur/648583b1d12ae1b0b922df720f6b9c05 to your computer and use it in GitHub Desktop.
Ex1.10
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"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>chrisaguzey</title> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="css/styles.css" media="screen" title="no title"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" type="text/css"> | |
| <!-- Custom styles for this template go here --> | |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body data-spy="scroll" data-target=".navbar"> | |
| <!--navbar starts here--> | |
| <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> | |
| <div class="container-fluid"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" | |
| data-target=".navbar-collapse"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <div class="Chrisaguzey navbar-brand"><!--startprojectname --> | |
| <a href="#">Chris Aguzey</a> | |
| </div> <!--end projectName --> | |
| </div> <!--end navbar-header --> | |
| <div class="navbar-collapse collapse "> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li class="dropdown"> | |
| <a href="#work" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Work <span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#work1">Work1</a></li> | |
| <li><a href="#about">Work2</a></li> | |
| <li><a href="#contact">work3</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="#faqs">FAQs</a></li> | |
| </ul> | |
| </div> | |
| </div><!--endcontainer fluid --> | |
| </nav><!-- end navbar--> | |
| <!--Image Corousel--> | |
| <div class="container-fluid anchor" id="home"> | |
| <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> | |
| <!-- Indicators --> | |
| <ol class="carousel-indicators"> | |
| <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="1"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="2"></li> | |
| </ol> | |
| <!-- Wrapper for slides --> | |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active"> | |
| <img src="img/portfolioheroimage3.png" alt="..."> | |
| <div class="carousel-caption"> | |
| <h3>“Start where you are. Use what you have. Do what you can.” ~Arthur Ashe</h3> | |
| <p>So I have have a computer, there is no excuse not to learn how to code</p> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="img/portfolioheroimage.png" alt="..."> | |
| <div class="carousel-caption"> | |
| <h3>“I’d rather attempt to do something great and fail than to attempt to do nothing and succeed.” ~Robert H. Schuller</h3> | |
| <p>So I will do something great by learning to code</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> | |
| <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> | |
| <span class="sr-only">Previous</span> | |
| </a> | |
| <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> | |
| <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> | |
| <span class="sr-only">Next</span> | |
| </a> | |
| </div> | |
| </div><!--EndImage Corousel--> | |
| <div class="container"> | |
| <!-- Example row of columns --> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <h2>Portfolio Concept</h2> | |
| <p>The concept for this portfolio is to document my newbie journey into web development.</p> | |
| <p>When you visit this site each week and notice a change, then I am on track otherwise give a nudge. </p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div><!-- /col --> | |
| <div class="col-md-4"> | |
| <h2>Project Goals</h2> | |
| <p>I aim to complete this course on a pace similar to full time bootcamp or at a minimum of 50 hours every 2 weeks as I work 5 days on 5 days off. </p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div><!-- /col --> | |
| <div class="col-md-4"> | |
| <h2>Course Goals</h2> | |
| <p>Ultimate aim for learning to code is to <strong>change careers.</strong> | |
| Presently focused on developing excellent programming skills and I believe the jobs will come. I aim to do this course at a live-in bootcamp pace. </p> | |
| <p>So I want to:</p> | |
| <ol> | |
| <li>Keep work-family balance</li> | |
| <li>Keep my fulltime job for now</li> | |
| <li>Keep working at bootcamp pace</li> | |
| <li>Keep practising untl I get it!</li> | |
| <li>Keep my sanity!</li> | |
| </ol> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div><!-- /col --> | |
| </div><!-- /row --> | |
| <hr> | |
| <!--</div> <!-/container --> | |
| <!--<div class="container-fluid">--> | |
| <div class="row" id="work0"> | |
| <div class="col-md-3 col-xs-12"> | |
| <img src="img/work1.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-3 col-xs-12"> | |
| <img src="img/work5.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-3 col-xs-12"> | |
| <img src="img/work3.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-3 col-xs-12"> | |
| <img src="img/work2.jpg" class="img-responsive" alt=""> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3 col-xs-12"> | |
| <img src="img/work4.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-3 col-xs-6"> | |
| <img src="img/work3.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-3 col-xs-12"> | |
| <img src="img/work5.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-3 col-xs-12"> | |
| <img src="img/work1.jpg" class="img-responsive" alt=""> | |
| </div> | |
| </div><!--end work1 --> | |
| </div><!--end container fluid --> | |
| <div class="container-fluid about anchor" id="about"><!--about--> | |
| <div class="row"> | |
| <div class="col-md-12 header"> | |
| <h1> {: About Christian :} </h1> | |
| </div> | |
| </div><!--end row--> | |
| <div class="row"> | |
| <div class="col-md-4 "> | |
| <img src="img/chris.jpg" class="img-responsive" alt="chris"> | |
| </div><!--/image--> | |
| <div class="col-md-4 intro"> | |
| <h2>Introduction</h2> | |
| <p> | |
| Hi! I am Christian. I am currently a biotechnologist and I am on a mission to become a web developer. Stay tuned! | |
| </p> | |
| </div><!--/intro--> | |
| <div class="col-md-4 " id="skills"> | |
| <h3>My Skills</h3> | |
| <ul class="list-group"> | |
| <li class="list-group-item">Fullstack Web Development</li> | |
| <li class="list-group-item">Ruby on Rails</li> | |
| <li class="list-group-item"> CSS</li> | |
| <li class="list-group-item"> Boostrap</li> | |
| <li class="list-group-item"> Python</li> | |
| <li class="list-group-item">Django</li> | |
| <li class="list-group-item">Comming Soon </li> | |
| <li class="list-group-item"> Coming Soon</li> | |
| </ul> | |
| </div><!-- /skills --> | |
| <!--<div class="clearfix"></div>--> | |
| </div><!--end row--> | |
| <div class="row" id="main-text"> | |
| <div class="col-md-12 col-xs-12 header"> | |
| <div class="main-text"> | |
| <h3>My story</h3> | |
| <p>I studied Architecture and also graduated from the University of Birmingham with an MSc in Contruction Management. I have been working in the biotech industry in various roles for the past 7 years. I am currently a biotechnologist and looking to sneak into web development</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!--end about--> | |
| <!--Work--> | |
| <div class="clearfix"></div> | |
| <div class="container-fluid" id="work1"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <h3>Work 1</h3> | |
| <p>Current Page</p> | |
| <p>Ut enim ad..</p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h3>Work 2</h3> | |
| <p>Want to Know More about ME?</p> | |
| <p>Read My About Page.</p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h3>Work 3</h3> | |
| <p> Get in Touch</p> | |
| <p></p> | |
| </div> | |
| </div> | |
| </div><!--EndWork--> | |
| <div class="container-fluid" id="contact"><!--contact--> | |
| <div class="row"> | |
| <div class="col-md-12 col-xs-12 header"> | |
| <h1 class="contactme">Contact Me</h1> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 col-xs-12"> | |
| <div class="contact-email"> | |
| <p class="Bold-email"><span class="glyphicon glyphicon glyphicon-envelope"></span>Email: 123@somebody.com</p> | |
| <p class="Bold-email"><span class="glyphicon glyphicon glyphicon-phone "></span>Tel:01753 770100</p> | |
| <p class="Bold-email"><span class="glyphicon glyphicon glyphicon-phone"></span>Mob:07916688717</p> | |
| <p>I am learning web development! please contact me if you have any suggestion for this website.</p> | |
| <p>If you are interested in hiring me, keep an eye on this website for my progress.</p> | |
| </div><!--/contact email><--> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="class col-md-12 col-xs-12"> | |
| <div class="contact-address"> | |
| <p><span class="glyphicon glyphicon glyphicon-map-marker "></span>You can find us at: | |
| 12 Somebody's Plaza | |
| London | |
| E1 4DX | |
| </p> | |
| <p id="map2"><img class="img-responsive" src="img/googlemap.jpg" alt=""></p> | |
| </div><!--/contact address><--> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="clearfix"></div> | |
| <div class="container-fluid" id="faqs"><!--start container--> | |
| <div class="panel-group" id="accordion"> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading" id="headingOne"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> | |
| <span class="glyphicon glyphicon-plus"></span> | |
| Why did you decide to become a web developer? | |
| </a> | |
| </h4> | |
| </div><!--end headinfOne --> | |
| <div id="collapseOne" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| Having pursued degrees mainly based on the built environment and have mainly worked in the biotech industry for the past 10 years I have finally decided to learn to code and for that matter web development. | |
| </div> | |
| </div> | |
| </div><!--end paneldefault --> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading" id="headingTwo"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> | |
| <span class="glyphicon glyphicon-plus"></span> | |
| “What other Languages and frameworks have you learned so far?” | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseTwo" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| I started learning to code in python and thereafter Django as a framework. Learn Python The Hardway was useful. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading" id="headingThree"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> | |
| <span class="glyphicon glyphicon-plus"></span> | |
| “Who are your clients?” | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseThree" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading" id="headingFour"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> | |
| <span class="glyphicon glyphicon-plus"></span> | |
| “What is your average project turnaround?” | |
| </a> | |
| </h4> | |
| </div><!--end headingfour --> | |
| <div id="collapseFour" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| Coming Soon! | |
| </div> | |
| </div><!--end colapsefour --> | |
| </div><!--end paneldefault --> | |
| </div><!--end accordion --> | |
| </div><!--end container--> | |
| <!-- ============================= --> | |
| <!-- All your JavaScript comes now --> | |
| <!-- ============================= --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <!-- Bootstrap core JS --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| <!-- Can place script tags with JavaScript files here --> | |
| <script type="text/javascript"> | |
| var $root = $('html, body'); | |
| $('.navbar-nav a').click(function() { | |
| var href = $.attr(this, 'href'); | |
| $root.animate({ | |
| scrollTop: $(href).offset().top | |
| }, 500, function () { | |
| window.location.hash = href; | |
| }); | |
| return false; | |
| }); | |
| </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
| /**.jumbotron { | |
| background-image: url("../img/gallery.jpg"); | |
| background-size: contain; | |
| } | |
| .jumbotron p { | |
| color: white; | |
| font-family: lato; | |
| } | |
| .jumbotron h1 { | |
| color: 34495e; | |
| font-family: 'Lobster Two', cursive; | |
| } | |
| **/ | |
| html, body { | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| body { | |
| position: relative; | |
| } | |
| /****Carousel****/ | |
| .carousel { | |
| margin-left: -15px; | |
| margin-right: -15px; | |
| margin-top: -20px; | |
| } | |
| .carousel-caption h3 { | |
| color: /*#333;*/ #34495e; | |
| } | |
| /**** Navbar Disabled | |
| .navbar { | |
| background-color: #34495e; | |
| padding: 0; | |
| margin: 0; | |
| text-transform: uppercase; | |
| } | |
| .navbar-list ul { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| font-size: 16px; | |
| } | |
| li { | |
| float: left; | |
| } | |
| li a { | |
| display: block; | |
| color: white; | |
| text-align: center; | |
| padding: 16px 16px; | |
| text-decoration: none; | |
| } | |
| **/ | |
| /**.nav ul li { | |
| display: inline-block; | |
| padding: 20px 10px 20px; | |
| float: right; | |
| } | |
| .nav { | |
| background-color: black; | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| } | |
| .nav ul li a { | |
| color: white; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| text-decoration: none; | |
| } | |
| .nav a:hover { | |
| color: #ff0; | |
| text-decoration: none; | |
| } **/ | |
| /**about***/ | |
| #about { | |
| font-family: Lato, 'Lobster Two' , Futura, Helvetica, Arial, sans-serif; | |
| color: white; | |
| background-color:#4A96AD; | |
| width: 100%; | |
| margin: 0; | |
| } | |
| #about h1 { | |
| text-align: center; | |
| margin: 5% 0%; | |
| } | |
| .intro h3 { | |
| font-size: 3em; | |
| } | |
| .intro p { | |
| font-family: Lato, 'Lobster Two', Futura, Helvetica, Arial, sans-serif; | |
| font-size: 3em; | |
| font-weight: 100; | |
| -webkit-margin-before: 0; | |
| color: white; | |
| } | |
| .list-group-item { | |
| background-color: grey; | |
| text-align: center; | |
| font-size: 2em; | |
| width: 100%; | |
| } | |
| .intro h2 { | |
| text-transform: uppercase; | |
| font-size: 3em; | |
| } | |
| #skills h3 { | |
| text-align: center; | |
| text-transform: uppercase; | |
| font-size: 3em; | |
| } | |
| /*#skills {*/ | |
| /*height: 30%;*/ | |
| /*width: 30%;*/ | |
| /*display: inline-block;*/ | |
| /*background-size: 100% 100%;*/ | |
| .intro { | |
| position: relative; | |
| } | |
| /**.aboutimage { | |
| display: inline-block; | |
| float: left; | |
| }**/ | |
| /*****work styles***/ | |
| #work1 { | |
| background-size: 100% 100%; | |
| height: 100%; | |
| width: 100%; | |
| background-image: url("../img/sketch-book.jpg"); | |
| color: white; | |
| } | |
| #work1 h3{ | |
| margin-top: 10%; | |
| } | |
| /*****Contact styles***/ | |
| #contact { | |
| background-image: url("../img/contactme.jpg"); | |
| /*Add a background image*/ | |
| background-attachment: fixed; | |
| /*Give the background a fixed position does it not scroll when you scroll*/ | |
| background-size: cover; | |
| /*Have the background cover the entire div section*/ | |
| color: white; | |
| /*Change the color of the text on top so it is readable, and adjust the padding as needed.*/ | |
| padding:100px; | |
| padding-top: 50px; | |
| /*height: 400px;*/ | |
| width: 100%; | |
| } | |
| .glyphicon { | |
| padding-right: .5em; | |
| } | |
| .contactme { | |
| text-align: center; | |
| padding-top: 5%; | |
| } | |
| .Bold-email { | |
| font-weight: bold; | |
| font-size: 2em; | |
| font-weight: 100; | |
| } | |
| .contact-address>p { | |
| font-size: 2em; | |
| font-weight: 100; | |
| } | |
| /*img.resize {*/ | |
| /*max-width: 5%;*/ | |
| /*max-height: 2%;*/ | |
| /*padding-bottom: 10%;*/ | |
| /*}*/ | |
| /*#map2 {*/ | |
| /*max-width: 50%;*/ | |
| /*max-height: 50%;*/ | |
| /*}*/ | |
| /****FAQs***/ | |
| .panel-default>.panel-heading { | |
| color: #44f; | |
| background-color: white; | |
| border-style: none; | |
| } | |
| #faqs { | |
| padding-top: 50px; | |
| /*color: white;**/ | |
| background-size: 100% 100%; | |
| height: 100%; | |
| max-width: 100%; | |
| } | |
| #headingOne { | |
| padding-top: 5% | |
| } | |
| #work0 img { | |
| display: block; | |
| /**margin: 15px auto;**/ | |
| margin: 2% auto; | |
| } | |
| /** #work img { | |
| display: block; | |
| margin: 2% auto; | |
| }**/ | |
| .Chrisaguzey { | |
| text-transform: uppercase; | |
| } | |
| .Chrisaguzey a { | |
| color: white; | |
| } | |
| .anchor { | |
| padding-top: 50px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment