Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
All pages created
  • Loading branch information
@cyr15103
cyr15103 committed Dec 7, 2017
1 parent 57b1d75 commit e91b67e
Show file tree
Hide file tree
Showing 42 changed files with 647 additions and 39 deletions.
21 changes: 19 additions & 2 deletions final proj/_footer.scss
View file
Expand Up @@ -12,13 +12,30 @@ $large: 1226px;

footer {
background-color:$cranberry;
height:225px;
height:275px;
padding-top:40px;
h3 {
font-size:18px;
}

p {
font-size:14px;
line-height: 30px;
color:desaturate(lighten($cranberry, 30%),25%);
}
}

#contact-img-box {
img {
width:60px;
padding-top:40px;
padding-top:50px;
}
}

#middle {
@media screen and (min-width: $medium){
border-right: 1px solid desaturate(lighten($cranberry, 10%),15%)
}

}

25 changes: 14 additions & 11 deletions final proj/_nav.scss
View file
Expand Up @@ -16,9 +16,9 @@ nav {
list-style-type: none;
padding-top:43px;
@media screen and (max-width: $x-small) {
padding-top:10px;
padding-bottom:10px;
margin-left:-10px;
padding-top:10px;
padding-bottom:10px;
margin-left:-10px;

}
a {
Expand All @@ -28,14 +28,22 @@ nav {
font-size:16px;
}
a:hover, a:active {
color: lighten($cranberry, 10%);
color: saturate(lighten($cranberry, 10%),25%);
text-decoration:none;
}
}
}

}

#logo-box {
background-color:$aqua;
img{
width:100px;
}
}

/* hover effect */
nav a:hover,
nav a:active {
letter-spacing: 1px;
Expand All @@ -56,7 +64,7 @@ nav a:after,
nav a:hover:after,
nav a:hover:before {
backface-visibility: hidden;
border-color: lighten($cranberry, 15%);
border-color: saturate(lighten($cranberry, 10%),25%);
transition: width 350ms ease-in-out;
width: 40%;
}
Expand All @@ -66,9 +74,4 @@ nav a:after,
display: block;
}

#logo-box {
background-color:$aqua;
img{
width:100px;
}
}

94 changes: 94 additions & 0 deletions final proj/_portfolio.scss
View file
@@ -0,0 +1,94 @@
$offwhite:#e3e3e3;
$bluegrey:#9c9aa9;
$aqua:#5ec8c2;
$cranberry:#622c35;
$x-small: 768px;
$small: 769px;
$small-max: 992px;
$medium: 993px;
$medium-max: 1225px;
$large: 1226px;

#portfolio-content {
padding:50px 0px 100px 0px;
}
.porfolio-element-1, .porfolio-element-2, .porfolio-element-3 {
margin-top:50px;

img{
border-radius:40px;
display:block;
width:350px;
@media screen and (min-width: $small-max) and (max-width: $medium-max) {
width:300px;
}
@media screen and (min-width: $small) and (max-width: $small-max) {
width:60vw;
}
@media screen and (max-width: $x-small) {
width:90vw;
}
}

.link-1, .link-2, .link-3 {
@media screen and (min-width: $small-max) {
position:absolute;
z-index:3;
width:100%;
background-color:$aqua;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
padding: 10px 0px 10px 0px;
width:350px;
margin-top:-42px;

@media screen and (min-width: $small-max) and (max-width: $medium-max) {
width:300px;}
@media screen and (min-width: $large) {
margin-left:5px;
}


.des {
display:block;
text-align:center;
color:black;
text-decoration:none;
font-family:'Raleway', sans-serif;
font-size:20px;
}

}
}
}

.porfolio-element-1, .porfolio-element-2, .porfolio-element-3 {
.link-1 , .link-2 , .link-3 {

@media screen and (max-width: $small-max) {
background-color:$aqua;
border-radius:40px;
padding:5px 0px 5px 0px;
text-align:center;
width:200px;
margin-top:25px;
color:black;
font-family:'Raleway', sans-serif;
font-size:20px;
text-decoration:none;
}
}
}
.porfolio-element-1, .porfolio-element-2, .porfolio-element-3 {
img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}

.blur:hover {
-webkit-filter: blur(3px);
}
}
50 changes: 50 additions & 0 deletions final proj/about-me.html
View file
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1"><title>Clr Design</title>
<link rel="shortcut icon" href="images/logo-tab.png"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arimo|Raleway" rel="stylesheet">
</head>
<body>

<nav class="row">
<div id="logo-box" class="col-lg-2 col-md-2 col-sm-3 col-xs-12" align="center"><img src="images/logo.png"></div>
<ul id="my-nav">
<li class="col-lg-2 col-lg-offset-4 col-md-offset-4 col-md-2 col-sm-3 col-xs-4" align="center"><a href="index.html">Home</a></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><a href="about-me.html">About Me</a></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><a href="portfolio.html">Portfolio</a></li>
</ul>
</nav>
<div class="container">
<div class="row">
<img src="images/sunset.png" id="sunset" class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
<div id="about-content" class="col-lg-4 col-md-5 col-sm-12 col-xs-12">
<h2>Cynthia Reinert</h2>
<h3>Designer and Artist</h3>
<p>I am a student artist and designer currectly attending UCONN Storrs studying Digital Media and Design with a concentration in Web Design. I also have background in the basics of 2D Animation and Art.As far as programs, I can use Adobe Photoshop, After Effects and Premiere, as well as the basics such as Microsoft word and Powerpoint. I have a passion for all things design, and possess a unique drive to create.</p>
</div>
</div>
</div>

