Skip to content

Commit ff2d287

Browse files
authored
Add files via upload
1 parent fd96d4f commit ff2d287

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+6684
-0
lines changed

About.css

+196
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
*{
2+
border: 0px;
3+
padding: 0px;
4+
list-style: none;
5+
text-decoration: none;
6+
box-sizing: border-box;
7+
}
8+
body{
9+
padding: 0%;
10+
margin: 0%;
11+
width: 100%;
12+
}
13+
.nav1{
14+
height: 90px;
15+
background-color: transparent;
16+
border-bottom: 1px solid black;
17+
}
18+
.nav1 img{
19+
width: 150px;
20+
position: absolute;
21+
top: 17px;
22+
left: 12%;
23+
}
24+
.nav1 ul{
25+
float: center;
26+
text-align: center;
27+
}
28+
.nav1 ul li{
29+
display: inline-block;
30+
line-height:80px;
31+
margin: 0 15px;
32+
}
33+
.nav1 ul li a{
34+
position: relative;
35+
color: black;
36+
font-size: 14px;
37+
padding: 5px 0px;
38+
margin: 5px 20px;
39+
text-transform: uppercase;
40+
}
41+
.nav1 ul li a::before{
42+
position: absolute;
43+
content: ' ';
44+
left: 0;
45+
bottom: -8px;
46+
height: 3px;
47+
width: 100%;
48+
border-bottom: 4px solid;
49+
border-bottom-color: #000;
50+
transform: scaleX(0);
51+
transform-origin: right;
52+
transition: transform .4s linear;
53+
}
54+
.nav1 ul li a:hover:before{
55+
transform: scaleX(1);
56+
transform-origin: left;
57+
}
58+
.nav1 ul li .line::after {
59+
content: "";
60+
position: absolute;
61+
bottom: -8px;
62+
left: 0;
63+
height: 4px;
64+
width: 100%;
65+
border-bottom: 4px solid;
66+
border-bottom-color: #000;
67+
transform: scaleX(1);
68+
transform-origin: right;
69+
transition: width .25s ease;
70+
}
71+
.nav1 ul li button{
72+
background-color: transparent;
73+
border: none;
74+
}
75+
.nav1 ul li button p{
76+
position: relative;
77+
top: 10px;
78+
font-size: 40px;
79+
font-family:'Times New Roman', Times, serif;
80+
background-color: transparent;
81+
text-transform: uppercase;
82+
border: none;
83+
padding: 0px 130px;
84+
margin: 0;
85+
}
86+
.div1 {
87+
position: relative;
88+
height: 550px;
89+
}
90+
.div2 h1{
91+
margin: 80px 0 0 0;
92+
position: relative;
93+
font-size: 20px;
94+
}
95+
.div2 h4{
96+
margin: 40px 0px 10px 150px;
97+
position: relative;
98+
}
99+
.div2 .p1{
100+
margin: 20px 100px 0px 150px;
101+
position: relative;
102+
font-size: 18px;
103+
}
104+
.div2 .p2{
105+
margin: 0px 100px 0px 150px;
106+
position: relative;
107+
font-size: 18px;
108+
}
109+
.div2 .p3{
110+
margin: 20px 100px 150px 150px;
111+
position: relative;
112+
font-size: 18px;
113+
}
114+
.div1 button{
115+
background-color: black;
116+
color: white;
117+
border: none;
118+
padding: 10px 20px;
119+
margin: 10px 150px;
120+
}
121+
.nav2{
122+
padding: 50px 0 0 0 ;
123+
height: 300px;
124+
background-color: transparent;
125+
border-top: 1px solid black;
126+
}
127+
.nav2 img{
128+
width: 150px;
129+
position: absolute;
130+
top: 17px;
131+
left: 12%;
132+
}
133+
.nav2 ul{
134+
float: center;
135+
text-align: center;
136+
}
137+
.nav2 ul li{
138+
display: inline-block;
139+
line-height:80px;
140+
margin: 0 15px;
141+
}
142+
.nav2 ul li a{
143+
position: relative;
144+
color: black;
145+
font-size: 14px;
146+
padding: 5px 0px;
147+
margin: 5px 20px;
148+
text-transform: uppercase;
149+
}
150+
.nav2 ul li a::before{
151+
position: absolute;
152+
content: ' ';
153+
left: 0;
154+
bottom: -8px;
155+
height: 3px;
156+
width: 100%;
157+
border-bottom: 4px solid;
158+
border-bottom-color: #000;
159+
transform: scaleX(0);
160+
transform-origin: right;
161+
transition: transform .4s linear;
162+
}
163+
.nav2 ul li a:hover:before{
164+
transform: scaleX(1);
165+
transform-origin: left;
166+
}
167+
.nav2 ul li .line::after {
168+
content: "";
169+
position: absolute;
170+
bottom: -8px;
171+
left: 0;
172+
height: 4px;
173+
width: 100%;
174+
border-bottom: 4px solid;
175+
border-bottom-color: #000;
176+
transform: scaleX(1);
177+
transform-origin: right;
178+
transition: width .25s ease;
179+
}
180+
.nav2 ul li button{
181+
background-color: transparent;
182+
border: none;
183+
position: relative;
184+
left: 60px;
185+
}
186+
.nav2 ul li button p{
187+
position: relative;
188+
top: 10px;
189+
font-size: 40px;
190+
font-family:'Times New Roman', Times, serif;
191+
background-color: transparent;
192+
text-transform: uppercase;
193+
border: none;
194+
padding: 0px 180px 0 250px;
195+
margin: 0;
196+
}

