Skip to content

Commit 5377bf5

Browse files
alirezatayebinejadalirezatayebinejad
committed
all done
1 parent b5f4152 commit 5377bf5

File tree

2 files changed

+83
-39
lines changed

2 files changed

+83
-39
lines changed

‎design 2/index.html‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="stylesheet" href="styles.css" />
8+
<script src="https://kit.fontawesome.com/0e53af926d.js" crossorigin="anonymous"></script>
9+
810
<title>personal portfolio</title>
911
</head>
1012
<body>
@@ -23,21 +25,24 @@
2325
</header>
2426

2527
<main>
26-
<div class="main-top">
27-
<section class="box">
28-
<h1>I'm Chalin <span>Amelia</span></h1>
29-
<p>
30-
this is my official portfolio website to show all <br />
31-
Details and work experience web development
32-
</p>
33-
<a href="#">DOWNLOAD CV</a>
34-
</section>
35-
<!--
36-
<section class="images">
37-
<img class="shape" src="shape.png" alt="" />
38-
<img class="girl" src="girl.png" alt="" />
39-
</section>
40-
-->
28+
<div class="box">
29+
<h1>I'M Chalin <span>Amelia</span></h1>
30+
<p>
31+
This is my official Portfolio website to showcase my all works
32+
related to <br />
33+
web development and ui design.
34+
</p>
35+
<a href="#">Downdload CV</a>
36+
</div>
37+
<div class="images">
38+
<img src="shape.png" class="shape" />
39+
<img src="girl.png" class="girl" />
40+
</div>
41+
42+
<div class="social">
43+
<a href="#"><i class="fab fa-youtube"></i></a>
44+
<a href="#"><i class="fab fa-instagram"></i></a>
45+
<a href="#"><i class="fab fa-whatsapp"></i></a>
4146
</div>
4247
</main>
4348
</div>

‎design 2/styles.css‎

Lines changed: 63 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,34 +37,73 @@ nav ul li a:hover {
3737

3838
/* main section */
3939

40-
.main-top {
41-
width: 100%;
42-
position: relative;
43-
}
4440
.box {
45-
position: relative;
46-
height: 100%;
47-
left: 8%;
48-
top: 30 vh;
49-
41+
margin-left: 8%;
42+
margin-top: 15%;
5043
}
51-
.box h1{
52-
font-size: 60px;
44+
45+
.box h1 {
46+
font-size: 50px;
47+
color: #212121;
48+
margin-bottom: 20px;
5349
}
54-
.box span{
55-
color: #ffc234;
5650

51+
span {
52+
color: orange;
5753
}
58-
.box p{
59-
color: rgb(99, 99, 99);
60-
margin: 20px 0 40px 0;
54+
55+
.box p {
56+
color: #555;
57+
line-height: 22px;
6158
}
62-
.box a{
63-
color: white;
59+
60+
.box a {
61+
background: #212121;
62+
padding: 10px 18px;
6463
text-decoration: none;
65-
padding: 10px;
66-
border-radius: 7px;
67-
background-color: black;
68-
margin-top: 20px;
69-
70-
}
64+
font-weight: bold;
65+
color: #fff;
66+
display: inline-block;
67+
margin: 30px 0;
68+
border-radius: 5px;
69+
}
70+
71+
.images {
72+
width: 45%;
73+
height: 80%;
74+
position: absolute;
75+
bottom: 0;
76+
right: 100px;
77+
}
78+
79+
.images img {
80+
height: 100%;
81+
position: absolute;
82+
left: 50%;
83+
bottom: 0;
84+
transform: translateX(-50%);
85+
transition: bottom 1s, left 1s;
86+
}
87+
88+
.images:hover .shape {
89+
bottom: 40px;
90+
}
91+
92+
.images:hover .girl {
93+
left: 45%;
94+
}
95+
96+
.social {
97+
margin-left: 8%;
98+
margin-top: 100px;
99+
}
100+
101+
.social a {
102+
font-size: 30px;
103+
color: #212121;
104+
margin-right: 20px;
105+
}
106+
107+
.social a:hover {
108+
color: orange;
109+
}

0 commit comments

Comments
 (0)