Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fixes-2
  • Loading branch information
@cyr15103
cyr15103 committed Oct 24, 2017
1 parent a4b0f44 commit a14a8f7
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 31 deletions.
91 changes: 85 additions & 6 deletions bootstrap-practice/bootstrap-practice.css
View file
Expand Up @@ -91,8 +91,10 @@ p {

#header-info {
background-color:hsla(42, 98%, 80%, 0.56);
height:615px;
height:600px;
border-left:14px solid #3A4245;
padding-left:50px;
padding-right:50px;
}

#header-info h4{
Expand Down Expand Up @@ -137,21 +139,25 @@ p {
}

#pink-box img {
width:375px;
width:350px;
margin-left:2%;
border:5px solid white;
padding:0;
margin-top:20px;
}

#pink-box .img-1 {
margin-left:3%;
#pink-box h1, #pink-box p {
text-align:center;
}

#button{
background-color:#545D70;
border-radius:5px;
color:#E9ED98;
width:165px;
margin-left:45px;
margin-top:15px;

}

#header-info h4,#caption {
Expand Down Expand Up @@ -210,21 +216,94 @@ footer {
margin-bottom:25px;
}

#gray-box, #pink-box, #aqua-box, #white-box {
#gray-box, #pink-box, #aqua-box, #white-box, footer {
padding:50px;
}

footer li {
padding:5px;
}

.padding {
padding-top:40px;
}

#gray-box h1, #gray-box p {
padding-bottom:20px;
}

#gray-box img {
margin-top:10px;
}

#green {
color:#5FC9AA;
}
/*mobile styles*/
@media screen and (max-width:768px){
#header-info {
border-right:15px solid #3A4245;
}

#gray-box .padding, #aqua-box .padding{
padding-top:10px;
}

#logo-bar {
border-right:15px solid #3A4245;
}

footer ul {
padding-bottom:20px;
}

#box-1, #box-2, #box-3, #box-4 {
text-align:center;
}
}

#des-box {
background-color:white;
}

#des-box p {
color:black;
text-align:center;
padding-right:50px;
padding-left:50px;
}

#button {
margin:25px;
}

#gray-box h1, #gray-box p, #aqua-box h1, #aqua-box p {
text-align: center;
}

#pink-box img {
margin-left:20%;
width:50%;
}
}

@media screen and (min-width:769px) and (max-width: 992px){
#button {
margin:25px;
}


#pink-box img {
margin-left:25%;
}

#gray-box .padding, #aqua-box .padding{
padding-top:10px;
}

}

@media screen and (min-width:992px) and (max-width: 1225px){
#pink-box img {
margin-left:8%;
}
}
52 changes: 27 additions & 25 deletions bootstrap-practice/index.html
View file
Expand Up @@ -50,9 +50,10 @@
</div>
<article>
<section id="gray-box">

<h1>Worth Noting</h1>
<p class="big-p">A curated collection of inspiring work and articles. <span class="green">See all.</span></p>
<div class="row">
<h1 class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Worth Noting</h1>
<p class="big-p col-lg-6 col-md-6 col-sm-12 col-xs-12 padding">A curated collection of inspiring work and articles. <span class="green">See all.</span></p>
</div>
<div class="row">
<div id="box-1">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
Expand All @@ -79,7 +80,7 @@
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img src="images/art-pic-3.jpg" alt="gallery">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h4><a href="#">WEWORK LA FAYETTE CO-WORKING SPACE – DESIGN MILK</a></h4>
<p>Never thought I'd want to visit Paris again just to work there, but this gorgeous WeWork space would be worth the trip. Source: WeWork La Fayette Co-Working Space Gives Nod to the 1920s - Design... <span class="green"><a href="#">KEEP READING</a></p></span>
</div>
Expand Down Expand Up @@ -108,60 +109,61 @@
</section>

<section id="aqua-box">
<h1>Recent Events</h1>
<p class="big-p">I love speaking. <span><a href="#">See a complete history of events here.</a></span></p>
<div class="row">
<h1 class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Recent Events</h1>
<p class="big-p col-lg-6 col-md-6 col-sm-12 col-xs-12 padding">I love speaking. <span><a href="#">See a complete history of events here.</a></span></p>
</div>
<hr>
<div id="row-1" class="row"><a href="#">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>MAY 19TH, 2016</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>PORTLAND, OR</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-star" aria-hidden="true"></span>WEBVISIONS PORTLAND 2016</h4>
</div></a>
<div id="button" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div>
<div id="button" class="col-lg-12 col-md-3 col-sm-3 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div>
</div>
<hr>
<div id="row-2" class="row"><a href="#">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<img src="png">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>APRIL 7TH, 2016</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<img src="png">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>NEW YORK, NY</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-star" aria-hidden="true"></span>WEBVISIONS NYC 2015</h4>
</div></a>
<div id="button" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div>
<div id="button" class="col-lg-12 col-md-3 col-sm-3 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div>
</div>
<hr>
<div id="row-3" class="row"><a href="#">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>SEPTEMBER 23RD, 2015</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>CHICAGO, IL</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-star" aria-hidden="true"></span>WEBVISIONS CHICAGO 2015</h4>
</div></a>
<div id="button" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div>
<div id="button" class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div>
</div>
<hr>
<div id="row-4" class="row"><a href="#">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>MARCH 17TH, 2015</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>OXFORD, UK</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h4><span class="glyphicon glyphicon-star" aria-hidden="true"></span>SMASHING OXFORD 2015</h4>
</div></a>
<div id="button" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div>
<div id="button" class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div>
</div>
</div>
</section>
Expand All @@ -183,7 +185,7 @@
<li>ABOUT</li>
<li>DRIBBLE</li>
</ul>
<p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">&copy; 2017 Meagan Fisher. Thanks for stopping by! If you want, you can email me at contact@owltastic.com.</p>
<p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">&copy; 2017 Meagan Fisher. Thanks for stopping by! If you want, you can email me at <span id="green">contact@owltastic.com.</span></p>
</footer>

</div>
Expand Down

0 comments on commit a14a8f7

Please sign in to comment.