-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (122 loc) · 5.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<title>Everlane</title>
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Fav icon-->
<link rel="Icon" href="favicon (1).ico">
<!--stylesheet-->
<link rel="stylesheet" href="everlane.css">
<!--Font awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!--Google font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<!--Upper Nav-->
<div class="upper">
<p>Physical and digital gift cards-the gift that always fits. Shop Now</p>
</div>
<!--Navbar-->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li ><a href="#">Women</a></li>
<li ><a href="#">Men</a></li>
<li class="active"><a href="#">The Gift Shop</a></li>
<li ><a href="#">Denim</a></li>
<li ><a href="#">About</a></li>
</ul>
</div>
<div>
<img src="everlane-logo.jpg" class="logo">
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="fa fa-search"></span> Search</a></li>
<li><a href="#"> Sign Up</a></li>
<li><a href="#">Log In</a></li>
<!--<li><span class="fa fa-shopping-bag fa-2x"></span></li>=Add the shopping bag-->
</ul>
</div>
</div>
</nav>
<!--Header Image-->
<div class="cont">
<img class="headimage" alt="Everlane" sizes="100vw" src="https://media.everlane.com/image/upload/c_scale,dpr_1.0,f_auto,q_auto,w_auto/c_limit,w_900/v1/i/4eaa3694_1809.jpg" >
<div class="centered">
<h1><a href="">Gift Cards, two ways.</a></h1>
<h3><a href="">Physical or Digital? Either way,It'll fit.</a></h3>
</div>
<div class="bottom-left"><a href="#"><h6>Sign Up for 10% off on your first order*</h6></a></div>
<button class="btn">Shop Now</button>
</div>
<br><br><br>
<div class="sections"><!--ISSUE: Align the arrows with the text below the pictures-->
<div>
<img src="https://images.unsplash.com/photo-1550639525-c97d455acf70?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=426&q=80">
<br>WOMEN'S<br>
<a href=""><h4>New Arrivals</h4><span class="fa fa-angle-double-right"></span></a>
</div>
<div>
<img src="https://images.unsplash.com/photo-1541099649105-f69ad21f3246?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<br>WOMEN'S<br>
<a href="#"><h4>Pants</h4><span class="fa fa-angle-double-right"></span></a>
</div>
<div>
<img src="https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<br>WOMEN'S<br>
<a href="#"><h4>Outwear</h4><span class="fa fa-angle-double-right"></span></a>
</div>
<div>
<img src="https://images.pexels.com/photos/1425249/pexels-photo-1425249.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<br>WOMEN'S<br>
<a href="#"><h4>Denim</h4><span class="fa fa-angle-double-right"></span></a>
</div>
<div>
<img src="https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<br>MEN'S<br>
<span><a href="#"><h4>Uniform</h4></span></a><span class="fa fa-angle-double-right"></span>
</div>
</div>
<br><br><br><br><Br>
<!--Navbar-->
<nav class="navbar1">
<div>
<div class="nav">
<ul>
<li ><a href="#">Women</a></li>
<li ><a href="#">Men</a></li>
<li class="active"><a href="#">The Gift Shop</a></li>
<li ><a href="#">Denim</a></li>
<li ><a href="#">About</a></li>
</ul>
</div>
<div class="nav">
<img src="everlane-logo.jpg" class="logo">
</div>
<div class="nav">
<ul>
<li><a href="#"><span class="fa fa-search"></span> Search</a></li>
<li><a href="#"> Sign Up</a></li>
<li><a href="#">Log In</a></li>
<!--<li><span class="fa fa-shopping-bag fa-2x"></span></li>=Add the shopping bag-->
</ul>
</div>
</div>
</nav>
<!--FFghfgjdhgidwhdgydudvhgdkuwugdjjvchsgdjhdghsgdsjdjgfdyjgduwkyuwkdgefydjkfheuf-->
<div class="try">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
</body>
</html>