commit 0a9f8a9f358b7fbb0c472ded4bee46387530aa08
parent 6be2630999ea1400891abd2099a91aba8ea2c093
Author: therealFIGBERT <figbertwelner@gmail.com>
Date: Thu, 5 Sep 2019 23:40:26 -0700
Adding additional homepage section
Diffstat:
7 files changed, 56 insertions(+), 13 deletions(-)
diff --git a/images/dark-blue-background.jpg b/images/dark-blue-background.jpg
Binary files differ.
diff --git a/images/haaretz-resize.png b/images/haaretz-resize.png
Binary files differ.
diff --git a/images/haaretz.png b/images/haaretz.png
Binary files differ.
diff --git a/images/masada-background.jpg b/images/masada-background.jpg
Binary files differ.
diff --git a/images/white-background.jpg b/images/white-background.jpg
Binary files differ.
diff --git a/index.html b/index.html
@@ -5,15 +5,16 @@
<title>Web Hadash</title>
<link rel=stylesheet type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Rubik:400,500,700,900&display=swap&subset=hebrew" rel="stylesheet">
+ <meta charset="utf-8">
</head>
<body>
<nav>
<a href="index.html" class="nav__link nav__link--currentpage">עמוד הבית</a>
- <span>•</span>
+ <span>●</span>
<a href="articles/" class="nav__link">מאמרים</a>
- <span>•</span>
+ <span>●</span>
<a href="about/" class="nav__link">אודות</a>
- <span>•</span>
+ <span>●</span>
<a href="contact/" class="nav__link">צור קשר</a>
</nav>
<div class="pagetitle">
@@ -27,15 +28,33 @@
<div class="articlepreview">
<div class="articlepreview__div">
<img src="images/shironet.png" class="articlepreview__img"><br>
- <span class="articlepreview__desc">ישראל</span><br>
+ <span class="articlepreview__desc">אתרים ישראלים</span><br>
</div>
<div class="articlepreview__div">
<img src="images/spotify.png" class="articlepreview__img"><br>
- <span class="articlepreview__desc">ארצות הברית</span><br>
+ <span class="articlepreview__desc">אתרים אמריקיים</span><br>
</div>
<div class="articlepreview__div">
- <img src="images/nasdaq-resize.png" class="articlepreview__img"><br>
- <span class="articlepreview__desc">ארצות הברית</span><br>
+ <img src="images/haaretz-resize.png" class="articlepreview__img"><br>
+ <span class="articlepreview__desc">סגילות</span><br>
+ </div>
+ <div class="articlepreview__div">
+ <img src="images/waze-resize.png" class="articlepreview__img"><br>
+ <span class="articlepreview__desc">למה צריכים אתר</span><br>
+ </div>
+ </div>
+ <div class="designbackground">
+ <div class="designbackground__div">
+ <img src="images/white-background.jpg" class="designbackground__img">
+ <span class="designbackground__text" style="color: darkblue;">הדבר הראשון שמישהו רואה בך הוא האתר שלך</span>
+ </div>
+ <div class="designbackground__div">
+ <img src="images/dark-blue-background.jpg" class="designbackground__img">
+ <span class="designbackground__text" style="color: white;">אתר טוב יכול להפוך מישהו ללקוח</span>
+ </div>
+ <div class="designbackground__div">
+ <img src="images/masada-background.jpg" class="designbackground__img">
+ <span class="designbackground__text" style="color: darkblue;">באו נתקן את ווב הישראלי</span>
</div>
</div>
</body>
diff --git a/main.css b/main.css
@@ -12,6 +12,7 @@ nav {
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: flex-start;
+ align-items: center;
position: fixed;
top: 0;
left: 0;
@@ -21,6 +22,7 @@ nav {
.nav__link {
color: black;
+ font-size: 2.5vh;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
@@ -40,6 +42,7 @@ nav {
.pagetitle__image {
width: 100%;
height: 100vh;
+ object-fit: cover;
}
.pagetitle__text {
@@ -50,12 +53,12 @@ nav {
}
.pagetitle__text--header {
- font-size: 150px;
+ font-size: 135px;
font-weight: 900;
}
.pagetitle__text--subheader {
- font-size: 75px;
+ font-size: 65px;
font-weight: 400;
}
@@ -64,24 +67,45 @@ nav {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
+ margin-top: 75px;
+ margin-bottom: 75px;
}
.articlepreview__div {
text-align: center;
flex-grow: 1;
- margin-top: 50px;
- margin-bottom: 50px;
+ margin: 75px 50px 75px 50px;
}
.articlepreview__img {
- width: 200px;
- height: 200px;
+ width: 230px;
+ height: 230px;
object-fit: cover;
border-radius: 50%;
+ border: 2px solid #021a40;
}
.articlepreview__desc {
color: black;
font-size: 25px;
font-weight: 700;
+}
+
+.designbackground__div {
+ position: relative;
+}
+
+.designbackground__img {
+ width: 100%;
+ height: 100vh;
+ object-fit: cover;
+}
+
+.designbackground__text {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-weight: 700;
+ font-size: 8vw;
}
\ No newline at end of file