About.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="./About.css">
6+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
7+
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title></title>
10+
</head>
11+
<body>
12+
<nav class="nav1">
13+
<ul>
14+
<li><a href="./Looks.html">Looks</a></li>
15+
<li><a href="./mens.html">Shop</a></li>
16+
<li><button onclick="location.href='Home.html'"><p>Fashion Blog</p></button></li>
17+
<li><a href="./Subscribe.html">Subscribe</a></li>
18+
<li><button><i class="bi bi-instagram"></i></button></li>
19+
<li><button><i class="bi bi-pinterest"></i></button></li>
20+
<li><button onclick="location.href='Contact.html'"><i class="bi bi-envelope-open"></i></button></li>
21+
</ul>
22+
</nav>
23+
24+
<div class="div1">
25+
<div class="div2">
26+
<h4>Company</h4>
27+
<p class="p1">Fashion Blog is one of the largest international fashion companies. It belongs to Inditex, one of the world’s largest distribution groups.</p>
28+
<br>
29+
<p class="p2">Fashion Blog, where you’ll see bits and pieces of my outfits, my fun travels, my favorite products, my beauty tips & tricks, parts of my home, sneak peaks of cool<br> collabs, launches + more! Fashion Blog is my happy place where I love to share parts of my life with you and bring you along for the ride! </p>
30+
<p class="p3">For more information, please <a href="">contact us</a>.</p>
31+
</div>
32+
<button onclick="location.href='Contact.html'">CONTACT</button>
33+
</div>
34+
35+
<nav class="nav2">
36+
<ul>
37+
<li><button onclick=""><i class="bi bi-instagram"></i></button></li>
38+
<li><button><i class="bi bi-pinterest"></i></button></li>
39+
<li><button onclick="location.href='Contact.html'"><i class="bi bi-envelope-open"></i></button></li>
40+
<li><button onclick="location.href='Home.html'"><p>FASHION BLOG</p></button></li>
41+
<li><a href="./About.html" class="line">ABOUT</a></li>
42+
<li><a href="./Contact.html">CONTACT</a></li>
43+
<li><a href="./Policy.html">POLICY</a></li>
44+
45+
</ul>
46+
</nav>
47+
</body>
48+
</html>

About.png

67.1 KB
Loading

0 commit comments

Comments
 (0)