HTML-Challenge/abdulazizHTML3.html at master · abdulaziz79/HTML-Challenge · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abdulaziz HTML 3</title>
<link rel="stylesheet" href="styles3.css">
</head>
<body>
<header>
    <img src="/3600.webp" alt="example image">
    <h1 class="title">web development</h1>
      <h2 class="slogan">connecting creativity,
        building the web globaly
      </h2>
        <nav    >
          <ul class="ul--nav">
              <li class="menu--item">Home </li>
              <span class="separator"></span>

              <li class="menu--item">Contact</li>
              <span class="separator"></span>

              <li class="menu--item">New Page 1</li>
              <span class="separator"></span>

              <li class="menu--item">New Page 2</li>
              <span class="separator"></span>

              <li class="menu--item">New Page 3</li>
              <span class="separator"></span>

              <li class="menu--item">New Page 4</li>
          </ul>
      </nav>

  </header>
  <main>
      <div class="article--container">
          <h2 class="article--title title1--menu">Main Menu</h2>

          <ul class=" article main--menu">

             <li><a href="#"> Menu item 1</a></li>
             <li><a href="#"> Menu item 2</a></li>
             <li><a href="#"> Menu item 3</a></li>
             <li><a href="#"> Menu item 4</a></li>
             <li><a href="#"> Menu item 5</a></li>
             <li><a href="#"> Menu item 6</a></li>
             <li><a href="#"> Menu item 7</a></li>
             <li><a href="#"> Menu item 8</a></li>
             <li><a href="#"> Menu item 9</a></li>
          </ul>
             <article class="article block ">
              <h2 class="article--title">Block</h2>
              <p class="p1--block">Enter Block content here</p>
              <p  class="p1--block">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem facilis possimus totam solutaolorum eius unde incidunt sunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolor optio debitis asperiores accusantium.
                  Suscipit error aperiam, a consequuntur repuent molestiae nulla doloremque autem.</p>
          </article>
      </div>
      <section class="sec2">


          <article class="  gallery">
              <h2 class="sec2--title1">Gallery</h2>
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem facilis possimus totam soluta iste quod quae ipsum ex nesciunt voluptatum ab ipsam consequatur aliquam obcaecati sint perspiciatis, deserunt molestias eveniet? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor eos, aliquam hic numquam labore earum perspiciatis autem. Corporis incidunt magnam dolores quos, modi facere ad eveniet consequuntur quod, laborum delectus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, mollitia adipisci aspernatur ut officiis nihil necessitatibus fuga voluptate quidem laboriosam ex sed culpa molestias repudiandae? Dolorum eius unde incidunt sunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolor optio debitis asperiores accusantium.
                  Suscipit error aperiam, a consequuntur repudiandae voluptatum iure eum sequi dolor ratione reprehenderit maxime pariatur tenetur dolorem quos sit vitae?
                   Impedit maiores accusamus Lorem, Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi animi quas pariatur explicabo possimus deleniti impedit? Facilis cupiditate enim corporis iure aliquid veritatis! Accusamus exercitationem rerum consequuntur reprehenderit quidem voluptatum? architecto adipisci alias, iusto officia asperiores, nam perspiciatis hic repudiandae. ti repudiandae error nam quasi aliquam nostrum! Iste illo itaque, ipsam voluptatem reprehenderit nesciunt nobis maiores facere?</p>

          </article>
          <div class="subs-flex">
              <article class="subsc">
                  <h2 class="sec2--title1 sec2--titles">Subscribtion</h2>
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem facilis possimus totam soluta iste quod quae ipsum ex nesciunt voluptatum ab ipsam consequatur aliquam obcaecati sint perspiciatis, deserunt molestias eveniet? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor eos, aliquam hic numquam labore earum perspiciatis autem. Corporis incidunt magnam dolores quos, modi facere ad eveniet consequuntur quod, laborum delectus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, mollitia adipisci aspernatur ut officiis nihil necessitatibus fuga voluptate quidem laboriosam ex sed culpa molestias repudiandae? Dolorum eius unde incidunt sunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolor optio debitis asperiores accusantium.
                      Suscipit error aperiam, a consequuntur repudiandae voluptatum iure eum sequi dolor ratione reprehenderit maxime pariatur tenetur dolorem quos sit vitae?
                       Impedit maiores accusamus architecto adipisci alias, iusto officia asperiores, nam perspiciatis hic repudiandae.
                       Et aliquid quos tempora ducimus, ipsa voluptatum, quae provident molestiae nulla doloremque autem.</p>
                       <button>Read More</button>
              </article>
              <article class="subsc">
                  <h2 class="sec2--title1 sec2--titles">Other Sevices</h2>
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem facilis possimus totam soluta iste quod quae ipsum ex nesciunt voluptatum ab ipsam consequatur aliquam obcaecati sint perspiciatis, deserunt molestias eveniet? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor eos, aliquam hic numquam labore earum perspiciatis autem. Corporis incidunt magnam dolores quos, modi facere ad eveniet consequuntur quod, laborum delectus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, mollitia adipisci aspernatur ut officiis nihil necessitatibus fuga voluptate quidem laboriosam ex sed culpa molestias repudiandae? Dolorum eius unde incidunt sunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolor optio debitis asperiores accusantium.
                      Suscipit error aperiam, a consequuntur repudiandae voluptatum iure eum sequi dolor ratione reprehenderit maxime pariatur tenetur dolorem quos sit vitae?
                       Impedit maiores accusamus architecto adipisci alias, iusto officia asperiores, nam perspiciatis hic repudiandae.
                       Et aliquid quos tempora ducimus, ipsa voluptatum, quae provident molestiae nulla doloremque autem.</p>
                       <button>Read More</button>
              </article>
          </div>

      </section>
  </main>
  <footer>
      <p>All Right Reserved To Codi &copy; , 2023</p>
  </footer>
</body>
</html>