A Pen by Amanth Mohammed Jasil on CodePen.
Created
September 7, 2016 07:06
-
-
Save jasil1414/eead983982a443a0d7b9f8f81f03899f to your computer and use it in GitHub Desktop.
Portfolio Page
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
| <html> | |
| <head> | |
| <title>Jasil</title> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans|Work+Sans" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet"> | |
| <link href="css/bootstrap.css" rel="stylesheet" /> | |
| <link href="css/style.css" rel="stylesheet" /> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <meta name="viewport" content="width=display-width, initial-scale:1.0"> | |
| </head> | |
| <body data-spy="scroll" data-target=".navbar" data-offset=50> | |
| <div id="background_img"> | |
| <nav class="navbar navbar-inverse navbar-fixed-top"> | |
| <div class="container-fluid"> | |
| <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar_header"> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbar_header"> | |
| <ul class="nav navbar-nav"> | |
| <li class="active"><a href="#home_page"><span class="glyphicon glyphicon-home"></span> Home </a></li> | |
| <li><a href="#about_me">About Me </a></li> | |
| <li><a href="#projects_section">Projects</a></li> | |
| <li><a href="#contact_me">Contact Me</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <section id="home_page"> | |
| <div class="home_info is-responsive"> | |
| <div class="my_image"> | |
| <img src="http://jasil.me.pn/images/DSC05054.JPG" id="img_me" alt="Profile Image"> | |
| </div> | |
| <h2 id="introName"> Hey, I'm Jasil</h2> | |
| <p id="instruct">Click the button below to know more </p> | |
| <div id="aboutButton"> | |
| <a href="#about_me"><button class="btn btn-primary">About Me</button></a> | |
| </div> | |
| <div class="social_contacts"> | |
| <a href="#"><img onmouseout="this.src='http://jasil.me.pn/images/1473081387_twitter_online_social_media.png'" onmouseover="this.src='http://jasil.me.pn/images/1473081387_twitter_online_social_media.png'" src="http://jasil.me.pn/images/1473081407_online_social_media_twitter.png" | |
| alt="Twitter Logo"></a> | |
| <a href="#"><img onmouseout="this.src='http://jasil.me.pn/images/1473081436_online_social_media_linked_in.png'" onmouseover="this.src='http://jasil.me.pn/images/1473081429_linked_in_online_social_media.png'" src="http://jasil.me.pn/images/1473081436_online_social_media_linked_in.png" | |
| alt="Linkedin Logo"></a> | |
| <a href="#"><img onmouseout="this.src='http://jasil.me.pn/images/1473081399_facebook_online_social_media.png'" onmouseover="this.src='http://jasil.me.pn/images/1473081376_online_social_media_facebook.png'" src="http://jasil.me.pn/images/1473081399_facebook_online_social_media.png" | |
| alt="Facebook Logo"></a> | |
| <a href="#"><img onmouseout="this.src='http://jasil.me.pn/images/1473081459_github_social_media_logo.png'" onmouseover="this.src='http://jasil.me.pn/images/1473081448_social_media_logo_github.png'" src="http://jasil.me.pn/images/1473081459_github_social_media_logo.png"></a> | |
| </div> | |
| </div> | |
| <hr> | |
| </section> | |
| </div> | |
| <div class="content"> | |
| <section id="about_me" class="container-fluid"> | |
| <h2>About Me</h2> | |
| <div id="small_bio"> | |
| <p> An Engineer, a Tech Enthusiast and a Web developer in training, who would like to work on a space where Technology and Art intersect.</p><br> | |
| <p>When I work on things I do love, you will see the passion pitch in me. One of the things I do love, is to work with creative people regardless of, if I happened to be novice in their field because for me learning is a never ending process and | |
| I strongly believe that innovations are driven by collaboration with creative people.</p> | |
| </div> | |
| </section> | |
| <section class="projects_section container-fluid" id="projects_section"> | |
| <hr> | |
| <h2>Projects</h2> | |
| <p> Well, I am still working on it, will update once its done :) </p> | |
| <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png" class="images_projects img-responsive"> | |
| <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png" class="images_projects img-responsive"> | |
| <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png" class="images_projects img-responsive"> | |
| <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png" class="images_projects img-responsive"> | |
| <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png" class="images_projects img-responsive"> | |
| <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png" class="images_projects img-responsive"> | |
| </section> | |
| <section class="contact_me container-fluid" id="contact_me"> | |
| <hr> | |
| <h2>Contact Me</h2> | |
| <div class="contact_form"> | |
| <form class="col-sm-6" "col-xs-12"> | |
| <div class="form-group-sm"> | |
| <label for="name">Name:</label> | |
| <input type="text" class="form-control" name="name" /> | |
| </div> | |
| <div class="form-group-sm"> | |
| <label for="name">Email:</label> | |
| <input type="text" class="form-control" name="email" /> | |
| </div> | |
| <div class="form-group-sm"> | |
| <label for="name">Message:</label> | |
| <textarea type="text" class="form-control" name="message"></textarea> | |
| </div> | |
| <br> | |
| <input type="submit" class="btn btn-primary" name="submit" value="Send" /> | |
| </form> | |
| </div> | |
| </section> | |
| <footer class="container-fluid"> | |
| <hr> | |
| <div class="maker_info"> | |
| <p> Made with <span class="glyphicon glyphicon-heart"></span> for Web Design by <a href="#about_me"> Jasil</a></p> | |
| </div> | |
| <div class="social_contacts"> | |
| <a href="#"><img onmouseover="this.src='http://jasil.me.pn/images/1473081407_online_social_media_twitter.png'" onmouseout="this.src='http://jasil.me.pn/images/1473081387_twitter_online_social_media.png'" src="http://jasil.me.pn/images/1473081387_twitter_online_social_media.png" | |
| alt="Twitter Logo"></a> | |
| <a href="#"><img onmouseover="this.src='http://jasil.me.pn/images/1473081436_online_social_media_linked_in.png'" onmouseout="this.src='http://jasil.me.pn/images/1473081429_linked_in_online_social_media.png'" src="http://jasil.me.pn/images/1473081429_linked_in_online_social_media.png" | |
| alt="Linkedin Logo"></a> | |
| <a href="#"><img onmouseover="this.src='http://jasil.me.pn/images/1473081399_facebook_online_social_media.png'" onmouseout="this.src='http://jasil.me.pn/images/1473081376_online_social_media_facebook.png'" src="http://jasil.me.pn/images/1473081376_online_social_media_facebook.png" | |
| alt="Facebook Logo"></a> | |
| <a href="#"><img onmouseover="this.src='http://jasil.me.pn/images/1473081459_github_social_media_logo.png'" onmouseout="this.src='http://jasil.me.pn/images/1473081448_social_media_logo_github.png'" src="http://jasil.me.pn/images/1473081448_social_media_logo_github.png"></a> | |
| </div> | |
| </footer> | |
| </div> | |
| </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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
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
| .container-fluid { | |
| padding-right:0; | |
| padding-left: 0; | |
| margin-right: 0; | |
| margin-left: 0; | |
| } | |
| .navbar-fixed-top{ | |
| position: fixed; | |
| right: 0; | |
| left: 0; | |
| opacity: .8; | |
| z-index: 1030; | |
| } | |
| #navbar_header .nav li{ | |
| font-size: 1.2em; | |
| } | |
| #background_img{ | |
| background-image: url(http://jasil.me.pn/images/designer-desk.jpg); | |
| height:100vh; | |
| background-size: cover; | |
| padding-top: 20px; | |
| width:100%; | |
| } | |
| h2{ | |
| font-size:1.6em; | |
| font-weight: 550; | |
| } | |
| .home_info{ | |
| position:absolute; | |
| display: flex; | |
| flex-direction: column; | |
| top: 50%; | |
| left:50%; | |
| transform: translate(-50%,-50%); | |
| text-align: center; | |
| align-items: center; | |
| } | |
| #about_me, .contact_me, .projects_section, footer{ | |
| padding-top: 25px; | |
| font-size: 1.2em; | |
| } | |
| .content{ | |
| margin-left: 10%; | |
| margin-right: 10%; | |
| } | |
| .projects_section img{ | |
| display:inline-flex; | |
| flex-wrap:nowrap; | |
| flex-direction:column; | |
| } | |
| .images_projects{ | |
| width: 350px; | |
| height: 266px; | |
| padding-bottom: 10px; | |
| padding-right: 10px; | |
| } | |
| #img_me{ | |
| display: block; | |
| height:100px; | |
| border-radius: 50%; | |
| width:100px; | |
| border: 5px solid #f7faf7 | |
| } | |
| #introName{ | |
| font-family:'Roboto'; | |
| font-size:1.8em; | |
| } | |
| #instruct{ | |
| font-family: 'Work Sans', sans-serif; | |
| font-size:1.4em; | |
| } | |
| .home_info .social_contacts{ | |
| position:relative; | |
| display: inline-flex; | |
| margin-top:10px; | |
| } | |
| .home_info .social_contacts img{ | |
| width:40px; | |
| height:40px; | |
| margin-left: 12px; | |
| margin-right: 12px; | |
| } | |
| footer{ | |
| padding-bottom:30px; | |
| font-size:1em; | |
| } | |
| footer .social_contacts{ | |
| float:right; | |
| margin-top:-40px; | |
| } | |
| footer .social_contacts img{ | |
| display: inline-block; | |
| width:64px; | |
| height:64px; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| @media screen and (min-width:360px) and (max-width:640px) { | |
| /*-----style----*/ | |
| #introName{ | |
| font-size:1.7em; | |
| } | |
| .content{ | |
| margin-left: 4%; | |
| margin-right: 4%;} | |
| #instruct{ | |
| font-size:1.2em; | |
| } | |
| #img_me{ | |
| display: block; | |
| height:80px; | |
| border-radius: 50%; | |
| width:80px; | |
| border: 4px solid #f7faf7 | |
| } | |
| .about_me{ | |
| position:absolute; | |
| display: flex; | |
| flex-direction: column; | |
| top: 50%; | |
| left:50%; | |
| transform: translate(-50%,-50%); | |
| text-align: center; | |
| align-items: center;} | |
| #about_me, .contact_me, .projects_section, footer{ | |
| padding-top: 25px; | |
| font-size: 1em;} | |
| .projects_section img{ | |
| display:inline-flex; | |
| flex-wrap:nowrap; | |
| flex-direction:row; } | |
| .images_projects{ | |
| width: 106px; | |
| height:80px; | |
| padding-bottom: 10px; | |
| padding-right: 10px; | |
| } | |
| footer .social_contacts img{ | |
| display: inline-block; | |
| width:44px; | |
| height:44px; | |
| margin-left: 8px; | |
| margin-right: 8px; | |
| } | |
| footer .social_contacts{ | |
| float:none; | |
| margin-top:3%; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| align-content: center; | |
| margin-bottom: 5%;} | |
| } | |
| @media screen and (max-width:359px){ | |
| /*-----style----*/ | |
| #introName{ | |
| font-size:1.5em; | |
| } | |
| .content{ | |
| margin-left: 4%; | |
| margin-right: 4%;} | |
| #instruct{ | |
| font-size:1.1em; | |
| } | |
| /* #img_me{ | |
| display: block; | |
| height:80px; | |
| border-radius: 50%; | |
| width:80px; | |
| border: 4px solid #f7faf7 | |
| } | |
| .about_me{ | |
| position:absolute; | |
| display: flex; | |
| flex-direction: column; | |
| top: 50%; | |
| left:50%; | |
| transform: translate(-50%,-50%); | |
| text-align: center; | |
| align-items: center;}*/ | |
| .projects_section img{ | |
| display:inline-flex; | |
| flex-wrap:nowrap; | |
| flex-direction:row; } | |
| #about_me, .contact_me, .projects_section, footer{ | |
| padding-top: 25px; | |
| font-size: 1em;} | |
| .images_projects{ | |
| width: 106px; | |
| height:80px; | |
| padding-bottom: 10px; | |
| padding-right: 10px; | |
| } | |
| footer .social_contacts img{ | |
| display: inline-block; | |
| width:44px; | |
| height:44px; | |
| margin-left: 8px; | |
| margin-right: 8px; | |
| } | |
| footer .social_contacts{ | |
| float:none; | |
| margin-top:3%; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| align-content: center; | |
| margin-bottom: 5%;} | |
| } | |
| @media screen and (min-width:641px) and (max-width:1280px){ | |
| .images_projects{ | |
| width: 107px; | |
| height:80px; | |
| padding-bottom: 10px; | |
| padding-right: 10px; | |
| } | |
| } | |
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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment