Skip to content

Instantly share code, notes, and snippets.

@lisantwi

lisantwi/Portfolio.html

Last active April 10, 2019 06:37
Show Gist options
  • Save lisantwi/714490b108317acfa54d72c947a71439 to your computer and use it in GitHub Desktop.
Save lisantwi/714490b108317acfa54d72c947a71439 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio
Raw
Portfolio.html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Crete+Round|Gothic+A1" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Meddon" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch|Meddon|Share|Squada+One|Staatliches" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dosis|Montserrat" rel="stylesheet">
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<body id="home">
<nav id=navbar class=top>
<div>
<div class=nav-box>
<ul>
<li><a href="#about-me">About Me</a></li>
<li><a href="#project-nav">My Projects</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#chat">Let's Chat!</a></li>
</ul>
</div>
</div>
<hr class=hr-style>
<div class="container">
<div class="row">
<div class="col">
<section id=welcome-section>
<header>
<div class=intro >
<div>
<h1 class=name-font> <p>Hello, I'm <b>Lisa Antwi Adjei</b>, a product management enthusiast<br> and aspiring web-developer<br> <a href="https://www.linkedin.com/public-profile/settings?trk=d_flagship3_profile_self_view_public_profile"><i class="fab fa-linkedin"></i></a> <a id=profile-link href="https://github.com/lisantwi" target="_blank"><i class="fab fa-github-alt"></i></a></p>
<br>
<br>
</section>
</header>
<br><br>
</div>
</div
</div>
</div>
<section>
<header class=header>
<hr class=hr-style>
<div class=about-header>
<br>
<h3 id=about-me>About me</h3><br>
</div>
</header>
<div class=container-background>
<div class=about >
<div class="container">
<p><img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/28059376_10155500823981775_4243355386670367418_n.jpg?_nc_cat=108&_nc_ht=scontent-iad3-1.xx&oh=8dd35edf646c51c0d05938e786872793&oe=5D464B2B" alt="Lisa Photo" style="width:30%">Lorum Ipsum
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
</div>
<br>
</div>
<header class=header>
<br>
<br>
<h3 id=project-nav>Projects</h3><br>
</header>
<div class=container-background>
<div class=projects class="shadow-lg p-3 mb-5 bg-white rounded" class=center>
<br>
<div id=projects>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://i.ibb.co/YDDVngm/Screen-Shot-2019-03-14-at-6-39-39-PM.png" alt="Card image cap">
<div class="card-body" id=projects >
<h5 class="card-title">Touriend</h5>
<p class="card-text">Touriend is an app that allows you to find a tour-guide based on your preferences or generate an instant itinerary based on your interest.</p>
</div>
<div class="card-footer">
<a href="https://codepen.io/lisantwi/full/eoZyoY" class="btn btn-primary">Learn more</a>
</div>
</div>
<div class ="card" >
<img class="card-img-top" src="https://i.ibb.co/RBFYWrg/Screen-Shot-2019-04-10-at-1-46-18-AM.png">
<div class="card-body">
<h5 class="card-title" >Fenty Beauty - Landing Page</h5>
<p class="card-text">Fenty Beauty product landing page for new product launch.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Learn more</a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://www.mayorsfundforlondon.org.uk/wp-content/uploads/2016/06/img-placeholder-square-300x300.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Coming Soon</h5>
<p class="card-text"></p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Learn more</a>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<header class=header>
<br>
<h3 id=experience>Experience</h3><br>
</header>
<div class=container-background>
<div class=about class=center>
<div class="card mb-3" >
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://business.gwu.edu/sites/g/files/zaxdzs1611/f/styles/gw_editorial_article_full/public/image/GWSB_Blog-Post_GW-Logo-2_2017.png?itok=M2fCF15e" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">GWU - Information Systems Department</h5>
<h6 class="card-title">Graduate Teaching Assistant - Management Info Systems (BADM2301)</h6>
<p class="card-text">Currently working as a Graduate Teaching Assistant in the IST at GWU, teaching Management Management Information Systems. This course is focused on exposing students to a variety of application software, such as Tableau, Visio/LucidChart, SQL/MS Access and Excel</p>
</div>
</div>
</div>
</div>
<br>
<div class="card mb-3" >
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://www.cvent.com/microsites-marketing/en/brand-guide/img/logo/cvent-logo-standard.jpg" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Cvent</h5>
<h6 class="card-title">Product Management Intern</h6>
<p class="card-text">Worked as a Product Management Intern alongside senior product management on multiple projects focused on requirement gathering, user research, A/B testing and prototype designs.</p>
</div>
</div>
</div>
</div>
<br>
<div class="card mb-3" >
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://www.festisite.com/static/partylogo/img/logos/google.png" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Google (Contractor via HCL Tech)</h5>
<h6 class="card-title">Product Analyst</h6>
<p class="card-text">Worked on the curation of data to optimize machine learning for the Google Shopping US and Benelux market. Conducted in-depth product research, data analysis and technical writing to develop and maintain an accurate product taxonomy.</p>
</div>
</div>
</div>
</div>
<br>
</div>
<header class=header>
<br>
<h3 id=chat>Let's Chat!</h3><br>
</header>
<div class="container">
<form action="action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
Raw
style.css
/* For mobile phones: */
#home{
background-color:#E9E7EA;
}
#welcome-section{
}
.nav-box{
background-color:
Margin: 10px 10px 10px 10px;
}
li{
float: left;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul.a{
list-style-type: square;
}
li a{
display:block;
text-align:center;
padding:10px 35px 10px 10px;
text-decoration:none;
font-family: 'Gothic A1', sans-serif;
color:#D14B9E;
}
li a:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), inset 0 0 0.6px rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: gray;}
.intro{
padding:px;
margin:85px 5px 85px 5px;
height:75px;
}
}
.logo{
width:200px;
height:200px;
}
.container{
color:#D14B9E;
font-family: 'Dosis', sans-serif;, cursive
}
.about{
padding:30px 20px 5px 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color:white;
}
.projects{
padding:0px 10px 10px 0px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: white;
overflow:visible;
}
header{
margin:0px;
}
.header{
background:#E9E7EA;
font-family: 'Gothic A1', sans-serif;
color:#D14B9E;
}
#Image-size{
width:auto;
height:300px;
}
.top{
background-color:white;
}
.card-img{
}
.card-img-top{
height:200px;
}
.container-background{
background-color:#E9E7EA;
}
.experience{
height:180px;
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #D14B9E;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container-form {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
@media only screen and (min-width: 768px) {
.about{
max-width:90%;
margin:auto;
}
.projects{
max-width:90%;
margin:auto;
overflow:visible;
}
.intro{
text-align:center;
}
.header{
text-align:center;
}
ul {
margin-top: 30px;
list-style-type:none;
display:flex;
justify-content: center
}
.nav-box{
text-align:center;
}
flex-container {
margin:auto;
}
.container{
margin:auto;
font-family: 'Meddon',
}
.hr-style{
border-top: 1px dashed #D14B9E;
}
.logo{
width:500px;
height:400px
}
.name-font{
font-size:40px;
}
.name2-font{
font-size:30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment