A Pen by Marouane Rassili on CodePen.
Last active
January 14, 2018 21:06
-
-
Save mrassili/b15ddfd0d0c5a172da541489b712fbf9 to your computer and use it in GitHub Desktop.
fCC Project #2 : Personal Portfolio
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
| <!-- MUST IMPLEMENT JQUERY JS BEFORE ANY BOOTSTRAP TO MAKE SURE BOOTSTRAP PLUGINS WORK --> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> | |
| <link href="https://fonts.googleapis.com/css?family=Fascinate+Inline|Anton|Raleway:200|Megrim|Josefin+Sans:700|Julius+Sans+One|Six+Caps" rel="stylesheet"> | |
| </head> | |
| <!--2 divs with .container-fluid and .row respectively, for the best horizontal alignment possible w/o scroll bar ...--> | |
| <body data-spy="scroll" data-target="#main-nav" data-offset="121"> | |
| <!-- NAVIGATION BAR --> | |
| <nav id="main-nav" class="nav justify-content-end fixed-top flex-column flex-md-row"> | |
| <a href="#" class="navbar-brand flex-md-fill text-md-center">marouane <span>rassili</span></a> | |
| <a href="#home" class="nav-link home active flex-md-fill text-md-center">Home</a> | |
| <a href="#about" class="nav-link about flex-md-fill text-md-center">About</a> | |
| <a href="#gallery" class="nav-link gallery flex-md-fill text-md-center">Gallery</a> | |
| <a href="#contact" class="nav-link contact flex-md-fill text-md-center">Contact</a> | |
| </nav> | |
| <!-- WEBPAGE CONTENT --> | |
| <section id="home" class="text-center"> | |
| <div class="rectangle"> | |
| <h1>welcome to my portfolio</h1> | |
| </div> | |
| </section> | |
| <section id="about" class="text-center"> | |
| <p class="text-justify"><i class="fa fa-angle-right"></i> Hi, I'm Marouane. A beginner Web Developer based in Morocco! I have a passion for web developement and love to create for web and mobile devices. I'm currently working towards certification through <a href="https://www.freecodecamp.org">freeCodeCamp</a></p> | |
| </section> | |
| <section id="gallery" class="container-fluid text-center"> | |
| <div> | |
| <h1>These are my completed projects</h1> | |
| <div class="row"> | |
| <div class="col-md"> | |
| <a href="https://codepen.io/mrassili/full/rGWLGV"><img src="https://www.evernote.com/shard/s701/res/47afc256-6041-4896-ab0f-b0be1d117da1" alt="Tribute Page"></a> | |
| </div> | |
| <div class="col-md"><img src="https://image.ibb.co/bHTbMR/rsz_4rsz_adobestock_94467275_Cropped.jpg"></div> | |
| <div class="col-md"><img src="https://image.ibb.co/jtjpam/rsz_1adobestock_93505312_Cropped.jpg" alt="placeholder"></div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md"><img src="https://image.ibb.co/jtjpam/rsz_1adobestock_93505312_Cropped.jpg" alt="placeholder"></div> | |
| <div class="col-md"><img src="https://image.ibb.co/jtjpam/rsz_1adobestock_93505312_Cropped.jpg"></div> | |
| <div class="col-md"><img src="https://image.ibb.co/bHTbMR/rsz_4rsz_adobestock_94467275_Cropped.jpg" alt="placeholder"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="text-center"> | |
| <p class="text-justify">Excited to chat about working together on your new project?<br>Or, just want to write a quick note to say hello?<br>Either way, I’d be happy to hear from you!<br><i class="fa fa-hand-o-right"></i> <span>mrassili@aol.com</span></p> | |
| <br><strong>FOLLOW ME</strong> | |
| <div class="text-center"> | |
| <a href="https://www.facebook.com/mrassili"><i class="fa fa-facebook"></i></a> | |
| <a href="https://twitter.com/marouanerassili"><i class="fa fa-twitter"></i></a> | |
| <a href="https://codepen.io/mrassili"><i class="fa fa-codepen"></i></a> | |
| <a href="https://www.linkedin.com/in/marouanerassili"><i class="fa fa-linkedin"></i></a> | |
| </div> | |
| </section> | |
| </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
| $(document).ready(function() { | |
| }); |
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/popper.js/1.11.0/umd/popper.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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
| nav { | |
| background-color: white; | |
| height: 121px; | |
| } | |
| .navbar-brand { | |
| font-family: Megrim; | |
| color: #ff2400 !important; | |
| font-weight: bold; | |
| text-transform: capitalize; | |
| letter-spacing: 1px; | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| font-size: 25px !important; | |
| border: 2px solid #ff2400; | |
| margin-left: 30px; | |
| padding: 0 0 0 6px !important; | |
| } | |
| .home { | |
| margin-left: auto !important; | |
| } | |
| .home, | |
| .gallery, | |
| .about, | |
| .contact { | |
| font-family: Raleway "Black"; | |
| font-size: 12px; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| color: #ff2400 !important; | |
| margin: auto 35px auto 0; | |
| } | |
| .navbar-brand span { | |
| background-color: #ff2400; | |
| color: white !important; | |
| display: inline-block; | |
| padding-right: 6px; | |
| padding-left: 9px; | |
| } | |
| body { | |
| height: 100vh; | |
| } | |
| .active { | |
| background-color: #ff2400; | |
| color: white !important; | |
| border-radius: 20px; | |
| } | |
| .nav-link:hover:not(.active) { | |
| background-color: #ff2400; | |
| color: white !important; | |
| border-radius: 20px; | |
| opacity: 0.4; | |
| } | |
| .rectangle { | |
| width: auto; | |
| height: auto; | |
| border: 1px solid white; | |
| margin: 200px auto; | |
| display: inline-block; | |
| } | |
| #home { | |
| background: url("https://image.ibb.co/i1Qu1R/Adobe_Stock_123146928.png") | |
| no-repeat fixed; | |
| background-size: cover; | |
| height: auto; | |
| width: auto; | |
| position: relative; | |
| top: 121px; | |
| } | |
| #home h1 { | |
| font-family: Six Caps; | |
| letter-spacing: 7px; | |
| font-size: 50px; | |
| margin: 100px 100px; | |
| color: white; | |
| } | |
| #gallery h1 { | |
| font-family: Raleway; | |
| color: black; | |
| letter-spacing: 3px; | |
| margin-bottom: 25px; | |
| } | |
| #gallery { | |
| background: white; | |
| height: auto; | |
| position: relative; | |
| top: 121px; | |
| } | |
| img { | |
| width: 100%; | |
| height: 100%; | |
| border: 10px ridge transparent; | |
| opacity: 0.7; | |
| } | |
| /* columns */ | |
| #gallery > div > div > div { | |
| padding: 0; | |
| margin: -5px; | |
| } | |
| /* rows */ | |
| #gallery > div > div { | |
| width: 80%; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| #gallery > div { | |
| display: inline-block; | |
| margin: 100px auto; | |
| } | |
| img:hover { | |
| border-style: none; | |
| opacity: 1; | |
| } | |
| #about { | |
| height: auto; | |
| background: #ff0400; | |
| color: white; | |
| position: relative; | |
| top: 121px; | |
| } | |
| #about p { | |
| width: 60%; | |
| display: inline-block; | |
| margin: 200px auto; | |
| font-family: Raleway; | |
| font-size: 35px; | |
| } | |
| p a { | |
| color: white; | |
| padding: 0 6px; | |
| } | |
| p a:hover { | |
| color: white; | |
| } | |
| #contact { | |
| color: white; | |
| height: auto; | |
| background: #202020; | |
| position: relative; | |
| top: 121px; | |
| } | |
| #contact p { | |
| display: inline-block; | |
| font-size: 18px; | |
| font-family: Raleway; | |
| width: 40%; | |
| margin: 50px auto; | |
| } | |
| #contact a { | |
| text-decoration: none !important; | |
| color: white; | |
| } | |
| #contact div { | |
| font-size: 20px; | |
| letter-spacing: 15px; | |
| } | |
| #contact p span { | |
| letter-spacing: 5px; | |
| font-size: 20px; | |
| } |
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/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment