Skip to content

Commit 0d5a5f3

Browse files
nurzatpronurzatpro
committed
edit html and css
1 parent a575a36 commit 0d5a5f3

File tree

2 files changed

+226
-95
lines changed

2 files changed

+226
-95
lines changed

‎Wireframe/index.html

Lines changed: 67 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,82 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
6+
<title> Coursework</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
9+
910
<body>
1011
<header>
1112
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
13+
<p>Web development concepts</p>
1514
</header>
16-
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
25-
</article>
15+
16+
17+
<main class="container">
18+
19+
<section class="article-section hero">
20+
<article>
21+
22+
<div class="image-container">
23+
<img src="placeholder.svg" alt="Illustration of README file concept" />
24+
</div>
25+
<h2>What is the purpose of a <span>README</span> file?</h2>
26+
<p>
27+
A README file provides essential information about a project, including setup instructions, usage guidelines, and contributor details.
28+
It serves as a guide for users and developers, helping them understand the project's purpose and how to get started.
29+
A well-structured README enhances user experience and encourages collaboration.
30+
</p>
31+
<a href="#" class="read-more-btn">Read more</a>
32+
</article>
33+
</section>
34+
35+
36+
<section class="article-section">
37+
<article>
38+
<div class="image-container">
39+
<img src="placeholder.svg" alt="Example of a wireframe design" />
40+
</div>
41+
<h2>What is the purpose of a <span>wireframe</span>?</h2>
42+
<p>
43+
Wireframes are simple diagrams that show the layout and structure of a web page, helping developers plan the UI before coding.
44+
They focus on the arrangement of elements, such as buttons, images, and text, without getting into design details.
45+
Wireframes are essential for visualizing the user experience and ensuring that all necessary components are included.
46+
</p>
47+
<a href="#" class="read-more-btn">Read more</a>
48+
</article>
49+
</section>
50+
51+
52+
<section class="article-section">
53+
<article>
54+
<div class="image-container">
55+
<img src="placeholder.svg" alt="Visualization of Git branches" />
56+
</div>
57+
<h2>What is a <span>branch</span> in Git?</h2>
58+
<p>
59+
Branches in Git allow developers to work on different features or fixes without affecting the main codebase, making collaboration easier.
60+
Each branch represents an independent line of development, enabling teams to experiment and implement changes safely.
61+
Once a feature is complete, it can be merged back into the main branch, ensuring that the code remains organized and manageable.
62+
</p>
63+
<a href="#" class="read-more-btn">Read more</a>
64+
</article>
65+
</section>
2666
</main>
67+
68+
2769
<footer>
2870
<p>
29-
This is the default, provided code and no changes have been made yet.
71+
Edited by <a href="#">Nurzat Nurdinova</a>. Thank you!
3072
</p>
3173
</footer>
32-
</body>
74+
<div data-netlify-deploy-id="6820f88c613b0e000849fef6" data-netlify-site-id="7eac0cae-fa8b-41df-af52-cce02d4a2968" data-vcs="github" style="position:fixed">
75+
76+
<script async src="/.netlify/scripts/cdp"></script>
77+
</div></body>
3378
</html>
79+
80+
81+
82+
83+
84+

‎Wireframe/style.css

Lines changed: 159 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,169 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
6-
7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
19-
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
26-
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
298
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
9+
font-family: Arial, sans-serif;
10+
line-height: 1.6;
11+
color: #333;
12+
max-width: 1200px;
13+
margin: 0 auto;
14+
padding: 20px;
15+
}
16+
17+
18+
header {
19+
text-align: center;
20+
padding: 30px 0;
21+
margin-bottom: 30px;
22+
}
23+
24+
header h1 {
25+
font-size: 2.5rem;
26+
margin-bottom: 10px;
27+
}
28+
29+
header p {
30+
font-size: 1.2rem;
31+
color: #666;
32+
}
33+
34+
35+
.container {
36+
display: grid;
37+
grid-template-columns: 1fr 1fr;
38+
gap: 30px;
39+
margin-bottom: 40px;
40+
}
41+
42+
43+
.hero {
44+
grid-column: 1 / span 2;
45+
margin-bottom: 10px;
46+
}
47+
48+
49+
.article-section {
50+
border: 1px solid #ddd;
51+
border-radius: 10px;
52+
background-color: #fff;
53+
overflow: hidden;
54+
transition: transform 0.3s, box-shadow 0.3s;
3355
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
56+
57+
58+
.article-section:hover {
59+
transform: translateY(-5px);
60+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
3861
}
39-
img,
40-
svg {
62+
63+
64+
article {
65+
display: flex;
66+
flex-direction: column; /* Stacks elements vertically */
67+
height: 100%;
68+
}
69+
70+
71+
.image-container {
72+
position: relative;
4173
width: 100%;
42-
object-fit: cover;
74+
height:min(300px, 50%);
75+
overflow: hidden;
76+
background-color: #f8f8f8;
4377
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
48-
main {
49-
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
78+
79+
.image-container img {
80+
width: 100%;
81+
height: 100%;
82+
object-fit: cover;
5183
}
84+
85+
86+
article h2 {
87+
font-size: 1.5rem;
88+
padding: 20px 20px 10px;
89+
}
90+
91+
92+
article h2 span {
93+
color: #0066cc;
94+
font-weight: bold;
95+
}
96+
97+
98+
article p {
99+
padding: 0 20px 20px;
100+
flex-grow: 1;
101+
}
102+
103+
104+
.read-more-btn {
105+
display: inline-block;
106+
margin: 0 20px 20px;
107+
padding: 8px 15px;
108+
border: 1px solid #333;
109+
border-radius: 4px;
110+
text-decoration: none;
111+
color: #333;
112+
font-weight: bold;
113+
text-transform: uppercase;
114+
font-size: 0.9rem;
115+
text-align: center;
116+
transition: background-color 0.3s, color 0.3s;
117+
}
118+
119+
120+
.read-more-btn:hover {
121+
background-color: #333;
122+
color: #fff;
123+
}
124+
125+
52126
footer {
53-
position: fixed;
54-
bottom: 0;
55-
text-align: center;
56-
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
64-
main {
65-
display: grid;
66-
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
127+
text-align: center;
128+
padding: 20px 0;
129+
border-top: 1px solid #ddd;
130+
margin-top: 20px;
131+
font-style: italic;
132+
color: #666;
133+
max-width: 100vw !important;
71134
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
77-
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
135+
136+
137+
footer a {
138+
color: #0066cc;
139+
text-decoration: none;
140+
transition: color 0.3s;
141+
}
142+
143+
footer a:hover {
144+
text-decoration: underline;
145+
color: #004c99;
146+
}
147+
148+
149+
@media (max-width: 768px) {
150+
.container {
151+
grid-template-columns: 1fr;
152+
gap: 20px;
85153
}
86-
> img {
87-
grid-column: span 3;
154+
155+
.hero {
156+
grid-column: 1;
157+
}
158+
159+
header h1 {
160+
font-size: 2rem;
161+
}
162+
163+
header p {
164+
font-size: 1rem;
165+
}
166+
167+
.image-container {
168+
height: 250px;
88169
}
89-
}

0 commit comments

Comments
 (0)