From a4b0f440dce1279bcdf411b240f5bb69d44463bb Mon Sep 17 00:00:00 2001 From: Cynthia Date: Tue, 24 Oct 2017 16:18:20 -0400 Subject: [PATCH] fixes-1 --- bootstrap-practice/bootstrap-practice.css | 146 +++++++++++++++- bootstrap-practice/index.html | 198 +++++++++++++--------- 2 files changed, 264 insertions(+), 80 deletions(-) diff --git a/bootstrap-practice/bootstrap-practice.css b/bootstrap-practice/bootstrap-practice.css index 5c34ade..a69aa60 100644 --- a/bootstrap-practice/bootstrap-practice.css +++ b/bootstrap-practice/bootstrap-practice.css @@ -6,14 +6,34 @@ body{ header { background-image:url("images/laptop-and-person.jpg"); background-size:cover; + height:675px; + margin-top: 0; } +#des-box { + height:160px; + padding:30px; +} + +nav { + background-color:#8C92A1; + padding-right:15px; + padding-left:15px; +} nav img { - width:10%; + width:100px; + padding-top:25px; +} + +#owl-box { + background-color:white; + height:161px; } nav li { background-color:#8C92A1; - display:inline-block; + list-style-type: none; + padding:20px; + margin:0; } nav li:hover { @@ -50,9 +70,14 @@ footer { background-color:#545D70; } +hr { + text-align:center; + width:90%; +} p { color:white; font-size:16px; + font-family: 'Crimson Text', serif; } .big-2-p { @@ -65,16 +90,32 @@ p { } #header-info { - width:50%; background-color:hsla(42, 98%, 80%, 0.56); + height:615px; + border-left:14px solid #3A4245; +} + +#header-info h4{ + padding-top:75px; } #logo-bar { background-color:white; + border-left:14px solid #3A4245; + height:75px; + text-align:center; + padding-top:10px; + padding-bottom:10px; +} + +#logo-bar h4 { + font-size:14px; + font-family: 'Roboto', sans-serif; } #header-info h1, #gray-box h1, #pink-box h1, #aqua-box h1, #white-box h1 { font-size:44px; + font-family: 'Playfair Display', serif; } #header-info h1 { @@ -87,4 +128,103 @@ p { #pink-box h1, #aqua-box h1 { color:white; +} + +#gray-box img{ + width:200px; + height:175px; + border:5px solid white; +} + +#pink-box img { + width:375px; + margin-left:2%; + border:5px solid white; + padding:0; +} + +#pink-box .img-1 { + margin-left:3%; +} + +#button{ + background-color:#545D70; + border-radius:5px; + color:#E9ED98; + width:165px; +} + +#header-info h4,#caption { + color:white; +} + +#aqua-box a { + color:white; +} + +#aqua-box a:hover { + color:#E9ED98; +} + +#aqua-box h4 a { + color:#E9ED98 +} + +#pink-box a { + color:#ED98B1; +} + +#gray-box .green { + color:#5FC9AA; +} + +#gray-box a { + color:#E9ED98; +} + + +#my-nav h4, #header-info h4, #gray-box h4, #pink-box h4, #aqua-box h4, #white-box h4 { + font-size:14px; + font-family: 'Roboto', sans-serif; +} + +footer li { + list-style-type: none; + color:#E9ED98; + float:left; + width:30%; +} + +footer { + border-right:14px solid #3A4245; + border-left:14px solid #3A4245; + +} + +.glyphicon { + padding:10px; +} + +#gray-box img { + margin-top:25px; + margin-bottom:25px; + } + +#gray-box, #pink-box, #aqua-box, #white-box { + padding:50px; +} + +/*mobile styles*/ +@media screen and (max-width:768px){ + #header-info { + border-right:15px solid #3A4245; + } + + #logo-bar { + border-right:15px solid #3A4245; + } + + #box-1, #box-2, #box-3, #box-4 { + text-align:center; + } } \ No newline at end of file diff --git a/bootstrap-practice/index.html b/bootstrap-practice/index.html index f049275..f2aef63 100644 --- a/bootstrap-practice/index.html +++ b/bootstrap-practice/index.html @@ -6,116 +6,164 @@ Owltastic + - -