Skip to content

Commit cd84324

Browse files
zesamerizesameri
committed
styling and animation
1 parent d5650cb commit cd84324

File tree

6 files changed

+58
-144
lines changed

6 files changed

+58
-144
lines changed

‎assets/print9.png‎

-120 KB
Binary file not shown.

‎css/flexmenu.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,20 @@
1919
padding: 20px;
2020
align-items: center;
2121
}
22-
22+
.flex-parent p {
23+
font-size: x-large;
24+
}
25+
.flex-parent img {
26+
max-width: 50%;
27+
}
28+
.flex-parent img {
29+
-webkit-transition: -webkit-transform 2s ease-in-out;
30+
transition: transform 2s ease-in-out;
31+
}
32+
.flex-parent img:hover {
33+
-webkit-transform: rotate(180deg);
34+
transform: rotate(180deg);
35+
}
2336
@media screen and (orientation:portrait) {
2437
/* Portrait styles */
2538
.portrait {
@@ -39,16 +52,3 @@
3952
display: flex;
4053
}
4154
}
42-
43-
.pure-img-responsive {
44-
max-width: 50%;
45-
height: auto;
46-
margin-left: auto;
47-
margin-right: auto;
48-
border-radius: 50%;
49-
}
50-
51-
.portfolio-nav {}
52-
.portfolio-nav-label {
53-
font-size: medium;
54-
}

‎css/main.css‎

Lines changed: 0 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,6 @@ time, mark, audio, video {
2727
/*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;*/
2828
}
2929

30-
31-
32-
3330
html, body {
3431
margin: 0;
3532
height: 100%;
@@ -45,63 +42,3 @@ section {
4542
height: 100vh;
4643
padding-top: 2em;
4744
}
48-
.hero {
49-
background-position: 50% 50%;
50-
background-repeat: no-repeat;
51-
background-attachment: fixed;
52-
background-size: cover;
53-
background-image: url("../assets/rio.jpg");
54-
}
55-
.title {
56-
width: 100%;
57-
font-size: xx-large;
58-
line-height: 2em;
59-
}
60-
61-
#enter_button {
62-
outline: none;
63-
padding: 0.5em .75em;
64-
cursor: pointer;
65-
font-size: large;
66-
color: #fff;
67-
border-radius: 25%;
68-
border-radius: 25%;
69-
border-color: FloralWhite;
70-
border-style: solid;
71-
background: transparent;
72-
}
73-
74-
#enter_button:hover {
75-
background-color: FloralWhite;
76-
color: #1A1110;
77-
}
78-
79-
#enter_button:active {
80-
background-color: FloralWhite;
81-
color: #1A1110;
82-
}
83-
84-
.logo {
85-
max-width: 20%;
86-
-webkit-transition: -webkit-transform 2s ease-in-out;
87-
transition: transform 2s ease-in-out;
88-
}
89-
.logo:hover, .logo:active {
90-
-webkit-transform: rotate(180deg);
91-
transform: rotate(180deg);
92-
}
93-
94-
@media screen and (orientation:portrait) {
95-
.logo {
96-
-webkit-animation:spin 6s linear infinite;
97-
-moz-animation:spin 6s linear infinite;
98-
animation:spin 6s linear infinite;
99-
}
100-
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
101-
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
102-
}
103-
104-
#wrapper {
105-
position: relative;
106-
top:25vh;
107-
}

‎css/menu.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
background: rgba(139,0,0, 0.2);
1010
padding: 0.5em 0;
1111
font-weight: 500;
12+
z-index: 100;
1213
}
1314

