Skip to content

Commit c0e95a7

Browse files
mounikaperimounikaperi
committed
SCSS Modifications
1 parent 313b7fb commit c0e95a7

27 files changed

+457
-124
lines changed

‎Project-CSSAssessment-3/images/Group (1).png

889 Bytes
Loading

‎Project-CSSAssessment-3/images/Group (2).png

868 Bytes
Loading

‎Project-CSSAssessment-3/images/Group (3).png

896 Bytes
Loading

‎Project-CSSAssessment-3/images/Group.png

644 Bytes
Loading

‎Project-CSSAssessment-3/images/Image.png

224 KB
Loading

‎Project-CSSAssessment-3/images/Logo.png

1.25 KB
Loading

‎Project-CSSAssessment-3/images/globe.png

1.47 KB
Loading

‎Project-CSSAssessment-3/images/squares.png

1.68 KB
Loading

‎Project-CSSAssessment-3/images/start.png

803 Bytes
Loading

‎Project-CSSAssessment-3/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS Project Assessment- 03</title>
8+
</head>
9+
<body>
10+
<nav>
11+
<img src="images/Logo.png" alt="Logo" />
12+
<ul>
13+
<li>Home</li>
14+
<li>Female</li>
15+
<li>Male</li>
16+
<li>FAQ</li>
17+
<li>About</li>
18+
</ul>
19+
<button>Search</button>
20+
</nav>
21+
<main>
22+
<div>
23+
<img src="images/Image.png" alt="Image" />
24+
<img src="images/squares.png" alt="Squares"/>
25+
</div>
26+
<div>
27+
<img src="images/globe.png" alt="Globe" />
28+
<img src="images/start.png" alt="Start">
29+
<h1>What's Trend in 2025?</h1>
30+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed harum ipsam quibusdam reiciendis, enim accusantium. Ratione quis recusandae maiores quae?</p>
31+
<button>Email Address</button>
32+
<button>JOIN NOW</button>
33+
<img src="images/start.png" alt="Start" />
34+
<p>Contact Us</p>
35+
<div>
36+
<img src="images/Group.png" alt="Group" />
37+
<img src="images/Group (1).png" alt="Group" />
38+
<img src="images/Group (2).png" alt="Group" />
39+
<img src="images/Group (3).png" alt="Group" />
40+
</div>
41+
</div>
42+
</main>
43+
</body>
44+
</html>

‎Project-CSSAssessment-3/output.png

259 KB
Loading

‎Project-CSSAssessment-3/styles.css

Whitespace-only changes.

‎Project-Natours/css/style.css

