Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Personal PortFolio
<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&amp;text=Simple%20Share%20Buttons&amp;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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
* {
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