1415
.snip1168 * {

‎index.html‎

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
<!--<![endif]-->
3030
<link rel="stylesheet" href="css/main.css">
3131
<link rel="stylesheet" href="css/menu.css">
32+
<link rel="stylesheet" href="css/hero.css">
3233
<link rel="stylesheet" href="css/about.css">
3334
<link rel="stylesheet" href="css/flexmenu.css">
3435

@@ -39,7 +40,7 @@
3940

4041
<!-- Favicon
4142
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
42-
<link rel="icon" href="assets/flower.svg">
43+
<link rel="icon" href="assets/flower.png">
4344
</head>
4445
<body>
4546
<!-- Main Menu –––––––––––––––––––––––––––––––––––––––––––– -->
@@ -56,11 +57,11 @@
5657

5758
<!-- Landing page ––––––––––––––––––––––––––––––– -->
5859
<section class="hero">
59-
<div id="wrapper">
60-
<img class="logo" src="assets/flower.svg">
61-
<h1 class="title"> meredith hoo </h1>
62-
<button id="enter_button" class="button">enter</button>
6360
<div>
61+
<img class="rotate" src="assets/flower.svg">
62+
<h1> meredith hoo </h1>
63+
<button class="button">enter</button>
64+
</div>
6465
</section>
6566

6667
<!-- About ––––––––––––––––––––––––––––––––– -->
@@ -83,65 +84,65 @@ <h1 id="about_title" class="title"> Meredith Hoo </h1>
8384
<!-- Projects ––––––––––––––––––––––––––––––––– -->
8485
<section class="flex-parent landscape" id="projects">
8586
<div class="flex-grid-thirds">
86-
<div class="col">
87-
<img class="pure-img-responsive" src="assets/flower.svg">
88-
<p class="portfolio-nav-label">apps</p>
87+
<div >
88+
<img src="assets/flower.svg">
89+
<p >apps</p>
8990
</div>
90-
<div class="col">
91-
<img class="pure-img-responsive" src="assets/flower.svg">
92-
<p class="portfolio-nav-label">edutech</p>
91+
<div >
92+
<img src="assets/flower.svg">
93+
<p >edutech</p>
9394
</div>
94-
<div class="col">
95-
<img class="pure-img-responsive" src="assets/flower.svg">
96-
<p class="portfolio-nav-label">writing</p>
95+
<div >
96+
<img src="assets/flower.svg">
97+
<p >writing</p>
9798
</div>
9899
</div>
99100
<div class="flex-grid-thirds">
100-
<div class="col">
101-
<img class="pure-img-responsive" src="assets/flower.svg">
102-
<p class="portfolio-nav-label">art</p>
101+
<div >
102+
<img src="assets/flower.svg">
103+
<p >art</p>
103104
</div>
104-
<div class="col">
105-
<img class="pure-img-responsive" src="assets/flower.svg">
106-
<p class="portfolio-nav-label">podcast</p>
105+
<div >
106+
<img src="assets/flower.svg">
107+
<p >podcast</p>
107108
</div>
108-
<div class="col">
109-
<img class="pure-img-responsive" src="assets/flower.svg">
110-
<p class="portfolio-nav-label">blog</p>
109+
<div >
110+
<img src="assets/flower.svg">
111+
<p >blog</p>
111112
</div>
112113
</div>
113114
</section>
114115

115116
<!-- Projects ––––––––––––––––––––––––––––––––– -->
116117
<section class="flex-parent portrait" id="projects">
117118
<div class="flex-grid-halves">
118-
<div class="col">
119-
<img class="pure-img-responsive" src="assets/flower.svg">
120-
<p class="portfolio-nav-label">apps</p>
119+
<div >
120+
<img src="assets/flower.svg">
121+
<p >apps</p>
121122
</div>
122-
<div class="col">
123-
<img class="pure-img-responsive" src="assets/flower.svg">
124-
<p class="portfolio-nav-label">edutech</p>
123+
<div >
124+
<img src="assets/flower.svg">
125+
<p >edutech</p>
125126
</div>
126127
</div>
127128
<div class="flex-grid-halves">
128-
<div class="col">
129-
<img class="pure-img-responsive" src="assets/flower.svg">
130-
<p class="portfolio-nav-label">writing</p>
129+
<div >
130+
<img src="assets/flower.svg">
131+
<p >writing</p>
131132
</div>
132-
<div class="col">
133-
<img class="pure-img-responsive" src="assets/flower.svg">
134-
<p class="portfolio-nav-label">art</p>
133+
<div >
134+
<img src="assets/flower.svg">
135+
<p >art</p>
135136
</div>
136137
</div>
137138
<div class="flex-grid-halves">
138-
<div class="col">
139-
<img class="pure-img-responsive" src="assets/flower.svg">
140-
<p class="portfolio-nav-label">podcast</p>
139+
<div >
140+
<img src="assets/flower.svg">
141+
<p >podcast</p>
141142
</div>
142-
<div class="col">
143-
<img class="pure-img-responsive" src="assets/flower.svg">
144-
<p class="portfolio-nav-label">blog</p>
143+
<div >
144+
<img src="assets/flower.svg">
145+
<p >blog</p>
145146
</div>
146147
</div>
147148
</section>

‎js/main.js‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,7 @@
11
$(document).ready(function() {
2-
3-
resizeMenu();
4-
5-
$("#enter_button").click(function() {
2+
$(".hero button").click(function() {
63
$('html,body').animate({
74
scrollTop: $("#about-page").offset().top},
85
'slow');
96
});
10-
11-
$("#return_button").click(function() {
12-
$('html,body').animate({
13-
scrollTop: $(".hero").offset().top},
14-
'slow');
15-
});
16-
17-
187
});
19-
20-
function resizeMenu() {
21-
if ($(window).width() > $(window).height()) {
22-
$('pure-u-1-2 pure-u-lg-1-3').each(function() {
23-
var oneThird = 1/3;
24-
$(this).width(oneThird + "%");
25-
$(this).height("50%");
26-
})
27-
} else {
28-
$('pure-u-1-2 pure-u-lg-1-3').each(function() {
29-
$(this).width("50%");
30-
})
31-
}
32-
}

0 commit comments

Comments
 (0)