Responsive Website Design: Responsive Portfolio-template

index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Portfolio-template</title>
<link rel="stylesheet" href="style.css" />

</head>

<div class="advertise">
<div class="left">
<h3>Html-Expert</h3>
<h6>Html-Expert read more</h6>

</div>
<div class="left2">
<img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg">
</div>
</div>

<div class="advertise">
<div class="left">
<h3>Jquery-Expert</h3>
<h6>Jquery-Expert read more</h6>
</div>
<div class="left2">
<img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg">

</div>
</div>

<div class="advertise">
<div class="left">
<h3>Design-Expert</h3>
<h6>Design-Expert read more</h6>
</div>
<div class="left2">
<img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg">

</div>
</div>

<div class="advertise">
<div class="left">
<h3>Coding-Expert</h3>
<h6>Coding-Expert read more</h6>
</div>
<div class="left2">
<img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg">

</div>
</div>

</div>
<div class="main-container"> 
<p>Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by its own template library, HTMLBars, built on top of Handlebars.js, and a router for managing application state.</p>

<h4>Routes</h4>
<p>The router is a core concept of Ember, emphasizing the importance of the URL in managing application state. A route object corresponds to a URL and essentially serializes the application's current state. Routes are defined in the singleton Router object.</p>
<h4>Models</h4>
<p>Every route has an associated model, containing the data associated with the current state of the application. While one can use jQuery to load JSON objects from a server and use those objects as models, most applications use a model library such as Ember Data to handle this.</p>
<h4>Controllers</h4>
<p>Controllers are used to decorate models with display logic.It was typical for a controller to inherit from ObjectController if the template was associated with a single model record and ArrayController if the template was associated with a list of records. However, ObjectController and ArrayController have been deprecated in favor of explicitly accessing of the model property of Ember.Controller.[citation needed]</p>
<h4>Templates</h4>
<p>Templates are written with the HTMLBars templating language (a variation on the Handlebars template system) to describe the user interface. Templates are used to build the application's HTML and embed dynamically-updating expressions.</p>
<h4>Views</h4>
<p>Views are used to add sophisticated handling of user events, custom graphics not made with CSS, JavaScript animations, or reusable behavior to a template.</p>
<h4>Components</h4>
<p>Components are a specialized view for creating custom elements that can be easily reused in templates. The Ember Components implementation conforms as closely as possible to the W3C Web Components specification.
</p>
<h4>Ember Data</h4>
<p>Most Ember.js applications use Ember Data, a data persistence library that maps client-side models to server-side data, although it is also possible to use Ember.js without Ember Data. By default, Ember Data can load and save records and their relationships without any configuration via a RESTful JSON API that follows certain conventions,providing many of the facilities of an ORM, but it is also easily configurable and can work with any server through the use of adapters. Ember Data is currently in beta and its API should not be considered stable until version 1.0.</p>
</div>

</div> 
</div> 
</body>
</html>

Create style.css

@charset "utf-8";
body{
background:#CCCCCC;
}
.wrapper{
padding:10px;
background:#F5F6F5;
overflow:auto;
}
.aside{
float:left;
width:30%;
padding:10px;
background:#F5F6F5;
overflow:auto;
}
.circle{
border-color: #ffffff;
    border-radius: 50px;
    height: 100px;
    margin: auto;
    width: 100px;
 background:#CCCCCC;
}
.circle img{
border-radius: 57px;
    height: 100%;
    margin: auto;
    position: relative;
    width: 100%;
}
.aside ul{
padding:0px;
margin:0px;
}
.aside ul li{

list-style-type: none;
margin: 10px;
}
.aside ul li a{
text-decoration:none;
color:#FFFFFF;
text-align:center;
padding:10px;
background: #93cede; /* Old browsers */
background: -moz-linear-gradient(top,  #93cede 0%, #75bdd1 41%, #49a5bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93cede), color-stop(41%,#75bdd1), color-stop(100%,#49a5bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */

display:block;
}
.aside ul li a:hover{
background:#666666;
}
.container{
margin:auto;
overflow:auto;
}
.main-container{
float:left;
padding: 14px;
    width: 66%;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

overflow:auto;
}
.advertise{
padding:10px;
background: #93cede; /* Old browsers */
background: -moz-linear-gradient(top,  #93cede 0%, #75bdd1 41%, #49a5bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93cede), color-stop(41%,#75bdd1), color-stop(100%,#49a5bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */

overflow:auto;
margin: 10px;
}
.left{
width:70%;
float:left;

height:100px;
}
.left h3{
padding-left:2px;
}
.left h6{
padding-left:2px;
}
.left2{
width:30%;
float:left;

height:100px;
}
.left2 img{
width:100%;
margin:auto;
height:100%;
}
@media screen and (min-device-width: 320px) and (max-device-width: 756px) {  
.aside{
float:left;
width:100%;
padding:0px;
overflow:auto;
}
.main-container{
float:none!important;
width:100%;
overflow:auto;
padding:0px;
}
.main-container p{
padding:10px;
text-align:justify;
}
.main-container h4{
padding:10px;
}

Tuesday 12 May 2015

Responsive Portfolio-template

index.html

Create style.css

1 comment: