Skip to content

Commit b9b4243

Browse files
SixxCodesSixxCodes
committed
Practice
1 parent daad67f commit b9b4243

File tree

6 files changed

+186
-83
lines changed

6 files changed

+186
-83
lines changed

‎Lab Exam Practice/images/images.png renamed to ‎Lab Exam Practice/prac/images/images.png

File renamed without changes.

‎Lab Exam Practice/images/ref.jfif renamed to ‎Lab Exam Practice/prac/images/ref.jfif

File renamed without changes.

‎Lab Exam Practice/images/um logo.png renamed to ‎Lab Exam Practice/prac/images/um logo.png

File renamed without changes.

‎Lab Exam Practice/prac/index.html

Lines changed: 34 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -7,84 +7,46 @@
77
<title>Start</title>
88
</head>
99
<body>
10-
11-
<section class="section-1">
12-
<header>
13-
<nav class="nav-container">
14-
<div class="logo">
15-
<h2>Start</h2>
16-
</div>
17-
<ul class="nav-list">
18-
<li><a class="nav-list" href="index.html">Home</a></li>
19-
<li><a class="nav-list" href="portfolio.html">Portfolio</a></li>
20-
<li><a class="nav-list" href="services.html">Services</a></li>
21-
<li><a class="nav-list" href="contact.html">Contact</a></li>
22-
</ul>
23-
</nav>
24-
</header>
25-
<div class="section-1-container">
26-
<div class="section-1-container-content">
27-
<div class="section-1-container-content-text">
28-
<h1>The Start</h1>
29-
<h3>Connecting Over What Truly Matters.</h3>
30-
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum.</p>
31-
<button class="explore">Explore</button>
32-
</div>
33-
<div class="section-1-container-content-logo">
34-
<img src="images/pic1.png" alt="Three people and 1 light bulb." class="pic1">
35-
</div>
36-
</div>
10+
11+
<header class="header-main">
12+
<div class="header-main-logo">
13+
<img src="images/images.png" alt="Start Logo" class="logo"/>
14+
<h2>Start</h2>
3715
</div>
38-
</section>
3916

40-
<section class="section-2">
41-
<div class="section-2-container">
42-
<div class="section-2-container-content">
43-
<div class="section-2-container-content-logo">
44-
<img src="images/pic1.png" alt="Three people and 1 light bulb." class="pic2">
45-
</div>
46-
<div class="section-2-container-content-text">
47-
<h2>Building Connections, One Message at a Time. Start Now.</h3>
48-
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum.</p>
49-
<button class="join-the-conversation">Join the Conversation</button>
50-
</div>
51-
</div>
52-
</div>
53-
</section>
17+
<button class="hamburger-icon">&#9776;</button>
5418

55-
<section class="section-3">
56-
<div class="section-3-container">
57-
<div class="section-3-container-content">
58-
<div class="section-3-container-content-text">
59-
<h4>TEAM</h4>
60-
<h2>Meet the Team Behind Start</h2>
61-
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
62-
</div>
63-
<div class="section-3-container-content-pictures">
64-
<img src="images/images.png" alt="Three people and 1 light bulb." class="profile-1">
65-
<img src="images/images.png" alt="Three people and 1 light bulb." class="profile-2">
66-
<img src="images/images.png" alt="Three people and 1 light bulb." class="profile-3">
67-
</div>
68-
<div class="section-3-container-content-button">
69-
<button class="view-team">View Team</button>
70-
</div>
19+
<nav class="header-main-nav">
20+
<ul>
21+
<li><a href="index.html">Home</a></li>
22+
<li><a href="#">Services</a></li>
23+
<li><a href="#">About</a></li>
24+
<li><a href="#">Contact</a></li>
25+
</ul>
26+
</nav>
27+
</header>
28+
29+
<secton class="section-1">
30+
<div class="section-1-content">
31+
<div class="section-1-content-text">
32+
<h1>The Start</h1>
33+
<h2>Connecting Over What Truly Matters.</h2>
34+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
35+
<button class="explore-btn">Explore</button>
7136
</div>
72-
</div>
73-
</section>
74-
<footer>
75-
<div class="footer-container">
76-
<div class="footer-content">
77-
<div class="footer-content-socials">
78-
<img src="images/images.png" alt="Three people and 1 light bulb." class="socials-1">
79-
<img src="images/images.png" alt="Three people and 1 light bulb." class="socials-2">
80-
<img src="images/images.png" alt="Three people and 1 light bulb." class="socials-3">
81-
</div>
82-
<div class="footer-content-credits">
83-
<p class="credits">@ Start. 2025. All rights reserved.</p>
84-
</div>
37+
<div class="section-content-img">
38+
<img src="images/um logo.png" alt="Start Pic 1">
8539
</div>
8640
</div>
87-
</footer>
41+
</secton>
42+
43+
<secton class="section-2">
44+
ss
45+
</secton>
46+
47+
<secton class="section-3">
48+
ss
49+
</secton>
8850

8951
</body>
9052
</html>

‎Lab Exam Practice/prac/style.css

Lines changed: 151 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,172 @@
1+
:root {
2+
--main-color: rgb(115, 198, 156);
3+
}
4+
15
* {
26
margin: 0;
37
padding: 0;
48
box-sizing: border-box;
59
}
610

711
body {
8-
font-family: Arial, sans-serif;
12+
font-family: 'Arial', sans-serif;
13+
}
14+
15+
.header-main {
16+
background-color: var(--main-color);
17+
width: 100%;
18+
height: 60px;
19+
display: flex;
20+
justify-content: space-between;
21+
color: white;
22+
position: fixed;
923
}
1024

11-
img {
12-
width: 200px;
25+
.header-main-logo {
26+
height: 100%;
27+
width: fit-content;
28+
display: flex;
29+
margin-left: 110px;
30+
}
31+
32+
.header-main-logo img {
33+
height: 100%;
34+
}
35+
36+
.header-main-logo h2 {
37+
padding: 10px;
38+
line-height: 34px;
39+
}
40+
41+
.hamburger-icon {
42+
display: none;
43+
color: white;
44+
background-color: transparent;
45+
border: 0;
46+
font-size: 30px;
47+
margin-right: 16px;
48+
cursor: pointer;
1349
}
1450

51+
.header-main-nav {
52+
height: 100%;
53+
width: fit-content;
54+
margin-right: 110px;
55+
}
56+
57+
.header-main-nav ul {
58+
list-style: none;
59+
}
60+
61+
.header-main-nav ul li {
62+
display: inline;
63+
float: left;
64+
padding: 10px;
65+
line-height: 34px;
66+
}
67+
68+
.header-main-nav ul li a{
69+
text-decoration: none;
70+
color: white;
71+
}
72+
73+
/* ------------------------------SECTIONS------------------------------ */
74+
1575
.section-1 {
16-
background-color: rgb(115, 198, 156);
76+
background-color: var(--main-color);
1777
color: white;
78+
width: 100%;
79+
min-height: 100vh;
80+
display: flex;
81+
justify-content: center;
82+
align-items: center;
1883
}
1984

20-
.nav-container {
85+
.section-1-content {
86+
width: 1257px;
2187
display: flex;
2288
justify-content: space-between;
89+
90+
margin-top: 60px;
91+
}
92+
93+
.section-1-content-text {
94+
flex: 1;
95+
padding: 2rem;
96+
}
97+
98+
.section-1-content-text h1 {
99+
font-size: 3rem;
100+
margin-bottom: 0.5rem;
101+
}
102+
103+
.section-1-content-text h2 {
104+
font-size: 1.7rem;
105+
margin-bottom: 0.5rem;
106+
}
107+
108+
.section-1-content-text p {
109+
max-width: 600px;
110+
margin-bottom: 0.9rem;
111+
}
112+
113+
.explore-btn {
114+
background-color: white;
115+
border: 0;
116+
border-radius: 5px;
117+
padding: 0.6rem 2.5rem;
118+
font-size: 15px;
119+
}
120+
121+
.section-content-img {
122+
flex: 1;
123+
display: flex;
124+
justify-content: center;
23125
align-items: center;
24-
padding: 20px;
25126
}
26127

27-
.nav-list {
28-
color: white;
29-
list-style: none;
30-
text-decoration: none;
128+
.section-2 {
129+
background-color: white;
130+
width: 100%;
131+
min-height: 100vh;
132+
display: flex;
133+
}
134+
135+
.section-3 {
136+
background-color: white;
137+
width: 100%;
138+
min-height: 100vh;
139+
display: flex;
140+
}
141+
142+
@media screen and (max-width: 1000px) {
143+
144+
.section-1-content {
145+
flex-direction: column;
146+
}
147+
148+
.section-1-content-text {
149+
order: 2;
150+
}
151+
152+
.section-1-content-img {
153+
order: 1;
154+
}
155+
156+
}
157+
158+
@media screen and (max-width: 500px) {
159+
.header-main-logo {
160+
margin-left: 0;
161+
}
162+
163+
.hamburger-icon {
164+
display: inline;
165+
}
166+
167+
.header-main-nav {
168+
display: none;
169+
}
170+
171+
31172
}

‎Lab Exam Practice/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ a {
103103
font-size: 30px;
104104
background: none;
105105
border: none;
106-
color: var(--main-color);
106+
color: black;
107107
cursor: pointer;
108108
z-index: 1003;
109109
}

0 commit comments

Comments
 (0)