Lines changed: 113 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,142 @@
1-
*, *::after, *::before {
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: inherit;
5-
}
6-
html{
7-
font-size: 62.5%;
8-
}
1+
*,
2+
*::after,
3+
*::before {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: inherit; }
7+
8+
html {
9+
font-size: 62.5%; }
10+
911
body {
10-
font-family: 'Lato', sans-serif;
11-
font-weight: 400;
12-
font-size: 1.6rem;
13-
line-height: 1.7;
14-
color: #777;
15-
padding: 3rem;
16-
box-sizing: border-box;
17-
}
12+
font-family: 'Lato', sans-serif;
13+
font-weight: 400;
14+
font-size: 1.6rem;
15+
line-height: 1.7;
16+
color: #777;
17+
padding: 3rem;
18+
box-sizing: border-box; }
19+
1820
.header {
19-
height: 95vh;
20-
background-image: linear-gradient(
21-
to right bottom,
22-
rgba(126, 213, 111, 0.8),
23-
rgba(40, 180, 131, 0.8)),
24-
url(../img/hero.jpg);
25-
background-size: cover;
26-
background-position: top;
27-
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
28-
position: relative;
29-
}
30-
.header__logo-box {
21+
height: 95vh;
22+
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(126, 213, 111, 0.8)), url(../img/hero.jpg);
23+
background-size: cover;
24+
background-position: top;
25+
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
26+
position: relative; }
27+
.header__logo.box {
3128
position: absolute;
3229
top: 4rem;
33-
left: 4rem;
34-
}
35-
.logo {
36-
height: 3.5rem;
37-
}
38-
.header__text-box {
30+
left: 4rem; }
31+
.header__text-box {
3932
position: absolute;
4033
top: 40%;
4134
left: 50%;
4235
transform: translate(-50%, -50%);
43-
text-align: center;
44-
}
36+
text-align: center; }
37+
.header__logo {
38+
height: 3.5rem; }
39+
4540
.heading-primary {
46-
color: #fff;
47-
text-transform: uppercase;
48-
backface-visibility: hidden;
49-
margin-bottom: 6rem;
50-
}
51-
.heading-primary--main {
41+
color: #fff;
42+
text-transform: uppercase;
43+
backface-visibility: hidden;
44+
margin-bottom: 6rem; }
45+
.heading-primary--main {
5246
display: block;
5347
font-size: 6rem;
5448
font-weight: 500;
5549
letter-spacing: 3.5rem;
56-
animation-name: moveInLeft; /* specify animation name and animation duration */
50+
animation-name: moveInLeft;
51+
/* specify animation name and animation duration */
5752
animation-duration: 1s;
58-
/* animation-delay: 3s; wait for 3 seconds before starting the animation */
59-
/* animation-iteration-count: 3; Happens for 3 times */
60-
animation-timing-function: ease-out;
61-
}
62-
.heading-primary--sub {
53+
/* animation-delay: 3s; wait for 3 seconds before starting the animation */
54+
/* animation-iteration-count: 3; Happens for 3 times */
55+
animation-timing-function: ease-out; }
56+
.heading-primary--sub {
6357
display: block;
6458
font-size: 2rem;
6559
font-weight: 700;
6660
letter-spacing: 1.74rem;
67-
animation: moveInRight 1s ease-out;
68-
}
61+
animation: moveInRight 1s ease-out; }
62+
6963
/* Browsers are optimized for opacity and transform properties for animations */
7064
@keyframes moveInLeft {
71-
0% {
72-
opacity: 0;
73-
transform: translateX(-10rem); /*positive to the right, negative to the left */
74-
}
75-
/* 60% {
65+
0% {
66+
opacity: 0;
67+
transform: translateX(-10rem);
68+
/*positive to the right, negative to the left */ }
69+
/* 60% {
7670
tranform: rotate(180deg);
7771
} */
78-
80% {
79-
transform: translateX(1rem); /* moves to right */
80-
}
81-
100% {
82-
opacity: 1;
83-
transform: translate(0);
84-
}
85-
}
72+
80% {
73+
transform: translateX(1rem);
74+
/* moves to right */ }
75+
100% {
76+
opacity: 1;
77+
transform: translate(0); } }
78+
8679
@keyframes moveInRight {
87-
0% {
88-
opacity: 0;
89-
transform: translateX(10rem); /*positive to the right, negative to the left */
90-
}
91-
80% {
92-
transform: translateX(-1rem); /* moves to right */
93-
}
94-
100% {
95-
opacity: 1;
96-
transform: translate(0);
97-
}
98-
}
80+
0% {
81+
opacity: 0;
82+
transform: translateX(10rem);
83+
/*positive to the right, negative to the left */ }
84+
80% {
85+
transform: translateX(-1rem);
86+
/* moves to right */ }
87+
100% {
88+
opacity: 1;
89+
transform: translate(0); } }
90+
9991
@keyframes moveInButton {
100-
0% {
101-
opacity: 0;
102-
transform: translateY(3rem); /*positive to the right/down, negative to the left/up */
103-
}
104-
100% {
105-
opacity: 1;
106-
transform: translate(0);
107-
}
108-
}
109-
.btn:link,
110-
.btn:visited {
111-
text-transform: uppercase;
112-
text-decoration: none;
113-
padding: 1.5rem 4rem;
114-
display: inline-block;
115-
border-radius: 10rem;
116-
transition: all 0.2s;
117-
position: relative;
118-
}
92+
0% {
93+
opacity: 0;
94+
transform: translateY(3rem);
95+
/*positive to the right/down, negative to the left/up */ }
96+
100% {
97+
opacity: 1;
98+
transform: translate(0); } }
99+
100+
.btn:link, .btn:visited {
101+
text-transform: uppercase;
102+
text-decoration: none;
103+
padding: 1.5rem 4rem;
104+
display: inline-block;
105+
border-radius: 10rem;
106+
transition: all 0.2s;
107+
position: relative; }
108+
119109
.btn:hover {
120-
transform: translateY(-0.3rem);
121-
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
122-
}
110+
transform: translateY(-0.3rem);
111+
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
112+
.btn:hover::after {
113+
transform: scaleX(1.4) scaleY(1.6);
114+
opacity: 0; }
115+
123116
.btn:active {
124-
transform: translateY(0.1rem);
125-
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2);
126-
}
117+
transform: translateY(0.1rem);
118+
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2); }
119+
127120
.btn--white {
128-
background-color: #fff;
129-
color: #777;
130-
}
121+
background-color: #fff;
122+
color: #777; }
123+
.btn--white::after {
124+
background-color: #fff; }
125+
131126
.btn::after {
132-
content: '';
133-
display: inline-block;
134-
height: 100%;
135-
width: 100%;
136-
border-radius: 10rem;
137-
position: absolute;
138-
top: 0;
139-
left: 0;
140-
z-index: -1;
141-
transition: all 0.4s;
142-
}
143-
.btn--white::after {
144-
background-color: #fff;
145-
}
146-
.btn:hover::after {
147-
transform: scaleX(1.4) scaleY(1.6);
148-
opacity: 0; /* fade something about */
149-
}
127+
content: '';
128+
display: inline-block;
129+
height: 100%;
130+
width: 100%;
131+
border-radius: 10rem;
132+
position: absolute;
133+
top: 0;
134+
left: 0;
135+
z-index: -1;
136+
transition: all 0.4s; }
137+
150138
.btn--animated {
151-
animation: moveInButton 0.5s ease-out 0.75s; /* animation-name, animation-duration, animation-timing-function, animation-delay */
152-
animation-fill-mode: backwards; /*automatically apply styles of 0% before animation starts */
153-
}
139+
animation: moveInButton 0.5s ease-out 0.75s;
140+
/* animation-name, animation-duration, animation-timing-function, animation-delay */
141+
animation-fill-mode: backwards;
142+
/*automatically apply styles of 0% before animation starts */ }

