Fullscreen portfolio startpage

Developer
Susanne Karin Lundblad
Size
3,041 Kb
Views
32,384
  1. Fullscreen portfolio startpage Previews
  2. Fullscreen portfolio startpage HTML Codes
  3. Fullscreen portfolio startpage CSS Codes
  4. Fullscreen portfolio startpage JS Codes

How do I make an fullscreen portfolio startpage?

Made a simpler version of codrops experiment: http://bit.ly/11JpRKo. What is a fullscreen portfolio startpage? How do you make a fullscreen portfolio startpage? This script and codes were developed by Susanne Karin Lundblad on 07 September 2022, Wednesday.

Fullscreen portfolio startpage Previews
IQ Test

Fullscreen portfolio startpage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fullscreen portfolio startpage</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
html,
body { width: 100%; height: 100%; overflow: hidden;
}
p { text-decoration: none; color: white; font-size: 1.2em; font-family: "Source Sans Pro", Lato, sans-serif; font-weight: 400;
}
p span { position: absolute; top: -1.5em; left: 50%; margin-left: -0.5em; font-size: 1.5em;
}
#main-wrapper { width: 100%; height: 100%;
}
.box { width: 50%; height: 50%; position: absolute; text-align: center; transition: all ease-out 0.3s; user-select: none; cursor: pointer;
}
.box:hover .box-content { margin-top: -2em;
}
.box .box-content { height: 100%; position: relative; top: 50%; margin-top: -1em; text-transform: uppercase; transition: margin-top 0.2s; -webkit-transition: margin-top 0.2s ease-in-out;
}
.box.clicked { left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 2;
}
.work { top: 0; left: 0; background-color: #ed4a0d;
}
.projects { top: 0; left: 50%; background-color: #35aa69;
}
.about { top: 50%; left: 0; background-color: #3567aa;
}
.contact { top: 50%; left: 50%; background-color: orange;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="container"> <section class="box work" data-class="has-work">	<div class="box-content"> <p><span class="fontawesome-suitcase"></span>Work</p>	</div>
</section>
<section class="box projects">	<div class="box-content">	<p><span class="fontawesome-desktop"></span>Tiny projects</p>	</div>
</section>
<section class="box about">	<div class="box-content">	<p><span class="fontawesome-bullhorn"></span>About</p>	</div>
</section>
<section class="box contact">	<div class="box-content">	<!-- Waving hand! -->	<p><span class="fontawesome-envelope"></span>Get in touch!</p>	</div>
</section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fullscreen portfolio startpage - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
html,
body { width: 100%; height: 100%; overflow: hidden;
}
p { text-decoration: none; color: white; font-size: 1.2em; font-family: "Source Sans Pro", Lato, sans-serif; font-weight: 400;
}
p span { position: absolute; top: -1.5em; left: 50%; margin-left: -0.5em; font-size: 1.5em;
}
#main-wrapper { width: 100%; height: 100%;
}
.box { width: 50%; height: 50%; position: absolute; text-align: center; transition: all ease-out 0.3s; user-select: none; cursor: pointer;
}
.box:hover .box-content { margin-top: -2em;
}
.box .box-content { height: 100%; position: relative; top: 50%; margin-top: -1em; text-transform: uppercase; transition: margin-top 0.2s; -webkit-transition: margin-top 0.2s ease-in-out;
}
.box.clicked { left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 2;
}
.work { top: 0; left: 0; background-color: #ed4a0d;
}
.projects { top: 0; left: 50%; background-color: #35aa69;
}
.about { top: 50%; left: 0; background-color: #3567aa;
}
.contact { top: 50%; left: 50%; background-color: orange;
}

Fullscreen portfolio startpage - Script Codes JS Codes

$('.box').click( function() { $(this).toggleClass('clicked');
});
Fullscreen portfolio startpage - Script Codes
Fullscreen portfolio startpage - Script Codes
Home Page Home
Developer Susanne Karin Lundblad
Username SusanneLundblad
Uploaded September 07, 2022
Rating 4.5
Size 3,041 Kb
Views 32,384
Do you need developer help for Fullscreen portfolio startpage?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Susanne Karin Lundblad (SusanneLundblad) Script Codes
Name
Susie
AngularJS, showing and hiding content using radio buttons
Loading animation
Getting username from email adress
Css man
CSS-masking gallery
Blend mode of text
Angular filter
Hover-effect
Flying pinata
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!