Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Port Draft... in progress
<body>
<div class='preflex'>
</div>
<div class='flexContainer'>
<ul id ='home'>
<li><a href="">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<svg id='starter' viewBox="0 0 641 318">
<g>
<polygon id = 'block' transform = 'translate(1)' points="640.8,0 0,314 640.8,314 640.8,314 640.8,314" />
<text id="name" transform="matrix(1 0 0 .80 625.0 10.0)" x="-2.7" y="0" >Jennifer Stewar</text>
<text id = 'front'transform="matrix(1.1114 -1.935338e-003 2.472297e-003 1 55.6917 310.9451)" y="-3">Front-End Website Development</text>
</g>
<g id = 'title'>
<path class ="pulse" d="M561.2,291.24h-9.77l-2.24,8.09L546.79,280l-4.32,30.6-4.37-46.84-3.85,33.73-1.94-10-2.4,10-1.1-6.22H336.63l-2.52,8.09L331.41,280l-4.86,30.61-4.92-46.84-4,30.73-2.53-7-2.7,10-1.24-6.22h-31l-2.52,8.09L274.94,280l-4.86,30.61-4.92-46.84-5,30.73-1.53-7-2.7,10-1.24-6.22H221.87" transform="translate(-201 -201.71)"/>
<text class= 'smFont' transform="translate(134.45 113.29)">into your website</text>
<text id = 'life' transform="translate(160.53 85.44)">new life</text>
<text id= 'breathe' transform="translate(24.10 55.15)" >Breathe </text>
</g>
<g id = 'heart' filter="url(#dropShadow)"> <filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />
<feOffset dx="1" dy="2"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<polygon style="fill:#008E76;" points="218.2,270.6 218.4,286.6 193,274.2"/>
<polygon style="fill:#2BCAB4;" points="218.2,270.6 218.4,286.6 237.8,284.3"/>
<polygon style="fill:#81F5DF;" points="157.8,108.7 133.7,132.2 185.1,136.4"/>
<polygon style="fill:#2EA28F;" points="185.1,136.4 193.7,119 157.8,108.7"/>
<polygon style="fill:#38A794;" points="185.1,136.4 153.3,164.8 133.7,132.2"/>
<polygon style="fill:#1C9A85;" points="133.7,132.2 117.1,170.5 153.3,164.8"/>
<polygon style="fill:#FF6655;" points="153.3,164.8 117.1,170.5 121.5,189.3"/>
<polygon style="fill:#FC766A;" points="153.3,164.8 121.5,189.3 143.4,232.1 159,190.3"/>
<polygon style="fill:#FD9187;" points="159,190.3 175,239 143.4,232.1"/>
<polygon style="fill:#FC7A6E;" points="143.4,232.1 164.3,253.7 175,239"/>
<polygon style="fill:#2EA28F;" points="175,239 193,274.2 164.3,253.7"/>
<polygon style="fill:#ff6655;" points="175,239 218.2,270.6 193,274.2"/>
<polygon style="fill:#FB5445;" points="218.2,270.6 254.8,234.3 252,268.3 237.8,284.3"/>
<polygon style="fill:#17C5AD;" points="254.8,234.3 264,225 252.2,267.8"/>
<polygon style="fill:#FB5B4D;" points="254.8,234.3 263.8,218.7 248.8,219.9"/>
<polygon style="fill:#FC766A;" points="263.8,218.7 267.1,213.1 264,225 254.8,234.3"/>
<polygon style="fill:#42D0BC;" points="248.8,219.9 272.7,192.3 266,217.9 263.8,218.7"/>
<polygon style="fill:#FC8479;" points="258.1,158.9 262.1,153.4 272.7,192.3"/>
<polygon style="fill:#FC6658;" points="258.1,158.9 248.8,219.9 272.7,192.3"/>
<polygon style="fill:#FB4F3F;" points="258.3,158.1 216.3,150.4 248.8,219.9"/>
<polygon style="fill:#FC8B81;" points="216.3,150.4 159,190.3 249.2,219.7"/>
<polygon style="fill:#ff6655;" points="159,190.3 175,239 249.2,219.7"/>
<polyline style="fill:#FC766A;" points="175,239 249.2,219.7 218.6,271.2 175,240.2"/>
<polyline style="fill:#FC6F62;" points="248.8,219.9 254.8,234.3 218.2,270.6 248,220.3"/>
<polygon style="fill:#FC6456;" points="153.3,164.8 216.3,150.4 159,190.3 "/>
<polygon style="fill:#FB5445;" points="153.3,164.8 185.1,136.4 217,150.4 "/>
<polygon style="fill:#17C5AD;" points="216.3,150.4 254.4,139.1 262.1,153.4 258.1,158.9"/>
<polygon style="fill:#30CBB6;" points="157.8,108.7 188,83.3 193.7,119"/>
<polygon style="fill:#0DC2AA;" points="188,83.3 173.4,75.4 157.8,108.7"/>
<polygon style="fill:#FB4D3D;" points="188,83.3 223.4,90.8 193.7,119.7"/>
<polygon style="fill:#5DF2D6;" points="223.4,90.8 227.1,97.5 193.1,119.8"/>
<polygon style="fill:#FC685A;" points="223.4,90.8 198.5,71.8 188,83.3"/>
<polygon style="fill:#29C9B3;" points="198.5,71.8 223.4,90.8 240.3,76.2"/>
<polygon style="fill:#FB5445;" points="240.3,76.2 245.3,78.9 223.4,90.8"/>
<polygon style="fill:#30CBB6;" points="198.5,71.8 208.4,67.7 221.2,74.3"/>
<polygon style="fill:#00BFA5;" points="208.4,67.7 222.4,58.4 221.2,74.3 "/>
<polygon style="fill:#FC766A;" points="208.4,67.7 212.9,51.5 198.5,71.8 "/>
<polygon style="fill:#FB5445;" points="212.9,51.5 222.4,58.4 208.4,67.7 "/>
<polygon style="fill:#00BFA5;" points="221.2,74.3 232.2,62.1 233.8,75.6 "/>
<polygon style="fill:#38A794;" points="239,66.9 233.8,75.6 232.2,62.1 "/>
<polygon style="fill:#30CBB6;" points="240.3,77 244,70.6 243.9,78.9 "/>
<polyline style="fill:#38A794;" points="244,70.6 248,73.6 243.9,78.9 244,71.2"/>
<polygon style="fill:#29C9B3;" points="245.3,78.9 227.1,97.5 223.4,90.8"/>
<polygon style="fill:#81F5DF;" points="245.3,78.9 255,93.5 227.1,97.5"/>
<polygon style="fill:#F97D67;" points="255,93.5 261.9,98.5 254.8,86.2"/>
<polygon style="fill:#179882;" points="254.8,86.2 245.3,78.9 255,94.5 "/>
<polyline style="fill:#F97D67;" points="255,93.5 255,94.5 256.3,118.6 233.4,118.8"/>
<polygon style="fill:#F96B51;" points="227.1,97.5 233.4,118.8 255,93.5"/>
<polygon style="fill:#ff9882;" points="227.1,97.5 193.7,119 233.8,119.2"/>
<polygon style="fill:#F85D42;" points="233.4,118.8 216.3,150.4 193.7,119"/>
<polygon style="fill:#FF9882;" points="193.7,119 185.1,136.4 216.3,150.4"/>
<polygon style="fill:#FF9882;" points="233.4,118.8 257.1,118.4 216.3,150.4"/>
<polyline style="fill:#F96B51;" points="255,93.5 261.9,98.5 256.3,118.6 255,94.5"/>
<polygon style="fill:#F85A3E;" points="241.2,130.6 254.4,139.1 257.1,118.4"/>
<polygon style="fill:#FF9882;" points="254.4,139.1 216.3,150.4 241.2,130.6"/>
<polyline style="fill:#FF9882;" points="257.1,118.4 263.4,130.1 254.4,139.1 256.3,118.6"/>
</g>
</svg>
<div class='mainBody'>
<div class='infoContain med-shadow'>
<div class='infoBox sm-shadow shadow-lift' id='infoIntro'>
</div>
</div>
<div class='bar sm-shadow' id='about'> About
</div>
<div class='infoContain med-shadow'>
<div class='infoBox sm-shadow shadow-lift' id='infoAbout'>
</div>
</div>
<div class='bar sm-shadow' id='projects'> Projects
</div>
<section>
<div class='port sm-shadow'>
</div>
<div class='port sm-shadow'> </div>
<div class='port sm-shadow'> </div>
<div class='port sm-shadow'> </div>
</section>
<div class='bar sm-shadow' id='contact'> Contact
</div>
<div class='infoContain med-shadow'>
<div class='infoBox sm-shadow smFont shadow-lift' id='infoContact'>
<p class='header'>let's keep in touch! </p>
<input type="text" name="FirstName" placeholder='First'> </br>
<input type="text" name="LastName" placeholder='Last'>
<textarea placeholder="Write you're message here!" cols="30" rows="5"></textarea>
<aside id = 'send' class = 'sm-shadow'> send </aside>
</div>
</div>
</div>
</div>
<aside class = 'sm-shadow' id='top'>
<a href = "#home">home </a>
</aside>
<footer>
Made with <b>&#x2665</b> by Jennifer Stewart.
</br>Special thanks to my Mom, Karen Balala for the "Breathe New Life" theme inspiration.
</footer>
</body>
/*document.body.onload = function() {
var body = document.querySelector('body');
var homeBtn = document.getElementsByTagName('button')[0];
window.addEventListener('scroll', function(event) {
window.scrollY > body.style.height+ 300 ? homeBtn.style.visbility = 'visible':
homeBtn.style.visibility = 'visible';
})
}
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
* {
box-sizing: border-box;
outline: 0px;
outline-color: transparent;
padding: 0px;
margin: 0px;
}
body {
max-width: 100%;
height: auto;
position: relative;
background-color: #e8e8e8;
margin: 0px;
padding: 0px;
font-family: "Raleway";
}
.preflex {
position: fixed;
height: 100%;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%2381f5df' fill-opacity='.5'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
border-top: 8em solid #008e76;
}
.flexContainer {
position: relative;
display: flex;
flex-direction: column;
width: 80%;
background-color: #ffffff;
margin: auto;
margin-bottom: 200px;
padding-bottom: 100px;
transform: translatey(50px);
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
ul {
width: 100%;
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
padding-bottom: 0px;
overflow: hidden;
letter-spacing: 2px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.24);
}
li {
float: left;
width: 25%;
font-size: 16px;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
transition: all 600ms ease-out;
background-color: #ff6655;
margin-bottom: 0px;
padding: 8px;
}
li a:hover {
background-color: #fb4737;
color: white;
}
#starter {
align-self: stretch;
margin-bottom: 30px;
}
#title {
transform: translate(50px, 50px) scale(0.8);
fill: #484848;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.24);
}
#heart {
transform: translate(290px, -40px) scale(1);
stroke: white;
stroke-width: 1;
stroke-dasharray: 250;
stroke-dashoffset: -250;
animation: change 3s linear 3.7s 1;
animation-fill-mode: forwards;
transition: all 900ms;
}
@keyframes change {
0% {
stroke-dashoffset: 250;
stroke-opacity: 1;
}
87.5% {
stroke-dashoffset: 0;
stroke-opacity: 1;
}
100% {
stroke-dashoffset: 0;
stroke-opacity: 1;
}
}
.pulse {
fill: none;
stroke: #fc6f62;
stroke-miterlimit: 4;
stroke-width: 1.5;
stroke-dasharray: 756 755;
stroke-dashoffset: -756;
animation: dash 3s linear 1000ms 1;
animation-fill-mode: forwards;
}
@keyframes dash {
0% {
stroke-dashoffset: -756;
}
87.5% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#breathe {
font-size: 65px;
letter-spacing: 0px;
transition: all 600ms ease-in;
}
#life {
font-family: "Sacramento";
font-size: 72px;
}
#block {
position: relative;
fill: #00bfa5;
opacity: 1;
transition: all 2s 0.5s;
}
#name {
text-rendering: geometricPrecision;
writing-mode: vertical-lr;
text-orientation: upright;
fill: white;
letter-spacing: 0px;
word-spacing: -9px;
font-size: 20px;
margin: 0px;
opacity: 1;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.24);
}
#front {
text-rendering: geometricPrecision;
font-size: 19px;
fill: white;
letter-spacing: 8px;
padding: 0px;
margin: 0px;
opacity: 1;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.24);
}
.infoContain {
max-height: 20%;
max-width: 80%;
margin-top: 30px;
margin: auto;
padding: 25px;
background: #ff6655;
transition: all 600ms;
}
.infoBox {
width: 100%;
height: 300px;
background-color: white;
font: 18px/1.5 "Raleway";
color: #f5f5f5;
overflow: auto;
transition: all 800ms;
}
#infoIntro span:first-child {
color: #ff6655;
margin-top: 40px;
margin-left: 40px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.24);
font-size: 30px;
letter-spacing: 2px;
font-family: "Roboto";
font-weight: 600;
}
.bar {
align-self: center;
width: 100%;
font-size: 36px;
line-height: 1.5;
text-align: center;
letter-spacing: 20px;
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
background-color: #00bfa5;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.24);
}
#aboutsvg {
width: 80%;
object-fit: fill;
border-radius: 2px;
background-color: white;
overflow: hidden;
transition: all 2s;
}
#infoAbout {
font: 18px/1.5 "Raleway";
text-align: left;
overflow: auto;
}
#infoAbout::first-line {
font-weight: bold;
font-size: 40px;
}
.shadow-lift:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
section {
margin-top: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
box-sizing: content-box;
}
.port {
overflow: hidden;
width: 425px;
height: 351px;
border-radius: 2px;
margin: 20px;
transition: 1s all;
opacity: 0.6;
}
.port:hover {
transform: scale(1.2);
overflow: visible;
opacity: 1;
}
#infoContact {
overflow: auto;
text-align: left;
}
.header {
padding: 8px;
margin-top: 0px;
margin-bottom: 10px;
font-variant: small-caps;
font-size: 2em;
background: #008e76;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.24);
}
input {
width: 200px;
height: 25px;
margin-left: 15px;
outline: 1px solid rgba(0, 142, 118, .3);
}
input:focus,
textarea:focus {
outline-color: yellow;
}
textarea {
resize: horizontal;
display: block;
margin: 15px;
outline: 1px solid rgba(0, 142, 118, .3);
}
aside {
height: 40px;
text-align: center;
font-variant: small-caps;
line-height: 2;
font-size: 1.5em;
width: 80px;
border-radius: 8px;
background: #008e76;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.24);
transition: all 400ms;
}
aside a {
text-decoration: none;
color: white;
}
aside:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
}
aside:active {
background: #00bfa5;
outline: none;
}
#send {
font-size: 1em;
margin-left: 15px;
margin-bottom: 8px;
}
#top {
position: fixed;
bottom: 20px;
right: 20px;
width: 80px;
height: 80px;
line-height: 2.7;
border-radius: 50px;
}
footer {
margin-left: 8px;
poition: relative;
font: 16px/1.5 "Raleway";
}
b {
color: red;
font-size: 30px;
}
.sm-shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.med-shadow,
#dropShadow {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.smFont {
font-size: 20px;
font-family: Raleway;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment