LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




		

Marvellous

Marvellous

Graphics & Web Designer and aspiring Web Developer.

I finished my Applied Graphic Art Certificate and moving on to Web Development. These are example of my projects I have done while learning web design, user experience and user interface design.

Pastel drawing of me from modeling for Portraiture class
Xanh the Movie Bootstrap Website

Xanh the Movie

Site made with HTML, CSS & Bootstrap

Break Time App Prototype

Break Time

A reminder app, UX/UI prototype made with Sketch

Code Berkeley Website Redesign

Code Berkeley

A website redesign made with Sketch

Card image cap

960 Grid

A website made with 960 Grid

Card image cap

ML Design

2nd iteration of my site

Card image cap

ML Design

1st iteration of my site

Contact me if you are interested in collaborating.


We'll never share your email with anyone else.



Never submit passwords through Google Forms.
CSS
@charset "UTF-8";
/* CSS Document */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html,body {
	background: white;
	font-family: 'Open Sans', sans-serif;
	overflow-x: hidden;
	/*there seems to be a overflow issue with bootstrap 4 on the right side of page*/
}
a, a:hover, a:visited:hover, a:visited {
	text-decoration: none;
/*	color:#999;*/
}
a:hover, a:visited:hover {
	transition: .3s;
/*	color:#fc3;*/
}
img {
	border: none;
}

/* -------------- General ----------------------------------------------- */
header {
	background: url(https://www.dropbox.com/s/dk9nqsktris3e38/lakebg960x260.jpg?dl=1) no-repeat;
	background-size: cover;
}

.jumbotron {
	margin-bottom: 0;
	padding: 9rem 0;
}

@media screen and (min-width: 90em) {
	.about p {
		max-width: 80%;
	}
}

.design {
	margin-bottom: 5rem;
}

.card .img-fluid {
	width: 100%;
}

@media screen and (min-width: 0em) and (max-width: 33.99em){
	.card {
		margin-bottom: 1em;
	}
}


@media screen and (min-width: 34em) and (max-width: 39.99em) {
	.card-columns {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	.contacts {
		width: 85%;
	}
}

@media screen and (min-width: 40em) and (max-width: 61.99em) {
	.card-columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
	.contacts {
		width: 75%;
	}
}

@media screen and (min-width: 62em) and (max-width: 74.99em) {
	.card-columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
	.contacts {
		width: 65%;
	}
}

@media screen and (min-width: 75em) {
	.card-columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
	.contacts {
		width: 50%;
	}
}


.input-group-addon {
	padding: .5rem 0.5rem;
	width: 5rem;
}
.social {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 2rem 0 8rem;
}
.social .btn {
	margin: .2em;
}

/* -------------- Style ----------------------------------------------- */
.container, .container-fluid {
	background-color: #fff;
}
.navbar-inverse .navbar-nav .nav-link:focus, .navbar-inverse .navbar-nav .nav-link:hover {
	color: rgba(255,204,51,1);
}
.navbar-inverse .navbar-nav .nav-link {
	color: rgba(255,204,51,.75);
}
.navbar-inverse .navbar-toggler {
	border-color: rgba(255,204,51,.3);
}
h1 {
	color: #fc3;
	line-height: 60px;
	font-size: 8em;
}
h2 {
	font-weight: 600;
	color: #fff;
}

.aboutBG {
	font-weight: 700;
	font-size: 60em;
	position: absolute;
	top: 21rem;
	left: 10rem;
	color: rgba(255,255,255,.25);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.about {
	background: rgba(255,204,51,1);
}
.about .container {
	background: transparent;
}
.form-control:focus, .btn-outline-warning:hover {
	border-color: #fc3;
}
.form-control:required:focus {
	border-color: red;
}
.btn-outline-warning:hover {
	background: #fc3;
}
.success {
white-space: nowrap;
vertical-align: middle;
padding: .5rem 1rem;
}

/* -------------- Animations ------------------------------------------- */

#hero {
	visibility: hidden;
	animation: drop-in 1s 3s cubic-bezier(.51,-0.4,0,1.37) forwards;
	/*(.51,-0.4,.46,1.25)*/
}

@-webkit-keyframes drop-in {
	0% {
		visibility: hidden;
		transform: translateY(-100%);
	}
	50% {
		transform: translateY(10%);
	}
	100% {
		visibility: visible;
		transform: none;
	}
}

JS
var shiftWindow = function() { scrollBy(0, -54) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }

Description

A portfolio project for FreeCodeCamp Front End Certificate. Converted my multipage portfolio into a single page.
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv