Skip to content

Commit 9a8a9d7

Browse files
sdkdeepasdkdeepa
committed
first commmit
1 parent d63178c commit 9a8a9d7

File tree

5 files changed

+355
-0
lines changed

5 files changed

+355
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
11
# Landing-page-project2
22
Udacity Frontend web developer course project 2
3+
4+
5+
## Instructions
6+
7+
The starter project has some HTML and CSS styling to display a static version of the Landing Page project. You'll need to convert this project from a static project to an interactive one. This will require modifying the HTML and CSS files, but primarily the JavaScript file.
8+
9+
To get started, open `js/app.js` and start building out the app's functionality
10+
11+
For specific, detailed instructions, look at the project instructions in the Udacity Classroom.

‎css/styles.css

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
/*
2+
*
3+
* CSS written based on SMACSS architecture.
4+
* To learn more, visit: http://smacss.com/
5+
*
6+
* For simplicity, no reset or normalize is added.
7+
* To learn more, visit: https://css-tricks.com/reboot-resets-reasoning/
8+
*
9+
*/
10+
11+
12+
/* ---- Base Rules ---- */
13+
body {
14+
background: rgb(136,203,171);
15+
background: linear-gradient(0deg, rgba(136,203,171,1) 0%, rgba(0,13,60,1) 100%);
16+
margin: 0;
17+
font-family: 'Merriweather', serif;
18+
color: #fff;
19+
}
20+
21+
22+
/* Typeography General*/
23+
h1 {
24+
font-family: 'Fira Sans', sans-serif;
25+
font-size: 3em;
26+
margin: 2em 1rem;
27+
}
28+
29+
@media only screen and (min-width: 35em){
30+
h1 {
31+
font-size: 7em;
32+
margin: 2em 4rem 1em;
33+
}
34+
}
35+
36+
h2 {
37+
border-bottom: 1px solid #cc1;
38+
font-family: 'Oxygen', Sans-Serif;
39+
font-size: 3em;
40+
color: #fff;
41+
}
42+
43+
p {
44+
line-height: 1.6em;
45+
color: #eee;
46+
}
47+
48+
/* ---- Layout Rules ---- */
49+
main {
50+
margin: 10vh 1em 10vh;
51+
}
52+
53+
.main-hero {
54+
min-height: 40vh;
55+
padding-top: 3em;
56+
}
57+
58+
section {
59+
position: relative;
60+
min-height: 80vh;
61+
}
62+
63+
64+
/* ---- Module Rules ---- */
65+
66+
/* Navigation Styles*/
67+
.navbar__menu ul {
68+
padding-left: 0;
69+
margin: 0;
70+
text-align: right;
71+
}
72+
73+
.navbar__menu li {
74+
display: inline-block;
75+
}
76+
77+
.navbar__menu .menu__link {
78+
display: block;
79+
padding: 1em;
80+
font-weight: bold;
81+
text-decoration: none;
82+
color: #000;
83+
}
84+
85+
.navbar__menu .menu__link:hover {
86+
background: #333;
87+
color: #fff;
88+
transition: ease 0.3s all;
89+
}
90+
91+
/* Header Styles */
92+
.page__header {
93+
background: #fff;
94+
position: fixed;
95+
top: 0;
96+
width: 100%;
97+
z-index: 5;
98+
}
99+
100+
/* Footer Styles */
101+
.page__footer {
102+
background: #000;
103+
padding: 3em;
104+
color: #fff;
105+
}
106+
107+
.page__footer p{
108+
color: #fff;
109+
}
110+
111+
112+
/* ---- Theme Rules ---- */
113+
/* Landing Container Styles */
114+
.landing__container {
115+
padding: 1em;
116+
text-align: left;
117+
}
118+
119+
@media only screen and (min-width: 35em){
120+
.landing__container {
121+
max-width: 50em;
122+
padding: 4em;
123+
}
124+
}
125+
126+
section:nth-of-type(even) .landing__container {
127+
margin-right: 0;
128+
margin-left: auto;
129+
text-align: right;
130+
}
131+
132+
/* Background Circles */
133+
/* Note that background circles are created with psuedo elements before and after */
134+
/* Circles appear to be random do to use of :nth-of-type psuedo class */
135+
section:nth-of-type(odd) .landing__container::before {
136+
content: '';
137+
background: rgba(255, 255, 255, 0.187);
138+
position: absolute;
139+
z-index: -5;
140+
width: 20vh;
141+
height: 20vh;
142+
border-radius: 50%;
143+
opacity: 0;
144+
transition: ease 0.5s all;
145+
}
146+
147+
section:nth-of-type(even) .landing__container::before {
148+
content: '';
149+
background: rgb(255,255,255);
150+
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
151+
position: absolute;
152+
top: 3em;
153+
right: 3em;
154+
z-index: -5;
155+
width: 10vh;
156+
height: 10vh;
157+
border-radius: 50%;
158+
opacity: 0;
159+
transition: ease 0.5s all;
160+
}
161+
162+
section:nth-of-type(3n) .landing__container::after {
163+
content: '';
164+
background: rgb(255,255,255);
165+
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
166+
position: absolute;
167+
right: 0;
168+
bottom: 0;
169+
z-index: -5;
170+
width: 10vh;
171+
height: 10vh;
172+
border-radius: 50%;
173+
opacity: 0;
174+
transition: ease 0.5s all;
175+
}
176+
177+
section:nth-of-type(3n + 1) .landing__container::after {
178+
content: '';
179+
background: rgb(255,255,255);
180+
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
181+
position: absolute;
182+
right: 20vw;
183+
bottom: -5em;
184+
z-index: -5;
185+
width: 15vh;
186+
height: 15vh;
187+
border-radius: 50%;
188+
opacity: 0;
189+
transition: ease 0.5s all;
190+
}
191+
192+
193+
/* ---- Theme State Rules ---- */
194+
/* Section Active Styles */
195+
/* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */
196+
section.your-active-class {
197+
background: rgb(0, 0, 0);
198+
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
199+
}
200+
201+
section.your-active-class .landing__container::before {
202+
opacity: 1;
203+
animation: rotate 4s linear 0s infinite forwards;
204+
}
205+
206+
section.your-active-class .landing__container::after {
207+
opacity: 1;
208+
animation: rotate 5s linear 0s infinite forwards reverse;
209+
}
210+
211+
/* Section Active Styles Keyframe Animations */
212+
@keyframes rotate {
213+
from {
214+
transform: rotate(0deg)
215+
translate(-1em)
216+
rotate(0deg);
217+
}
218+
to {
219+
transform: rotate(360deg)
220+
translate(-1em)
221+
rotate(-360deg);
222+
}
223+
}

