APortfolio

Developer
Adrijana
Size
5,174 Kb
Views
10,120
  1. APortfolio Previews
  2. APortfolio HTML Codes
  3. APortfolio CSS Codes

How do I make an aportfolio?

What is a aportfolio? How do you make a aportfolio? This script and codes were developed by Adrijana on 27 November 2022, Sunday.

APortfolio Previews
IQ Test

APortfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>APortfolio</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<!--<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container-fluid"> <nav class="nav navbar-fixed-top"> <ul class="nav navbar-nav"> <li> <a href="#"> <h1>Adrijana Posedel</h1> </a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a href="#p1"><h2>About</h2></a> </li> <li> <a href="#p2"><h2>Portfolio</h2></a> </li> <li> <a href="#p3"><h2>Conferences</h2></a> </li> <li> <a href="#p4"><h2>Contact</h2></a> </li> </ul> </nav>
</div>
<div class="firstP text-center"> <div class="block"> <h1>Adrijana Posedel</h1> <h2>Sky is the limit</h2> <ul class="social-icons inline-block"> <li><a href="https://www.linkedin.com/in/adrijana-posedel-225175106?trk=nav_responsive_tab_profile_pic" target="_blank"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li> <li><a href="https://www.facebook.com/adrijana.posedel" target="_blank"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a></li> <li><a href="https://github.com/skybutterfly" target="_blank"><i class="fa fa-github fa-3x" aria-hidden="true"></i></a></li> </ul> </div>
</div>
<div id="p1" class="container-fluid secondP"> <h1>A bit about Me...</h1> <h2>Front-end developer, UX Researcher and Cognitive Scientist</h2> <div class="col-lg-8"> <p>The past year I've been a part of a great team working as a UX Researcher at Alfresco Software. My day to day consisted of usability benchmarking, design validations, and user testing.</p> <p>Previously, I've also been involved in Serious Games research at the Austrian Institute for Artificial Intelligence, as I have always been fascinated with machine learning, AI, and neural networks. I have also been a part of a small project at the Neurology Department at the University Medical Center Ljubljana, that focused on dual tasking and posture control in healthy young adults.</p>
<p>And finally, as I come from a computer science background, I decided to continue to pursue my passion, and broaden my experience in front-end development and creative problem solving, by working on small personal projects. </p>
<p>I am looking forward to be a part of an aspiring team and have the opportunity to broaden my knowledge and make a contribution.</p>
</div>
<div class="pug col-lg-4 text-center"> <img src="https://static.tumblr.com/11f27df2693c43f0395e24aba24ebbd3/twiysdk/vEmo0fwn7/tumblr_static_ed5p9ur83u0ogog8sskkoc4oc.gif" alt="pug" height="150px">
</div>
</div>
<div class="thirdP"></div>
<div id="p2" class="fourthP"> <h1>Portfolio</h1> <!-- ************** Portfolio ***************************** -->
<div class="container-fluid portfolio"> <!-- 1 L --> <div class="row"> <div class="col-lg-8"> <img src="https://cloud.githubusercontent.com/assets/14838130/20922879/a6e3b3fe-bba1-11e6-97e7-2b9fa30d0a84.png" alt="Twitch" class="img-responsive"> </div> <div class="p_box col-lg-4 text-center"> <h2>Top Games - Twitch API</h2> <div> <a href="https://codepen.io/Skybutterfly/full/KNqyOq/" target="_blank"> <button class="btn btn-default">LINK TO PROJECT</button> </a> </div> </div> </div> <!-- 2 R --> <div class="row"> <div class="p_box col-lg-4 text-center"> <h2>To Do List</h2> <div> <a href="https://drive.google.com/open?id=0B5vYQwIZ2bIaWDQ3OXQ0UVZHaEk" target="_blank"> <button class="btn btn-default">LINK TO PROJECT</button> </a> </div> </div> <div class="col-lg-8"> <img src="https://cloud.githubusercontent.com/assets/14838130/20340383/33eb4fba-abd9-11e6-88ee-0ed7ab6c65bf.png" alt="Todo" class="img-responsive"> </div> </div> <!-- 3 L --> <div class="row"> <div class="col-lg-8"> <img src="https://cloud.githubusercontent.com/assets/14838130/20327174/e9511200-ab83-11e6-9a28-812ffb991c0e.jpg" alt="ContactForm" class="img-responsive"> </div> <div class="p_box col-lg-4 text-center"> <h2>Omisam Contact Form</h2> <div> <a href="https://www.dropbox.com/sh/jn4kn718om7vm1o/AABR5NFBa_twy6ITUrizb_Moa?dl=0" target="_blank"> <button class="btn btn-default">LINK TO PROJECT</button> </a> </div> </div> </div>
<!-- 4 R --> <div class="row"> <div class="p_box col-lg-4 text-center"> <h2>LogoIpsum Front Page</h2> <div> <a href="https://drive.google.com/open?id=0B5vYQwIZ2bIac093dkc1NXJDUGs" target="_blank"> <button class="btn btn-default">LINK TO PROJECT</button> </a> </div> </div> <div class="col-lg-8"> <img src="https://cloud.githubusercontent.com/assets/14838130/20327614/b6f5b2d2-ab85-11e6-8219-f517f9cb9d61.png" alt="LogoIpsum" class="img-responsive"> </div> </div>
</div> <!-- 5 L --> <div class="row"> <div class="col-lg-8"> <img src="https://cloud.githubusercontent.com/assets/14838130/20327593/a72a817a-ab85-11e6-9429-00f7692f76e2.png" alt="Tesla" class="img-responsive"> </div> <div class="p_box col-lg-4 text-center"> <h2>Tesla Tribute Page</h2> <div> <a href="https://codepen.io/Skybutterfly/full/aBNojO/" target="_blank"> <button class="btn btn-default">LINK TO PROJECT</button> </a> </div> </div> </div> <!-- ************** Portfolio ******************************-->
</div>
<div class="fifthP"></div>
<div id="p3" class="container-fluid sixthP"> <h1>Conferences</h1> <div class="container-fluid"> <div class="row"> <div class="col-lg-6"> <img src="https://s3.amazonaws.com/sb001/wp-content/uploads/2015/07/brain-1024x438.png" alt="ContactForm" class="img-responsive"> </div> <div class="col-lg-6"> <h2>MEi:CogSci Conference 2014, Kraków</h2> <p>Dual Tasking and Posture Control in Healthy Young Adults</p> <div> <a href="http://www.univie.ac.at/meicogsci/php/ocs/index.php/meicog/meicog2014/paper/view/558" target="_blank"> <button class="btn btn-default">ABSTRACT</button> </a> </div> <h2>MEi:CogSci Conference 2015, Ljubljana</h2> <p>Serious Game Design Patterns: Contributions from the Affective Sciences</p> <div> <a href="http://www.univie.ac.at/meicogsci/php/ocs/index.php/meicog/meicog2015/paper/view/656" target="_blank"> <button class="btn btn-default">ABSTRACT</button> </a> </div> </div> </div> </div>
</div>
<div class="seventhP"></div>
<div id="p4" class="container-fluid eightP"> <h1>Contact Me</h1> <div class="contact_form col-lg-6"> <form class="form-horizontal"> <div class="form-group col-xs-offset-2 col-xs-10"> <input type="name" class="form-control" id="inputName" placeholder="Full Name"> </div> <div class="form-group col-sm-offset-2 col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> <div class="form-group col-xs-offset-2 col-xs-10"> <input type="text" class="form-control" id="inputSubject" placeholder="Subject"> </div> <div class="form-group col-sm-offset-2 col-xs-10"> <textarea class="form-control" rows="3" placeholder="Message"></textarea> </div> <div class="form-group col-xs-10"> <div> <button type="submit" class="btn btn-default">SEND MESSAGE</button> </div> </div> </form> </div> <div class="m_box col-lg-6 col-xs-12"> <div class="speech-bubble"> <div class="arrow bottom right"></div> <span>Hello there! </span><br> If you're interested in collaboration or just want to say 'hi' send me a message and we'll find a creative solution! </div> <div class="dog"> <img src="https://static.tumblr.com/2a66033f17374897104f1f12f0956c1e/navqgzo/YCNnet253/tumblr_static_60pug0puca0484ssws4w8w0ss.gif" alt="pug" height="150px"> </div> </div>
</div>
<div class="ninthP"></div>
<footer class="footer navbar-fixed-bottom"> <div class="text-center"> <h5>Created by @skybutterfly</h5> </div>
</footer>
</body>
</html>

