This is my second project from FreeCodeCamp
Created
December 7, 2017 19:03
-
-
Save ferolo3000/1e02fa7d74796c561f6390cc1cc8f403 to your computer and use it in GitHub Desktop.
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
<body class="content" style="max-width: 1300px"> | |
<section class="container"> | |
<div class="left-half" style="height:700px" id="left1"> | |
<article> | |
<h1 id="logo">F3R</h1> | |
<div> | |
<a href="#left1">| About |</a> | |
<a href="#left2">| Portfolio |</a> | |
<a href="#left3">| Contact |</a> | |
</div> | |
</article> | |
</div> | |
<div class="right-half" style="height:700px" id="right1"> | |
<article> | |
<h1>About</h1> | |
<h1><span style="color:red">{</span> Hi, I'm Fernanda <span style="color:red">}</span></h1> | |
<p>This is my second project from FreeCodeCamp.</p> | |
</article> | |
</div> | |
</section> | |
<section class="container"> | |
<div class="left-half" style="height:700px" id="left2"> | |
<article> | |
<h1>Portfolio</h1> | |
<p>This is my portfolio</p> | |
<iframe src="https://codepen.io/ferolo3000/pen/mqvMVV"> | |
<p>Your browser does not support iframes.</p> | |
</iframe> | |
</article> | |
</div> | |
<div class="right-half" style="height:700px" id="right2"> | |
<article> | |
<h1 id="skills">Skills</h1> | |
<br> | |
<div id="chart"> | |
<p>HTML</p> | |
<div class="container"> | |
<div class="skills html">30%</div> | |
</div> | |
<p>CSS</p> | |
<div class="container"> | |
<div class="skills css">30%</div> | |
</div> | |
<p>JavaScript</p> | |
<div class="container"> | |
<div class="skills js">15%</div> | |
</div> | |
<p>Python</p> | |
<div class="container"> | |
<div class="skills php">50%</div> | |
</div> | |
</div> | |
</article> | |
</div> | |
</section> | |
<section class="container"> | |
<div class="left-half" style="height:700px" id="left3"> | |
<article> | |
<br> | |
<br> | |
<h1>Contact</h1> | |
<br> | |
<div class="wrapper"> | |
<form class="form"> | |
<input type="text" class="name field-in font" placeholder="Your Name"/> | |
<input type="text" class="email field-in font" placeholder="Email"/> | |
<textarea class="message field-in font" placeholder="Message"></textarea> | |
<button class="submit font" href="#">Submit</button> | |
</form> | |
<div class="shadow"></div> | |
</div> | |
</article> | |
</div> | |
<div class="right-half" style="height:700px" id="right3"> | |
<br> | |
<h1>Let's be in touch</h1> | |
<br> | |
<br> | |
<div id="icons"> | |
<!-- Twitter --> | |
<a href="https://twitter.com/ferolo3000?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank"> | |
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /> | |
</a> | |
<!-- LinkedIn --> | |
<a href="https://dk.linkedin.com/in/fernandaromerolo" target="_blank"> | |
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" /> | |
</a> | |
</div> | |
</div> | |
</section> | |
</body> | |
<!-- Footer --> | |
<footer class="w3-container w3-black w3-padding-16"> | |
<p>Created with <span style="color:red">♥</span> by F3R</p> | |
</footer> | |
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
* { | |
box-sizing: border-box; | |
} | |
body { | |
margin:0 auto; | |
height: 100%; | |
} | |
section, div { | |
height: 100%; | |
} | |
a { | |
margin-right: 15px; | |
padding: 25px; | |
text-decoration: none; | |
color: #fff; | |
font-size: 20px; | |
text-transform: uppercase; | |
color: #212121; | |
font-weight: 550; | |
letter-spacing: 1.3px; | |
} | |
body { | |
color: #fff; | |
font-family: corbel; | |
font-size: 1.25rem; | |
line-height: 150%; | |
text-align: center; | |
} | |
section { | |
width: 100%; | |
} | |
article { | |
position: relative; | |
top: 30%; | |
left: 50%; | |
padding: 1rem; | |
text-align: center; | |
transform: translate(-50%, -50%); | |
} | |
#logo { | |
font-size: 4.75rem; | |
margin: 0 0 4.75rem 0; | |
} | |
#chart{ | |
margin: 2 0; | |
} | |
#skills { | |
font-size: 1.75rem; | |
margin: 2 0 3.75rem 0; | |
} | |
h1 { | |
font-size: 1.75rem; | |
margin: 20px; | |
padding: 0; | |
} | |
p{ | |
padding: 0; | |
margin: 0; | |
} | |
/* Pattern styles */ | |
#left1 { | |
background-color: #0091EA; | |
float: left; | |
width: 50%; | |
} | |
#right1 { | |
background-color: #9A9695; | |
float: left; | |
width: 50%; | |
} | |
#left2 { | |
background-color: #9A9695; | |
float: left; | |
width: 50%; | |
} | |
#right2 { | |
background-color: #6D6968; | |
float: left; | |
width: 50%; | |
} | |
#left3 { | |
background-color: #6D6968; | |
float: left; | |
width: 50%; | |
} | |
#right3 { | |
top: 50%; | |
background-color: #0091EA; | |
float: left; | |
width: 50%; | |
} | |
.container { | |
width: 100%; | |
background-color: #ddd; | |
} | |
#icons{ | |
-webkit-animation: bounce 2.5s infinite; | |
-moz-animation: bounce 2.5s infinite; | |
animation: bounce 2.5s infinite; | |
} | |
.skills { | |
text-align: right; | |
padding-right: 20px; | |
line-height: 40px; | |
color: white; | |
} | |
.html {width: 30%; background-color: #4CAF50;} | |
.css {width: 30%; background-color: #2196F3;} | |
.js {width: 15%; background-color: #f44336;} | |
.php {width: 50%; background-color: #808080;} | |
/* contact form*/ | |
.wrapper { | |
width: 50%; | |
height: 50%; | |
margin: 3% auto 0 auto; | |
} | |
.form { | |
text-align: center; | |
-webkit-animation: bounce 1.5s infinite; | |
-moz-animation: bounce 1.5s infinite; | |
animation: bounce 1.5s infinite; | |
} | |
.field-in { | |
display: block; | |
margin: 10px auto; | |
padding: 10px; | |
border-radius: 5px; | |
border: none; | |
width: 50%; | |
-webkit-transition: all 0.5s ease 0s; | |
-moz-transition: all 0.5s ease 0s; | |
transition: all 0.5s ease 0s; | |
} | |
.name { | |
background-color: #EE78D1; | |
border-bottom: 5px solid #CB64B2; | |
} | |
.name:hover{ | |
background-color: #DF1B76; | |
border-bottom: 5px solid #B2175F; | |
} | |
.name:focus, .email:focus, .message:focus{ | |
outline: none; | |
padding:15px; | |
} | |
.email { | |
background-color: #7239C1; | |
border-bottom: 5px solid #502789; | |
} | |
.email:hover{ | |
background-color: #2014CB; | |
border-bottom: 5px solid #18108E; | |
} | |
.message { | |
background-color: #0F9BE6; | |
border-bottom: 5px solid #1185C3; | |
overflow: hidden; | |
height: 50px; | |
} | |
.message:hover{ | |
background-color: #2DD7BB; | |
border-bottom: 5px solid #2BB09A; | |
height: 150px; | |
} | |
.submit{ | |
border-radius:5px; | |
padding:10px; | |
background-color: #EE78D1; | |
border: none; | |
border-bottom: 5px solid #CB64B2; | |
-webkit-transition: all 0.5s ease 0s; | |
-moz-transition: all 0.5s ease 0s; | |
transition: all 0.5s ease 0s; | |
} | |
.submit:hover{ | |
-webkit-transform: translate(0, 4px); | |
border-bottom: 2px solid #CB64B2; | |
box-shadow: inset 0px 0px 10px 10px #CF5DB2; | |
cursor: pointer; | |
} | |
::-webkit-input-placeholder { | |
color: white; | |
} | |
:-moz-placeholder { | |
color: white; | |
} | |
::-moz-placeholder { | |
color: white; | |
} | |
:-ms-input-placeholder { | |
color: white; | |
} | |
@-webkit-keyframes bounce{ | |
0%{ | |
} | |
50%{ | |
-webkit-transform: translate(0, 8px); | |
} | |
} | |
@-moz-keyframes bounce{ | |
0%{ | |
} | |
50%{ | |
-moz-transform: translate(0, 8px); | |
} | |
} | |
@keyframes bounce{ | |
0%{ | |
} | |
50%{ | |
transform: translate(0, 8px); | |
} | |
} | |
@-webkit-keyframes shadow{ | |
0%{ | |
} | |
50%{ | |
opacity: 0.8; | |
width: 50%; | |
} | |
} | |
@-moz-keyframes shadow{ | |
0%{ | |
} | |
50%{ | |
opacity: 0.8; | |
width: 50%; | |
} | |
} | |
@keyframes shadow{ | |
0%{ | |
} | |
50%{ | |
opacity: 0.8; | |
width: 50%; | |
} | |
} | |
footer { | |
padding: 2.5em; | |
color: white; | |
background-color: black; | |
clear: left; | |
text-align: center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment