From d41f67e12e7b6d75fde05f753cc582b6aba0d441 Mon Sep 17 00:00:00 2001 From: mohamedDriouch Date: Tue, 31 Oct 2017 14:33:02 +0100 Subject: [PATCH] compressing add media to css link separate css files add phone.css --- css/phone.css | 5 ++++ css/style.css | 73 +++++++++++++++++---------------------------------- index.html | 13 +++------ 3 files changed, 33 insertions(+), 58 deletions(-) create mode 100644 css/phone.css diff --git a/css/phone.css b/css/phone.css new file mode 100644 index 00000000000..03751979f8c --- /dev/null +++ b/css/phone.css @@ -0,0 +1,5 @@ +/* Smartphones (portrait) */ +@media only screen and (max-width: 480px) { + body { font-size: 12px;} + header p { padding-left: 4.5em;} +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index ea49bda6578..8024aadc003 100644 --- a/css/style.css +++ b/css/style.css @@ -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} diff --git a/index.html b/index.html index 01ebf055996..ffb4711fed2 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,10 @@ - + + - - + @@ -30,12 +31,10 @@

Cameron Pittman
Course Developer

-
I love web development! 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 :)
Contact me: me@email.com
-
-