Skip to content
This repository was archived by the owner on Jun 28, 2022. It is now read-only.

compressing #135

Open
mohamedDriouch wants to merge 1 commit into
base: master
Choose a base branch
from
Open

compressing #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions css/phone.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/* Smartphones (portrait) */
@media only screen and (max-width: 480px) {
body { font-size: 12px;}
header p { padding-left: 4.5em;}
}
73 changes: 24 additions & 49 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,24 @@
html {
font-size: 100%;
overflow-y: scroll;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: none;
}
body { margin: 0; font-size: 14px; line-height: 1.61; font-weight: 400; }
body, button, input, select, textarea { font-family: 'Open Sans', sans-serif; color: #333; }

a { color: #12C; }
a:visited { color: #61C; }
a:focus { outline: thin dotted; }
a:hover, a:active { color: #c00; outline: 0; }

b, strong { font-weight: bold; }
pre, code { font-family: monospace, monospace; font-size: 1em; }
ul, ol { margin: 1em 0; padding: 0 0 0 20px; }
img { border: 0; max-width: 100%; }

body { background: #fff; }
header, footer, .container { max-width: 45em; margin: 0 auto; }

header { padding: 0 0.5em; color: #C90B0B; }
header img { border-radius: 40px; float: left; }
header p { font-size:1.5em; font-weight: bold; padding-left: 4em;}
header p span { font-size: 0.8em; font-weight: normal;}

.hero { padding: 2em; background-color: #f8f8f8; font-size:1.2em;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

.content { padding: 1em 1em; }
.content li { list-style-type: none; font-size: 1.1em;}
li img { float:left; padding-right: 1em; }
li p { font-size: 0.9em; font-style: italic; }

footer {
padding: 0 0.5em;
border-top: 1px solid #ccc;
}
footer span { float: right; font-style: italic; }

/* Smartphones (portrait) */
@media only screen and (max-width: 480px) {
body { font-size: 12px;}
header p { padding-left: 4.5em;}
}
html{font-size: 100%;overflow-y: scroll;-webkit-tap-highlight-color: rgba(0,0,0,0);-ms-text-size-adjust: 100%;-webkit-text-size-adjust: none;}
body{margin:0;font-size:14px;line-height:1.61;font-weight: 400;}
body,button,input,select,textarea{ font-family:'Open Sans',sans-serif;color:#333;}
a{color:#12C;}
a:visited{color:#61C}
a:focus{outline:thin dotted}
a:hover,a:active{color:#c00;outline:0}
b,strong{font-weight:bold}
pre,code{font-family:monospace,monospace;font-size:1em}
ul,ol{margin:1em 0; padding:0 0 0 20px}
img{border:0;max-width:100%}
body{background:#fff}
header,footer,.container{max-width:45em;margin:0 auto}
header{padding:0 0.5em;color:#C90B0B}
header img{border-radius:40px;float:left}
header p{font-size:1.5em;font-weight:bold;padding-left:4em}
header p span{font-size:0.8em;font-weight:normal}
.hero{padding:2em;background-color:#f8f8f8;font-size:1.2em;border-bottom:1px solid #ccc;border-top:1px solid #ccc;}
.content{padding:1em 1em}
.content li{list-style-type:none;font-size:1.1em}
li img{float:left;padding-right: 1em}
li p {font-size: 0.9em;font-style: italic}
footer{padding: 0 0.5em;border-top:1px solid #ccc;}
footer span{float:right;font-style:italic}
13 changes: 4 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,18 @@
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">
<link href="css/print.css" rel="stylesheet">
<link href="css/print.css" media="print" rel="stylesheet">
<link href="css/phone.css" media="screen and (max-width:480px) and (orientation:portrait)" rel="stylesheet">

<script>
<script async>
(function(w,g){w['GoogleAnalyticsObject']=g;
w[g]=w[g]||function(){(w[g].q=w[g].q||[]).push(arguments)};w[g].l=1*new Date();})(window,'ga');

// Optional TODO: replace with your Google Analytics profile ID.
ga('create', 'UA-XXXX-Y');
ga('send', 'pageview');
</script>
<script src="http://www.google-analytics.com/analytics.js"></script>
<script async src="http://www.google-analytics.com/analytics.js"></script>
<script async src="js/perfmatters.js"></script>
</head>

Expand All @@ -30,40 +31,34 @@
<a href="/"><img src="img/profilepic.jpg"></a>
<p>Cameron Pittman<br><span>Course Developer</span></p>
</header>

<div class="container">
<div class="hero">
<strong>I love web development!</strong> This is a template for a simple portfolio. I decided to use it to showcase a few Udacity courses I've taken and some teaching work, but you can use it to showcase any kind of project that you want the world to see :) <br> Contact me: [email protected]
</div>

<div class="content">
<ul>
<li>
<img src="https://lh4.ggpht.com/kJEnfqhPvtm4m3EneSZ4fWYGS8lW4YNhEjk6zPkyrQaBUHc-2Y_ElDic99NHI0h-UBLXVbRCjFybFvrWxdk=s100">
<a href="project-2048.html">Build Your Own 2048!</a>
<p>I made my own version of 2048. How cool is that!?</p>
</li>

<li>
<img src="https://lh6.ggpht.com/f_0W8h__3G99CWTjnMjD8BUKm7yp2-wJyApLtTwFoFtlal2ULf_JgHIsOQq2NiYfKOdMlXlMHDKNo5XVZLs=s100">
<a href="project-webperf.html">Website Performance Optimization</a>
<p>Hey... this class looks familiar.</p>
</li>

<li>
<img src="https://lh5.ggpht.com/IKdCmTWn8a2nMhlwMYzryvzRN5CUZAOBr4tDrEAbszV7TIFe9pRAInA4kkYcgTXwrifJsBEsq1agTueuu-g=s100">
<a href="project-mobile.html">Mobile Web Development</a>
<p>Making mobile apps isn't so hard after all.</p>
</li>

<li>
<img style="width: 100px;" src="views/images/pizzeria.jpg">
<a href="views/pizza.html">Cam's Pizzeria</a>
<p>Who wants a performant pizza?</p>
</li>
</ul>
</div>

<footer>
<p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
</footer>
Expand Down