Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
some more changes
  • Loading branch information
met18001 committed Mar 21, 2020
1 parent ae9f5ff commit 064a08b
Show file tree
Hide file tree
Showing 8 changed files with 179 additions and 5 deletions.
2 changes: 1 addition & 1 deletion animation.html
Expand Up @@ -16,7 +16,7 @@
</div>
<div class="right">
<h1>CSS Animation Project</h1>
<p>This project was a midterm for my Web II course where we were instructed to study a part of CSS that we did not know much about. I chose CSS animations and transitions.</p>
<p>This project was a midterm for my Web II course where we were instructed to study a part of CSS that we did not know much about. I chose CSS animations and transitions. This project page is fully responsive and highlights CSS keyframe animations and CSS transitions.</p>
</div>
</div>
<div class="box">
Expand Down
10 changes: 7 additions & 3 deletions css/animation.css
Expand Up @@ -4,7 +4,7 @@
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
Expand Down Expand Up @@ -118,13 +118,17 @@ display: flex;
p{
font-size: 15px;
}
iframe{
width: 250px;
height: 150px;
}
}

.buttonwrapper{
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-pack: start;
justify-content: flex-start;
}

.leftbutton{
Expand Down
139 changes: 139 additions & 0 deletions css/nutmeg.css
@@ -0,0 +1,139 @@
.flex{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;

}
@media(min-width:700px){
.flex{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
margin-top: 90px;
margin-bottom: 50px;
}
}
@media(min-width:1024px){
.flex{
margin-left: 175px;
margin-right: 175px;
}
}
p{
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
margin: 0%;

}
a.leftbutton{
font-size: 25px;
color: black;
font-family: 'Raleway', sans-serif;
font-weight: 300;
border: black 2px solid;
padding: 10px;
text-decoration: none;

}
a.leftbutton:hover{
text-decoration: none;
color: white;
border: #1d9c9f 2px solid;
background-color: #1d9c9f;
-webkit-transition: ease-in .75s;
transition: ease-in .75s;
}
h1{
margin:0%;
font-family: 'Abril Fatface', cursive;

}
.right{
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
margin: 30px;


}
.gif{
max-width: 500px;
max-height: 400px;
}
.box{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}

@media(min-width:700px){
.box{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.right{
margin-left: 4em;

}
}
@media(max-width:400px){
.gif{
max-width: 250px;
max-height: 150px;
}
a{
font-size: 15px !important;
}
h1{
font-size: 20px;
}
p{
font-size: 15px;
}
}

.buttonwrapper{
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
}

.leftbutton{
margin-left: 20px;
}
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
1 change: 1 addition & 0 deletions css/style.css
Expand Up @@ -234,6 +234,7 @@ a.fab:hover{
a.fas{
font-size: 5em;
color: black;
text-decoration: none;
}
a.fas:hover{
color: #1d9c9f;
Expand Down
14 changes: 14 additions & 0 deletions farmhouse.html
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Farmhouse Cafe</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Julius+Sans+One|Raleway:300,400&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/logo16.png">
</head>
<body>

</body>
</html>
Binary file added img/Fall 2019 Health and Wellness Magazine.pdf
Binary file not shown.
1 change: 0 additions & 1 deletion index.html
Expand Up @@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meira Tompkins</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.typekit.net/skw5qvq.css">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Julius+Sans+One|Raleway:300,400&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/logo16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Expand Down
17 changes: 17 additions & 0 deletions nutmeg.html
Expand Up @@ -4,8 +4,25 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nutmeg Magazine</title>
<link rel="stylesheet" href="css/nutmeg.css">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Julius+Sans+One|Raleway:300,400&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/logo16.png">
</head>
<body>
<div class="flex">
<div class="buttonwrapper">
<a href= "index.html" class="leftbutton">Home</a>
<a href= "https://nutmeg.uconn.edu/magazine-2/" class="leftbutton">Website</a>
</div>
<div class="right">
<h1>Nutmeg Magazine</h1>
<p></p>
</div>
</div>
<div class="box">
<img src="img/mag.jpg" class="gif" alt="Nutmeg Magazine">
<iframe src="img/Fall 2019 Health and Wellness Magazine.pdf" height="400" width="500" alt="Health and Wellness Magazine"></iframe>
</div>

</body>
</html>

0 comments on commit 064a08b

Please sign in to comment.