<footer class="row">
<div id="contact-img-box" class="col-lg-offset-2 col-lg-3 col-md-offset-2 col-md-3 col-sm-offset-3 col-sm-2 col-xs-offset-1 col-xs-3 "><img src="images/contact.png" ></div>
<div id="middle" class="col-lg-3 col-md-3 col-sm-2 col-xs-3">
<h3>Contact</h3>
<p>Cynthia Reinert <br>
cynthia.reinert@uconn.edu <br>
(860)534-0280
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-2 col-xs-offset-1">
<h3>Social</h3>
<p>linkedin</p>
</div>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
57 changes: 57 additions & 0 deletions final proj/animations.html
View file
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1"><title>Clr Design</title>
<link rel="shortcut icon" href="images/logo-tab.png"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arimo|Raleway" rel="stylesheet">
</head>
<body>

<nav class="row">
<div id="logo-box" class="col-lg-2 col-md-2 col-sm-3 col-xs-12" align="center"><img src="images/logo.png"></div>
<ul id="my-nav">
<li class="col-lg-2 col-lg-offset-4 col-md-offset-4 col-md-2 col-sm-3 col-xs-4" align="center"><a href="index.html">Home</a></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><a href="about-me.html">About Me</a></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><a href="portfolio.html">Portfolio</a></li>
</ul>
</nav>
<div class="container">
<div id="animation-content" >
<h2 align="center">Animations</h2>
<p align="center">Here is a sampling of my work in 2D Animation with After Effects</p>
<div class="row" align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gPSZo4wwGb8" frameborder="0" allowfullscreen></iframe>
<h3 align="center"> "Morph Makeup" - Animation Lab Project</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EZnervHv37w" frameborder="0" allowfullscreen></iframe>
<h3 align="center" >"Christmas E-Card" - Personal Project</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rhLzYa1vobc" frameborder="0" allowfullscreen></iframe>
<h3 align="center">"Midnight Ballet" - Motion Graphics Project</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rhLzYa1vobc" frameborder="0" allowfullscreen></iframe>
<h3 align="center" class="space">"Winter Day" - Motion Graphics Project</h3>
</div>
</div>
</div>


<footer class="row">
<div id="contact-img-box" class="col-lg-offset-2 col-lg-3 col-md-offset-2 col-md-3 col-sm-offset-3 col-sm-2 col-xs-offset-1 col-xs-3 "><img src="images/contact.png" ></div>
<div id="middle" class="col-lg-3 col-md-3 col-sm-2 col-xs-3">
<h3>Contact</h3>
<p>Cynthia Reinert <br>
cynthia.reinert@uconn.edu <br>
(860)534-0280
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-2 col-xs-offset-1">
<h3>Social</h3>
<p>linkedin</p>
</div>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
59 changes: 59 additions & 0 deletions final proj/art.html
View file
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1"><title>Clr Design</title>
<link rel="shortcut icon" href="images/logo-tab.png"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arimo|Raleway" rel="stylesheet">
</head>
<body>

<nav class="row">
<div id="logo-box" class="col-lg-2 col-md-2 col-sm-3 col-xs-12" align="center"><img src="images/logo.png"></div>
<ul id="my-nav">
<li class="col-lg-2 col-lg-offset-4 col-md-offset-4 col-md-2 col-sm-3 col-xs-4" align="center"><a href="index.html">Home</a></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><a href="about-me.html">About Me</a></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><a href="portfolio.html">Portfolio</a></li>
</ul>
</nav>
<div class="container">
<div id="art-content" >
<h2 align="center">Art</h2>
<p align="center">Here is a sampling of my artwork</p>
<div class="row">
<img src="images/art-1.png" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="images/art-2.png" id="space-fix" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
<div class="row">
<img src="images/art-3.png" id="space-fix-2" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="images/art-7.png" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
<div class="row">
<img src="images/art-4.jpg" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="images/art-5.jpg" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
</div>
</div>


<footer class="row">
<div id="contact-img-box" class="col-lg-offset-2 col-lg-3 col-md-offset-2 col-md-3 col-sm-offset-3 col-sm-2 col-xs-offset-1 col-xs-3 "><img src="images/contact.png" ></div>
<div id="middle" class="col-lg-3 col-md-3 col-sm-2 col-xs-3">
<h3>Contact</h3>
<p>Cynthia Reinert <br>
cynthia.reinert@uconn.edu <br>
(860)534-0280
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-2 col-xs-offset-1">
<h3>Social</h3>
<p>linkedin</p>
</div>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

0 comments on commit e91b67e

Please sign in to comment.