APortfolio - Script Codes CSS Codes

body{ background: url("https://cloud.githubusercontent.com/assets/14838130/20662494/825aa990-b54b-11e6-8aa6-4a321e18d750.jpg") #b1e4fd; background-position: center center; background-attachment: fixed; background-size: cover; font-family: 'Roboto', sans-serif;
}
.btn{ margin-top: 15px; padding: 10px 25px; border-radius: 0; border: 2px solid #FFA07A; background: none; color: #FFA07A;
}
nav{ margin: 0; padding-right: 35px; background-color: #fff; border-bottom: 5px solid #FFA07A;
}
nav h1{ margin: 0; padding-left: 35px; padding-top:10px; padding-bottom: 10px; font-size:40px;
}
nav h1:hover{ background-color: none; color: #000;
}
nav h2{ padding: 0 10px 8px 0; font-size: 25px; font-weight: bold;
}
nav h2:hover { background-color: none; color: #000;
}
h1{ font-family: 'Fredericka the Great', cursive;
/* font-family: 'Cabin Sketch', cursive;*/ font-size: 60px; color: #FFA07A;
}
h2{ font-size: 35px; color: #FFA07A;
}
.social-icons{ padding:0;
}
.social-icons li{ margin: 25px 0; display: inline-block; width: 75px; height: 75px; border-radius: 50%; border: 5px solid #FFA07A; background: none;
}
.firstP{ margin-top:250px; height:900px;
}
.block{ position:relative; background-color: #fff; opacity: .9; width: 50%; padding: 50px 0; margin-right: auto; margin-left: auto; border-radius: 35px;
}
.block:after{ content: ''; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; background: #fff; border: 5px solid #FFA07A; border-radius: 35px; z-index: -1;
}
.fa{ margin: 20%; color: #FFA07A;
}
.fa:hover{ color: #000;
}
.secondP{ background-color: rgba(255,255,255,.9); /*height: 500px;*/ padding: 25px 50px; font-size: 20px;
}
.secondP h1{ padding-bottom: 0; padding-left: 10px;
}
.secondP h2{ padding-bottom: 25px; padding-left: 10px;
}
.secondP img{ width: 80%; height: 80%;
}
.thirdP{ height:250px;
}
.fourthP{ background-color: rgba(255,255,255,.9); /*height: 2700px;*/ padding: 25px 50px; font-size: 20px;
}
.fourthP h1{ padding-bottom: 25px; padding-left: 10px;
}
.portfolio .row{ margin-bottom: 50px;:
}
.p_box { background-color: #FFA07A; color: #fff; padding: 25px 0; border: 3px solid #FFA07A;
}
.p_box .btn{ border: 2px solid #fff; background: none; color: #fff;
}
.p_box h2{ color: #fff;
}
.fifthP{ height:250px;
}
.sixthP{ background-color: rgba(255,255,255,.9); /*height: 550px;*/ padding: 25px 50px;
}
.sixthP h1{ padding-bottom: 25px; padding-left: 10px;
}
.seventhP{ height:250px;
}
.eightP{ background-color: rgba(255,255,255,.9); /*height: 500px;*/ padding: 25px 50px; margin-bottom:25px;
}
.eightP h1{ padding-bottom: 25px; padding-left: 10px;
}
.dog{ margin-top: 125px; display: block; overflow: auto;
}
.speech-bubble { background-color: #f8f8f8; border: 1px solid #c8c8c8; border-radius: 5px; width: 70%; text-align: left; padding: 20px; position: absolute; font-size: 25px;
}
.speech-bubble .arrow { border-style: solid; position: absolute;
}
.bottom { border-color: #c8c8c8 transparent transparent transparent; border-width: 8px 8px 0px 8px; bottom: -8px;
}
.bottom:after { border-color: #f8f8f8 transparent transparent transparent; border-style: solid; border-width: 7px 7px 0px 7px; bottom: 1px; content: ""; position: absolute; left: -7px;
}
.m_box span{ font-weight: bold;
}
.ninthP{ height:100px;
}
.footer{ background-color: #fff; border-top: 1px solid #FFA07A;
}
APortfolio - Script Codes
APortfolio - Script Codes
Home Page Home
Developer Adrijana
Username Skybutterfly
Uploaded November 27, 2022
Rating 3
Size 5,174 Kb
Views 10,120
Do you need developer help for APortfolio?

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!

Adrijana (Skybutterfly) Script Codes
Name
Test123
TestTest
A Pen by Adrijana
Get Top Games
NT Tribute
Create amazing Facebook ads 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!