Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
changes
  • Loading branch information
met18001 committed Mar 20, 2020
1 parent 9702ff5 commit 3ab53f3
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 9 deletions.
55 changes: 55 additions & 0 deletions css/style.css
Expand Up @@ -114,6 +114,10 @@ align-content: center;
max-height: 200px;
max-width: 200px;
}
.card-img-top{
max-height: 300px !important;
max-width: 300px !important;
}
}
p{
font-size: 30px;
Expand Down Expand Up @@ -261,6 +265,21 @@ a.fab:hover{
}

}

@media(min-width: 1300px){
.card-group{
display: -webkit-box;
display: flex;
justify-content: space-around;
}

}
@media(max-width:1460px){
.card{
-webkit-box-align: center !important;
align-items: center !important;
}
}
.innerBox{
padding-right: 25px;
}
Expand Down Expand Up @@ -289,4 +308,40 @@ a.fab:hover{
left: 0;
width: 100%;
height: 100%;
}
.card-group{
padding: 40px;
}
.card-img-top{
max-width: 500px;
max-height: 300px;
padding-bottom: 20px;
vertical-align: middle;
opacity: 0.5;
-webkit-filter: blur(3px);
filter: blur(3px);
vertical-align: middle;
}
.card-img-top:hover {
color: white;
opacity: 1;
-webkit-filter: blur(0px);
filter: blur(0px);
}
.card{
padding: 20px;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
}
.card-title{
font-family: 'Abril Fatface', cursive !important;
font-size: 20px;
}
.card-text{
font-size: 15px;
}
Binary file added img/css.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/css2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/farmhouse.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/farmhouse2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/mag.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/mag2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 21 additions & 9 deletions index.html
Expand Up @@ -67,18 +67,30 @@
<img src="img/IMG_6831-2.jpg" alt="Meira"class="meira">
</div>

<section class="webportfolio">
<div class="animation">
<div class="textbox">
<h2>CSS Animation Project</h2>
<p>This CSS project was for my advanced web design class was about exploring parts of CSS. I chose CSS animations and animated and created a cat using CSS animations and transitions.</p>
<a href="">Learn More</a>
<div class="responsive-video">
<iframe src="https://giphy.com/embed/hrpi7we2LbGkioL17I" width="480" height="274" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<div class="card-group">
<div class="card">
<h5 class="card-title">CSS Animation Project</h5>
<img a href="animation.html" class="card-img-top" src="img/css2.png" alt="CSS Animation"></a>
<div class="card-body">
<p class="card-text">This CSS project was for my advanced web design class was about exploring parts of CSS. I chose CSS animations and animated and created a cat using CSS animations and transitions.</p>
</div>
</div>
<div class="card">
<h5 class="card-title">Nutmeg Magazine</h5>
<a><img class="card-img-top" src="img/mag2.jpg" alt="Nutmeg Magazine"></a>
<div class="card-body">
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card">
<h5 class="card-title">Farmhouse Cafe</h5>
<a><img class="card-img-top" src="img/farmhouse2.png" alt="farmhouse"></a>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
</div>
</section>




Expand Down

0 comments on commit 3ab53f3

Please sign in to comment.