Skip to content

Commit d2d57af

Browse files
davidribeiro-devdavidribeiro-dev
committed
Organized HTML & CSS
1 parent a602bb5 commit d2d57af

2 files changed

Lines changed: 83 additions & 58 deletions

File tree

‎css/style.css‎

Lines changed: 63 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,48 @@
1-
*{
1+
* {
22
margin: 0;
33
padding: 0;
4-
font-family: 'Poppins', sans-serif; /* change */
4+
font-family: 'Poppins', sans-serif;
55
}
66

7-
.header{
7+
/* HEADER */
8+
.header {
89
min-height: 100vh;
910
width: 100%;
10-
background-color: hsl(216, 2%, 55%); /* replace soon */
11+
background-color: hsl(216, 2%, 55%);
1112
background-position: center;
1213
background-size: cover;
1314
position: relative;
1415
}
1516

16-
nav{
17+
nav {
1718
display: flex;
1819
padding: 2% 6%;
1920
justify-content: space-between;
2021
align-items: center;
2122
}
22-
nav img{
23+
24+
nav img {
2325
width: 150px;
2426
}
25-
.nav-links{
26-
flex: 1;
27+
28+
.nav-links {
29+
flex: 1;
2730
text-align: right;
2831
}
29-
.nav-links ul li{
32+
33+
.nav-links ul li {
3034
list-style: none;
3135
display: inline-block;
3236
padding: 8px 12px;
33-
position: relative;
3437
}
35-
.nav-links ul li a{
38+
39+
.nav-links ul li a {
3640
color: white;
3741
text-decoration: none;
3842
font-size: 13px;
3943
}
40-
.nav-links ul li::after{
44+
45+
.nav-links ul li::after {
4146
content: '';
4247
width: 0%;
4348
height: 2px;
@@ -46,11 +51,12 @@ nav img{
4651
margin: auto;
4752
transition: 0.5s;
4853
}
49-
.nav-links ul li:hover::after{
54+
55+
.nav-links ul li:hover::after {
5056
width: 100%;
5157
}
5258

53-
.text-box{
59+
.text-box {
5460
width: 90%;
5561
color: white;
5662
position: absolute;
@@ -59,79 +65,90 @@ nav img{
5965
transform: translate(-50%, -50%);
6066
text-align: center;
6167
}
62-
.text-box h1{
68+
69+
.text-box h1 {
6370
font-size: 62px;
6471
}
65-
.text-box p{
72+
73+
.text-box p {
6674
margin: 10px 0 40px;
6775
font-size: 14px;
6876
color: #f2f2f2;
6977
}
70-
.hero-btn{
78+
79+
.hero-btn {
7180
display: inline-block;
7281
text-decoration: none;
7382
color: white;
7483
border: 1px solid white;
7584
padding: 12px 34px;
7685
font-size: 13px;
7786
background: transparent;
78-
position: relative;
7987
cursor: pointer;
8088
}
81-
.hero-btn:hover{
89+
90+
.hero-btn:hover {
8291
border: 1px solid #020b57;
8392
background: #020b57;
8493
transition: 1s;
8594
}
8695

87-
nav .fa{
96+
/* FOOTER */
97+
.footer {
98+
text-align: center;
99+
width: 100%;
100+
padding: 30px 0;
101+
background: #eee0; /* transparent default */
102+
}
103+
104+
.footer h4 {
105+
font-weight: 600;
106+
margin-bottom: 25px;
107+
margin-top: 20px;
108+
}
109+
110+
.icons .fa {
111+
cursor: pointer;
112+
margin: 0 13px;
113+
color: #020b57;
114+
padding: 18px 0;
115+
}
116+
117+
/* MOBILE */
118+
nav .fa {
88119
display: none;
89120
}
90121

91-
@media (max-width: 700px){
92-
.text-box h1{
122+
@media (max-width: 700px) {
123+
.text-box h1 {
93124
font-size: 20px;
94125
}
95-
.nav-links ul li{
126+
127+
.nav-links ul li {
96128
display: block;
97129
}
98-
.nav-links{
130+
131+
.nav-links {
99132
position: absolute;
100133
background: hsl(216, 2%, 55%);
101134
height: 100vh;
102135
width: 200px;
103136
top: 0;
104137
right: -200px;
105-
text-align: left;
106138
z-index: 2;
107139
transition: 1s;
140+
text-align: left;
108141
}
109-
nav .fa{
142+
143+
nav .fa {
110144
display: block;
111145
color: white;
112146
margin: 10px;
113147
font-size: 22px;
114148
cursor: pointer;
115149
}
116-
.nav-links ul{
117-
padding: 30px;
118-
}
119150

120-
/*-----footer-----*/
121-
.footer{
122-
text-align: center;
123-
width: 100%;
124-
padding: 30px 0;
125-
}
126-
.footer h4{
127-
font-weight: 600;
128-
margin-bottom: 25px;
129-
margin-top: 20px;
130-
}
131-
.icons .fa{
132-
cursor: pointer;
133-
margin: 0 13px;
134-
color: #020b57;
135-
padding: 18px 0;
151+
.nav-links ul {
152+
padding: 30px;
136153
}
137-
}
154+
}

‎index.html‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@
1212

1313
<body>
1414

15-
<!---Header--->
15+
<!-- Header -->
1616
<section class="header">
1717
<nav>
1818
<a href="index.html"><img src="images/logo.png" alt="Logo"></a>
19+
1920
<div class="nav-links" id="navLinks">
2021
<i class="fa fa-times" onclick="hideMenu()"></i>
2122
<ul>
@@ -26,37 +27,42 @@
2627
<li><a href="contact.html">CONTACT</a></li>
2728
</ul>
2829
</div>
30+
2931
<i class="fa fa-bars" onclick="showMenu()"></i>
3032
</nav>
3133

3234
<div class="text-box">
3335
<h1>Hi, I'm David Ribeiro</h1>
3436
<p>This is my personal student portfolio website,<br> built from scratch to showcase my projects and skills.</p>
35-
<a href="about.html" class="hero-btn">Know More</a>
37+
<a href="about.html" class="hero-btn">Learn More</a>
38+
</div>
3639
</section>
3740

38-
<!---About/Featured Project Section--->
41+
<!-- About Section -->
3942
<section class="about">
4043
<h1>About Me</h1>
41-
<p>I am a dedicated student with a passion for technology and web development. This portfolio highlights my journey, skills, and the projects I've worked on.</p>
44+
<p>I am a dedicated student with a passion for technology and web development.
45+
This portfolio highlights my journey, skills, and the projects I've worked on.</p>
4246
<a href="about.html" class="hero-btn">Read More</a>
47+
</section>
4348

49+
<!-- Featured Project Section -->
50+
<section class="featured">
4451
<h1>Featured Project</h1>
45-
<p>Check out my latest project where I developed a responsive web application using HTML, CSS, and JavaScript.</p>
52+
<p>Check out my latest project where I developed a responsive web application using
53+
HTML, CSS, and JavaScript.</p>
4654
<a href="projects.html" class="hero-btn">View Projects</a>
4755
<a href="certifications.html" class="hero-btn">View Certifications</a>
48-
4956
</section>
5057

51-
<!---Contact Section--->
52-
<section>
58+
<!-- Contact Section (blank for now) -->
59+
<section class="contact"></section>
5360

54-
</section>
55-
56-
<!---Footer--->
61+
<!-- Footer -->
5762
<section class="footer">
5863
<h4>About Me</h4>
5964
<p>test <br> text</p>
65+
6066
<div class="icons">
6167
<a href="#"><i class="fa fa-facebook"></i></a>
6268
<a href="#"><i class="fa fa-twitter"></i></a>
@@ -65,12 +71,14 @@ <h4>About Me</h4>
6571
</div>
6672
</section>
6773

68-
<!----Javascript---->
74+
<!-- Javascript -->
6975
<script>
7076
var navLinks = document.getElementById("navLinks");
77+
7178
function showMenu() {
7279
navLinks.style.right = "0";
7380
}
81+
7482
function hideMenu() {
7583
navLinks.style.right = "-200px";
7684
}

0 commit comments

Comments
 (0)