html--------
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mariedyth Gayas | Aspiring Frontend Ninja">
<meta name="keywords" content="mariedyth gayas, aspiring frontend developer, portfolio samples">
<title>Portfolio - Mariedyth Gayas</title>
<link href="https://fonts.
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body class="portfolio">
<div class="portfolio-container">
<div class="header-box">
<img class="logo" src="https://i.imgur.com/
<div class="header-title">
<h1>MARIEDYTH GAYAS</h1>
<h2>FRUSTRATED FRONT-END NINJA</h2>
</div>
</div>
</div>
<div class="portfolio-items">
<h3>Featured Projects.</h3>
<img class ="section-image" src="https://i.imgur.com/
</div>
<div id="work-sample-container">
<div class="container">
<div class="image">
<img src="https://i.imgur.com/
<div class="overlay">
<a href="https://www.
<div class="text">
<h4>The Yellow<br>Cape</h4>
</div>
</div>
</div>
</a>
<div class="label">
<p>Nonprofit Organization</P>
</div>
</div>
<div class="container">
<div class="image">
<img src="https://i.imgur.com/
<div class="overlay">
<a href ="https://www.davecarey.com" target="_blank">
<div class="text">
<h4>Dave<br>Carey</h4>
</div>
</div>
</div>
</a>
<div class="label">
<p>Motivational Speaker</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="https://i.imgur.com/
<div class="overlay">
<a href="https://www.
<div class="text">
<h4>EHTAC<br>Recruitment</h4>
</div>
</div>
</div>
</a>
<div class="label">
<p>Recruiting Agency</p>
</div>
</div>
</div>
</body>
</html>
.....csss.
img, embed, object, video {
max-width: 100%;
}
body {
font: "Source Sans Pro, Helvetica Neue, Arial, sans-serif";
font-size: 18px;
}
h1 {
font-size: 3vw;
margin: 0;
color: #000000;
}
h2 {
font-size: 1.85vw;
margin: 0;
}
h3 {
font-size: 2.5vw;
margin-bottom: 20px;
margin-top: 50px;
margin-left: 15px;
}
h4 {
font-size: 1.5vw;
}
.portfolio-container {
display: flex;
flex-wrap: wrap;
}
.header-box {
text-align: center;
display:block;
width: 100%;
min-height: 50px;
margin-left: auto;
margin-right: auto;
padding-bottom: 15px;
}
.header-title {
margin: 0;
}
.logo {
max-width: 20%;
height: auto;
}
.section-image {
width: 100%;
height: auto;
float: left;
position: relative;
background-size: cover;
}
#work-sample-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
text-align: center;
}
.container {
position: relative;
max-width: 30%;
padding: 15px;
}
.image {
display: inline-block;
position: relative;
width: calc(33.33%-10px);
height: auto;
}
.overlay {
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #ff4a9e;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform:scale(0);
transition: .3s ease;
}
.container:hover .overlay {
transform: scale(1)
}
.text {
color: #ffffff;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
/*most laptops and desktop*/
@media screen and (min-width: 1025px) and (max-width: 1280px) {
.portfolio {background-color: #ffffff;}
.overlay {background-color: #ffb3ba;}
.portfolio-container {background-color: #bae1ff;}
}
/*most tablets, iPad (Portrait)*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio {background-color: #ffffff;}
.overlay {background-color: #ffdfba;}
.portfolio-container {background-color: #ffb3ba;}
}
/*most tablets and iPad (landscape)*/
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.overlay {background-color: #ffffba;}
.portfolio-container {background-color: #bae1ff;}
}
/*most smartphones*/
@media screen and (min-width: 320px) and (max-width: 480px;) {
body {font-size: 13px;}
.overlay {background-color: #ffdfba;}
.portfolio-container {background-color: #bae1ff;}
.image {display: flex;} {flex-flow: flow-wrap;}
}
...........................................another......................https://codepen.io/MDDeniz/pen/yjWmMR....................................
html...
<head>
<meta charset="uft-8">
<title>Portfolio Site</title>
<link rel="stylesheet" type="text/css"
href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Header Section -->
<header class = "bcolor bordercolor">
<div class="column">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Udacity_Logo.svg/95px-Udacity_Logo.svg.png" alt="logo">
<!-- Udacity Logo Image Source: Wikipedia -->
</div>
<div>
<h1 class="headerright name">Deniz Mehmed</h1>
<h3 class="headerright title">Front-End Developer</h3>
</div>
</header>
<!-- Image Section -->
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Backlit_keyboard.jpg" alt="computer image" width="100%">
<!-- Backlit Keyboard Image Source: Wikipedia -->
</div>
<!-- Footer Section -->
<div class="bcolor bordercolor">
<h1 class="title">Featured Work</h1>
</div>
<footer>
<div class="container">
<h2 class="sitecolor box">Memory Game</h2>
<h2 class="sitecolor box">Feed Reader Testing</h2>
<h2 class="sitecolor box">Restaurant Reviews</h2>
<p class="box">Sharpen the saw!</p>
<p class="box">Keep abreast of several web sites at once.</p>
<p class="box">For serious<em> FOODies</em>!</p>
</div>
</div>
<!-- Memory Game Image Source: everystockphoto --> <div class="container">
<img class="box" src="http://s3.amazonaws.com/everystockphoto/fspid30/13/38/47/35/wolves-wolf-memorygame-13384735-o.jpg" alt="Memory Game" width=100%>
<!-- Feed Reader Image Source: everystockphoto -->
<img class="box" src="http://s3.amazonaws.com/everystockphoto/fspid30/80/93/86/7/snagit-screenshot-twitter-8093867-o.jpg" alt="Feedreader" width=100%>
<!-- Restaurant Reviews Image Source: everystockphoto -->
<img class="box"
src="http://s3.amazonaws.com/everystockphoto/fspid/16/71/93/61/square-16719361-o.jpg" alt="Resturant Reviews" width=100%>
</div>
</footer>
</body>
................css.........
.headerright{
text-align: right;
}
.bcolor{
background-color: #add8e6;
}
.bordercolor {
border-width: 3px;
border-style: solid;
border-color: #000080;
}
.logoleft{
text-align: left;
}
.name {
color: #808000;
}
.title {
color: #ff4500;
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 33.3%;
}
.memory{width: 33.33%; order: 1;}
.feeder{width: 33.33%; order: 2;}
.restaurant{width: 33.33%; order: 3;}
.sitecolor {
color: #6a5acd;
}
.column {
float: left;
width: 33.33%;
}
.columnright {
float: right;
width: 33.33%;
}
No comments:
Post a Comment