Skip to content

Commit d8c98d3

Browse files
pb-wd027pb-wd027
authored
Merge pull request #5 from pb-wd027/psd_to_html_section1
paul's branch
2 parents d011a8e + 2249843 commit d8c98d3

File tree

4 files changed

+175
-7
lines changed

4 files changed

+175
-7
lines changed

‎bgk-middle.png

893 KB
Loading

‎index.html

+50-5
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,58 @@
77
<link rel="stylesheet" href="styles.css" />
88
<title>Document</title>
99
</head>
10+
1011
<body>
11-
<div class="container">
1212
<header>
13-
<nav>navigation</nav>
14-
<section id="hero-section">hero section</section>
15-
</header>
16-
<main>
13+
<img class="logo" src="./logo.png" alt="logo" >
14+
<nav>
15+
<ul class="nav-links">
16+
<li><a href="#">HOME</a></li>
17+
<li><a href="#">ABOUT</a></li>
18+
<li><a href="#">TEAMS</a></li>
19+
<li><a href="#">WORKS</a></li>
20+
<li><a href="#">PEOPLE SAY</a></li>
21+
<li><a href="#">CONTACT</a></li>
22+
<li><a href="#">EXPERTISE</a></li>
23+
</ul>
24+
</nav>
25+
</header>
26+
<main>
27+
<div class="container">
28+
29+
<section class="section-1">
30+
<div class="content-paul">
31+
32+
33+
34+
<span>
35+
<div class="text-1">We Are Awesome Creative Agency
36+
<br>
37+
<br>
38+
<div class="line-1"></div></div>
39+
<br>
40+
41+
<div class="text-2">This is Photoshop's version of Lorem ipsum.
42+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
43+
Doloribus reprehenderit adipisci nulla dolorem beatae quasi atque consequuntur minima nesciunt velit repudiandae magni repellendus,
44+
modi quam eveniet! Molestiae sunt placeat adipisci.
45+
<br>
46+
<br>
47+
<br>
48+
<br>
49+
<br>
50+
<div class="button" href="#"><button>LEARN MORE</button></div>
51+
</span>
52+
53+
</div>
54+
55+
56+
57+
</section>
58+
<!-- <nav>navigation</nav>
59+
<section id="hero-section">hero section</section> -->
60+
61+
1762
<section id="our_story-section">
1863
<div class="flex-story">
1964
<img class="img-story" src="public/images/png/logo-big.png">

‎logo.png

5.63 KB
Loading

‎styles.css

+125-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,132 @@
66
display: flex;
77
justify-content: center;
88
}
9-
nav {
10-
color: red;
9+
10+
11+
12+
.content-paul {
13+
height: 100%;
14+
width: 100%;
15+
max-width: 960px;
16+
17+
18+
}
19+
20+
21+
.section-1 {
22+
height: 670px;
23+
background: url("./public/images/bgk-header.png");
24+
background-size: cover;
25+
min-height: 100px;
26+
width: 100%;
27+
display: flex;
28+
justify-content: center;
29+
30+
}
31+
32+
/* li a {
33+
font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
34+
font-weight: 500;
35+
font-size: 12px;
36+
color: #edf0f1;
37+
text-decoration: none;
38+
} */
39+
40+
header {
41+
display: flex;
42+
justify-content: space-between;
43+
align-items: center;
44+
45+
46+
}
47+
48+
.nav-links {
49+
list-style: none;
50+
}
51+
52+
.nav-links li {
53+
display: inline-block;
54+
padding: 0px 10px;
55+
}
56+
57+
.nav-links li a {
58+
transition: all 0.3s ease 0s;
59+
font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
60+
font-weight: 500;
61+
font-size: 12px;
62+
color: #edf0f1;
63+
text-decoration: none;
64+
}
65+
66+
.nav-links li a:hover {
67+
color: #0088a9;
1168
}
69+
70+
.nav-links {
71+
list-style: none;
72+
}
73+
74+
.section-1 .text {
75+
display: flex;
76+
flex-direction: column;
77+
justify-content: center;
78+
align-items: center;
79+
80+
gap: 10px;
81+
color: #edf0f1;
82+
}
83+
84+
.section-1 .content-paul .line-1 {
85+
font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
86+
height: 2px;
87+
width: 40px;
88+
background: #0088a9;
89+
90+
}
91+
92+
.section-1 .content-paul .text-1 {
93+
display: flex;
94+
flex-direction: column;
95+
align-items: center;
96+
font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
97+
color: #edf0f1;
98+
size: 40px;
99+
padding-top: 200px;
100+
text-align: none;
101+
text-align: center;
102+
font-size: 2em;
103+
104+
}
105+
106+
.section-1 .content-paul .text-2 {
107+
font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
108+
display: flex;
109+
flex-direction: column;
110+
align-items: center;
111+
color: #edf0f1;
112+
size: 16px;
113+
text-align: justify;
114+
text-justify: inter-word;
115+
text-align: center;
116+
117+
118+
}
119+
120+
.section-1 .content-paul button {
121+
font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
122+
font-weight: 500;
123+
font-size: 16px;
124+
padding: 9px 25px;
125+
background-color: rgba(0, 136, 169, 0);
126+
color:#0088a9;
127+
border: #0088a9;
128+
border-style: solid;
129+
130+
cursor: pointer;
131+
transition: all 0.3s ease 0s;
132+
133+
}
134+
12135
.section-title{
13136

14137
}

0 commit comments

Comments
 (0)