‎Project-Natours/index.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,67 @@ <h1 class="heading-primary">
2222
<a href="#" class="btn btn--white btn--animated">Discover our tours</a>
2323
</div>
2424
</header>
25+
<section class="grid-test">
26+
<div class="row">
27+
<div class="col-1-of-2">
28+
Col 1 of 2
29+
</div>
30+
<div class="col-1-of-2">
31+
Col 1 of 2
32+
</div>
33+
</div>
34+
<div class="row">
35+
<div class="col-1-of-3">
36+
Col 1 of 3
37+
</div>
38+
<div class="col-1-of-3">
39+
Col 1 of 3
40+
</div>
41+
<div class="col-1-of-3">
42+
Col 1 of 3
43+
</div>
44+
</div>
45+
<div class="row">
46+
<div class="col-1-of-2">
47+
Col 1 of 2
48+
</div>
49+
<div class="col-1-of-2">
50+
Col 1 of 2
51+
</div>
52+
</div>
53+
<div class="row">
54+
<div class="col-1-of-4">
55+
Col 1 of 3
56+
</div>
57+
<div class="col-1-of-4">
58+
Col 1 of 3
59+
</div>
60+
<div class="col-1-of-4">
61+
Col 1 of 3
62+
</div>
63+
<div class="col-1-of-4">
64+
Col 1 of 3
65+
</div>
66+
</div>
67+
<div class="row">
68+
<div class="col-1-of-4">
69+
Col 1 of 4
70+
</div>
71+
<div class="col-1-of-4">
72+
Col 1 of 4
73+
</div>
74+
<div class="col-2-of-4">
75+
Col 2 of 4
76+
</div>
77+
</div>
78+
<div class="row">
79+
<div class="col-1-of-4">
80+
Col 1 of 4
81+
</div>
82+
<div class="col-3-of-4">
83+
Col 3 of 4
84+
</div>
85+
</div>
86+
</section>
2587
</body>
2688
</html>

‎Project-Natours/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "project-natours",
3+
"version": "1.0.0",
4+
"description": "Exciting tours for adventurous people",
5+
"main": "index.html",
6+
"scripts": {
7+
"compile:sass":"node-sass sass/main.scss css/style.css -w"
8+
},
9+
"author": "Sai Mounika Peri",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"node-sass": "^8.0.0"
13+
}
14+
}

‎Project-Natours/sass/abstracts/_functions.scss

Whitespace-only changes.

‎Project-Natours/sass/abstracts/_mixins.scss

Whitespace-only changes.

0 commit comments

Comments
 (0)