‎index.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Manipulating the DOM</title>
8+
<!-- Load Google Fonts -->
9+
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet"> <!-- Load Styles -->
10+
<link href="css/styles.css" rel="stylesheet">
11+
</head>
12+
<body>
13+
<!-- HTML Follows BEM naming conventions
14+
IDs are only used for sections to connect menu achors to sections -->
15+
<header class="page__header">
16+
<nav class="navbar__menu">
17+
<!-- Navigation starts as empty UL that will be populated with JS -->
18+
<ul id="navbar__list"></ul>
19+
</nav>
20+
</header>
21+
<main>
22+
<header class="main__hero">
23+
<h1>Landing Page </h1>
24+
</header>
25+
<!-- Each Section has an ID (used for the anchor) and
26+
a data attribute that will populate the li node.
27+
Adding more sections will automatically populate nav.
28+
The first section is set to active class by default -->
29+
<section id="section1" data-nav="Section 1" class="your-active-class">
30+
<div class="landing__container">
31+
<h2>Personal Blog Website</h2>
32+
<p>This project requires you to utilize your HTML and CSS skills to build out a personal blog website, including custom images, layout, and styling. Along with webpage design considerations, you'll work to appropriately structure your files, as well as use proper CSS and HTML formatting & style.</p>
33+
<p>Your project will be evaluated by a Udacity code reviewer according to the Personal Blog Website project rubric. Please make sure to re-review the rubric for detailed project requirements prior to submission. In this project, you'll get to start from scratch! To complete the project, you are able to decide on the HTML and CSS files to include as part of your work, given that the end result is within the confines of the project rubric provided below.</p>
34+
</div>
35+
</section>
36+
<section id="section2" data-nav="Section 2">
37+
<div class="landing__container">
38+
<h2>Section 2</h2>
39+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
40+
41+
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
42+
</div>
43+
</section>
44+
<section id="section3" data-nav="Section 3">
45+
<div class="landing__container">
46+
<h2>Section 3</h2>
47+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
48+
49+
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
50+
</div>
51+
</section>
52+
<section id="section4" data-nav="Section 4">
53+
<div class="landing__container">
54+
<h2>Section 4</h2>
55+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
56+
57+
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
58+
</div>
59+
</section>
60+
</main>
61+
<footer class="page__footer">
62+
<p>&copy Udacity</p>
63+
</footer>
64+
65+
</body>
66+
</html>

‎js/app.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
*
3+
* Manipulating the DOM exercise.
4+
* Exercise programmatically builds navigation,
5+
* scrolls to anchors from navigation,
6+
* and highlights section in viewport upon scrolling.
7+
*
8+
* Dependencies: None
9+
*
10+
* JS Version: ES2015/ES6
11+
*
12+
* JS Standard: ESlint
13+
*
14+
*/
15+
16+
/**
17+
* Define Global Variables
18+
*
19+
*/
20+
21+
22+
/**
23+
* End Global Variables
24+
* Start Helper Functions
25+
*
26+
*/
27+
28+
29+
30+
/**
31+
* End Helper Functions
32+
* Begin Main Functions
33+
*
34+
*/
35+
36+
// build the nav
37+
38+
39+
// Add class 'active' to section when near top of viewport
40+
41+
42+
// Scroll to anchor ID using scrollTO event
43+
44+
45+
/**
46+
* End Main Functions
47+
* Begin Events
48+
*
49+
*/
50+
51+
// Build menu
52+
53+
// Scroll to section on link click
54+
55+
// Set sections as active
56+
57+

0 commit comments

Comments
 (0)